リキッドデザインという言葉はご存じですか?昨今流行しているCSS等を利用してブラウザのサイズに合わせてデザインを調整するサイズ可変デザインです。

テレビや紙面にはない観覧するパソコンの環境によって変わる縮尺やアスペクト比を極力飲み込んで、ベストビューに近づけるという発想で特に情報系のホームページに向いていると言われています。しかし世のFlashはと言うと、リキッドデザインとは無縁の領域を漂っていたと言っても過言ではありません!Flashは流行には敏感でなければいけないんです!

前段がくどくなりましたが今回はFlashにおけるリキッドデザインを行う基本パーツを作成し設定を行い、Flashのリキッドデザイン化を行います。
完成イメージ
リキッドデザインを採用したFlash。ここをクリックすると別ウィンドウを開きます
Adobe Flash8.0を使用してサンプルを作成しています。
(.flaファイルはページの最後でダウンロードできます)

リキッドデザイン化のためのStep1 
Flashをサイズ可変表示にするためのHTML

ブラウザのウィンドウサイズいっぱいに広がり、Flash内のオブジェクトの縮尺が変わらないようにするための設定を行います。これにはFlashをホームページに配置する「<Object>」タグを設定する必要があります。 もちろんパブリッシュ設定でも行うことは可能です。まずはパブリッシュ設定から確認していきましょう。
赤枠で囲んだ箇所を修正します。
上図の、赤枠で囲んだ箇所を修正します。
サイズの箇所を「パーセント」、幅「100」*高さ「100」パーセントに設定します。伸縮の箇所を「拡大・縮小なし」に指定します。

次にHTMLで指定する場合を確認します。以下のHTMLを参照してください。
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%" id="オブジェクト名" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="ファイル名.swf" /> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <param name="salign" value="lt" /> <param name="bgcolor" value="#eeeeee" /> <embed src="ファイル名.swf" quality="high" scale="noscale" salign="lt" bgcolor="#eeeeee" width="100%" height="100%" name="オブジェクト名" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /
</object>
これは最も基本的なObjectタグの構造です。

まず1行目「width="100%" height="100%"」の箇所で値を「100%」に修正します。
続いて5行目「<param name="scale" value="noscale" />」の値を「noscale(拡大縮小なし)」に変更してください。同様に下から2行目のembed内で「scale="noscale"」、「width="100%"」、「height="100%"」に変更します。

また、次項にも関連しますがオブジェクトの配置位置を考える上で、ステージの左上が基準点(Flash上の縦0,横0)となる方が管理しやすいですよね。この場合、上から6行目に「<param name="salign" value="lt" />」、下から2行目に「salign="lt"」を追加します。

Flash上からパブリッシュ設定を行う場合は出来ませんが、HTMLを直接変更すれば、「縦600px、幅100%」と言った指定も可能です。

次のページでは残り二つのリキッドデザイン化するための知識をお伝えします。