Flash術
Flashでサイトを制作する。これが当たり前のようになってきた。最近のブロードバンド化により、通信環境に対する問題が軽減され、今までHTMLベースでやってきたことがFlashにシフトし、より豊かな表現が可能になってきたのだ。表現の幅は確実に広がっている。オリジナリティあふれる表現を見つけだそう。
fujimaki 藤牧 篤   ATSUSHI FUJIMAKI
Web制作会社にてデザイナーとして経験を積む。
2001年、フリーで活動を開始し、現在、NON-GRIDにてアートディレクションから制作までをこなす。


NON-GRID >> http://www.non-grid.com/
ARCHI-TYPE >> http://www.archi-type.com/
若命 宏一 Wakame Kouichi
現在某デザイン事務所にて、デザインを勉強中、
asterouteで個人活動もする。
趣味が完全に仕事になっている「幸せな奴」。
asteroute > > http://www.asteroute.com
■バックナンバーへ
■VOL.70 [ MOTION ARCHITECTURE : 自由に並べたムービーをプレイする(5)]

■VOL.71 [ MOTION ARCHITECTURE : 自由に並べたムービーをプレイする(6)]

VOL.72 [ MOTION ARCHITECTURE : 自由に並べたムービーをプレイする (7) ]
今週のサンプル
[今回のサンプルはこちら]

 今回は、タイムラインとなるドロップエリアと、ドラックの出来る各ムービーのサムネールを制作していく。

1. ドロップエリアの作成

 まずは、ドロップエリアとなるムービークリップをつくる。ここでポイントとなるのはグラフィックの基準点を0,0にしておくことだ。
新規シンボルでムービークリップを作成し、幅50pixel、高さ30pixelのグラフィックを描画する。

parts
▲ドロップエリアのもととなる四角形を描画
 次に、先ほど作成したムービークリップをコピーアンドペーストでメインのタイムラインに配置していく。ここでのポディションが吸着の際に必要になる座標となる。
parts
▲ドロップエリアをメインのタイムラインに配置
 そして、配置した各ムービークリップにインスタンス名とアクションを図のように設定していく。「hitTest」は接触したかどうかを判定するアクションだ。
 これでドラックエリアの完成だ。
parts parts parts parts parts
▲タイムラインとなるムービークリップ
左から1、2、3、4、5(クリックで拡大)
2. サムネールの作成
 今度は、サムネールとなるパーツを作成していく。
新規シンボルでボタンを作成し、ドロップエリア1つ分と同じ大きさのボタンを作る。
capture

▲サムネール用のボタンを作成

 次に、新規シンボルでムービークリップを作り、先ほど作ったサムネール用のボタンを配置する。そして、図のようにオブジェクトアクションを設定していく。
アクション内の「oldX、oldY」の値にメインのタイムラインに配置する際のそれぞれの座標を入れている。これがドロップエリア外でドロップした時にサムネイルが戻る座標になる。
サムネールのグラフィックには、ムービーの内容が簡単に分かるようにムービーの1コマを小さくしたものを描画した。
1parts 2parts 3parts 4parts 5parts
6parts 7parts 8parts 9parts 10parts
▲各ムービー用のデザインとオブジェクトアクション
(クリックで拡大)

これでサムネイル部分が完成した。
次回は、テキストフィールド部分を作成していく。

[Page top]