FlashMXでのボタンアクション作成について

質問

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

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

回答No.2

noname#35109 · ベストアンサー

本当に答えにくいご質問ですが，一応回答。

>> 各ボタンにカーソルが乗ると
>> 左側画像枠に各説明画像が表示される

もし，これだけのことだとすごく簡単ですよ。
スクリプトで言うのなら， stop();　と　gotoAndStop();　だけでできます。

作り方のサンプルを書きます。
書いている通りにやってくださると，
引用されているサイトのレベルまではできませんが，
近いものはできると思います。

まず Flash を起動させます。
真ん中に白いステージが出てきます。
表示を 100％ にしてください。
ステージに好きな色の塗りだけで横長の長方形を描いてください。
適当な大きさで，横４cm，縦１cmくらいの長方形です。
場所もステージ上（白い所）ならとりあえずどこでも良いです。
この長方形はボタンとして使います。

今描いた長方形のボタンを矢印ツールで選択して，
右クリック→「シンボルに変換」で「シンボルに変換ダイアログ」が表示されるので，
タイプを　タイプ：○ボタン　にチェックを入れて「OK」をクリックしてください。
名前はどうでも良いので変更しなくてかまいません。
これで，長方形は単なる塗りではなく，ボタンの機能を果たす「ボタンシンボル」になります。

サンプルではボタンを３つ作りたいので，
長方形を描く→ボタンシンボルにする
という作業をあと２回くりかえしてください。
長方形の色は同じでもかまいませんが違う方が良いと思います。

そしてそのできた３つのボタンシンボルを，
ステージの右の方に縦に並べてください。

　┌───────ステージ──────┐
　□□□□□□□□□□□□□□□□□□
　□□回回回回回回回□□■■■■■□□
　□□回説明文回回回□□■ボタン１■□□
　□□回回回回回回回□□■■■■■□□
　□□回回回回回回回□□□□□□□□□
　□□回回回回回回回□□■■■■■□□
　□□回回回回回回回□□■ボタン２■□□
　□□回回回回回回回□□■■■■■□□
　□□回回回回回回回□□□□□□□□□
　□□回回回回回回回□□■■■■■□□
　□□回回回回回回回□□■ボタン３■□□
　□□回回回回回回回□□■■■■■□□
　□□□□□□□□□□□□□□□□□□

まだ，説明文は書いていない状態ですが，
書いたとしたら上のようなレイアウトになる感じです。

では，説明文を書いていきます。
まず，タイムラインの，ボタンのあるレイヤーを選択して，
右クリック→「レイヤーの挿入」でレイヤーを増やしてください。
もう一度
右クリック→「レイヤーの挿入」でレイヤーを増やしてください。
現在，次のような状態になっていればOKです。

　　　　　　　　　　１　
　レイヤー　筆・・|○|
　レイヤー　筆・・|○|
　レイヤー　筆・・|●|　←ボタンレイヤー

ステージ上に何かが描かれていると，
そのフレームは ● が付きます。
ボタンが存在しているので，そのレイヤーのフレームだけに●がついているはずです。

ボタンのあるレイヤーの上のレイヤーを選択して，
その状態で "ステージ上" に適当な "説明文" をテキストで書いてください。
何でもいいので，

　ああああ
　いいいい
　うううう
　ええええ
　おおおお

にでもしておきます。
ボタンのあるレイヤーの上のレイヤーに文字が入ったので
タイムラインは次のようになっていると思います。

　　　　　　　　　　１　
　レイヤー　筆・・|○|
　レイヤー　筆・・|●|　←説明文レイヤー
　レイヤー　筆・・|●|　←ボタンレイヤー

これで，１つの説明文の出来上がりです。

次にフレームを追加します。
一番上のレイヤーの フレーム2 を選択して，
一番下のレイヤーのフレーム3までドラッグして選択してください。

　　　　　　　　　　１　２　３
　レイヤー　筆・・|○|// //
　レイヤー　筆・・|●|// //
　レイヤー　筆・・|●|// //

そして選択した範囲を右クリック→「フレームの挿入」を選択してください。
こんな具合になります。↓

　　　　　　　　　　１　 ２　３
　レイヤー　筆・・|○　　　　[]|
　レイヤー　筆・・|●/////[]|
　レイヤー　筆・・|●/////[]|

次に，
説明文を書いたレイヤーの フレーム2 と フレーム3 を選択して，
右クリック→「キーフレームに変換」を選択してください。

　　　　　　　　　　１　　　　　　　５
　レイヤー　筆・・|○　 　[]|
　レイヤー　筆・・|●|●|●|　←説明文レイヤー
　レイヤー　筆・・|●　 　[]|　←ボタンレイヤー

そして，
説明文を書いたレイヤーのフレーム2を選択してください。
その状態で，"ステージ" を見ます。

　ああああ
　いいいい
　うううう
　ええええ
　おおおお

となっているはずですから，
これを，

　かかかか
　きききき
　くくくく
　けけけけ
　ここここ

にでも書き替えてください。
これで２つ目の説明文の出来上がりです。

またタイムラインに目を移して，
説明文レイヤーのフレーム3を選択してください。
その状態でステージを見ると，また説明文が

　ああああ
　いいいい
　うううう
　ええええ
　おおおお

と見えるはずです。
これを

　ささささ
　しししし
　すすすす
　せせせせ
　そそそそ

にでも書き替えてください。
これで，３つ目の説明文の出来上がりです。

何処かに任意の名前でとりあえず保存して，
「ファイル」→「パブリッシュ」でパブリッシュしてみてくだい。
そしてパブリッシュしたファイルを開いてみてください。

ボタンは変化がありませんが，
説明文はめまぐるしく変わるはずです。
何もスクリプトを書かないと３つのフレームはループ再生されるので，
目まぐるしくフレームが変わります。

とりあえずこの動きを止めます。

Flash の作成に戻って，
何も書いていない白いレイヤーの フレーム1 を選択してください。
その状態で，下に表示されている，
「アクション-フレーム」となっているアクションパネルを表示させます。

そして，そのアクションパネルの白いスクリプトを書く部分に，

stop();

と書いてください。
上記の　stop(); をコピペで貼り付けてくださってもかまいません。
これでとりあえず，フレーム1 でムービーはストップします。
ストップしたままでは，次の説明文が表示されないので，
ボタンによって，説明文を変えます。

ステージ上の一番上のボタンを選択して，
その状態のまま，アクションパネルを表示させてください。
そしてそのボタンに，

on (rollOver) {
gotoAndStop(1);
}

と書きます。

「ロールオーバーしたときに，
フレーム1 に行ってストップする。」

という意味のスクリプトです。

ステージに戻って，
２つめのボタンを選択してください。
その２つ目のボタンには，

on (rollOver) {
gotoAndStop(2);
}

と書きます。
また，３つ目のボタンには

on (rollOver) {
gotoAndStop(3);
}

と書きます。
この状態でパブリッシュして動きを確かめてみてください。
ボタンにロールオーバーすると，フレームが移動するので，
左の説明文が変わると思います。

以上で，

>> 各ボタンにカーソルが乗ると
>> 左側画像枠に各説明画像が表示される

ができます。

-----------------------------------------

しかし，これでは動きがないのでで，Flash らしくありません。
フレーム1 の説明文を，
右クリック→「シンボルに変換」でムービークリップシンボルにします。
今度は　タイプ：○ムービークリップ　にして「OK」をクリックしてください。

これで，そのテキストは単なるテキストではなく，
ムービークリップシンボル（小さなムービー）になります。

そのムービークリップになったテキストを選択して，
右クリック→「同じ位置で編集」を選択してください。
その時点で見えている物は，ムービークリップの内部です。

さっきつくってあった，

　レイヤー　筆・・|○　 　[]|
　レイヤー　筆・・|●|●|●|
　レイヤー　筆・・|●　 　[]|

こんなのではなく，
タイムラインが１つに戻っていると思います。

　　　　　　　　　　１
　レイヤー　筆・・|●|

さっき作ったのはメインムービーのタイムラインで，
今見えているのはムービークリップ内のタイムラインです。
つまりタイムラインがべつなのです。
だから，ムービークリップの中には別のムービーの世界が展開できるわけです。

このタイムラインにまた，レイヤーを１つ追加して　２レイヤーにしてください。
そして，10フレームくらいにフレーム数も増やしてください。

　　　　　　　　　　１　　　　　　　　　　10
　レイヤー　筆・・|○　 　　　　　　　　　[]|
　レイヤー　筆・・|●//////////////[]|

上のレイヤーを選択して，
ステージ上に直径１cmくらいの丸を描いてください。
それを，選択して，
右クリック→「シンボルに変換」でグラフィックシンボルにします。
今度は　タイプ：○グラフィック　にチェックを入れて「OK」をクリックです。

これでその丸は単なる丸ではなくグラフィックシンボルというシンボルになります。
シンボルはモーショントゥイーンで動かせます。
グラフィックシンボルというシンボルはムービークリップと違い内部に独自のムービーワールドはほとんど持てません。
単なる絵のシンボルだと思ってください。

その丸を選択してテキストの左あたりに置いてください。
そして，
タイムライン上のレイヤーの フレーム10 を選択して
右クリック→キーフレームに変換でキーフレームにしてください。

　　　　　　　　　　１　　　　　　　　　　10
　レイヤー　筆・・|●////////////[]●|
　レイヤー　筆・・|●//////////////[]|

そしてそのフレーム10を選択した状態で，
ステージ上の丸を選択し，
テキストの右あたりに移動させてください。

　┌───────ステージ──────┐
　□□□□□□□□□□□□□□□□□□
　□□回回回回回回回□□■■■■■□□
　□□回説明文回回回□□■ボタン１■□□
　□□回回回回回回回□□■■■■■□□
　□□回回回回回回回□□□□□□□□□
　□□回回回回回回回□□■■■■■□□
　□□回回回回回回回□□■ボタン２■□□
　□□回回回回回回回□□■■■■■□□
　□●回回回回回回回●□□□□□□□□
　□□回回回回回回回□□■■■■■□□
　□□回回回回回回回□□■ボタン３■□□
　□□回回回回回回回□□■■■■■□□
　□□□□□□□□□□□□□□□□□□
　　　　　　　　　　　　　　↑フレーム10の丸の位置

そして，タイムラインの上レイヤーのフレーム1を選択，
右クリック→「モーショントゥイーンを作成」を選択してください。
するとフレーム1～10までが矢印でつながります。

　　　　　　　　　　１　　　　　　　　　　10
　レイヤー　筆・・|●>----------->|●|
　レイヤー　筆・・|●//////////////[]|

これがモーショントゥイーンと呼ばれる物で，
この状態でパブリッシュしてもらうとわかりますが，
最初と最後の丸の場所を決めただけなのに，その間が補完されてアニメーションになります。

以上で
わかりますか？

ムービークリップ内にアニメーションを用意してそのムービークリップの表示を切り換えれば，
いろいろなアニメーションが呼び出されることになります。

------------------------------------

しかし，いろいろやっていると次々に欲が出てくるもので，
どんどんアニメーションの手法を取り入れたくなります。

引用されているURLはタイムラインではなく，
ムービークリップ内に外部のムービーをロードして表示させています。

そこで，＃１の方と同じ意見になります。
別に外部のムービーを読み込まなくても，

>> 各ボタンにカーソルが乗ると
>> 左側画像枠に各説明画像が表示される

は簡単にできますよ。ということになるわけです。

もし ロードする場合，
キーワードは loadMovie です。
ボタンによる動きが表現出来たら，
「Flash loadMovie」などと検索してみてください。
色々方法がかいてあると思います。
http://www.google.com/search?hl=ja&q=Flash+loadMovie&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=lang_ja

loadMovie よりはまず，
on (release) {}
や
on (rollOver) {}
です。
そして stop(); や gotoAndStop(); gotoAndPlay(); などです。
これらをしっかり覚える方がまず第一です。

>> 質問：FlashMXでのボタンアクション作成について

これと loadMovie は全然関係のない話で，レベルもちがいます。
全然別物のことだとわかると質問内容も変わって来るはずです。

とにかく本を買って，
１つずつコツコツと積み上げて行ってください。
本は「教えて!! Flash」シリーズをお薦めします。
バージョンが古くなると何が辛いかというと参考書籍がなくなってくることです。
まだ MX も探せば売っていると思います。
それ以外でも簡単そうなのがあれば買っておく方が良いですよ。
バージョンが変わると本も違う説明になる場合が多々あります。
必ず最初はバージョンに合った本を参考にしてください。
http://www.amazon.co.jp/exec/obidos/ASIN/4839907293/kaimonochu-22/ref%3Dnosim/503-3347231-2651106

お礼

非常にご丁寧に親切にここまでお教え頂き、本当に有難うございます。感謝致します。
今後もFlashにつきましては、参考書等を読み学んで行こうと思います。
また、何かぶつかった際にはご質問をさせて頂く事があるかもしれませんが、お時間がおありになれば教授頂ければ幸いです。
本当に有難うございました。

回答No.1

noname#222916

参考のFLASHでは、説明の部分に外部ムービーを読み込むようになっているようですが、説明だけ表示するなら、特に外部ムービーでなくてもできます。外部ムービーかそうでないかだけでも、説明の内容が違ってきますし、ここの回答スペースだけで説明できるほど簡単ではありません。
ようするに、何がわからないのか言わないと、一から十まで説明はできない、ということです。
以前も同じ質問をされていたと思いますが、再度質問されているところをみると、満足な回答がなかったのではと推察しますが、この質問だけでは回答のしようがないというのが正直なところではないでしょうか？
まずは、FLASH解説本でも買って、自分で試行錯誤した上で、「この部分がわからない」というのを質問されてはいかがでしょうか？
このFLASH自体はさほど難しい部類には入りませんが、「初心者」といわれているだけに、どこから説明しなければいけないのかが見当がつきません。
ここまではできてるけど、ここからわからない、とか。

お礼

よく調べた上で詳細に質問すべきでした、ご指摘ありがとうございました。