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/
■バックナンバーへ
VOL.5 [ Worm Type Navigation : 癖のある動きをもったナビゲーション(ver.1) ]
ユーザとの接点として必要となってくるナビゲーションは、使用頻度が高いため、求められるものがたくさんある。コンテンツを分かりやすく反映した構成だったり、カーソルに反応するボタンの動き、気持ちの良い操作感が期待を煽る。サイトの世界観にあった細部の動きを盛り込むとき、実在する生物や普段行う動作をモチーフにしたりすることがあるだろう。メニュー構成をチェックし、コンテンツ全体を把握する。そこから出てくるアイデアもあるだろう。
今回は、「hitTest」。このコマンドは、ゲームのプログラムによく使用される、衝突判定をおこなうものだ。これをナビゲーションに使って、生き物のようなちょっと癖のある動きをつけてみる。メニュー構成は3カテゴリ×3コンテンツを想定し、制作を進めていく。今回の作品は、フレームレート:30で制作を行っているのが、もっと細かなニュアンスを出したい方はレートを上げて、制作を行って欲しい。
1. 必要なパーツの作成
ナビゲーションのパーツから作成していこう。まずは、各コンテンツへのメニューボタンを必要な分、作成する。「bg」レイヤーに配置したシンボルはボタンである。マウスイベントによるアクションはここへ記述することになる。
capture01-1

同じシンボルを必要な分作成する
次に、メニューボタンをまとめたムービークリップを作成する。新規シンボルでムービークリップを作り、コンテンツごとにレイヤーを用意し、目指す動きをモーショントゥイーンで付けていく。ラベル「on」からが、マウスオーバーしたときの動き、ラベル「off」からが、マウスアウトしたときの動きになる。今回は、後に設定する「hitTest」の特性が分かるように、マウスオーバーとマウスアウトに大きく差が出るような動きを考えた。マウスアウト時はメニューボタンが隠れ、マウスオーバー時に飛び出てくる設定だが、途中にキーフレームを入れてスピードに差を付けている。この部分はフレームレート、キーフレーム位置、フレーム数、トゥイーンのバランスでガラッと変わってくると思うので、自分にあった数値を見つけて欲しい。
capture01-2

メニューボタンをまとめたカテゴリのムービークリップ
次は、カテゴリをコントロールするムービークリップを作成する。新規シンボルでムービークリップを作り、カテゴリ名を示すテキストとバックの帯を作成する。1フレーム目がマウスオーバー時のフレームで、2フレーム目がマウスアウト時のフレームとなる。「on」レイヤーの2フレーム目にだけ挿入されているシンボルは、先ほど作成したメニューボタンに動きをつけたムービークリップだ。インスタンス名は「navon」。こうすることでマウスオーバー時だけ再生される仕組みになる。これと同じムービークリップをカテゴリ分作成する。
capture01-3

カテゴリをコントロールするムービークリップ