PR

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

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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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

コンテンツ上に広がるバナーの作り方 | Think IT(シンクイット)

Think IT(シンクイット)

サイトに予期せぬエラーが起こりました。しばらくたってから再度お試しください。