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

2009年2月17日(火)
山田 宏道

採用した実装方法

次に、プレビュー、オーバーレイ両方のdiv内に同じswfファイルを表示させる方法を考えてみます。つまり、「プレビューにはFlashの一部分をクリッピングして表示し、オーバーレイ用にその拡大部分を表示する」という方法です(方法3)。

HTMLコードに書くJavaScriptコードは図2-1のようになります。

SWFObjectのembedSWF関数を使い、SWFの一部分だけを表示するには、表示サイズを指定した上で、Flashプレーヤーオブジェクトに渡されるパラメータ群の内、scaleパラメータ、およびsalignパラメータを指定する必要があります。

これを指定しないと、スケーリングされてしまったり、スケーリング時の基点が不定になるかもしれませんので、スケーリングしないで、左上をHTML上で合わせることを明記します。図2-1のコードで定義しているflashparamsという変数が、それに当たります。これをembedSWF関数に渡すのですが、この変数は8番目の引数であり、前回は書かなかった引数についても書いておく必要があります。

SWFObjectのドキュメントページを見ると、以下のようになっています。

swfobject.embedSWF(swfUrl, id, width, height, version,
expressInstallSwfurl, flashvars, params, attributes);

versionと引数は表示するのに最低限必要とするバージョンで、「9.0.0」を指定します。expressInstallSwfurlというのは、SWFObjectと一緒に配布されているSWFを置いたパスを指定します。flashvarsは指定しないので、デフォルトの引数として空の配列({})を渡します。そして、paramsに前述したflashparams変数を渡します。

改善手段

このような表示部分のコードを書いた上で、図2-2に示すようなJavaScriptによりオーバーレイ部分の表示切り替えを行ってみます。

Flashからは、ExternalInterfaceを介してtoggleOverlay()を呼びます。

しかし上記のコードではFlash内でアニメーションさせているときに問題が発生します。オーバーレイを表示しているときに、下側となるプレビュー部分でアニメーションが発生すると、一部ブラウザ上では、そのアニメーション部分が上部に表示され、画像が崩れてしまうことがあるのです。

この問題の対策として、「オーバーレイ表示をさせるときに下部のFlashのアニメーションを止める」という改善手段もありますが、そのためのFlashバナーとJavaScriptの通信処理が複雑になり、あまりスマートではないでしょう。

そこで、最後に方法3の改善手段を考えます(方法4)。

アニメーションを「させたり、させなかったり」はFlash、JavaScript共に開発工程が多くなりそうです。それよりもっとシンプルな方法として、「オーバーレイ部分を表示しているときには、プレビュー部分を非表示にする」方法を試してみます(方法4)。

id_preview_swfで指定したdiv要素を非表示にしても良さそうなのですが、なぜかこれでは一部のブラウザ上でうまく処理されませんので、このdiv要素をくくるsuper_banner_frameというidを持つdiv要素を定義します(図2-1のバナーエリア用部分)。

1975年生まれ。千葉大学工学部卒業。ゲームプログラマーを経て、2004年よりフリーランスになり、必要に応じてさまざまなプログラム言語をつまみ食い。ActionScript 3.0になってからFlashに未来を感じ、Web関連を中心に仕事を承り中。 http://d.hatena.ne.jp/octech/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています