ロールオーバーで他の画像を表示させる。

質問

はじめまして。

素人ながらFlashを使い↓のようなものを作成したいと考えているのですが、はじめたばかりで何から習得すべきかもわからない状態です。

・あるボタンにカーソルをロールオバーさせる
↓
・Flash全体（元は白の背景）が薄暗くなり、白い噴出しが現れる。
↓
・噴出しの中にゆっくりと文字が浮かび上がる。

いろいろ調べてActionScriptを記述しないといけないのはわかるのですが、それをどこにどうやって記述するのか、そのボタンや、背景などのコンポーネントで何を作成する必要があるのか全くわからない状態です。

イメージだけいただければあとはネットで調べられるとは思うので、簡単な手順だけでも結構ですのでご教授いただけると幸いです。

ここに書いている内容だけでは何がしたいのか伝わらないかもしれませんが、その場合は補足要求いただけますようお願いいたします。

以上、何卒よろしくお願いします！

回答No.1

noname#35109 · ベストアンサー

２つのムービークリップタイムラインの再生ヘッドを，
１つのボタンで操作すればできると思いますよ。

> あるボタンにカーソルをロールオバーさせる
→ on (rollOver) { … }

> Flash全体（元は白の背景）が薄暗くなり、
→Flash全体にかかるような半透明の白い塗りを
　あるムービークリップの中に出没させる

> 白い噴出しが現れる。
→白い吹き出しをあるムービークリップ内に出没させる

> 噴出しの中にゆっくりと文字が浮かび上がる。
→白い吹き出しのムービークリップ内で，
　文字のアルファを0→100へとモーショントゥイーンで変化させる

という流れでいけると思います。

まず，メインムービー （_root） のレイヤー構造ですが，
実際は何フレームあるのか知りませんが，
一応１フレームしかないとすると次のような感じにします。

　レイヤー　筆・・|●| ←吹き出し＋文字用
　レイヤー　筆・・|●| ←白い幕用
　レイヤー　筆・・|●| ↓ボタンなどなど
　　…　その他　…
　レイヤー　筆・・|●|

白い幕ですが，
これは Flash 全体を覆うような大きな白いアルファ50くらいの四角を描いて，
その白い幕をムービークリップに変換します。
そしてその白い幕ムービークリップには，
「maku」 というインスタンス名を付けたとしておきます。

「maku」 をダブルクリックして「maku」 内のタイムラインの編集に移ります。
「maku」 のレイヤーを，２フレーム２レイヤーにします。
そして，フレーム２の方に白い塗りを移動させ，
フレーム1の方は空白キーフレームにします。

　レイヤー　筆・・|○　[]| ←スクリプト用
　レイヤー　筆・・|○|●| ←フレーム2に白い塗り

そして，
スクリプト用に用意したフレームのフレーム1に，

------------------
this.stop();
------------------

と書いて，勝手に再生しないようにさせておきます。
これで白い幕はできあがりです。
メインムービー（ドキュメント）の編集に戻ります。

次に「吹き出し＋文字」の作成ですが，
まずステージ上に吹き出しを描きます。
それをムービークリップに変換して，
「hukidasi」 というインスタンス名を付けたとしておきます。

「hukidasi」 をダブルクリックして「hukidasi」 内のタイムラインの編集に移ります。
そして，次のような構造にします。

　レイヤー　筆・・|○　　　　　　　　[]|○| ←スクリプト用
　レイヤー　筆・・|○|●------> []|●|　←文字
　レイヤー　筆・・|○|●//////////[]| ←吹き出し

「maku」と同じようにフレーム1は空白キーフレームにしておいて，
吹き出しの上のレイヤーで，
グラフィックシンボル化した文字をアルファ0→100にモーショントゥイーンさせます。

スクリプト用に用意したレイヤーの
最終フレームも空白キーフレームにして，
フレーム1 にも 最終フレームにも 両方とも，

------------------
this.stop();
------------------

をかいておきます。
これで「吹き出し＋文字」はできあがりです。
メインムービー（ドキュメント）の編集に戻ります。

そしてボタンですが
ボタンでは上の２つのムービークリップ「maku」と「hukidasi」の再生を制御すれば良いだけですから，
次のようになります。

------------------------------------------
// ロールオーバーしたとき
on (rollOver) {
// 幕をフレーム2に進ませてストップ
_root.maku.gotoAndStop(2);
// 吹き出しを再生開始
_root.hukidasi.play();
}
//
// ロールアウトしたとき
on (rollOut, dragOut) {
// 幕をフレーム1に戻してストップ
_root.maku.gotoAndStop(1);
// 吹き出しをフレーム1に戻してストップ
_root.hukidasi.gotoAndStop(1);
}
------------------------------------------

以上のように，
したいことをムービークリップ内に作成して，
そのムービークリップをボタンによって制御すれば良いと思います。

この方法はFlash の基本的な動かし方で，かなり多くの場合で使うことができる，オールマイティーに近い作成方法です。

お礼

できました！！！　すごく丁寧に書いていただいてとても感謝しております！
やってみて改めて自分の素人さに気づいたのですが逆にここまで書いてもらってなかったらできてなかったと思います。

最後にまだこの質問をごらんになって頂いている方がいたらお答えいただきたいのですが、↑で作ったFlashの吹き出しがでたときそれをクリックすると別のURLに飛ぶといったものを作るにはどうしたらいいのでしょうか？

これを考えたときにわからないのが
・URLの記述方法
・吹き出しが浮かび上がった時だけクリックできるようにする方法

以上よろしくお願いします！

補足

早速のご回答ありがとうございます！
今からひと通り試して見たいと思うのですが、かなりの初心者のためかなりつまずきそうな印象です。
追加で質問させていただくかもしれませんがどうぞよろしくお願いします！

取り急ぎご回答のお礼まで。