D0312301 観覧車のようなボタン
Name TTT
Date 2003年12月30日 (火) 15時27分
Message はじめまして。フラッシュ初心者です。

質問させてください。

ステージにムービークリップシンボルの円を描きます。アクションに
onClipEvent (enterFrame) {
_rotation+=10;
}

と書いて円をぐるぐる回します。
このまわっている円と連動して、ボタンも同じようにまわします。
ちょっと説明しずらいのですが、ようは遊園地の観覧車のようなものがつくりたいんです。観覧車でいうところの円が回っていて、お客さんが乗るところをボタンにして、そのボタンをロールオーバーすると観覧車がとまって、ボタンをクリックするとURLにジャンプするというやつが作りたいです。

ボタンアクションにはどう記述すればいいのでしょうか？
初心者なもんでくだらない質問かもしれませんが
どうか教えてください
Response 01
2004年01月06日 (火) 02時21分＞ 憲ちゃん　
TTTさん、はじめまして、こんばんわ♪

円を回転させてもいいのですが・・・円では動きのイメージをつかみにくいので、
例えば、一本の棒（アーム）をムービークリップにし、

中心点をアームの左端として、右に回転させると考えてみます。

そして、これにクリップアクションで。。

　onClipEvent (enterFrame) {
　　　_rotation += 10;
　}

と記載すると、左端を中心にアームが時計周りに、
１フレーム当り１０度づつ回転するのがよくわかるはずです。

このアームの右端に、観覧車をくっつけて、図のようにぶら下げます。



「観覧車MC（中心点は上端）」を、アームの右端に配置。
アクションレイヤーの１フレームに・・・　
　this._rotation += 10；※thisは省略可。
２フレームに、
　gotoAndPlay(1)；
と、とりあえず入れておきます。
※上記のクリップアクションをフレームアクションで記載するとこのようになり、
　同じ意味です。

ここで、アームが１０度回転したとき、観覧車が水平を保つためには・・・

図のB'点からC点に角度を戻してやればいいですね！
つまり、アームが回転した角度と同じだけ逆方向に−１０度回転させます。
時間経過によって６０度なら−６０度となりますので、
「観覧車MC」のクリップアクションは・・・

　onClipEvent(enteFrame){
　　　this._rotation = -(_parent._rotation) -10；
　｝

と逆回転させます。
※「観覧車MC」はアーム回転を含む「回転観覧車MC」の中にあるので、
「観覧車MC」からみたひとつ上の階層（_parent）の回転角度(_rotation）とは、
「回転観覧車MC」の回転角度を指します。
※うしろの「-10」は時間差による補正

観覧車をボタンにして、マウスが乗ると観覧車の動きを止めるには・・・
まず「観覧車MC」の中の図形をボタンにしますが、
アームを回転させる原動力が「10」という値を加算し続けることですから、
停止させるには、これが「0」になる仕組みを考えます。
※「０」を加えてもそれ以上、回転角度は増えも減りもしないから停止する！

例えば、move という変数を元のタイムライン（シーン）に用意して、
元のタイムラインの１フレームに、move = 1；と初期値を定義します。
そして、回転観覧車MC（アーム）のアクションで・・・

　this._rotation += 10 * _root.move；

と、元のタイムラインにある（_root.）moveを掛けておくと・・・
「move = 1;」のときは、右辺の加算する値は「10」のまま変化なく、
「move = 0；」のとき、加算する値は「０」になります。
そこで「観覧車MC」内のボタンのボタンアクションで・・・

　on(rollOver){
　　_root.move = 0;
　}
　on(rollOut){
　　_root.move = 1;
　}

としてやれば、観覧車にマウスが乗ったとき停止し、外れると再び動き出すことができます。

観覧車をクリックすると、目的のURLにジャンプさせるには・・・
上記ボタンアクションに続けて・・・

　on(release){
　　　getURL("abcd.htm","_top")；
　}

と、具体的にURLを指定すればよいように思われると思うのですが(^^;
実は、このあと、この「回転観覧車MC」は、それぞれコピー＆ペーストで、
必要な数だけ、ステージにインスタンスとして配置することになります。
元が同じ「シンボル」ですから、中身はすべて同じURLになって、
どのボタンをクリックしても同じページに飛ぶことになるのです(笑)
※「シンボルを編集」すると、ステージのインスタンスはすべて編集後のものに置き換わる。

そこで、一工夫して、ここではジャンプ先URLを変数にしておきます。
変数名を”theURL”ということにして・・・

　on(release){
　　　getURL( _parent.theURL ,"_top")；
　}

自分（観覧車MC）のひとつ上の階層のMC（＝回転観覧車MC）に定義された変数theURLの中の
URLにジャンプという意味です。

そして・・・
「ライブラリ」から「回転観覧車MC」をステージにドラッグ配置したら、
それを右クリックして「コピー」をクリック。
ステージの何もないところでさらに右クリックして「同じ位置にペースト」をクリック。
全く同じ位置に「回転観覧車MC」のインスタンスが重なって配置されますから、
メニューバー「修正」→「変形」→「伸縮と回転」をクリックして、
「伸縮と回転」パネルの「回転」に角度を入れて「OK」をクリック。
これを必要な数繰り返してください。
サンプルのように観覧車を６つ並べる場合は、この「回転」角度を６０度づつ増やします。
８つ並べる場合は４５度づつという具合です。

ステージにすべての「回転観覧車MC」インスタンスを配置したら・・・
それぞれのインスタンスのクリップアクションで、

　onClipEvent(load){
　　　theURL = "****.htm"；
　}

と、それぞれ個別に、該当するURLを変数theURL に代入しておきます。

以上ですが。。。

サンプルでは。。。
回転速度を可変できるようにするため、速度「10」の代わりに、
元のタイムライン（シーン）上に変数speed を定義、初期値を「３」にしています。
シーンの１フレームで、speed = 3；と定義したうえで、
「回転観覧車MC」の１フレームのフレームアクション（アームの回転）を、

　this._rotation += _root.speed * _root.move;

「観覧車MC」のクリップアクション（観覧車の姿勢補正）を

　onClipEvent (enterFrame) {
　　　this._rotation = -(_parent._rotation) - _root.speed;
　}

「速度制御MC」のスライドバーで、_root.speed の値が−１０〜＋１０の間で変化するように
しています(*^.^*)
詳しくは、flaファイルを分析してみてください！


kanransya0.fla
Response 02
2004年01月07日 (水) 17時34分＞ TTT　
あ、あまりにもすごい作品を作っていただいて、びっくりです・・
やっぱり、プロフェッショナルな方ってすごい！
初心者の僕がけんちゃんさんのレベルに到達するまで何年かかるのかな。。こんなに素晴らしい作品はいまの僕ではどう頭を使って考えても無理です（笑）とても素晴らしい作品を見せてもらってなんだかとくした気分です！ありがとうございます！

せっかくこんな素晴らしい作品を作ってもらって恐縮なのですが、
僕はいまフラッシュの初心者で、いちから勉強しています。けんちゃんさんが作っていただいた作品はあまりにもすごすぎて、レベルが高すぎます＾＾

えっと、僕がご質問させていただいたのはけんちゃんさんのような高度な観覧車ではなくて、こういうやつなんですけど表示されるかな。


いまswfファイルを貼ったのですが、上のように大きい円がまわっていて、（これは円に_rotationのアクションでまわしているだけなんですが・・）

周りにボタンをいくつかつけて、ボタンも中心の円と同じ周期でまわってるとおもうんですが、このボタンをロールオーバーしたら全体が止まってロールアウトしたらふたたび動き出す、そしてクリックしたらURLにジャンプというのはどういうふうにアクションを設定したらよろしいのでしょうか？
Response 03
2004年01月08日 (木) 00時10分＞ 憲ちゃん　
「観覧車」「お客さんが乗る」から連想して、観覧車が傾いてはいけないのだと思いました（笑）

そういうことでしたら・・・
図のように大きい円と同じムービークリップの中に、ボタンが入ってるとして・・



ボタンも一体となって回転しているとします。

「回転速度」として、いきなり「１０」や「３」といった生の数値を使わないで、
上記でご説明したような変数を充て、その変数名を”speed”としたとします。

このムービークリップのクリップアクションで・・・

　onClipEvent (load) {　←MCが読み込まれたとき（最初のときだけ）
　　　speed = 3;　←変数speed に「３」を代入
　}
　onClipEvent (enterFrame) {　←フレームレート(1/12秒）ごとに以下のことを繰り返す
　　　_rotation += speed；　←現在の自分の回転角度を変数speed の値分、回転させる
　}

最初に変数speed に「３」を代入しているので、以下のスクリプトは、

　onClipEvent (enterFrame) {
　　　_rotation += 3；
　}

としているのと同じことですから、何もしないならいつまでも「３」の速度で回り続けます。
回転を止めるということは、この「３」を「０」に置き換えることです。
つまり、ボタンにマウスが載ったら変数speed の値を「０」に変えて停止させ、
マウスから外れたとき「３」に戻して再び回転させる、
という作業をボタンにさせてやればよいということですネ(^^g/~~

そこで、ひとつひとつのボタンのボタンアクションに・・・

　on (rollOver) {　←ボタンにマウスカーソルが乗ったとき
　　　speed = 0；　　　←変数speed に「０」を代入
　}
　on (rollOut) {　←（乗っていた）マウスカーソルがボタンから外れたとき
　　　speed = 3；　　　←変数speed に「３」を代入
　}
　on (release) {　←ボタンがクリックされたら
　　　getURL("リンク先URL", "_top");　←指定したリンク先へ
　}

リンク先URL以外は、すべてのボタンで同じ記述で、
しかもすべてが一体となったひとつのムービークリップですから、
６つのどれかひとつのボタンに乗ったとき（ロールオーバー）、全体の回転が停止し、
乗っていたカーソルが外れたとき（ロールアウト）、再び回転をはじめることになります♪

ご参考までに、この説明のflaファイルを置いておきますので、
kanransya1.fla
よければ↑ファイル名を右クリック、「対象をファイルに保存」でダウンロードしてください(^^)

最初のサンプルも、これにちょっと手を加えるだけのものですから・・・
そんな何年もかかりません、３日もあれば理解も含めてできると思います(*^.^*)
Response 04
2004年01月08日 (木) 18時06分＞ TTT　
僕の最初の説明が悪かったばかりに、けんちゃんさんには2度も
観覧車の説明をさせてしまいたいへん申し訳ありませんでした。
ごめんなさい。
Response 05
2004年01月09日 (金) 18時07分＞ TTT　
けんちゃんさんから教えてもらったので簡単な観覧車のほうはすぐに理解できました。それで、最初に教えていただいた高度な観覧車のほうを勉強しているのですが、どうもうまく行きません。

観覧車MCに
onClipEvent(enteFrame){
　　　this._rotation = -(_parent._rotation) -10；
　｝

と記述したのですが、観覧車が思うようにまわってくれません。

swfファイルをここに貼ります。


けんちゃんさんに作っていただいた
赤い色の観覧車はちゃんと円にそってきれいに回っているのですが、
僕が作った、ピンクの観覧車と青い観覧車はきれいに円を描いてくれません。（一応、黒い円は目安のために書きました。）

なぜ同じスクリプトを記述しているのにこんなにずれてしまうのでしょうか？
Response 06
2004年01月09日 (金) 18時30分＞ TTT　
FLAファイルの中身はこれです。
test.fla
Response 07
2004年01月10日 (土) 09時34分＞ 憲ちゃん　
ムービークリップは、自身の中心点を支点に回転します(^^g/~~



全体の中心点と各観覧車MCの中心点の距離は、全体が回転しても一定です。
青とピンクの観覧車MCの中心点は、観覧車本体の中心にあるため、
それが移動するのは、本来の円周のそれぞれ外と内の円周上（薄い青線）であり、
かつ観覧車本体を中心に全体と逆周りの回転をするので、軌道から外れてしまうのです(^^;

観覧車MCの中心点を、それをぶら下げるアームの先端に移動すれば解決します。
シンボルの編集で、全体に下にさげて、
吊り下げアームの先端が中心になるよう再編集してください。
そのうえで、改めて、吊り下げアームの先端を本来の円周上に配置します。

別の話ですが、回転スクリプトの・・・

　this._rotation += -( _parent._rotation ) - 補正値；

補正値は、全体の回転のフレーム当りの刻み値と同じにすると真下を向きます。
全体が・・・

　this._rotation += 1；なら、

観覧車は・・・

　this._rotation += -( _parent._rotation ) - 1；

とします！
Response 08
2004年01月10日 (土) 21時11分＞ TTT　
けんちゃんから教えてもらってもよくわからなくて自分はフラッシュにむいてないなあと思ってた矢先にやっとわかりました！
新規シンボルでMCのステージにして、その中の＋のところが中心でそこにあわせて観覧車を作るんですね！！
中心点の編集をいくら観覧車の先端にあわせてもうまくいかなかったんですが、ようやくわかってうれしいです！
これでやっと熟睡できます！
ありがとうございました！
このページの先頭へへ