Flash CS4 のリソース

例: アニメーションポートフォリオピース

目次 [非表示]

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

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

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

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

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

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

インタラクティブ要素を追加するために FLA をセットアップするには

インタラクティブ機能を追加する線状アニメーションがまだ存在しない場合は、シングルモーショントゥイーンやシェイプトゥイーンなどの単純なアニメーションを含む新しい FLA ファイルを作成します。アニメーションがある場合は、プロジェクトで表示するアニメーションを含んでいる FLA ファイルを開き、新しい名前で保存して、新しい作業ファイルを作成します。
2 つのボタン（アニメーションを開始するボタンと、作者のポートフォリオやホームページにリンクするボタン）を表示する画面上の位置を決めます。必要な場合は、ステージ上にこの新しいコンテンツのためのスペースを作ります。アニメーションにスプラッシュ画面がない場合は、最初のフレームにスプラッシュ画面を作成することもできます（その場合、アニメーションがフレーム 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 で SWF ファイルが作成され、Flash Player ウィンドウで開かれます。
両方のボタンが期待通りに機能するか確認してみます。
ボタンが機能しない場合は、以下の点を確認してください。
- 両方のボタンのインスタンス名が同じになっていませんか。
- addEventListener() メソッド呼び出しで使用される名前がボタンのインスタンス名と同じになっていますか。
- addEventListener() メソッド呼び出しで使用されるイベント名は正しいですか。
- それぞれの関数に対して正しいパラメータが指定されていますか (どちらにも、データ型 MouseEvent のパラメータが 1 つ指定されている必要があります)。
このような間違いがあると、[ムービープレビュー] コマンドを選択したときやボタンをクリックしたときにエラーメッセージが表示されます。 [コンパイルエラー] パネルでコンパイルエラー (初めて [ムービープレビュー] を選択したときに発生するエラー) がないかどうかを確認し、[出力] パネルでランタイムエラー (ユーザーがボタンをクリックしたときなど、SWF の再生中に発生するエラー) がないかどうかを確認してください。