例：アニメーションポートフォリオピース（Flash Professional）

インタラクティブ機能を追加する準備
ボタンの作成と追加
コードの作成
アプリケーションのテスト

この例は、ActionScript のピースをつないで、完全なアプリケーションを作成する方法を示す最初の例です。アニメーションポートフォリオピースは、既存のリニアアニメーションに小さなインタラクティブなエレメントを追加します。例えば、クライアント用に作成したアニメーションをオンラインポートフォリオに組み込むことができます。アニメーションに追加するインタラクティブビヘイビアーには、ユーザーがクリックできる 2 つのボタンが含まれます。1 つはアニメーションを開始するボタンで、もう 1 つは別の URL（ポートフォリオメニューや作者のホームページなど）に移動するボタンです。

このピースを作成するプロセスは、以下のメインセクションに分けることができます。

ActionScript とインタラクティブなエレメントを追加するための FLA ファイルを準備します。
ボタンを作成して追加します。
ActionScript コードを作成します。
アプリケーションをテストします。

インタラクティブ機能を追加する準備

アニメーションにインタラクティブなエレメントを追加する前に、FLA ファイルに新しいコンテンツを追加する場所を作成しておくと便利です。このタスクには、ボタンを配置する実際の場所をステージに作成する作業が含まれます。さらに、様々なアイテムを個別に保持できるように、FLA ファイル内に「スペース」を作成する作業も含まれます。

インタラクティブなエレメントを追加するために FLA をセットアップするには

シングルモーショントゥイーンやシェイプトゥイーンなどの単純なアニメーションを含む FLA ファイルを作成します。FLA ファイルが既に存在し、そのファイルにプロジェクトに表示するアニメーションが含まれている場合は、そのファイルを開いて、別の名前を付けて保存します。
2 つのボタンを表示する画面上の位置を決めます。1 つはアニメーションを開始するボタンで、もう 1 つは作者のポートフォリオやホームページにリンクするボタンです。必要な場合は、ステージ上にこの新しいコンテンツのためのスペースを作成します。アニメーションに起動画面がない場合は、最初のフレームに起動画面を作成することもできます。その場合、アニメーションがフレーム 2 以降から始まるように、アニメーションをシフトします。
タイムラインの他のレイヤーの上に新しいレイヤーを追加して、buttons という名前を付けます。このレイヤーが、ボタンを追加するレイヤーになります。
buttons レイヤーの上に新しいレイヤーを追加して、actions という名前を付けます。これが、アプリケーションに ActionScript コードを追加する場所になります。

ボタンの作成と追加

次に、インタラクティブアプリケーションの中核となるボタンを実際に作成して、配置する必要があります。

ボタンを作成して、FLA に追加するには

描画ツールを使用して、buttons レイヤーの最初のボタン（「play」ボタン）の外観を作成します。例えば、横長の楕円形を描いて、楕円形の中にテキストを入力します。
選択ツールを使用して、1 つのボタンのすべてのグラフィックパーツを選択します。
メインメニューから、変更／シンボルに変換を選択します。
ダイアログボックスでシンボルのタイプとして「ボタン」を選択し、シンボルに名前を付けて、「OK」をクリックします。
プロパティインスペクターでボタンを選択し、ボタンに playButton というインスタンス名を付けます。
手順 1 ～ 5 を繰り返して、作者のホームページに移動するためのボタンを作成します。このボタンに homeButton という名前を付けます。

コードの作成

このアプリケーションの ActionScript コードは 3 つの機能セットに分けることができますが、すべて同じ場所に入力されます。このコードでは、次の 3 つのことを行う必要があります。

SWF ファイルが読み込まれたら（再生ヘッドがフレーム 1 に入ったら）、すぐに再生ヘッドを停止します。
イベントを監視し、ユーザーが再生ボタンをクリックしたときに SWF ファイルの再生を開始します。
イベントを監視し、ユーザーが作者ホームページボタンをクリックしたときにブラウザーを適切な URL に移動します。

フレーム 1 に入ったときに再生ヘッドを停止するコードを作成するには

actions レイヤーのフレーム 1 のキーフレームを選択します。
メインメニューから、ウィンドウ／アクションを選択して、アクションパネルを開きます。
スクリプトペインに次のコードを入力します。
```
stop();
```

再生ボタンがクリックされたときにアニメーションを開始するコードを作成するには

前の手順で入力したコードの末尾に、空白行を 2 行追加します。
スクリプトの末尾に、次のコードを入力します。
```
function startMovie(event:MouseEvent):void 
{ 
    this.play(); 
}
```
このコードでは、startMovie() という名前の関数を定義します。startMovie() が呼び出されると、メインタイムラインが再生を開始します。
前の手順で追加したコードの次の行に、次のコード行を入力します。
```
playButton.addEventListener(MouseEvent.CLICK, startMovie);
```
このコード行は、startMovie() 関数を playButton の click イベントのリスナーとして登録します。言い換えると、playButton という名前のボタンがクリックされるたびに startMovie() 関数が呼び出されるようにします。

ホームページボタンがクリックされたときにブラウザーを URL に移動するコードを作成するには

前の手順で入力したコードの末尾に、空白行を 2 行追加します。
スクリプトの末尾に、次のコードを入力します。
```
function gotoAuthorPage(event:MouseEvent):void 
{ 
    var targetURL:URLRequest = new URLRequest("http://example.com/"); 
    navigateToURL(targetURL); 
}
```
このコードは、gotoAuthorPage() という名前の関数を定義します。この関数は、まず http://example.com/ という URL を表す URLRequest インスタンスを作成します。次に、その URL を navigateToURL() 関数に渡します。これによって、ユーザーのブラウザーでその URL が開きます。
前の手順で追加したコードの次の行に、次のコード行を入力します。
```
homeButton.addEventListener(MouseEvent.CLICK, gotoAuthorPage);
```
このコード行は、gotoAuthorPage() 関数を homeButton の click イベントのリスナーとして登録します。言い換えると、homeButton という名前のボタンがクリックされるたびに gotoAuthorPage() 関数が呼び出されるようにします。

アプリケーションのテスト

この時点で、アプリケーションは完全に機能します。テストして、確認してみましょう。

アプリケーションをテストするには

メインメニューから、制御／ムービープレビューを選択します。Flash Professional で SWF ファイルが作成され、Flash Player ウィンドウで開きます。
両方のボタンが期待どおりに機能するか確認してみます。
ボタンが機能しない場合は、以下の点を確認してください。
- 両方のボタンのインスタンス名が同じになっていませんか。
- addEventListener() メソッド呼び出しで使用される名前がボタンのインスタンス名と同じになっていますか。
- addEventListener() メソッド呼び出しで使用されるイベント名は正しいですか。
- それぞれの関数に対して正しいパラメーターが指定されていますか (どちらのメソッドでも、データ型 MouseEvent のパラメーターが 1 つ指定されている必要があります)。
上記のような問題があると、エラーメッセージが表示されます。エラーメッセージは、「ムービープレビュー」コマンドを選択するか、プロジェクトのテスト中にボタンをクリックしたときに表示されます。コンパイルエラーパネルで、コンパイルエラー (初めて「ムービープレビュー」を選択したときに発生するエラー) がないかどうかを確認してください。また、出力パネルで、ユーザーがボタンをクリックしたときなど、コンテンツの再生中に発生するランタイムエラーがないかどうかを確認してください。