フローティング型のブログパーツを作ろう
Flashを可変ステージサイズ対応にする
それでは、次にFlash内の処理をみてみましょう。時計表示や、背景の切り替わりについては、通常のFlashコンテンツと同様です。ここではステージサイズが変更しても対応できるようにする方法について解説します。
先ほどフローティングFlashをHTMLページ上に表示する仕組みを説明しました。この場合、Flashのステージサイズは常にブラウザのウィンドウに対して100%のサイズで表示されることになります。
そのため、最初にページを開いたとき、ウィンドウをリサイズしたときなど、それぞれのタイミングによってFlashのステージサイズが変わります。
それに対応するためにFlashを最初に読み込んだときとウィンドウをリサイズしたときには、Flashのステージサイズを取得して各要素の位置やサイズを調整します。
今回のサンプルでは、各オブジェクトに対してこのような設定を行っています。
・時計を表示しているムービークリップは、常に画面の中央に配置
・背景のムービークリップは、ステージサイズに対して100%の大きさで表示
具体的なActionScriptの記述方法は、図3にてご確認ください。
ブログへ貼(は)り付けよう
最後に、ブログページへの貼り付けタグについて確認してみましょう。今回の貼り付けタグは下記のようになります。また、スクリプト内のURLは、仮で挿入していますので、適宜変更を加えてください。
今回はJavaScriptが3ファイル分あります。それぞれの処理が実行されるタイミングの問題もありますので、必ずこの順番で記述するようにしてください。
これで、一通りのフローティングブログパーツの完成です。
次回の記事では、このフローティングの仕組みを応用したブログパーツの作り方について説明したいと思います。