マウスオーバーで光るバナーの作成方法

質問

http://www.star-jewelry.com/j/index.html

こちらのサイトで見つけたのですが、
斜め下のバナー、

時たま、

キラッ！と光ったり、
マウスオーバーすると、ふわっと光ったり、、

このようなバナーはどのように作成したらよろしいのでしょうか？

お手数ですが、教えて下さい！！！お願いします！！！

回答No.1

BlurFiltan · ベストアンサー

Flashの質問で押さえておかなければならない最も重要なポイントは「バージョン」です。
バージョンと言っても色々ありますが、特に次の３つが大切です。

・「Flash作成ソフトのバージョン」
・「パブリッシュするSWFのFlash Playerのバージョン」
・「Actionscript のバージョン」

この３つの中で、少なくとも２つが明確でないとたいていの場合回答不可能になります。
または、ものすごくたくさんの場合の回答を書かざるを得なくなります。
それは回答者にとって非常に負担かもしくは当てずっぽうの回答しかできなくなるので、
「回答が付かない」か「トンチンカンな回答が付くだけ」ということになりかねません。

特に Flash作成ソフトのバージョンくらいは書くようにしてください。

--- --- ---

あと、ここでは図説が十分できません（420×314pxの画像１枚きりしかアップできません）し、
サンプルファイルの提示もできませんから、
ご質問にあるようなテクニック系Flashの回答は非常に不向きです。
（Actionscript系のご質問に対する回答には向いています。）

そこのところをわかって質問してください。

　「テクニック系の回答は非常に不向き」
　＝回答者にとって「回答しにくい」
　＝質問者にとって「回答がわかりにくいわからない」

ということです。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

では本題。

ご質問のページにあるような感じのボタンやバナーみたいなのが頻繁に出てきたのは、Flash MX からです。
Flash MX からはムービークリップがボタンの機能を持つようになったので、
そういうボタンやバナーみたいなのが作りやすくなったというのが大きな理由です。

Flash MX とは、初代 Flash から数えて 6代目 の Flash （=Flash 6） です。
Flash 5 以下でも作れないことはありませんが（＝できます）、
しかしムービーの構造やスクリプトが全く違うものになるので、
勝手ながらこの回答では切り捨てさせていただきます。

以下に書く内容は、Flash MX 以上（MX、MX2004、8、CS3、CS4）を対象としたものです。
(つまり Flash 5 以下の方にとっては 「無回答」または「トンチンカンな回答」と等しいとうことです。）

また、説明するボタンは、
書かれていらっしゃるページの右下にある 「Summer Jewelry Wave」 というものだけに限定させていただきます。
左横や上に並んでいるボタンは違います。
特に上に並んでいるボタンはスクリプトなどが全く違います（ボタンどうしが連動しています）。

上に書きましたように、
この 「Summer Jewelry Wave」バナーボタン はムービークリップでできたボタンです。
とりあえず、下の 【図】↓ を見て漠然とした全体をイメージしてください。

ムービーの構造全体は次のようになっています。

　_root（シーン 1 などメインのタイムライン）
　　　└バナームービークリップ
　　　　　　├光ムービークリップ(たまにキラッと光る)
　　　　　　│　　　├光グラフィックのマスク
　　　　　　│　　　└光グラフィック
　　　　　　├白塗グラフィック（ロールオーバーで光る）
　　　　　　└バナーの絵

これを下のレイヤーから順に作って行きます。

まず Flash の _root（シーン 1 などメインのタイムライン） のステージ上に、
「バナーの絵」を描くか、読み込むかして配置します。

「バナーの絵」を選択して、
Flash MX の場合「挿入」→「シンボルに変換」、
Flash MX 2004 以上の場合「修正」→「シンボルに変換」で
ムービークリップに変換します。

ムービークリップに変換しましたら、
それをダブルクリックするなどして、
ムービークリップ内のタイムラインの編集に移ります。

ムービークリップ内のタイムラインは１レイヤー１フレームで、
「バナーの絵」があるだけだと思います。

　レイヤー 1 筆・・|●|

これを適当に 20フレーム くらいにします。

　レイヤー 1 筆・・|●//////////////[]|

そしてその上にレイヤーを追加します。

　レイヤー 2 筆・・|○　　　　　　　　　　　[]|
　レイヤー 1 筆・・|●//////////////[]|

その新しいレイヤーのフレーム2を選択して、
キーフレームに変換します。

　レイヤー 2 筆・・|○|○　　　　　　　　　[]|
　レイヤー 1 筆・・|●//////////////[]|

新しいレイヤーのフレーム2のステージ上に
「バナーの絵」と同じ大きさで同じ形の白い塗りを描きます。
これで新しいレイヤーのフレーム2は
空白キーフレームではなく、キーフレームになります。

　レイヤー 2 筆・・|○|●////////////[]|
　レイヤー 1 筆・・|●//////////////[]|

その白塗りを選択して、
「シンボルに変換」より、今度はグラフィックシンボルに変換します。

ステージ上のその白塗りグラフィックを選択して、
プロパティパネルより、アルファを 90くらいに設定します。

そしてそのレイヤーの最終フレームをキーフレームに変換します。

　レイヤー 2 筆・・|○|●//////////[]|●|
　レイヤー 1 筆・・|●//////////////[]|

その最終フレームのキーフレームにあるステージ上の白塗りグラフィックを選択して、
プロパティパネルより、アルファを0に設定します。
つまり完全透明にします。

その白塗りグラフィックのレイヤーのフレーム2を選択して、
Flash CS3以下の場合、「挿入」→「タイムライン」→「モーショントゥイーンを作成」辺りで、
レイヤーにモーショントゥイーンを設定します。
Flash CS4の場合は、「挿入」→「クラシックトゥイーン」で、
レイヤーにクラシックトゥイーンを設定します（本当はモーショントゥイーンの方が良いのですが他のバージョンとの説明をなるべく一致させるためにあえてクラシックトゥイーンにします）。

　レイヤー 2 筆・・|○|●---------->|●|
　レイヤー 1 筆・・|●//////////////[]|

これでどう見えるか、
タイムライン上でカーソルを移動させて簡単な動作確認をしてみます。
白塗グラフィックが「真っ白」→「透明」へと変化するトゥイーンができていればOKです。

次に「たまにキラッと光る」レイヤーの作成に移りたいのですが、
ここはさらにムービークリップを入れ子にするので、後回しにします(※↓)。

というわけで
「白塗グラフィック」のレイヤーの上にさらにレイヤーを追加して、
そのレイヤーを ActionScript 専用レイヤーと勝手に決めます。

その ActionScript 専用レイヤーのフレーム1の空白キーフレームを選択して、
アクションパネルを表示させて、
このムービークリップ内タイムラインが自動再生してしまわないように、

stop();

を書いておきます。

ここまでできましたら、
何も描いていない場所をダブルクリックするなどして、
_root（シーン 1 などメインのタイムライン） の編集に戻ります。

さて Actionscript です。

● Flash MX、MX 2004、8、CS3、CS4 をお使いで、
　　Actionscript 1.0 を使用する場合

今作ったムービークリップを選択して、
そのムービークリップ自体に次のように書きます。

---------------------------------------
// このムービークリップにロールオーバーしたときに実行
on (rollOver) {
// このムービークリップ内タイムラインを再生開始
this.play();
}

// このムービークリップからロールアウトしたときに実行
on (rollOut) {
// このムービークリップ内タイムラインをフレーム1で停止
this.gotoAndStop(1);
}

// このムービークリップをクリックしたときに実行
on (release) {
// xxx.html ページへ移動
getURL("xxx.html");
}
---------------------------------------

● Flash MX 2004、8、CS3、CS4 をお使いで、
　　Actionscript 2.0 を使用する場合

今作ったムービークリップを選択して、
プロパティパネルよりそのムービークリップにインスタンス名を付けます。
たとえばここでは、
「banner_mc」 というインスタンス名を付けることにします。

この 「banner_mc」 のあるレイヤー以外に新しいレイヤーを追加して、
そのレイヤーを ActionScript 専用レイヤーと勝手に決めます。

その ActionScript 専用レイヤーの空白キーフレームを選択して、
アクションパネルを表示させて、次のように書きます。

---------------------------------------
// 「banner_mc」にロールオーバーしたときに実行
banner_mc.onRollOver=function():Void {
// この「banner_mc」内タイムラインを再生開始
this.play();
}

// 「banner_mc」からロールアウトしたときに実行
banner_mc.onRollOut=function():Void {
// この「banner_mc」内タイムラインをフレーム1で停止
this.gotoAndStop(1);
}

// 「banner_mc」をクリックしたときに実行
banner_mc.onRelease=function():Void {
// xxx.html ページへ移動
getURL("xxx.html");
}
---------------------------------------

● Flash CS3、CS4 をお使いで、
　　Actionscript 3.0 を使用する場合

今作ったムービークリップを選択して、
上と同様プロパティパネルよりそのムービークリップにインスタンス名を付けます。
たとえばここでは、
上と同様「banner_mc」 というインスタンス名を付けることにします。

この 「banner_mc」 のあるレイヤー以外に上と同様に新しいレイヤーを追加して、
そのレイヤーを ActionScript 専用レイヤーと勝手に決めます。

その ActionScript 専用レイヤーの空白キーフレームを選択して、
アクションパネルを表示させて、次のように書きます。

---------------------------------------
// 「banner_mc」に対してイベントリスナーを追加
// 引数(イベント.ロールオーバー、実行関数：bannerMCPlay)
banner_mc.addEventListener(MouseEvent.ROLL_OVER,bannerMCPlay);

// 関数 bannerMCPlayを定義
// 引数（e：マウスイベント）：戻り値なし
function bannerMCPlay(e:MouseEvent):void {
// イベントのターゲットを再生開始
e.target.play();
}

// 「banner_mc」に対してイベントリスナーを追加
// 引数(イベント.ロールアウト、実行関数：bannerMCStop)
banner_mc.addEventListener(MouseEvent.ROLL_OUT,bannerMCStop);

// 関数 bannerMCStopを定義
// 引数（e：マウスイベント）：戻り値なし
function bannerMCStop(e:MouseEvent):void {
// イベントのターゲットをフレーム1で停止
e.target.gotoAndStop(1);
}

// 「banner_mc」に対してイベントリスナーを追加
// 引数(イベント.クリック、実行関数：getURLxxx)
banner_mc.addEventListener(MouseEvent.CLICK,getURLxxx);

// 関数 getURLxxxを定義
// 引数（e：マウスイベント）：戻り値なし
function getURLxxx(e:MouseEvent):void {
// URLRequestインスタンス「myURL」を作成
var myURL:URLRequest=new URLRequest("xxx.html");
// 指定ページへ移動
navigateToURL(myURL);
}
---------------------------------------

上の３つは全く同じ動作をするスクリプトです。
全く同じ事をする３通りのスクリプトを見ただけでも
「バージョンによって全く違う！」 というのがわかるでしょう？
同じ言語とは思えませんよね。
だからバージョンが最重要なのです。

今回は簡単ですから３通りも答えましたが、普通は答える気などしません。
それと本当は、
上の３種以外に、中間雑種的なスクリプトや Actionscript 1.0 未満の言語などもあるのです。
その辺は省略です。

※ 「たまにキラッと光る」レイヤーの作成について

これはやはりここでは説明が難しいです。
半透明グラデーション白塗り入りのグラフィックをマスクの下でモーショントゥイーンで動かします。
そういうムービークリップを作成しておいて、
「たまにキラッと光る」レイヤーに配置します。

次のページなどを見て、
マスクなどについて理解してみてください。

マスクとは？
http://www.1art.jp/flash/le/lesson9/lesson9-2.htm

GAC なぜなにGAC-Flash 光らせる
http://gac.kir.jp/7/22720
→003 の回答者のサンプル

Flashのよくある質問とトラブル 文字の背景を光らせる
http://www.usuaji.net/flash/archives/2007/04/post_36.html

慣れれば簡単にできることなんです。
「バナーの絵」さえ描くか用意してしまえば，
その後はスクリプトの記入までを含めて５～10分くらいでできるようになります。

ですから
「バナー１つにものすごく凝ったことをしている！」
というわけではありません。
むしろ 「バナーの絵」 を描くこと自体の方が数倍～数十倍の労力が要ります。

ムービーの構造や作業手順も瞬時にイメージできるようになります。
しかし慣れないと，これらの動きの作成は大変だと思います。

そしてムービーの構造がイメージできると
ActionScriptもイメージできます。

お礼

本当に本当にありがとうございます！！！これはすごい！！
ものすごくわかりやすいです！！かなりびっくりしました！！！
＆
本当にお手数かけました（＞＜）
ちなみに、私はFlashCS4で、Actionscript 3.0 を使っています（＞＜）
忙しい中、手間をかけさせてしまって本当すみません汗汗　
でも、BlurFiltanさんのおかげで、素敵なサイトが作れそうです★

本当にありがとうございました★がんばりまーす★