| B09_013 | ボタンに擦り寄るスライダー！ |  |
|
| Name | 憲ちゃん | ||||
| Date | 2002年07月06日 (土) 18時25分 | ||||
| Message | http://www.fujitv.co.jp/sorakara/index2.html ココのボタンのようなものを作るには？というご質問がありました！ button07.fla ボタンの上にマウスが乗ると「on(rollOver)」、黒いスライダーがボタンに擦り寄ってきて止まる。 考え方は・・・ マウスの乗ったボタンのX座標値を例えば「btnX」という変数に取得して、 スライダーを現在のX座標値から「btnX」のX座標値まで徐々に近づけながら移動すればいいですね！ １．まずそれぞれの”X座標値を取得する（与える）ということ”から、 スライダーや各ボタンは、ムービークリップの「インスタンス」である必要があると考えてください。 ※ステージにあるボタンや図形（これを「オブジェクト」といいます）には、 自分が配置されている位置（XY座標）や色、大きさといった固有の属性とその値を持っています。 （これを「プロパティ」といいます） オブジェクトのプロパティの各値はそのままでは利用できないので、 これを「ムービークリップ」にして、ステージに配置された「インスタンスのプロパティ」として 利用することになります(^^; ①取り合えずまずステージに背景など必要な部品を作成して、ボタン専用のレイヤーを追加。 そこにボタンを横一列に並べて配置します。 ここで一旦、すべてのボタンを選択して「シンボルに変換」。タイプを「ムービークリップ」、 名前を「ボタンセット」として「OK」をクリック。 ※このムービークリップは、本体のタイムラインと別にしたほうが利用しやすいためのものであって、 本題のムービークリップとは本質的に意味が異なります。（無くてもよい） ②このムービークリップをさらにダブルクリックして、レイヤー１にボタンが入った状態の 「ボタンセット・ムービークリップ編集画面」にします。  ③レイヤーを下に追加して、そこにスライダー図形を描きます。 それぞれのレイヤー名を「ボタン」「スライダー」としておきます。 ④各ボタン及びスライダーを個々に選択して「シンボルに変換」。 タイプを「ムービークリップ」、それぞれ適当に名前を付けて「OK」。 これで「ライブラリ」の中にあるのがシンボルとしての「ムービークリップ」。 実際にボタンセット編集画面にあるのがムービークリップの「インスタンス」です。 ※各ボタンはムービークリップの中に入った形になり、ボタンとムービークリップの両方の性質を 利用することができます。 ここで、例えば「profile」ボタンにマウスが乗ったときに、自分のX座標値を取得する場合は、 on (rollOver) { ←ボタンが乗ったとき btnX = _x; ←変数btnX に自分のX座標値を代入。「_x」これが自分のX座標値(^^g/~~ } ボタンだけでは、プロパティ（この場合はX座標）を取り出すことは出来ませんが、 これが「profileMC」ムービークリップのインスタンスの中にあるために、 「profileMC」の座標値（インスタンスの中心点）を取得することができるのです。 この場合の座標値というのは、本体シーンに配置されている場合はムービーの左上を座標の起点とし、 このようにムービークリップの中に配置されてる場合は、ボタンセットムービークリップの中心点が 起点（X=0,Y=0）となります。 ⑤最初、スライダーは一番左端の「menuMC」のところに置くこととします。 「menuMC」をクリックして「情報パネル（中心点に設定）」で座標を確認すると、 サンプルの場合は「X=-211.7」でしたので、「スライダー」をクリック選択して、 「情報パネル」で「x=-211.7」と入力すれば、ピッタリ中心と中心が重なりますね(^^g/~~ ２．次に”徐々に近づける”ということは、スライダーの値を少しずつ変化させながら 「btnX」の値に近づけるということですから、アクションスクリプトを使って、 どこかのフレーム間でループさせる必要があると考えてください。 徐々に近づける近づけ方は、ループ過程の計算式の書き方で様々に変わります。 サンプルでは、現在のスライダーの位置とボタンの位置の”距離”を求めて、 １回目のループのときは・・・ スライダーの最終位置（ボタンの位置）から「”距離”の８割」を差し引いた位置。 ２回目のループのときは・・・ 同じく最終位置から「”距離の８割”の８割」を差し引いた位置。 ３回目のループのときは・・・ 同じく最終位置から「”距離の８割の８割”の８割」を差し引いた位置・・・・ 「・・・」の中がループを繰り返すたびに限りなく「０」に近づいて、 結果的に最終位置に近づいていくようにしています。 現在のスライダーのX座標値は、どのようにして取得するか？ですが・・・ 上のボタンアクションの説明では、「_x」で取得できるとしました。 これは、自分（インスタンス）の中で、自分の位置を取得する場合のことで、 今度は「ボタンセット」ムービークリップの中で、 そこに配置されている「スライダー」インスタンスの座標を調べることにしますので、 単に「_x」とすれば「ボタンセット」インスタンスの本体シーン上での座標値になってしまいます。 そのようなときは「スライダー」に固有の「インスタンス名（例えば、slider）」を付けて、 そのインスタンス名のあとに「.(ドット)」を挟んで「_x」を書きます。 ⑥「スライダー」を選択して「インスタンスパネル」で名前を「slider」と入力してください。 slider._x これが「ボタンセット」ムービークリップの中でのスライダーのX座標値です。 ⑦レイヤーを一番上に追加して、名前を「アクション」とし、全体に４フレームまで増やします。 ⑧アクセスされた当初はボタンアクションがありませんから、まず１フレームに stop(); を入れます。 ２フレーム以降から、ボタンと連動したスライダー移動のための計算式を書き込みます。 １フレームでストップした状態から２フレームに移動させるためにはボタンアクションを使います。 これについては後ほどご説明します。 ⑨２フレームに・・・ span = btnX - slide._x; ボタンアクションで”btnXに代入されたボタン自身の位置「_X」”から現在のスライドのX座標値を 差し引いた値を変数spanに代入。 つまり「span」は「現在のスライダーの位置とボタンの位置の”距離”」のことになります。 ⑩３フレームに・・・ span = span*0.8; ←span距離×０．８の値をspanに代入 slider._x = btnX - span; ←ボタンの位置（最終位置）－上で計算された結果のspanの値を スライダーのX座標に代入。 スライダーのX座標に値が代入されると、その座標位置に自動的に移動します。 ⑪４フレームに・・・ gotoAndPlay(3); ３フレームに戻って計算しなおしますが、今度は小さくなったspanの値にさらに×０．８します。 こうして、span は「０」に近づき、slider._x は btnX に迫ることになります(*^-^*) ３．最後に各ボタンのアクションの設定です。 ボタンにマウスが乗ったとき、ボタンのX座標値を「btnX」に代入（取得）するのは 上の説明のとおりですが・・・ この変数は、困ったことにそれが書かれたムービークリップの中だけで有効という代物です(;^_^A 変数「btnX」が実際に使われているのは、上述の通り、ボタンを含んだムービークリップの外、 「ボタンセット」ムービークリップの「アクション」レイヤーです。 ムービークリップを階層でみれば、ひとつ上の階層で使われているということになります。 自分自身からみてひとつ上の階層を指すパスとして「_parent」というのがありますので、 _parent.btnX = _X; とすると、「ひとつ上の階層にある変数btnX に、自分のX座標値を代入」ということになります。 マウスが乗ったとき、もうひとつしなければならないことは・・・ １フレームで止まっている「ボタンセット」ムービークリップのタイムラインを ２フレームに進めることですね！ この場合も、単純に gotoAndPlay(2); としたのでは、ボタンを包含するムービークリップの タイムラインのことになってしまいますので、同様に・・・ _parent.gotoAndPlay(2); とすれば、「ひとつ上の階層のタイムラインの２フレームへジャンプ」となります。 ⑫個々にボタンの入ったムービークリップをダブルクリックして、中のボタンをクリック選択、 以下のボタンアクションを設定してください。 on (rollOver) { _parent.btnX = _x; _parent.gotoAndPlay(2); } どのボタンも「_x」は自分自身のX座標値ですから、同じスクリプトの記載でも、 値はそれぞれのボタンの位置の値が入ります。 実際にサイトで使用するときは、このスクリプトに続けて・・・ on (release) { getURL ("XXXXXXX"); } などとなります。 ※２・３フレームの計算式をご自分なりに、変更してみるといろいろな動き方をさせることが できます(*^-^*) |
||||
| Response
01 |
|
||||
| このページの先頭へへ | |