Flashでサイトを制作する。これが当たり前のようになってきた。最近のブロードバンド化により、通信環境に対する問題が軽減され、今までHTMLベースでやってきたことがFlashにシフトし、より豊かな表現が可能になってきたのだ。表現の幅は確実に広がっている。オリジナリティあふれる表現を見つけだそう。
藤牧 篤 ATSUSHI FUJIMAKI
Web制作会社にてデザイナーとして経験を積む。
2001年、フリーで活動を開始し、現在、NON-GRIDにてアートディレクションから制作までをこなす。
NON-GRID >>
http://www.non-grid.com/
ARCHI-TYPE >>
http://www.archi-type.com/
■バックナンバーへ
■
VOL.16 [ Type Connect : 映像をつなげて(1) ]
前回まで2パターンの映像を作ってきた。バックナンバーを見てもらえると分かると思うが、違いは映像が画面全体を使っているかどうかにある。それらを素材にして今回から、アプリケーションの構築を行っていきたい。まずはサンプルの映像を見ていただきたい。キーボードの操作によって映像を入れ替えて遊ぶことのできる機能をもったものだ。映像制作からインタラクティブな機能付加を行えるFlashならではの作品ではないだろうか。今回から、数回に分けてこの作品の制作を行っていく。また、最終的にどういう展開が出来るか、アウトプットも考えながら作っていきたい。
まずは、設計段階を説明していく。あとは次回から必要になってくるので、前回までを参考に、素材になる映像を適当に数種類、作成し用意しておいてほしい。
1. 設計
まずは仕組みをどうするかを考えていこう。使用するキーと映像の種類、必要な機能などをどう組み合わせていくかがポイントとなる。大きく分けて２種類の映像を使用し、それらが重なって表示されるようにしている。
メインとなる映像(メインレイヤー)と、その上に重なるような映像(サブレイヤー)だ。これらをどのキーを押したら再生されるかを決めていく。そして各レイヤーをオフにするボタンも用意している。
各機能の説明
2. 機能をまとめる
それでは各レイヤーごとにみていこう。まずはサブレイヤー。ここで用意した6種類の映像を切り替えることが出来る。この映像切り替え用のキーには「Q、W、E、I、O、P」を使用する。そしてこのレイヤーをオフにするためのキーに「Enter」を使用する。
次にメインレイヤー。ここでも別の6種類の映像を切り替えることが出来る。この映像切り替え用のキーには「A、S、D、J、K、L」を使用する。そしてこのレイヤーをオフにするためのキーに「Space」を使用する。
各キーに割り当てた映像
3. インターフェイス
たとえば、この作品をWEBで公開したとしよう。キーボードを操作する、という稀なアクションであるため、なるべくユーザが直感的に理解できるように、キーボードの配置をあまり崩さずにデザインしていくのがいいだろう。また、アルファベットの記述もしておくことでよりわかりやすくなる。この辺を踏まえて、自分の好みも加えながら構築していく。
インターフェイスの元になった絵
VOL.16 [ Type Connect : 映像をつなげて(1) ] 終わり
w
