デザイナーの観点からのActionScriptへのアプローチ

その他の要件

Fireworks CS4（オプション）

• 体験版
• 購入

デザイナーとアニメーターが、Webやデスクトップ用に優れたビジュアルコンテンツを作成するには、Adobe Flashが欠かせません。多くのデザイナーやアニメーターは、Adobe Creative Suiteによるネイティブファイル形式のサポートを活用したり、タイムラインの機能を最大限に活用しています。それでも、ある時点で多くのFlashユーザーがActionScriptを学習する必要があると感じることでしょう。

まず、ActionScriptの学習で、これまでのFlash Professional、Creative Suiteのトレーニングや投資、または既存のワークフローが無駄になることはないと私が保証します。実際、FlashではActionScriptがサポートされていて、これまでの作業方法が直接サポートされます。

日中、私はアドビで働いています。夜は、サンフランシスコ州立大学で、ActionScript 3を教えています。初めてActionScriptに接する学生に講義する場合、私はいきなりコードを扱うのではなく、まず、いくつかの概念をわかりやすく説明することにしています。学生にAS3の作法を身に付けさせ、学習プロセスをシンプルにする上で役立つからです。では、説明に入りましょう。

人生とタイムラインはリニアだがActionScriptは違う

私がこれまでに出会った、Flashを毎日使用するユーザーのほとんどはタイムラインの達人です。念じれば曲げられるくらい、タイムラインの表裏を知り尽くしています。

タイムラインの1つの側面は「タイム」という名前で示されています。タイムラインはリニアです。これは始点と終点があるという意味です。タイムラインの線状の流れが別のポイントを向くように方向を変えることはできますが、基本的にタイムラインは1つの方向に移動します。

ActionScriptは少し違っているので、コード初心者は混乱するかもしれません。コードで1回に実行されるのは1行だけだというのは事実ですが、アプリケーションのすべてのコードが最初の行から開始して、最後の行まで実行されるわけではありません。ActionScriptでは、タイムラインのフレームを扱う場合とは違い、コマンドを記述してコードの特定の行に戻らせることはできません。

コードを作成して、タイムラインの最初のフレーム（フレームスクリプトとも呼ばれる）に配置するか、ドキュメントクラス（ファイル用のコードを含む別個のActionScriptファイル）を作成する場合、次のように複数の方法でコードを作成できます。

• 最初の行から最後の行まで実行する簡単なコードを作成
• 関数と呼ばれる、名前付きコードのセットを作成
• ステージ上で様々なグラフィックとアニメーションのコンテンツと動作を定義するクラスを作成

ActionScriptについて知れば知るほど、リニアなコードは非常に小さなプロジェクトのみに適した選択肢であることがわかるようになります。

通常、ActionScriptプロジェクトには動作の開始点となる小さなコードがあります。例えば、アプリケーションの主要部分を起動する前に、ユーザーから何らかの情報を取得するといったコードです。その時点から、私が作成するコードは、ユーザーが実行するアクションに基づいて実行されるコードとなります。

例えば、サンプルプロジェクトとして多項選択式のクイズを作成してみましょう。このクイズではユーザーにいくつかの項目が表示されます。問題自体には、4つの選択肢があります（A、B、C、D）。30秒カウントダウンするタイマーを使用することも考えられます。

これで、プロジェクトの流れが次のように明確になりました。

• 問題と解答を表示
• ユーザーが問題に解答
• ユーザーが正しいか間違っているかを表示

この流れはリニアですが、コードの記述はリニアではありません。通常、ActionScriptでコードを作成する場合、私はプロジェクトのイベントに基づいたコードを作成します。

イベントとは、アプリケーション自身が作成するアクション、またはマウスやキーボードの操作によってユーザーが作成するアクションです。プロジェクトで発生する可能性があるアクションを、フローマップや概略図を使用して綿密に計画するのは良い考えです。そうすれば、アプリケーションで何が発生するかを具体的に把握できるからです。

次に例を示します。

• 問題と解答を表示します。30秒のカウントダウンタイマーを開始します。
• タイマーが終了したら、正しい解答をユーザーに表示します。
• ユーザーが正しい解答をクリックしたら、タイマーを停止して、ユーザーにお祝いメッセージを表示します。
• ユーザーが間違った解答をクリックしたら、タイマーを停止して、正しい解答を表示します。

このサンプルプロジェクト用にActionScriptを作成するには、これら4つのイベントを発生させるコードを作成する必要があります。他の言語と異なるのは、プロジェクトでユーザーからの入力が必要になっても、ActionScriptコードの実行は一時停止しない点です。すべてのコードは同時にアクセス可能です。イベント固有のコードを作成すれば、すべてを正しい順番で進行させることができます。

イベントは、ステージ上のオブジェクトによってトリガーされるか、ユーザーがコードで作成してメモリーに存在するオブジェクトによってトリガーされます。ただしステージには表示されません。前者の例としては、マウスのクリックやマウスのポイントを認識するボタンとムービークリップがあります。

後者の例にはタイマーがあります。ステージには表示されませんが（表示させることは可能）、タイマーはメモリに保持され、常に時間を記録しています。タイマーは、時間切れになったことをイベントとしてアプリケーションに通知する必要があります。

これらのイベントを使用すれば、さらにうまく概略図を構築できます。

• アプリケーションが起動されると、問題と4つの解答を表示し、タイマーを起動します。
• マウスが4つの解答ボタンのいずれかの上でクリックされたら、以下を実行します。
• クリックされたボタンが正しい解答かどうかを確認します。
• 選択したボタンが正しい解答であれば、タイマーを停止して、ユーザーにお祝いメッセージを表示します。
• 選択したボタンが正しい解答でなければ、タイマーを停止して正しい解答を表示します。
• タイマーが時間切れになったら、正しい解答を表示します。

これは、基本的には上述した内容と同じですが、さらに多くの事柄をアプリケーションのアクションとイベントという観点で捉えています。ActionScriptと、イベント処理と呼ばれるイベントへの対応の基本について学習するにつれて、アプリケーションのイベントとアクションを綿密に計画することが、その後の時間の節約につながることがわかるはずです。

モノ、物、そしてオブジェクト

Flashでは、ムービークリップ、グラフィック、ボタン、アニメーション、およびその他の要素をステージ上に作成できます。ActionScriptでは、これらはすべてオブジェクトと呼ばれます。ActionScriptを使用するかどうかにかかわらず、オブジェクトはすべてのFlashプロジェクトの基本的な構成要素です。

ムービークリップとボタンはオブジェクトとして既に使い慣れているかもしれませんが、実際はテキストフィールド、データ値、タイマー、そしてプロジェクト自体もすべてオブジェクトです。では、クイズの例を取り上げて、ステージとActionScriptで必要なオブジェクトに分解してみましょう。

レイアウトのパーツを特定するには、概略のスケッチを描いたり、Adobe Fireworksのようなアプリケーションを使用すると便利かもしれません。Fireworksを使用すると、プロジェクトのオブジェクトとレイアウトを追加して、後でFlashに読み込めます（図1参照）。

それでは、画面の項目を順に見ていきましょう。まず問題を表示するテキストフィールドがあります。次に4つのボタンがあります。これらのボタンはそれぞれ内部に、解答候補が表示されるテキストフィールドを持ちます。これらのボタンが、A、B、C、Dの選択肢となります。ユーザーが問題に解答すると、ユーザーへのフィードバックが表示される別のテキストフィールドもあります。カウントダウンタイマーはステージに表示されないため、ここには表示されていません。

他にも考慮の必要があるオブジェクトがいくつかあります。これらは値です。前述したように、データ値も、ここで説明したボタンやテキストフィールドと同じくオブジェクトです。このクイズで私たちが知る必要のある具体的なデータ値は、どの解答が正しいかという情報です。ビジュアルオブジェクトのリストを作成し、非ビジュアルオブジェクトを追加すれば、プロジェクトを構成するオブジェクトをすべて把握することができます。

• 問題のテキスト：テキストフィールド
• 解答A：ボタン
      解答テキスト：テキストフィールド
• 解答B：ボタン
      解答テキスト：テキストフィールド
• 解答C：ボタン
      解答テキスト：テキストフィールド
• 解答D：ボタン
      解答テキスト：テキストフィールド
• カウントダウンタイマー：タイマー
• フィードバックテキスト：テキストフィールド
• 正しい解答：データ

これでアプリケーションのイベントとアクションが定義できました。

全体の統合

様々なビジュアル／非ビジュアルオブジェクトが用意できたので、構築する内容の完全な定義の作成を開始できます。この定義は仕様、またはスペックと呼ばれます。優れたスペックを作成するには、生じるアクションやイベントに基づいて、アプリケーションがすべてのオブジェクトをどう処理するかを定義する必要があります。

Flashを使用する場合は、ステージの上にオブジェクトを作成してから、オブジェクトを変更または操作するコードを作成できます。プロジェクトの一部を構成するビジュアルオブジェクトは、ステージにあらかじめ配置できますが、非ビジュアルオブジェクトの一部は作成する必要があります。これらのオブジェクトもスペックで定義できます。

では、これまでの概略図を参照しながらステップごとに進めてみましょう。

• アプリケーションが起動されると、問題と4つの解答を表示し、タイマーを起動します。

このステップでは、以下の作業を行う必要があります。

1. 問題テキストフィールドオブジェクトに問題を表示します。
2. 4つの選択肢のボタンを表示します。
3. 各ボタンの解答テキストフィールドに解答候補を表示します。
4. カウントダウンタイマーオブジェクトを作成し、タイマーの継続時間を設定して、タイマーを起動します。
5. 正しい解答オブジェクトを作成し、正しい解答、A、B、CまたはDに基づいて値を設定します。

これでアプリケーションの起動が定義できました。これは初期化とも呼ばれます。次にイベント本体に進みます。当初の概略図には、次のイベントが含まれていました。

• 4つの解答ボタンのいずれかの上でマウスがクリックされたら、クリックされたボタンが正しい解答かどうかを確認します。
  • 選択したボタンが正しい解答であれば、タイマーを停止して、ユーザーにお祝いメッセージを表示します。
  • 選択したボタンが正しい解答でなければ、タイマーを停止して正しい解答を表示します。

このイベントには、4つの異なるボタンがあることに注意する必要があります。これらのボタンは、テキストフィールド内部のテキストを除いて、ほぼ同一のボタンです。問題の解答は正しい解答データオブジェクトに含まれていて、フィードバックテキストフィールドを使用して、結果をユーザーに表示する必要があります。

• ユーザーが解答A、解答B、解答C、解答Dのいずれかをクリックしたら、選択された解答が正しい解答データオブジェクトの値と一致しているかを確認します。
  • 値が一致したら、正しくない解答を非表示にして、フィードバックテキストフィールドにユーザーへのお祝いメッセージを表示します。
  • 値が一致しなければ、正しくない解答を非表示にして、フィードバックテキストフィールドにユーザーへのメッセージを表示します。

さらに詳細を追加して、具体化する必要のあるイベントが最後に1つあります。

• タイマーが時間切れになったら、正しい解答を表示します。これは、上述の正しくない解答のオプションとほとんど同じですが、ユーザーではなく、タイマーによってトリガーされる点が異なります。
  
  
• タイマーが時間切れになったら、正しくない解答を非表示にして、フィードバックテキストフィールドにユーザーへのメッセージを表示します。

これで完全な仕様の主な要素が完成しました。簡単なクイズにしてはやや大げさに思われるかもしれませんが、もっと巨大なプロジェクトの作成を始める場合、仕様を作成しておけば、アプリケーションのオブジェクト、アクション、イベントの綿密な計画をあらかじめ行えるため、ActionScriptをより効率的に記述できます。

次のステップ

ActionScriptをすぐ活用するには、私が出演しているAdobe TVシリーズ、ActionScript 1:1 with Doug Winnieをご覧ください。このシリーズでは、ActionScriptを使用したオブジェクトの操作、イベントハンドラーとタイマーの作成、簡単で完全なプロジェクトの作成方法について詳しく説明しています。

この記事を読み終えた皆さんにとって、ActionScriptの習得が見通しのよいものとなっていることを願っています。オブジェクト、つまりイベントの概略という観点でプロジェクトを考えることが、最初のステップです。Fireworksで仕様を作成してモックアップを作成すれば、ActionScriptのトレーニングを大幅にスピードアップできます。また、開発者として今後の作業効率を高めることもできます。ここで紹介したテクニックと、Adobe TVや他のリソースのActionScriptトレーニングを組み合わせれば、Flashプロジェクトでユーザーが必要とするインタラクティブ機能を実現できます。

注意：これはEdge newsletterに掲載された記事です。