コンテンツ上に広がるバナーの作り方

Flash素材を作成し完成

以上の作業を完了できたら、プレビュー時にはSWFのトリミングされた部分が表示され、オーバーレイ時には別div要素内でSWFが表示されるようになります。

これでHTML側の仕組みができあがったので、続いて、それに表示させるFlashのデザインを行いましょう。

と言っても、今回の表示の仕組みはほぼすべてがJavaScriptコード、HTML/CSSコードで実装されているので、Flashバナー部分は基本的に表示される対象を作成するだけとなります。

図3のようなデザインにし、サイズは728x600ピクセルとします。プレビュー時には上部90ピクセルが表示されることを前提とし、その部分にトグルボタンを設置します。このボタンを押すと、JavaScriptで定義したオーバーレイ表示関数が呼ばれるように、次のようにActionScriptを実装します。

ExternalInterface.call( "toggleOverlay" );

これで当初考えていた機能の実装は完了しました。HTMLを指定しブラウザで開くとオーバーレイ表示をトグルできるFlashバナーが表示されると思います。

以上で今回のバナー制作は完了です。

実装における注意点

このバナー表示の仕組みに問題があるとすれば、ブラウザによっては表示／非表示のタイミングでちらつきが発生することがある点です。この問題への対応については対応ブラウザの種類や、アニメーションがあるかどうかなどにも左右されますので、それぞれのケースにより対処法を変えて実装します。

例えば、「バナーエリアに背景画像として、ちらつきが見えにくくなる画像を配置するなどの手法」や、「対応ブラウザとして固定のブラウザを指定し、そのブラウザでちらつきが見られなければ何もしない」という対応も考えられます。

また、現状ではプレビュー時にのみきれいに表示されますが、ウィンドウリサイズしたときに再描画がズレる問題もあります。オーバーレイ表示時にもウィンドウリサイズに対応してきれいに表示させる方法としては、「ウィンドウをリサイズしたらバナーを消す」という方法などがあります。対応方法についてはさまざまありますので、それぞれのケースで対応してください。

最後に、今回書いたJavaScriptのコードについて1つ注意点があります。

banner.jsに記述しているupdateOverlayPos()関数内で、サイズを示す数値の後に「'px'」を付加していますが、これは必須です。パラメータの値なので、数値だけで良いだろうと思いがちですが、基本的にこれらのパラメータは文字列であることが多く、またブラウザによっては数字だけでは認識しないことがあるので、なるべくこのように単位を明確に指定したほうがよいでしょう。

前回までと同様に、今回も完成ファイルをダウンロードできますので、参照ください（827_1.zip/105 KB）。作成するときの参考にしたり、演出アイデアを考えるときのたたき台となれば幸いです。

また、JavaScriptの処理部分にjQueryなどのアニメーションをサポートするJavaScriptライブラリなどを活用すれば、簡単に面白い演出が実現できるでしょう。ただし、サイト閲覧者にとって、バナーによって読んでいたコンテンツが見えなくなったりすると、サイトへの印象が悪くなる可能性がありますので、バナーの広げ方やタイミングには十分注意を払ってください。

【参考文献】

「swfobject」（アクセス：2009/01）