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.64 [MX tech 3 : ラインを作成する(2)]

■VOL.65 [MX tech 3 : ラインを作成する(3)]

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

 今回から、サイトの一つのコンテンツとして、また、スタンドアローンなアプリケーションとしても使えそうな作品を紹介する。用意した10個のムービーをタイムライン上に好きな順番で並べていき、プレイボタンを押すと並べた通りのムービーが展開される、ユーザが自らストーリーを作れるようなインタラクティブな作品だ。ムービー部分を静止画にすれば、スライドショーにもなる。
WEB上での展開のされかたとしては、これにバックのシステムを組み込み、グリーティングカードのような形で、作成したムービーを友達などに見せる事が出来るものを、何度か見た覚えがある。そこまで行くと非常に大がかりになってくるが、Flash内だけでも十分楽しめる作品に仕上がると思う。

1. 操作行為から構造・パーツへ

 まずは、パーツや仕組みを作っていく上で必要な構造を整理しよう。何をどう操作するか、何と何がどう連動するか、といった最終的な操作行為が整うことで、必要なパーツ、必要なアクションが見えてくるはずだ。
以下に、それをまとめてみた。

  1. 10個あるムービーのサムネールから一つを選び、5フレームあるタイムラインのどこかへドラッグアンドドロップする。
  2. ドラッグしたサムネールは選択したフレームに表示位置が移る。
  3. フレーム外にドラッグすれば選択が解除される。
  4. テキストを入力する。
  5. 入力したテキストを表示させるフレームをクリックして選択。
  6. PLAYボタンをクリックしてムービーを再生。
  7. 選択した順番でムービーとテキストが再生する。
  8. STOPボタンで停止。

パーツとして必要となるのは、

  • ムービーを選択するためのドラッグ可能な10個のサムネール
  • ドラッグされたサムネールを受け入れる5フレームのタイムライン
  • テキストを入力するボックス
  • テキストを表示させる5フレームのタイムライン
  • PLAYボタン
  • STOPボタン
  • 選択したテキストとムービーを再生するエリア。
parts
▲ムービーサムネール
parts
▲ムービー用タイムライン
parts
▲テキスト入力ボックス
parts
▲テキスト用タイムライン
parts
▲コントロールボタン
parts
▲再生エリア
2. 連動させる仕組み

 次に、パーツをどう連動させるかを整理する。
今回重要なのは、5フレームあるタイムライン上に、どのムービー、テキストが選択されているのかだ。再生エリアは、それらを参照できるようになっていれば、自然と連動する。

capture

構造

これをもとに、次回からパーツを作成していこう。