フローティング型のブログパーツを作ろう

2009年2月20日(金)
山下 美緒

Flashを可変ステージサイズ対応にする

 それでは、次にFlash内の処理をみてみましょう。時計表示や、背景の切り替わりについては、通常のFlashコンテンツと同様です。ここではステージサイズが変更しても対応できるようにする方法について解説します。

 先ほどフローティングFlashをHTMLページ上に表示する仕組みを説明しました。この場合、Flashのステージサイズは常にブラウザのウィンドウに対して100%のサイズで表示されることになります。

 そのため、最初にページを開いたとき、ウィンドウをリサイズしたときなど、それぞれのタイミングによってFlashのステージサイズが変わります。

 それに対応するためにFlashを最初に読み込んだときとウィンドウをリサイズしたときには、Flashのステージサイズを取得して各要素の位置やサイズを調整します。

 今回のサンプルでは、各オブジェクトに対してこのような設定を行っています。

・時計を表示しているムービークリップは、常に画面の中央に配置
・背景のムービークリップは、ステージサイズに対して100%の大きさで表示

 具体的なActionScriptの記述方法は、図3にてご確認ください。

ブログへ貼(は)り付けよう

 最後に、ブログページへの貼り付けタグについて確認してみましょう。今回の貼り付けタグは下記のようになります。また、スクリプト内のURLは、仮で挿入していますので、適宜変更を加えてください。





 今回はJavaScriptが3ファイル分あります。それぞれの処理が実行されるタイミングの問題もありますので、必ずこの順番で記述するようにしてください。

 これで、一通りのフローティングブログパーツの完成です。

 次回の記事では、このフローティングの仕組みを応用したブログパーツの作り方について説明したいと思います。

株式会社ピクルス
大学卒業後、JAの金融窓口の事務を2年間行った後、一念発起しWebの世界へ飛び込む。eラーニングコンテンツの制作会社やWeb系の制作会社を経て、2007年より(株)ピクルスに勤務。現在は、広告キャンペーン系のサイトの企画/制作、特にFlashやXHTML/CSSなどのWebコンテンツ全般の実装を行っている。ブログパーツを中心としたデジタルアイテムの配信サイト「くるくるパーツ(http://parts.kuru2jam.com/)」も運営中。最近は、上越線が気になっています。
http://www.pickles.tv/

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

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

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

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