リンクボタンの作成

リンクボタンの作成

　画像バナーの場合、基本的に画像全体のどこをクリックしてもターゲットとなるサイトにジャンプすることになります。しかし、Flashバナーではボタンを用意することが多々あります。これは、クリックしてジャンプするエリア（リンクボタン）と、そうではないエリアがあるためです。そこで、サイト閲覧者にこのエリアがクリックできると分からせるアフォーダンスを与える必要があります。

　Webブラウザで通常のサイトでは、クリックできるエリアに入ると、マウスカーソルの形が通常の矢印カーソルから指カーソルに変わります。Flashコンテンツ内でも、この仕組みを利用することが良い解決策となります。

　しかし、1つ注意点があります。ActionScript2.0までは、クリック時のイベント処理としてonReleaseにイベントハンドラを設定すれば、そのムービークリップにロールオーバーすると自動的にカーソルが指カーソルになるようになっていました。

　ところがActionScript 3.0からはマウスイベント処理をaddEventListenerメソッドで行うようになりました。それに伴いMouseEvent.CLICKにコールバック関数を設定しただけではロールオーバー時にマウスカーソルの形が変わらなくなっています。

　ロールオーバー時に指カーソルになるようにするには、次に示すように、buttonModeパラメータをtrueにする必要があります。

buttonMode = true;

　リンクボタンには、このコードを設定することを忘れないでください。これで、図2-1のようにボタンにマウスカーソルが当たっているときには、矢印カーソルから指カーソルに変わるようになりました。

　さらに、ロールオーバー時にボタンが明滅したりすると、リンクボタンであることをさらに明確にできます。これにより、リンクボタンとしてのアフォーダンスは高まります。

パーティクルを発生させる

　次に、ビールの泡をパーティクルとして出す演出を考えてみます。バナーからマウスカーソルが外れているときには、ランダムで泡を出し、バナーにロールオーバーしているときには図2-2のようにカーソルの位置から泡を出す、というパーティクルをプログラムします。

　今回は、黄色い液体部分をベースのムービークリップとして、そのムービークリップ上に泡オブジェクトを発生させます。

　ベースとなる黄色い液体ムービークリップは、flaファイル内ではBeerMCという名前のムービークリップで作成し、Beerクラスという名前で定義します。これは個別のパーティクルの生成、非表示化などを管理するクラスとします。また、マウスのロールオーバー、ロールアウトのイベント処理も、このクラスが行うようにします。基本的なパーティクル発生はBeer.asに記述します。

　発生した泡オブジェクトは、flaファイル内ではライブラリ内にBeerParticleMCという名前のムービークリップで作成してあり、これをBeerParticleクラスとして定義し、Beerクラス内で泡発生時にインスタンス化されます。泡の挙動は自ら毎フレームチェックして、上方に移動していくようにします。ステージから外れ、見えなくなったら、消滅フラグを立て、毎フレーム処理を停止します。

　泡の動きは、炭酸飲料の泡っぽく微妙に揺れる感じをrandom関数で指定し、また、上方に上がるにつれ少しずつ大きくなるように演出をつけておきます。

　以上で、Flashファイルは完成ですので、flaale-banner01.swfと名前をつけてパブリッシュします。最後にswfファイルを張り付けるHTMLと、その管理を簡単にするために必要なJavaScriptファイルを準備します。