初めてのFlash Professional CS5ドキュメントの作成

Adobe Flash Professional CS5は、ユーザーの操作を可能にするプレゼンテーション、アプリケーションおよび他のコンテンツを作成するためにデザイナーや開発者が使用するオーサリングツールです。Flashプロジェクトには、シンプルなアニメーション、ビデオコンテンツ、複雑なプレゼンテーション、アプリケーションおよびそれらに関するすべてを含めることができます。一般に、Flash Professionalで作成したコンテンツの個々の部分は、基本的なアニメーションにすぎなくても、アプリケーション（またはSWFアプリケーション）と呼ばれます。画像、サウンド、ビデオおよび特殊効果を含めることによって、メディアの豊富なアプリケーションを作成できます。

SWFフォーマットは、ファイルのサイズがきわめて小さいため、インターネットでの配布に最適です。これは、ベクターグラフィックを活用することによって実現されています。ベクターグラフィックは、大きなデータセットでなく数式で表現するので、ビットマップグラフィックよりも大幅に少ないメモリおよび記憶域しか必要としません。ビットマップグラフィックが大きいのは、イメージ内の個々のピクセルがそれを表現するのに別のデータを必要とするからです。

FLAファイルの作成とグラフィックの追加

Flash Professional CS5でアプリケーションを作成するには、ベクターグラフィックとデザイン要素を描画ツールで作成し、オーディオ、ビデオ、画像などの追加のメディア要素をドキュメントに読み込みます。次に、構想中のアプリケーションを作成するために各要素をどのような場合に、どのような方法で使用するかを定義します。

Flash Professionalでコンテンツを作成する際には、FLAファイルと呼ばれるドキュメントを使用します。FLAファイルには、ファイル拡張子.fla（FLA）が付いています。FLAファイルを表示する場合、Flash CS4 Professionalのユーザーインターフェイス（図1を参照）は、5つの主要な部分から構成されます。

• ステージは、再生時にグラフィック、ビデオ、ボタンなどが表示される場所です。
• タイムラインは、ムービーの要素がステージ上に現れるタイミングを制御します。ステージでグラフィックを重ねる順序も、タイムラインを使用して指定します。上位レイヤーにあるグラフィックは、下位レイヤーにあるグラフィックの上に表示されます。
• Tools（ツール）パネルには、ステージ上のオブジェクトを選択し、ベクターグラフィックを描画するための一般的なツールセットが用意されています。
• Properties（プロパティ）パネルには、選択したオブジェクトに関する編集可能な情報が表示されます。
• Library（ライブラリ）パネルには、メディア要素やシンボルが保管され、整理されています。

図1. Flash Professional CS5のユーザーインターフェイスの5つの主要な部分

ActionScriptコードを使用すれば、ドキュメント内のメディア要素にインタラクティビティを追加できます。例えば、ユーザーがボタンをクリックすると新しいイメージが表示されるようにするコードを追加できます。ActionScriptを使用して、アプリケーションにロジックを追加することもできます。ロジックを使用すると、ユーザーのアクションやその他の条件に従って、アプリケーションを様々な方法で動作させることができます。Flash Professionalでは、ActionScript 3またはAdobe AIRファイルを作成する場合にはActionScript 3、ActionScript 2ファイルを作成する場合にはActionScript 1および2が使用されます。

Flashには、強力で使いやすい様々な機能が備わっています。例えば、作成済みのドラッグ＆ドロップユーザーインターフェイスコンポーネント、タイムライン上での要素のアニメーション化に使用できる組み込みのモーションエフェクト、メディアオブジェクトに追加できる特殊効果などです。

FLAファイルの作成が終了したら、File（ファイル）／Publish（パブリッシュ）コマンド（Shift+F12）を使用してパブリッシュします。この操作によって、拡張子.swf（SWF）が付いた、ファイルの圧縮バージョンが作成されます。これで、Flash Playerを使用して、SWFファイルをWebブラウザーで、またはスタンドアローンアプリケーションとして再生できます。

単純なFLAファイルの作成

ここでは、FLAドキュメントを作成する基本的な手順を説明するために、簡単なチュートリアルでそのプロセスを紹介します。この短いチュートリアルは、Flash Professionalでのオーサリング中に使用するワークフローの単なる一例です。最初の手順では、新規ドキュメントを作成します。

1. File（ファイル）／New（新規）を選択します。
2. New Document（新規ドキュメント）ダイアログボックスでは、ActionScript 3.0ファイルタイプがデフォルトで選択されています（図2を参照）。ActionScript 3.0が選択されていない場合は選択します。「OK」をクリックします。

3. 画面右上隅のワークスペースドロップダウンメニューをクリックし、Essentials（初期設定）ワークスペースレイアウトオプションを選択します（図3を参照）。この操作により、Flash Professionalの画面が、このチュートリアルのスクリーンショットと同じレイアウトになります。

4. ユーザーインターフェイスの右上にある「Properties（プロパティ）」タブをクリックして、ファイルのステージプロパティを表示します。
5. プロパティインスペクターでは、「サイズ」ボタンの現在のステージサイズ設定が550×400ピクセルとして表示されます（図4を参照）。プロパティインスペクターは、デフォルトではワークスペースの右端を占めます。背景の色見本は白に設定されています。色見本をクリックして、別の色を選択すると、ステージの色を変更できます。

ヒントFlashムービーのステージの背景色を設定するには、Modify（変更）／Document（ドキュメント）コマンドを使用するか、ステージを選択して、Properties（プロパティ）パネルでステージの色フィールドを変更します。背景色の長方形を描画する必要はありません。ムービーをパブリッシュしたときに、Flash ProfessionalがHTMLページの背景色をステージの背景と同じ色に設定します。

6. File（ファイル）／Save（保存）を選択します。
7. ハードディスク上のファイルを保存する場所を選択し、ファイルにSimpleFlash.flaと名前を付けて、「保存」をクリックします。このチュートリアルの最後にこのディレクトリを見つける必要があるので、この場所を忘れないでください。

ステージ上での円の描画

ドキュメントを作成したら、アートワークをドキュメントに追加できる状態になります。

シェイプの描画は、Flashでは一般的な作業です。描画ツールを使用すると、いつでも編集できるベクターグラフィックが作成されます。以下の手順では、後でアニメーションで使用する円を作成する方法を示します。

1. Tools（ツール）パネルからOval（楕円）ツールを選択します（図5を参照）。

2. プロパティインスペクターで線の色見本をクリックし、線のカラーピッカーから「No Color（カラーなし）」オプションを選択します（図6を参照）。

3. 線のカラーピッカーのすぐ下にある塗りのカラーピッカーから任意のカラーを選択します。必ず、塗りのカラーがステージのカラーと対照的になるようにしてください。この例では、ステージのカラーが赤で、塗りのカラーに青を選択しました。
4. 楕円ツールを選択した状態で、ステージでShiftキーを押しながらドラッグし、円を描きます（図7を参照）。Shiftキーを押したままにすると、楕円ツールの動きが円に固定されます。

ヒント：円を描画する際に塗りのカラーが表示されず、輪郭だけが表示される場合、まずプロパティインスペクターで楕円ツールのプロパティの線と塗りのオプションが正しく設定されていることを確認してください。プロパティが正しい場合、タイムラインのレイヤーエリアで「Show Outlines（アウトラインを表示）」オプションが選択されていないことを確認してください。レイヤー名の右側に、目玉、鍵、アウトラインの3つのアイコンがあります。アウトラインのアイコンが塗り潰されており、輪郭だけでないことを確認します。アイコンをクリックすると表示状態が切り替わります。

シンボルの作成とアニメーションの追加

新しいアートワークをシンボルに変換すると、再利用可能なアセットに変えることができます。シンボルは、ドキュメント内のどこでも再利用でき、再作成する必要のないメディアアセットです。シンボルには、画像、アニメーション、その他のタイプのコンテンツを含めることができます。

初めの段階では、トゥイーンアニメーションの作成やグラフィックコンテンツの保存にシンボルを使用するのが普通です（これについては以下の手順で説明します）。Flash Professionalの経験を積むにつれて、アプリケーションの構造化や複数のタイムラインによるインタラクティビティの実現にシンボルを使用するようになります。

1. Tools（ツール）パネルのSelection（選択）ツールをクリックします（図8を参照）。

2. ステージで円をクリックして選択します。円の周りに境界ボックスの選択が表示されます。
3. 円が選択された状態で、Modify（変更）／Convert to Symbol（シンボルに変換）を選択する（またはF8を押す）と、Convert to Symbol（シンボルに変換）ダイアログボックスが表示されます（図9を参照）。

   ヒント：グラフィックをシンボルに変換するには、グラフィックを選択してLibrary（ライブラリ）パネルにドラッグする方法もあります。

4. 「OK」をクリックします。円の周りに四角形の境界ボックスが表示されます。これで、シンボルと呼ばれる、ドキュメント内で再利用可能なアセットが作成されました。この場合は、ムービークリップシンボルを作成しました（シンボルの詳細については、Flashオンラインドキュメントのシンボルの操作を参照してください）。

Library（ライブラリ）パネルが表示されていない場合は、Window（ウィンドウ）／Library（ライブラリ）を選択します。新しいシンボルの定義がLibrary（ライブラリ）パネルに表示されます（ステージ上のシンボルのコピーは、シンボルのインスタンスと呼ばれます）。

円のアニメーション化

アートワークをドキュメントに追加したら、アートワークをアニメーション化してステージ全体で移動することによって、さらに面白いものにすることができます。

1. 円をステージ領域のすぐ左側にドラッグします（図10を参照）。

2. ステージ上の円インスタンスを右クリックし、メニューから「Create Motion Tween（モーショントゥイーンを作成）」を選択します。タイムラインが自動的にフレーム24まで延長され、赤いマーカー（現在のフレームインジケーター、すなわち再生ヘッド）がフレーム24に位置付けられます（図11を参照）。これは、タイムラインが1秒の位置、すなわち24 fpsのフレームレートで24フレーム目で編集可能であることを示します（タイムラインの詳細については、Flashオンラインドキュメントのタイムラインの操作を参照してください）。

3. ステージ上の円を選択し、ステージ領域の右側までドラッグします。この操作により、トゥイーンアニメーションが作成されました。フレーム24に菱形の点（プロパティキーフレーム）が表示されることを確認します。また、モーションガイドラインがフレーム1とフレーム24の間のモーションの経路を示していることにも注意してください（図12を参照）。

4. タイムラインで、フレーム1～24の間で赤い再生ヘッドを前後にドラッグし、タイムラインをスクラブして、アニメーションをプレビューします。
5. アニメーションの中間で方向を変えるために、再生ヘッドをフレーム10までドラッグし、円を画面上の別の位置に移動します。モーションガイドラインが変化し、タイムラインのフレーム10に新しい点が現れます（図13を参照）。タイムライン上の点はプロパティキーフレームであり、画面上のオブジェクトが変化する位置（フレーム）と、オブジェクトのどのプロパティが変化するかを示します。

6. モーションガイドラインの形状を変更してみましょう。Tools（ツール）パネルでSelection（選択）ツールをクリックし、モーションガイドラインのセクションの1つをクリックしてドラッグすることにより、ラインを曲げます。モーションガイドラインを曲げると、アニメーションが直線でなく曲線に沿って動くようになります。

7. 制御／ムービープレビューを選択して、FLAファイルをテストします。
8. Test Movie（ムービープレビュー）ウィンドウを閉じます。

停止アクションを使用してタイムラインのループを停止

ここまでで、ムービーを再生するとアニメーションが繰り返しループすることにお気づきかもしれません。これは、特に指定しない限り、Flash Professionalのタイムラインが最後のフレームからフレーム1に戻ることになっているからです。タイムラインを制御するコマンドを追加するには、タイムライン上のキーフレーム（点）にActionScriptコードを追加します。

ヒント：キーフレームは、ActionScriptやアセットをタイムラインの特定のフレームに配置するために使用されます。キーフレームの点を探せば、コンテンツがどこにあるかがすぐにわかります。

次の手順では、最も一般的なタイムラインコマンドである停止アクションを使用して、ActionScriptコードの基礎を紹介します。

1. レイヤーに名前を付けておいた方がわかりやすいので、レイヤー1の名前をanimationに変更します。タイムラインのレイヤー領域のレイヤー名をダブルクリックし、新しい名前を入力します。
2. animationレイヤーの上に、actionsという新しいレイヤーを追加します。Timeline（タイムライン）パネルの左下にあるNew Layer（新規レイヤー）ボタン（ページのアイコン）をクリックします。ActionScript 3ファイルでは、ActionScriptコードはタイムラインに追加する必要があります。ActionScriptコードを保持するための専用のアクションレイヤーを作成しておくのが推奨される方法です。アクションレイヤーにキーフレームを追加することにより、ActionScriptを特定のフレームに関連付けます。
3. 赤い再生ヘッドをフレーム24に移動し、フレーム24のアクションレイヤーをクリックします（アクションレイヤーの最後のフレームが強調表示されているはずです）。Insert（挿入）／Timeline（タイムライン）／Keyframe（キーフレーム）（F6）を選択して、選択位置にキーフレームを挿入します。空のキーフレームが表示されます（ドットが塗り潰されていないので、グラフィックが配置されていないことがわかります）。
4. Selection（選択）ツールで新しいキーフレームを選択し、Actions（アクション）パネルを開きます（Window（ウィンドウ）／Actions（アクション））。Actions（アクション）パネルは、FLAファイルに直接ActionScriptコードを書き込むためのツールです。番号1（1行目）の隣のテキスト領域にカーソルを置き、次のアクションを入力します。

注意：このステップでは、Actions（アクション）パネルのデフォルトモードを使用していることを前提としています。Actions（アクション）パネルがスクリプトアシストモードの場合、Actions（アクション）パネルの右上にある魔法の杖のアイコンのチェックを外して、デフォルトモードに戻してください。

5. アクションを含むキーフレームの上には、小さい「a」のアイコンが表示されます。この時点で、タイムラインは図15のように表示されるはずです。Actions（アクション）パネルを閉じます。キーフレームを選択してActions（アクション）パネルをもう一度開けば、後でいつでもコードの編集に戻れます。
6. Control（制御）／Test Movie（ムービープレビュー）を選択して、FLAファイルをテストします。アニメーションがループしないことを確認します。

7. Test Movie（ムービープレビュー）ウィンドウを閉じます。
8. ファイルを保存します。

ファイルのパブリッシュ

FLAファイルの作成が終了したら、ブラウザーで表示できるようにパブリッシュできる状態になります。ファイルをパブリッシュすると、Flash ProfessionalによってSWFファイル形式に圧縮されます。この形式でWebページに配置します。「パブリッシュ」コマンドを実行すると、適切なタグを含んでいるHTMLファイルを自動的に生成できます。

FLAファイルをパブリッシュしてSWFをブラウザーに表示する方法を示します。

1. File（ファイル）／Publish Settings（パブリッシュ設定）を選択します。
2. Publish Settings（パブリッシュ設定）ダイアログボックスで、「Formats（形式）」タブを選択し、FlashとHTMLのオプションのみが選択されていることを確認します（図16を参照）。このように選択することによって、FlashではSWFファイルとHTMLファイルのみがパブリッシュされます。HTMLファイルは、WebブラウザーでSWFファイルを表示するために使用されます。

3. Publish Settings（パブリッシュ設定）ダイアログボックスで「HTML」タブを選択し、Template（テンプレート）ポップアップメニューで「Flash Only（Flashムービーのみ）」が選択されていることを確認します（図17を参照）。このテンプレートから、ブラウザーに表示されるときのSWFファイルのみが含まれている単純なHTMLファイルが作成されます。

4. 「OK」をクリックします。
5. File（ファイル）／Publish（パブリッシュ）を選択して、Web用のファイルをFlashから書き出します。
6. Webブラウザーを開き、File（ファイル）／Open（開く）を選択します。FLAファイルを保存したフォルダーに移動します。このフォルダーにはSimpleFlash.swfファイルとSimpleFlash.htmlファイルが格納されています。SimpleFlash.htmlというファイルを選択します。
7. 「開く」をクリックします。アプリケーションがブラウザーウィンドウに表示されます（図18を参照）。

図18.SimpleFlash.swfアニメーションサンプルのファイルをパブリッシュしてブラウザーに表示したところ（ボタンをクリックするともう一度再生されます）

これで、最初のFLAファイルが完成しました。ドキュメントのパブリッシュの詳細については、Flashオンラインドキュメントのパブリッシュと書き出しを参照してください。

アニメーションを再開始するためのリプレイボタンの追加

stop()アクションでアニメーションを停止しましたが、もう一度アニメーションを開始するにはどうすればよいでしょうか（図18の例ではそれが可能です）。アニメーションを再開始するには、いくつかの方法が考えられます。例えば、キーを押す、ステージをクリックする、ボタンをクリックするなどです。これらの手段を実現するには、ActionScriptを使用して実行時にユーザーの操作に応答する必要があります。この節はこれまでの部分よりもやや高度ですが、仕組みを理解するためにぜひ試してみてください。

以下の手順で、「Replay」ボタンとActionScriptをファイルに追加します。

1. ボタン用の新規レイヤーを作成します。Layers（レイヤー）パネルで「New Layer（新規レイヤー）」ボタンをクリックし、Buttonという名前のレイヤーを追加します。
2. Components（コンポーネント）パネルを開き（Window（ウィンドウ）／Components（コンポーネント））、UI Components（UIコンポーネント）フォルダーからステージにボタンコンポーネントをドラッグします。ステージ領域の中央下またはその他好きなところにボタンを配置します。
3. ボタンコンポーネントが選択された状態で、Properties（プロパティ）パネルの上部にある「<Instance Name>（<インスタンス名>）」フィールドにreplay_btnと入力して、ボタンインスタンスの名前を設定します。これは重要な手順です。ボタンインスタンスに名前を付けておけば、後でActionScriptを使ってインスタンスを名前で操作できるからです。
4. Properties（プロパティ）パネルのComponent Parameters（コンポーネントパラメーター）領域のラベルフィールドに、Replayというテキストを入力します。
5. アクションレイヤーのフレーム1のキーフレームをクリックして、アクションパネルに戻ります。次のコードをコピーしてパネルに貼り付けます。

新しいコードには関数ブロックとaddEventListenerメソッドがあります。このメソッドは、ボタンの「クリック」イベントの「イベントリスナー」として関数を登録する役割を果たします。これは、Flash Playerのオブジェクトからのタイミングキューに応答するためのActionScript 3の標準的な形式です。この例では、イベントハンドラー関数は、フレーム1に戻ってタイムラインの再生を再び開始するようにFlash Playerに指示します（インタラクティブボタンを作成する場合は常に、イベントハンドラー関数を作成してボタンインスタンスに割り当てるというこの作業を繰り返します）。

ヒント：Snippets（スニペット）パネルを使用して、ボタンに簡単にイベントを追加することもできます。

6. Control（制御）／Test Movie（ムービープレビュー）を選択して、FLAファイルをテストします。「Replay」ボタンをクリックして、アニメーションを再び開始します。
7. Test Movie（ムービープレビュー）ウィンドウを閉じ、FLAファイルを保存します。

次のステップ

Flash Professional CS5での作業について学ぶには、以下のように様々な方法があります。

• Flashデベロッパーセンターのファーストステップセクションでは、目的に応じて次に何を見るべきかを案内しています。
• Adobe TVのLearn Flash Professional CS5には、Flashで何ができるかを紹介した多数のビデオチュートリアルが用意されています。