| Flashでサイトを制作する。これが当たり前のようになってきた。最近のブロードバンド化により、通信環境に対する問題が軽減され、今までHTMLベースでやってきたことがFlashにシフトし、より豊かな表現が可能になってきたのだ。表現の幅は確実に広がっている。オリジナリティあふれる表現を見つけだそう。 |
 |
|
|
|
|
| ■VOL.5
[ Worm Type Navigation : 癖のある動きをもったナビゲーション(ver.1)
] |
|
|
|
ユーザとの接点として必要となってくるナビゲーションは、使用頻度が高いため、求められるものがたくさんある。コンテンツを分かりやすく反映した構成だったり、カーソルに反応するボタンの動き、気持ちの良い操作感が期待を煽る。サイトの世界観にあった細部の動きを盛り込むとき、実在する生物や普段行う動作をモチーフにしたりすることがあるだろう。メニュー構成をチェックし、コンテンツ全体を把握する。そこから出てくるアイデアもあるだろう。
今回は、「hitTest」。このコマンドは、ゲームのプログラムによく使用される、衝突判定をおこなうものだ。これをナビゲーションに使って、生き物のようなちょっと癖のある動きをつけてみる。メニュー構成は3カテゴリ×3コンテンツを想定し、制作を進めていく。今回の作品は、フレームレート:30で制作を行っているのが、もっと細かなニュアンスを出したい方はレートを上げて、制作を行って欲しい。 |
|
| 1. 必要なパーツの作成 |
| ナビゲーションのパーツから作成していこう。まずは、各コンテンツへのメニューボタンを必要な分、作成する。「bg」レイヤーに配置したシンボルはボタンである。マウスイベントによるアクションはここへ記述することになる。 |
|
同じシンボルを必要な分作成する |
|
| 次に、メニューボタンをまとめたムービークリップを作成する。新規シンボルでムービークリップを作り、コンテンツごとにレイヤーを用意し、目指す動きをモーショントゥイーンで付けていく。ラベル「on」からが、マウスオーバーしたときの動き、ラベル「off」からが、マウスアウトしたときの動きになる。今回は、後に設定する「hitTest」の特性が分かるように、マウスオーバーとマウスアウトに大きく差が出るような動きを考えた。マウスアウト時はメニューボタンが隠れ、マウスオーバー時に飛び出てくる設定だが、途中にキーフレームを入れてスピードに差を付けている。この部分はフレームレート、キーフレーム位置、フレーム数、トゥイーンのバランスでガラッと変わってくると思うので、自分にあった数値を見つけて欲しい。
|
|
メニューボタンをまとめたカテゴリのムービークリップ |
|
| 次は、カテゴリをコントロールするムービークリップを作成する。新規シンボルでムービークリップを作り、カテゴリ名を示すテキストとバックの帯を作成する。1フレーム目がマウスオーバー時のフレームで、2フレーム目がマウスアウト時のフレームとなる。「on」レイヤーの2フレーム目にだけ挿入されているシンボルは、先ほど作成したメニューボタンに動きをつけたムービークリップだ。インスタンス名は「navon」。こうすることでマウスオーバー時だけ再生される仕組みになる。これと同じムービークリップをカテゴリ分作成する。 |
|
カテゴリをコントロールするムービークリップ |
|
|
|
|
