yoppa.org

Web動画表現技法 2009

第６回：インタラクティブ・リアクティブ

これまで学んできたFlashのアニメーションは、時間に沿って決まった動きを繰りかえすという「伝統的な」アニメーションの枠内に留まるものでした。

Fhashでは、こうしたアニメーションの要素に加えて、ユーザの何らかの動作に反応してアニメーションを行うようにプログラミングしていくとが可能です。これはFlashを用いてユーザインタフェイスを作成したり、インタラクティブな作品を作る際の基本となります。

今日の授業では、簡単なインタラクティブなムービーの作成を通して、Flashでのプログラミングの基本を学びます。

リアクティブ・グラフィックス：ユーザの動作に反応する画像

先週までFlashでアニメーションを作る基礎を(駆け足で)学んできました。コンピュータの画面上で物体を動かすことができるようになりました。しかしながら、まだこの状態では高度な「紙芝居」に過ぎません。どんなに作りこんだとしても、それはひとつの決った時間の流れのなかで、あらかじめ決定された動きをするだけです。このままでは表現できる情報には限界があり、あまり多くのことを伝えることができません。

MITメデイアラボの教授である前田ジョンは、デザインに関する考察のなかで「リアクティブ(reactive)」という概念をキーワードにその可能性について述べています。

科学の先生に「生物とは、刺激に反応するものである」と覚えさせられた。知性をひけらかすのに大げさな表現が効果的だと考える年頃だった私は、すぐさまそれを大切に頭にしまい込んでおいた。何年もの後、私が学問としてデザインのありかたを理解しようとしていた時のことである。従来対立していた二つの陣営が、従来のデザイン手法や主張はもはや通用しないのではないかという点で知らないうちに共通の認識に達しているらしいことがわかってきた。研究者のグループは、カップやスプーンをデザインするのと同じ感覚では、現在の情報量の豊かなまのに取り組むことはできないと言う。現場のデザイナーは、物の機能が何千と挙げられる時代には「形態は機能に従う」原則など適合しないと主張する。デザインの境界領域からのアプローチが登場し、さらに「インタラクション」デザインというものも生まれてきた。デザインの対象が複雑になるだけでなく、デザインのプロセスも同様に複雑になる。このような中で途方に暮れているとき、先生の言葉が突如よみがえった。どんな生物も「反応する」。コンピュータもだ。

John Maeda MAEDA @ MEDIA 株式会社デジタローグ 2000 p81より引用

ここでいう「リアクテイブ」という概念は「インタラクティブ」という言葉に置き換えてもよいでしょう。ユーザの動作にコンピュータが「反応(リアクティブ)」することで、デザインの可能性は飛躍的に向上します。今回は、Flashで「リアクティブ」なグラフィックを作る実験をします。

参考リンク

「反応」する四角形

まず始めに、最もシンプルな「反応」の例をみてみましょう。

0528_01.gif

製作テンプレートのダウンロード

20071126-sample0528_pre.fla.zip

このフラッシュムービーは、3つの状態から成り立っています。その状態の切り替えは、「Action!」ボタンとマウスポインタの関係によって変化します。それは次の3つの関係です。

  1. ボタンとマウスポインタとの接触がない状態
    → 四角形は静止
  2. マウスポインタがボタンに重なった状態
    → 四角形ブルブル
    マウスポインタがボタンから離れた状態
    → 四角形静止に戻る
  3. マウスポインタがボタンをクリックした状態
    → 四角形は爆発(!)

この3つの状態を模式化すると以下の図のようにまとめられます。

0528_02.gif

ここでムービをコントロールするために、いくつかの命令が出てきました。(「止まれ」「○○へ行け」など)

Flashでは、ムービーを希望通りのルールに従って動作させるために使用するために、ActionScriptという独自のスクリプト言語を用います。スクリプトを習得することで、Flashムービーの中で複雑な処理を実行することが可能となります。

このムービーの例では、多きく分けて2種類のスクリプト群からなりたっています。１つは、ムービーの制御に関するもの、もう１つはマウスの操作に関する命令です。それぞれを列挙すると以下に分類されます。

  • ムービーの時間制御に関する命令

    • 止まれ
    • ○○へ行け(戻れ)
  • ボタンの操作に関する命令

    • マウスがボタンに接触したら、○○へ行け
    • マウスがボタンをクリックしたら、○○へ行け

以下でそれぞれの命令をActionScriptで表現してみます。

ムービーの時間制御に関する命令

この例では、ムービーの時間制御に関する命令をフレームに割りあてています。フレームに割当てられたスクリプトをフレームスクリプトと呼びます。フレームスクリプトは再生ヘッドがそのフレームに達っしたときに実行されます。このサンプルで使用されているフレームスクリプトは以下の2つです。

止まれ：ムービーの停止

ムービーの停止をするには、stop()という命令を用います。この命令をムービにあてはめるには以下の手順で行ないます。

  1. アクションを割り当てるフレーム、ボタンインスタンス、またはムービークリップインスタンスを選択します。
  2. [アクション] パネルが表示されていない場合は、[ウィンドウ]-[アクション] を選択して表示します。[アクション] パネルがノーマルモードでない場合は、[表示オプション] ポップアップメニューからノーマルモードを選択します。
  3. [アクション] ツールボックスで、[アクション] カテゴリ、[ムービーコントロール] カテゴリの順にクリックして、stop アクションをダブルクリックします。
    アクションがフレームに割り当てられている場合、次のコードがスクリプトペインに表示されます。

    stop();

○○へ行け(戻れ)：フレームのジャンプ

ムービーで特定のフレームやシーンにジャンプするには、goto アクションを使います。ムービーがフレームにジャンプしたときに、ジャンプ先のフレームからムービーを再生する (デフォルト) か、またはそのフレームで停止するかを指定するパラメータを選択できます。エキスパートモードでは、goto アクションはgotoAndPlay および gotoAndStop の 2 つのアクションとして [アクション] ツールボックスに表示されます。また、ムービーは、シーンにジャンプして、指定されたフレーム、または次のシーンか前のシーンの最初のフレームを再生できます。

フレームまたはシーンへジャンプするには :

  1. アクションを割り当てるフレーム、ボタンインスタンス、またはムービークリップインスタンスを選択します。
  2. [アクション] パネルが表示されていない場合は、[ウィンドウ]-[アクション] を選択して表示します。[アクション] パネルがノーマルモードでない場合は、[表示オプション] ポップアップメニューからノーマルモードを選択します。
  3. [アクション] ツールボックスで、[アクション] カテゴリ、[ムービーコントロール] カテゴリの順にクリックして、goto アクションをダブルクリックします。
    スクリプトペインに gotoAndPlay アクションが自動的に挿入されます。
  4. ジャンプの後もムービーの再生を続けるには、パラメータペインで、デフォルトで選択されている [Go To and Play] オプションを選択したままにしておきます。ジャンプ後ムービーを停止するには、[Go to and Stop] オプションを選択します。
  5. パラメータ領域の [シーン] ポップアップメニューで、ジャンプ先のシーンを指定します。
    [次へ] または [戻る] を選択した場合、再生ヘッドは次または前のシーン内の最初のフレームにジャンプします。カレントシーンまたは名前を付けたシーンを選択した場合は、ジャンプ先の再生ヘッドにフレームを用意する必要があります。
  6. パラメータ領域の [タイプ] ポップアップメニューで、ジャンプ先のフレームを選択します。
    • [次のフレーム] または [前のフレーム] で、次または前のフレームへのジャンプ先フレームを設定します。
    • [フレーム番号]、[フレームラベル]、または [式] でフレームを指定できます。式は、1 + 1 のような、値が生じるステートメントの任意の部分です。
  7. 手順 6 のフレームパラメータボックスで [フレーム番号]、[フレームラベル]、または [式] を選択した場合は、フレーム番号、フレームラベル、またはフレーム番号やフレームラベルの値を求める式をフレームパラメータに入力します。
    次のアクションでは、再生ヘッドがフレーム 50 にジャンプします。そこで、再生が続行します。

    gotoAndPlay(50);

    次のアクションでは、再生ヘッドはアクションが含まれるフレームの 5 つ先のフレームにジャンプします。

    gotoAndStop(_currentframe + 5);

ボタンの操作に関する命令

ボタンをクリックしたときやボタンの上にマウスポインタを重ねたときに、ムービーが実行されるようにするには、ボタンにアクションを割り当てます。アクションは、ボタンのインスタンスに割り当ててください。こうすると、シンボルのその他のインスタンスに影響しません。

ボタンにアクションを割り当てる場合、on ハンドラ内にアクションをネストし、アクションを実行するマウスイベントまたはキーボードイベントを指定する必要があります。ノーマルモードでボタンにアクションを割り当てる場合、on ハンドラが自動的に挿入され、リストからイベントを選択できます。

ボタンにアクションを割り当てるには :

  1. ボタンを選択し、[アクション］ パネルが開いていない場合は、[ウィンドウ]-[アクション] を選択して [アクション] パネルを開きます。または、[アクション］ パネルのジャンプメニューから、ボタンまたはムービークリップのインスタンスを選択することもできます。
  2. アクションを割り当てるには、次のいずれかの操作を行います。
    • [アクション] パネルの左側の [アクション] ツールボックス内のフォルダをクリックします。アクションをダブルクリックして、パネルの右側のスクリプトペインに追加します。
    • [アクション] ツールボックスからスクリプトペインにアクションをドラッグします。
    • [+] ボタンをクリックして、ポップアップメニューからアクションを選択します。
    • [+] ボタンのポップアップメニューのアクションの横に表示されているキーボードショートカットを使用します。
  3. パネルの最上部にあるパラメータテキストボックスで、必要に応じてアクションのパラメータを入力します。
    パラメータは、選択するアクションによって異なります。各アクションの必須パラメータの詳細については、[ヘルプ] メニュー内のオンライン ActionScript 辞書を参照してください。ムービークリップのターゲットパスをパラメータテキストボックスに挿入するには、スクリプトペインの上にある [ターゲットパスの挿入] ボタンをクリックします。詳細については、ムービークリップとボタンの処理を参照してください。
  4. 必要に応じて、手順 2 と手順 3 を繰り返し、追加のアクションを割り当てます。

サンプルムービにスクリプトを割りあてる

では実際にサンプルムービーにスクリプトをあてはめていきましょう。下に図示したように、このサンプルではタイムラインの各所に、フレームスクリプト、ボタンスクリプト合わせて5箇所にスクリプトを記入していきます。

0528_03.gif

それぞれのスクリプトは以下のようになります。

スクリプト1、 スクリプト3(フレームスクリプト)
「止まれ」

stop();

スクリプト2(フレームスクリプト)
「フレーム2に戻れ」

gotoAndPlay(2);

スクリプト4(ボタンスクリプト)
「ボタンにマウスが重なったら、ムービーを再生せよ」

on (rollOver) {
play();
}

スクリプト5(ボタンスクリプト)
「ボタンをマウスクリックしたら、フレーム7へ行け」
「ボタンからマウスが離れたら、フレーム1へ戻れ」

on (rollOut) {
gotoAndStop(1);
}
on (release) {
gotoAndPlay(7);
}

完成ファイルのダウンロード

20071126-sample0528_fin.fla.zip