ActionScript によるアプリケーションの構築

アプリケーションを構築するための ActionScript の作成プロセスでは、シンタックスや使用するクラス名を確認する以外の作業が必要です。ほとんどの Flash Platform のマニュアルには、この 2 つのトピック(シンタックスと ActionScript クラスの使用)についての説明があります。しかし、ActionScript アプリケーションを作成するには、次のような情報も把握する必要があります。

  • ActionScript の作成に使用できるプログラム

  • ActionScript の構成方法

  • ActionScript コードをアプリケーションに含める方法

  • ActionScript アプリケーションの開発時に従うべき手順

コードの構成オプション

ActionScript 3.0 のコードを使用すると、簡単なグラフィックアニメーションから複雑なクライアント/サーバートランザクション処理システムまであらゆるものを強化できます。 ActionScript をプロジェクトに含める場合、構築中のアプリケーションの種類に応じて、様々な方法を選択できます。

Flash Professional タイムラインのフレームへのコードの保存

Flash Professional では、タイムラインのフレームに ActionScript コードを追加できます。追加したコードは、ムービーの再生中に、再生ヘッドがそのフレームに移動すると実行されます。

フレームに ActionScript コードを配置すると、Flash Professional に組み込まれているアプリケーションにビヘイビアーを簡単に追加できます。メインタイムラインのフレームまたは MovieClip シンボルのタイムラインのフレームに、コードを追加できます。 しかし、こうした柔軟性を持たせると問題がでてきます。 大規模なアプリケーションを構築する場合、どのフレームにどのスクリプトが入っているかを見逃しがちになります。 このような複雑な構造にすると、時間の経過に伴いアプリケーションを維持するのがより困難になります。

多くの開発者は、タイムラインの先頭フレーム内のみまたは Flash ドキュメントの特定のレイヤー上のみにコードを配置して、Flash Professional で ActionScript コードの構成を簡略化します。コードを分離することで、Flash FLA ファイルのコードが見つけやすくなり、メンテナンスも簡単になります。ただし、コードをコピーして新しいファイルにペーストしない限り、同じコードを別の Flash Professional プロジェクトで使用することはできません。

作成した ActionScript コードを今後別の Flash Professional プロジェクトで使用できるようにするには、外部 ActionScript ファイル(拡張子 .as のテキストファイル)にコードを保存します。

Flex MXML ファイルへのコードの埋め込み

Flash Builder などの Flex 開発環境では、ActionScript コードを Flex MXML ファイルの <fx:Script> タグの中に含めることができます。ただし、大きなプロジェクトでこのテクニックを使用すると、プロジェクトが複雑になり、同じコードを別の Flex プロジェクトで使用しづらくなります。作成した ActionScript コードを今後別の Flex プロジェクトで使用しやすくするには、外部 ActionScript ファイルにコードを保存します。

注意: <fx:Script> タグには、ソースパラメーターを指定することができます。ソースパラメーターを使用すると、ActionScript コードが <fx:Script> タグに直接入力されたかのように、外部ファイルから ActionScript コードを「読み込む」ことができます。ただし、再利用できなくなるので、使用するソースファイルでカスタムクラスを定義することはできません。

ActionScript ファイルへのコードの保存

プロジェクトに重要な ActionScript コードが含まれている場合、別の ActionScript ソースファイル(.as 拡張子のテキストファイル)でコードを編集するのが最適です。 ActionScript ファイルは、アプリケーションで予定される用途に応じて次のいずれかの方法で構築できます。

  • 構造化されていない ActionScript コード:タイムラインスクリプトまたは MXML ファイルに直接入力されたかのように記述された、ステートメントまたは関数定義などの ActionScript コードの行。

    この方法で記述された ActionScript は、ActionScript の include ステートメントまたは Flex MXML の <fx:Script> タグを使用してアクセスできます。ActionScript の include ステートメントは、外部 ActionScript ファイルのコンテンツを、スクリプト内の特定の場所の指定されたスコープ内に挿入します。この処理の結果は、コードを直接入力した場合と同じになります。MXML 言語では、ソース属性に <fx:Script> タグを使用することで、アプリケーションのそのポイントでコンパイラーがロードする外部 ActionScript を特定することができます。例えば、次のタグは Box.as という外部 ActionScript ファイルをロードします。

    <fx:Script source="Box.as" />
  • ActionScript クラスの定義:メソッドとプロパティの定義を含む ActionScript クラスの定義。

    クラスを定義する場合、クラスのインスタンスを作成し、そのプロパティ、メソッド、イベントを使用することで、クラスの ActionScript コードにアクセスできます。カスタムクラスを使用することは、組み込まれている ActionScript クラスを使用することとまったく同じです。これには 2 段階の操作が必要です。

    • どこを検索するのかを ActionScript コンパイラーが認識できるように、import ステートメントを使用してクラスの完全な名前を指定します。例えば、ActionScript で MovieClip クラスを使用するには、完全な名前を指定し、そのクラスをパッケージとクラスを含めて読み込む必要があります。

      import flash.display.MovieClip;

      または、MovieClip クラスを格納したパッケージを読み込むこともできます。この操作は、パッケージ内の各クラスに import ステートメントを個別に記述することと同じです。

      import flash.display.*;

      コードでクラスを使用するにはそのクラスを読み込む必要があるというルールには 1 つだけ例外があります。それは、トップレベルのクラスです。これらのクラスは、パッケージで定義されていません。

    • 明示的にクラス名を使用するコードを記述します。例えば、データ型としてそのクラスを使用する変数を宣言するか、その変数に格納するクラスのインスタンスを作成します。ActionScript コード内のクラス名を使用して、コンパイラーにそのクラスの定義をロードするように指示します。 例えば、Box という外部クラスがあるとすると、このステートメントによって Box クラスのインスタンスが作成されます。

      var smallBox:Box = new Box(10,20);

      コンパイラーは、Box クラスへの参照を初めて検出したときに、利用可能なソースコード内でその Box クラスの定義を探します。

適切なツールの選択

ActionScript コードの作成や編集には、多くのツールの中から 1 つのツールを選んで使用することも、いくつかのツールを一緒に使用することもできます。

Flash Builder

Adobe Flash Builder は、Flex フレームワークでのプロジェクトの作成や、主に ActionScript コードから構成されるプロジェクトの作成に最適のツールです。視覚的なレイアウトと MXML 編集機能のほか、Flash Builder には、機能が完備された ActionScript エディターがあります。Flash Builder は、Flex プロジェクトまたは ActionScript 専用プロジェクトの作成にのみ使用できます。Flex が提供する様々な利点の 1 つに、豊富な機能セットがあります。例えば、構築済みのユーザーインターフェイス制御機能や柔軟な動的レイアウト制御機能、リモートデータを操作し、外部データをユーザーインターフェイス要素に結合するためのビルトインメカニズムなどがあります。ただし、このような機能を提供するにはコードの追加が必要になるので、Flex を使用するプロジェクトは、Flex を使用しない同等のプロジェクトに比べて、SWF ファイルのサイズが大きくなることがあります。

Flash Builder は、機能完備のデータ駆動型の高度なインターネットアプリケーションを Flex で作成する場合に使用します。また、ActionScript コードの編集、MXML コードの編集、アプリケーションの視覚的なレイアウトの作業すべてを 1 つのツール内で実行する場合に使用します。

Flash Professional を使用して大量の ActionScript コードを使用するプロジェクトを作成する場合、通常は、ビジュアルアセットの作成に Flash Professional を使用し、ActionScript コードのエディターとして Flash Builder を使用します。

Flash Professional

Flash Professional には、グラフィックとアニメーションを作成する機能に加えて、ActionScript コードを操作するためのツールが含まれています。コードは、FLA ファイル内のエレメントか、外部 ActionScript 専用ファイル内のエレメントに割り当てることができます。Flash Professional は、アニメーションまたはビデオを大量に使用するプロジェクトに最適です。また、グラフィックアセットの大半を自分で作成する場合にも役に立ちます。他にも、同じアプリケーション内にビジュアルアセットとコードの両方を作成する場合には、ActionScript プロジェクトの開発に Flash Professional を使用すると便利です。Flash Professional には、さらに、構築済みのユーザーインターフェイスコンポーネントも用意されています。これらのコンポーネントを使用して、プロジェクトの SWF ファイルサイズを小さく抑え、視覚的なツールを使用してファイルにスキンを適用することができます。

Flash Professional には、ActionScript コードを記述するための 2 つのツールが含まれています。

  • アクションパネル:FLA ファイルを操作する場合に選択可能なこのパネルは、タイムラインのフレームにアタッチされた ActionScript コードを作成する場合に使用します。

  • スクリプトウィンドウ:スクリプトウィンドウは、ActionScript コードファイル(.as)の操作専用のテキストエディターです。

サードパーティー ActionScript エディター

ActionScript(.as)ファイルは単純なテキストファイルとして保存されているため、プレーンテキストファイルの編集機能を備えたプログラムであればどのプログラムでも、ActionScript ファイルの作成に使用できます。アドビ システムズ社の ActionScript 製品以外に、ActionScript 専用の機能を備えた複数のサードパーティーテキスト編集プログラムが作成されています。MXML ファイルまたは ActionScript クラスは、どのテキストエディタープログラムを使用しても作成できます。 その後、Flex SDK を使用して、作成したファイルからアプリケーションを作成できます。このようなプロジェクトでは、Flex または、ActionScript 専用のアプリケーションを使用できます。また、開発者によっては、グラフィカルコンテンツを作成する Flash Professional と、ActionScript クラスを作成する Flash Builder またはサードパーティ製の ActionScript エディターを組み合わせて使用することもあります。

サードパーティ製の ActionScript エディターを使用する理由は、次のとおりです。

  • ActionScript は別のプログラムで作成し、ビジュアルエレメントは Flash Professional でデザインする場合。

  • ActionScript 以外のプログラミング用のアプリケーションを使用していて、ActionScript のコーディングにもそのアプリケーションを使用する必要がある場合(他のプログラミング言語で HTML ページの作成やアプリケーションの構築を行う場合など)。

  • ActionScript 専用プロジェクトまたは Flex プロジェクトを、Flash Professional も Flash Builder も使用せずに、Flex SDK を使用して作成する場合。

ActionScript 専用のサポートを行う主なコードエディターには、次のようなものがあります。

ActionScript の開発プロセス

ActionScript プロジェクトの大小に関わらず、アプリケーションの設計および開発のためのプロセスを活用すると、より効率的かつ効果的に作業を進めることができます。次の手順では、ActionScript 3.0 を使用するアプリケーションを構築するための基本的な開発プロセスを説明します。

  1. アプリケーションを設計します。

    アプリケーションの作成を開始する前に、何らかの方法でアプリケーションを記述する必要があります。

  2. ActionScript 3.0 コードを構成します。

    ActionScript コードは、Flash Professional、Flash Builder、Dreamweaver、テキストエディターのいずれかを使用して作成できます。

  3. Flash プロジェクトまたは Flex プロジェクトを作成して、コードを実行します。

    Flash Professional では、FLA ファイルを作成し、パブリッシュ設定を行ってから、ユーザーインターフェイスコンポーネントをアプリケーションに追加して、ActionScript コードを参照します。Flex では、MXML を使用してユーザーインターフェイスコンポーネントを追加し、ActionScript コードを参照します。

  4. ActionScript アプリケーションをパブリッシュし、テストします。

    アプリケーションのテストでは、開発環境からアプリケーションを実行し、意図したことがすべて実行されていることを確認します。

これらの手順は、順番どおりに実行しなくてもかまいません。また現在の手順を完全に終了せずに次の手順を開始してもかまいません。例えば、まず、アプリケーションの画面の設計を行ってから(手順 1)、グラフィック、ボタンなどを作成(手順 3)します。その後で、ActionScript コードを作成し(手順 2)、テストする(手順 4)ことができます。また、画面の一部を設計し、次に、ボタンまたはインターフェイスの ActionScript を作成し、構築しながらテストすることで、これらのエレメントを一度に 1 つずつ追加することもできます。開発プロセスのこの 4 つの手順は、覚えておくと役に立ちます。実際の開発では、必要に応じて、手順を行う順序を適宜入れ替えると効果的です。