Flashでサイトを制作する。これが当たり前のようになってきた。最近のブロードバンド化により、通信環境に対する問題が軽減され、今までHTMLベースでやってきたことがFlashにシフトし、より豊かな表現が可能になってきたのだ。表現の幅は確実に広がっている。オリジナリティあふれる表現を見つけだそう。
藤牧 篤 ATSUSHI FUJIMAKI
Web制作会社にてデザイナーとして経験を積む。
2001年、フリーで活動を開始し、現在、NON-GRIDにてアートディレクションから制作までをこなす。
NON-GRID >>
http://www.non-grid.com/
ARCHI-TYPE >>
http://www.archi-type.com/
■バックナンバーへ
■
VOL.22[ IMG Explore : ズーム(3) ]
前回までで、パーツの作成が終わった。それらを組み合わせ、今回アクションを設定して完成となるので、初めて読む方はバックナンバーの設計とパーツ作成に目を通してもらいたい。今回設定するアクションは、それほど取っつきにくいモノでもないと思う。だから、ぜひ頑張って完成させてほしい。そして、自分なりの使い方を見つけてほしい。
1. 各パーツの構築
前回までに作成した、ズーム用画像、ナビゲーション用画像、ドラッグエリア、倍率変化、これらをメインのタイムラインに配置する。そして、ズーム用画像のイスタンス名を「mapL」、ナビゲーション用画像のイスタンス名を「mapS」、ドラッグエリアのインスタンス名を「zoom」とする。ズーム用画像はステージサイズでマスクをかけ、表示に区切りが出来るようにしておこう。
メインのタイムラインに配置した各インスタンスとインスタンス名
2. 各パーツの連携
次に、インスタンス「zoom」に図のようなオブジェクトアクションを記述する。このアクションがポイントとなる。まず上2行は、インスタンス「zoom」とインスタンス「mapL」の位置関係を補正するアクションだ。これがあることで、インスタンス「zoom」を好きな場所に配置することが出来る。そして中2行は、インスタンス「mapS」とインスタンス「zoom」のサイズからドラッグ範囲を算出している。「zoom」内でのドラッグ範囲の制限に使われる値だ。最後下2行は、インスタンス「mapL」の位置を決めるものだ。「zoom」の位置と設定されている倍率で算出される。10という値は拡大縮小率で、「mapS」の10倍が「mapL」であるため、この数値になっている。
インスタンス「zoom」に記述したオブジェクトアクション
3. 初期設定
読み込みが終わり、一番最初に表示されるときに必要な初期値をフレームに設定する。最後の行は倍率で、値は100%だ。テキストボックスに数値が入力されるたびにこの変数の値が変化する。
メインのタイムライン内に記述したフレームアクション
最後に、適当なデザインを加えて完成だ。
VOL.22 [ IMG Explore : ズーム(3) ] 終わり