採用した実装方法

採用した実装方法

次に、プレビュー、オーバーレイ両方の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のバナーエリア用部分）。