FlashMXでのボタンアクション

質問

現在Flash ＭＸを使い始めたFlash初心者です。
下記のサイトのように、各ボタンにカーソルが乗ると
左側画像枠に各説明画像が表示される
といったFlashを考えているのですが、
分かりません。。。
どなたか作成手順をお教え頂けませんでしょうか？
OS：Windows XP
宜しくお願い致します。

（参考URL）
http://www.ab-road.net/wmap/tour/africa/area.shtml

回答No.2

turbo27 · ベストアンサー

参考サイトを簡単にしたような形で、地図上にA・B・Cと三つの国があり、そのボタンにカーソルを重ねるとロールオーバーし、地図もロールオーバーし、説明文が変わるものを作るとします。
レイヤー名やシンボル名などは説明しやすいように勝手に名付けてますが、もちろんご自分で作る時は任意でかまいません。

１．初期状態の画像を作る。
・まずFlashのレイヤー１に「地図」と名前をつけ、フレーム１に地図を描きます。ここではとりあえず簡単にステージの右側に楕円ツールで大きく楕円を描き、これを参考サイトのアフリカの代わりとします。（とりあえずここでは簡単にしておきます。後でちゃんと作る時には作り込んでください。）
その中にA国・B国・C国を書きます。これも簡単に楕円ツールで小さい丸を楕円の中に書き、これをA国とします。同様に矩形ツールで四角を描きB国、多角形ツールで三角を描きC国とします。

・次に説明文の場所をつくります。地図レイヤーの上に新規レイヤーを追加し、名前を「説明」とつけます。説明レイヤーのフレーム1を選択し、ステージの左側（先ほどの地図の左）に矩形ツールで適当な大きさの四角を描きます。これをデフォルトで表示されてる説明文の場所とします。わかりやすいように四角の中にテキストで「デフォルト」と書いておきます。

２．ボタンの作成。
説明レイヤーの上に新規レイヤーをつくりこれを「ボタン」と名前をつけます。ボタンレイヤーのフレーム１を選択し、A国の上にかかるように矩形ツールで四角を描きます。テキストツールで四角の中にA国と書き、これをボタンにします。四角とテキストを同時に選択し（地図が選択されて邪魔な時には地図レイヤーにロックをかけておきます）、Altキーを押しながらドラッグしコピーします。テキストをB国とかえて、これをB国のボタンとします。同様にコピー、C国のボタンを作ります。

A国の四角とテキストを同時に選択し、「F8」キーを押しシンボルに登録します（修正→シンボルに返還、右クリック→シンボルに返還、と同じ）。名前を「A」と付け、タイプをボタンと選択しOKを押します。ライブラリパネルを開くとAというボタンが登録されているのが判ります。

画面上のA国のボタン(配置されてるインスタンス）をダブルクリックして、ボタンの編集画面に入ります(他のオブジェクトが薄く見えながら編集できます。ライブラリのアイコンのダブルクリックなどではこれが見えない）。
オーバーのフレームを選択し右クリック、キーフレームの挿入をします。オンマウスオーバー時（マウスカーソルを重ねた時）ロールオーバーしたいので、好きな色に変えてください。私は文字をオレンジ色に変えておきます。
続いてダウンのフレームを右クリックしキーフレームを挿入、オンマウスダウン時（クリックした時）に変化をしたい場合は色を変えてください。

最後のヒットの部分はボタンの感知する範囲を決める所です。そのままのボタン部分で感知すればいいのなら触らなくとも大丈夫です。今回は地図の部分にマウスカーソルを重ねた時も感知したいので設定します。
ヒットを右クリックしキーフレームを挿入します。ヒットの中では線があっても無くても、塗りの色が何でも関係ないので、これだけでボタン部分は感知の範囲になります。（FireworksのヒットのスライスにあたるのがFlashではオブジェクトの部分になります。）
地図のA国の部分のコピーをとりたいので、ボタン以外の部分をダブルクリックして（またはタイムラインの上部のバーの「シーン１」をクリック）、一度もとのシーン１の画面にもどります。地図レイヤーのロックを解除し、A国の丸を選択、Ctrl+Cキーでコピーをとります。もう一度A国のボタンをダブルクリックし、ボタンの編集の画面に入ります。ヒットのフレームをクリックして先ほどコピーをとった丸をペーストします。（同じ位置にペーストするにはCtrl+Shift+Vでいいのですが、シーン１の画面とボタンの編集画面では基準点の位置が違うので、とんでもない所にペーストされてしまいます。今回はCtrl+Vでペーストして、選択ツールで移動し、最後は矢印キーでだいたいの位置を下の画像と合わせます。）
これで地図の上にマウスカーソルを重ねても感知するようになりました。
同様にBボタン・Cボタンも設定します。
＊ヒットの範囲を作る時、あわてて他のフレームにペーストしてしまわないように注意してください。

３．フレーム１でストップしておくように設定。
勝手に次のフレームに再生ヘッドが動かないように、フレーム1にアクションスクリプトでストップをかけます。ボタンレイヤーの上に新規レイヤーを追加し、「AS」と名前を付けます。ASレイヤーのフレーム1を選択、アクションのパネルを開いて「グローバル関数」→「タイムラインコントロール」と開き、「stop」をダブルクリックします。ASレイヤーのフレーム1に「a]と記号が入り、アクションスクリプトが設定された事がわかります。

これで初期状態の画像ができました。

４．マウスカーソルを重ねた時の説明文をつくる。
ここでもとりあえずの説明文の代わりのものを作っておきます。フレーム2にA国、フレーム3にB国、フレーム4にC国の画像を作ります。
説明レイヤーのフレーム２を選択し右クリック、キーフレームを挿入します。画像が変わった事がわかりやすいように説明文の場所の、四角の塗りの色を変えておきます。私は四角の塗りを青、テキストを「A国説明文」と変えておきます。
同様にフレーム3にキーフレームを挿入・塗りを緑・テキストを「B国説明文」、フレーム4にキーフレームを挿入・塗りを黄色・テキストを「C国説明文」と変えておきます。

次に地図レイヤーのフレーム２・３・４を一度に選択しキーフレームに変換します。ロールオーバー時に地図の色が変わるようにしたいので、それぞれの色を変えます。
フレーム２を選択、A国の場所(丸）を選択、私は色をオレンジにしておきます。同様にフレーム3でB国(四角）の色を、フレーム4でC国(三角）の色を変えます。

これでロールオーバー時の画像が出来ました。

ボタンレイヤーはフレーム1の画像をそのままフレーム4まで継続して表示しておくので、フレーム4を選択し右クリック、フレームを挿入しておきます。

５．ボタンにアクションスクリプトの設定をする。
・フレームに飛ぶ設定
ビヘイビアでもできますがここではアクションパネルで設定します。
A国のボタンを選択し、アクションパネルを開きます。「グローバル関数」→「ムービークリップ制御」を開き「on」をダブルクリック、小括弧のなかは「rollOver」をダブルクリックして設定します。中括弧の中に入りEnterを押して行を1行改行、「グローバル関数」→「タイムラインコントロール」の中の「gotoAndStop」をダブルクリック、小括弧の中は２と設定します。
これでこのボタンに対して「オンマウスオーバー時、フレーム2に飛んでそこでストップする」という設定になりました。

次に中括弧の外にでて1行改行し「on」、小括弧の中は「rollOut」を選択、中括弧の中に入り「gotoAndStop」、小括弧のなかは１と設定します。
これで「オンマウスアウト時にフレーム1に戻る」設定になります。

このようになります。
-----------------------------
on (rollOver) {
gotoAndStop(2);

}
on (rollOut) {
gotoAndStop(1);

}
-----------------------------

同様にB国・C国のボタンにもフレーム3・フレーム4に飛ぶ設定をします。面倒ならばアクションスクリプトの記述をコピーして貼り付けて、小括弧の中だけ「3」・「4」と書き換えれば早いです。

～～～ビヘイビアを使う場合はA国のボタンを選択し、ビヘイビアの「＋」をクリック、「ムービークリップ」→「フレームまたはラベルへ移動して再生を停止」を選択。ムービークリップはルートを選択したまま、相対にチェックしたまま、フレームラベルは２と入れて指定しOKをクリック。
設定が出来た後、ビヘイビアパネルのイベントが「On Release」になっているので、クリックしてプルダウンメニューの中から「OnRollOver」を選択しイベントを変えます。
A国のボタンが選択された状態でもう一度「＋」をクリック、「フレームまたはラベルへ移動して再生を停止」からフレームは１のまま指定してOKをクリック、イベントを「OnRollOut」に変える。
これでアクションパネルを開くと同じことが設定されています。～～～

・リンクの設定
ボタンにリンクを設定する時はアクションスクリプトを追加します。
ボタンを選択し、アクションパネルを開き「on」、小括弧の中は「release」、中括弧の中は『グローバル関数」→「ブラウザ/ネットワーク」→「getURL」をダブルクリック、中括弧の中に「"」で囲んでURLを指定します。
これで「クリックして離した時にURLに飛ぶ」設定になります。
ウィンドウを指定する場合はカンマで区切って指定します。
このようになります。
-----------------------------------------
on (rollOver) {
gotoAndStop(2);

}
on (rollOut) {
gotoAndStop(1);

}

on (release) {
getURL("http://www.***.co.jp","_blank");
}
-----------------------------------------

～～～ビヘイビアで指定する場合はボタンを選択し「＋」をクリック、「web」→「webページへ移動」を選択、URLとウィンドウを指定してOKを押します。
アクションパネルを開くと同じことが設定されています。～～～

６．チェック
ムービープレビューでチェックしてみます。一度好きな場所に好きな名前でこのファイルを保存します。拡張子「.fla」のファイルができます。その上でFlashの画面でCtrl+Enterを押します（制御→ムービープレビュー、と同じ）。
保存した同じ場所に「.swf」ファイルが作られムービープレビューが開きます。ボタンや地図の上にカーソルが重なるとボタンと地図がロールオーバーし、説明文が変わるはずです。カーソルをどかすと元のデフォルトを書かれた説明文の画像に戻るはずです。

最後に
後はこれを基本にして画像を複雑にしたりアニメーションをつけたりしていけばいいと思います。
例えばオープニングアニメがあり、最後にボタンが出てきてそこでストップさせておき、ボタンにカーソルが重なると説明文が出て、クリックするとリンクさせたページに飛ぶなど…です。

アクションスクリプトの「gotoAndStop」はそこへ飛んでストップさせておくという動きです。
「gotoAndPlay」なら、そこへ飛んで再生させます。
なので
・10フレーム目からあるアニメーションを作っておき、50フレーム目から別のアニメーションを作っておいて、
・「10フレーム目に飛んで再生」「50フレーム目に飛んで再生」というボタンを「アニメ１」「アニメ2」と作っておけば、ボタンによって再生させるアニメを選択できるものが作れます。
もちろんアニメの最後のフレームに「1フレーム目に飛んで(戻って)ストップしておく」アクションを設定しておくか、
「ストップをかけ」ボタンを表示するようにしておく(または先ほどのようにボタンレイヤーを分けておいてずーっと表示しておくようにフレームを挿入しておく）必要があります。

このアニメの最後のフレームに「getURL」を設定しておけば、「ボタンをクリックするとアニメがパパッと流れてからページがジャンプする」なんていうリンクも作れます。

アクションスクリプトは本が何冊も出てるほどで解らないのも山ほどありますが、今回出てきたものだけでもちょっといじればいろいろ作れると思います。

お礼

これほどまでに丁寧に教えて頂き、またお時間を割いて頂き本当に有難うございます。
感謝という言葉しか見つかりません。

私にとってはどんな参考書よりも分かりやすく、素晴らしい知識となりました。
Flashへの苦手な先入観が無くなりそうです。

今回のご説明頂いたものから色々なものへ発展作業を頑張って行っていきたいと思います。
その際に分からない事がありましたら、失礼かとは思いますが、
またご質問させて頂くかもしれません。。。

今回は本当に有難うございます。

回答No.1

turbo27

参考URLのようになればいいのですね。こちらもそんなに詳しくは無く、ソフトもFlash8なので多少違う部分があるかもしれません。作りもその人によっていくつかあると思いますが、基本的なものとします。
作り込むときりがないと思いますが、基本的な部分だけ製作するのであれば、ロールオーバー時の説明文をフレーム分けしてボタンアクションで表示させればよいです。

参考サイトを元にするなら、1フレーム目に、地図・とりあえずボタンをA.B.Cと三つほど・説明文の場所をつくり、2フレーム目にAの説明文、3・4フレーム目にB・C・の説明文を作り、ボタンにアクションスクリプトでロールオーバー時に２・３・４フレームに飛ぶ設定をつければよいです。
どこまで詳しく書けばいいのか判らないので、一応構造を書きましたが、ボタンの作成・アクションスクリプトの設定など詳しく書いたほうがよければ、そうおっしゃってください。追記で書きます。（一度詳しく書いたのですが、長くなってしまったのでｗ）

補足

ご回答有難うございます。
ボタンの作成については一応Fireworksの方で作成経験はあるのですが、Flashとなるとまた何かと手順が異なりそうな気がするので、
もしよろしければ、長くなっても構いませんので、
詳しくお教え頂けますでしょうか。
Flashの使い方等、本当にほとんど分かってないレベルですので(^^;
お手数をおかけして申し訳ありませんが、宜しくお願い致します。