コンテンツ上に広がるバナーの作り方
採用した実装方法
次に、プレビュー、オーバーレイ両方の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のバナーエリア用部分)。