Migrating from Flash 8 to Flash CS3 Professional
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
目次
- はじめに
- 改善されたワークスペースとユーザーインタフェイス
- ワークスペースの新機能
- ファイル読み込みや他のアドビ製品との連携に関する改善点
- 新しい描画ツール
- Flashビデオに関する強化点
- 新しいActionScript 3.0コンポーネント
- ActionScriptとコードエディタに関する変更点
Adobe® Flash® CS3 Professionalでは、みなさんの作業環境をよりよくするために、多くの新機能追加や機能改善が施されています。エキサイティングなアプリケーションを作成するのに役立つ新しいツールが追加され、Adobe Creative Suite 3に同梱されている他のアドビ製品との連携も強化されています。
この記事では、Flash 8と比較しながら、Flash CS3 ProfessionalではどのようにFlashが進化しているのかを解説します。そのため、ある程度Flashに関する知識を持っているという前提で話をしています。いつでもFlash CS3にアップデートする準備ができているというFlash好きな方は、すぐにでも読み始めてください。強化されたペンツールで絵を描きたいという人でも、ActionScript™ 3.0でコードを書きたいという人でも、まずはこの記事を通して、Flash CS3を使い始める上で知っておくべきことを学びましょう。この記事では特に以下の項目について解説しいてます。
- ワークスペースに関する変更点。ユーザーインターフェイスの新しい特徴、パネルの新しい操作方法、Flashを使いやすくするためのワークスペースの最適化方法など。
- オーサリングに関する新機能。境界ボックスのカラーのコントロール方法、新しいコピー＆ペースト機能、9スライスの強化点など。
- PSDファイルやAIファイルをサポートした、ファイル読み込み機能の改善。Flash とAdobe Device Central CS3を使用した新しいワークフロー。
- 描画ツールに関する改善点。強化されたペンツールや、新しく追加された簡単にシェイプを作成できるプリミティブ描画ツールなど。
- FlashやFlash Video Encoderでの、ビデオコンポーネントやキューポイントに関する改善点。
- 新しいActionScript 3.0コンポーネントとFlash 8のV2コンポーネントの比較。同じコンポーネントアプリケーションを、ActionScript 2.0とActionScript 3.0で作成する方法の違い。
- デバッグツールやコーディングツールの改善点とActionScriptの変更点。ActionScript 2.0とActionScript 3.0の違い。ActionScript 3.0のドキュメントクラスとその使い方。
必要ソフトウェア
この記事では、以下のソフトウェアとサンプルを使用しています。
Flash CS3 Professional
サンプルファイル:
flashcs3_migration.zip (ZIP, 659K)
改善されたワークスペースとユーザーインタフェイス
Adobe Creative Suite 3では、Flashを含むすべての製品で同じユーザーインターフェイスを採用しています。共通した外観であれば、複数の製品に渡って作業する場合でも迷わず作業することができるでしょう。Flashのワークスペースでは、日々のワークフローを効率化しようと、著しい改善が施されています。
非常に多くの変更点がありますが、中でもFlash CS3を始めて起動させたときにまず目につくのが、新しいパネルやタブの外観でしょう。
＜ツールパネル＞
ツールパネルは、初期状態では1列で表示されるようになりました（図1）。画面での作業エリアを広く使えます。
図1: 初期状態では1列で表示されます
ツールパネルの上部にある二重矢印をクリックすれば2列表示に変更できますし（図2）、再度クリックすれば1列表示に戻すことができます。
図2: ツールパネルの上部にある二重矢印をクリックすれば2列で表示されます
ツールパネルには新しいツールが追加されました。詳しくは、この記事の「新しい描画ツール」で解説します。
＜パネルのドッキングとドッキング解除＞
Flash CS3では、以前のバージョンに比べて、より簡単で柔軟なパネルのドッキング操作が可能です。パネルのタブをクリックしながらドラッグするだけで、パネルの位置を変更することができます（まさに、Flashに欲しかった機能ですね）。たとえば、ワークスペースの下の方に表示されるプロパティインスペクタ（メニューの「ウィンドウ／プロパティ／プロパティ」で表示）には、初期状態では3つのパネルがグループ化されていますが、タブをクリックしながらドラッグするだけでタブの並びを変更することができますし、ステージの右側にあるドックへ移動することもできます。パネルを移動させるには、たんにタブをクリックして新しい位置へとドラッグするだけです。Flash 8ではコンテキストメニューでパネルの移動先を指定していました。それと比べると、非常に簡単かつ素早くパネルを移動できるようになりました。
パネルをドッキングから解除するには、そのタブをクリックしながらドラッグして、ドッキングされている位置からワークスペースの任意の場所に移動させます。再度ドッキングさせるには、タブをドラッグして他のパネルのグループの位置や、パネルの上下に移動させます。パネルの挿入位置（他のパネルの上下や、グループ内）は、青いドロップゾーンで示されます。他のパネルの上下の位置に移動させる場合は、線上のドロップゾーンが表示されます。他のパネルとグループ化する場合は、パネルのタイトルバー部分が青でハイライト表示されます。
ノート: Flash CS3では、ステージの右側にあるパネルのカラムを「ドック」と呼びます。
ドック内のカラムを増やすこともできます。パネルをドラッグして、現在のカラムの左側に青いドロップゾーンが表示されたら離します。すると、左側に新しいカラムができ、そこにパネルがドッキングされます（図3と図4）。
図3: ドック内に2つ目のカラムを作成するには、パネルをドラッグして図のように青いドロップゾーンが表示されたら離します
図4: コンポーネントパネルは２つ目のカラムにドッキングされました
Tip: パネルをドッキングから解除するには、そのタブをクリックしながらドラッグして他のパネルから離します。その際、青いドロップゾーンが表示されていないことを確認してから離してください
＜タイムラインの配置を変更＞
モニタ画面のスペースを有効に活用したいという人も多いでしょう。Flash CS3では、タイムラインを柔軟に配置できるようになりました。図5のようにタイムラインをドキュメントから切り離してパネルにし、ステージ領域を拡げることができます。特にアニメーターにとっては役立つ機能でしょう。
(+) 拡大
図5: タイムラインにアクセスしやすい状態にしつつ、ワークスペースでのステージ領域を拡げることが可能です
以下のステップで、タイムラインをドキュメントから切り離し、他のパネルとドッキングさせることができます。
- タイムラインの右上の角にあるフレーム表示ポップアップメニューから「配置／ドキュメントからドッキング解除」を選びます（図6）
図6: フレーム表示ポップアップメニューを使ってタイムラインをドキュメントから切り離します
- タブをクリックしてドラッグしながら、ステージの右側にあるパネルとドッキングさせます。青いドロップゾーンが表示されたらマウスボタンを離してください。
- タイムラインをもとに位置に戻す場合は、フレーム表示ポップアップメニューから「配置／ドキュメントの上」を選びます
- ステージ領域をさらに拡げたい場合は、ドックの右上にある二重矢印をクリックします
ドキュメントからタイムラインを切り離し、ドックをアイコン表示させることで、図5と同じようなワークスペースが確保できます。ステージをほぼ画面いっぱいに拡げつつも、各種ツールやパネルにアクセスできる状態です。タイムラインを初期状態の位置に配置しておきたい場合でも、ドックをアイコン表示させるだけである程度のスペースの確保にはなるでしょう。
＜パネルのスタック＞
また、Flashの新しい機能として、ドッキングを解除してフローティングさせているパネル同士をスタック（積み重ねる）することができるようになりました。以下のステップで、パネルをスタックします。
- パネルをステージ上にドラッグして、青いドロップゾーンが表示されていない状態でマウスボタンを離します。
- ２つ目のパネルをドラッグして、1つ目のパネルの下に移動させます。1つ目のパネルの下に青いドロップゾーンが表示されていることを確認してください（図7）。
図7: 1つ目のパネルの下に青いドロップゾーンが表示されている状態でマウスボタンを離してください
- 青いドロップゾーンが表示されている状態でマウスボタンを離せば、この2つのパネルはスタックされました。1つのまとまったパネルとして、一緒に移動させることができます。
＜パネルのアイコンとボタン＞
Flash CS3では、パネルのタブ内にパネルを閉じる「X」ボタンが実装されました（図8）。閉じたパネルは、Flash 8の場合と同様に、ウィンドウメニューから開くことができます。
図8: パネルのタブ内にある「X」ボタンでパネルを閉じることができます
Flash 8では、パネル名の先頭に矢印があり、これをクリックしてパネルを折り畳んだり展開したりすることができました。Flash CS3では、その代わりにパネルの右上に最小化・最大化ボタンが実装されました。その横には「X」ボタンがあり、パネルグループ全体を閉じることができます（図9）。
図9: パネルの右上にある最小化・最大化ボタンと「X」ボタン
また、パネルのタブをダブルクリックすることでも、パネルを折り畳んだり展開したりすることができます。もしパネルがアイコンモードで表示されている場合は、アイコンをクリックすることで、パネルを折り畳んだり展開することができます
Tip: Flash 8のオプションメニューは、Flash CS3では「パネルメニュー」と呼びます。パネルメニューは各パネルの右上にあります。図9でカーソルが指している箇所です。
Flash 8では、プロパティインスペクタの右下にある三角マークをクリックして、パネルの高さを変更することができました。Flash CS3では、プロパティタブの先頭にある上下矢印をクリックして、最大化、半分サイズ、最小化の3段階で高さを調整することができます。
図10: 上下矢印をクリックしてプロパティインスペクタの高さを調節できます
＜パネルの外観を変更＞
疲れてきましたか？ でも、まだまだありますよ。新しいワークスペースの最も大きな特徴の1つは、ドック内のパネルを「アイコンおよびテキスト」「アイコンのみ」の表示にすることができる点です。
- 編集バーにあるワークスペースメニューをクリックします（図11）
- S「アイコンおよびテキスト（デフォルト）」を選びます。
右側のパネルがアイコンとテキストだけの表示に切り替わります
図11: 編集バーにあるワークスペースメニューから「アイコンおよびテキスト（デフォルト）」を選びます
- ドック内のパネルアイコンをクリックすると、該当パネルが表示されます（図12）
図12: パネルを表示するにはアイコンをクリックします
- 編集バーにあるワークスペースメニューから「アイコンのみ（デフォルト）」を選びます
今度はアイコンだけが表示されるようになりました。同じようにアイコンをクリックすれば、該当パネルが表示されます。
ドックの表示サイズを変更する方法は他にも2通りあります。1つは、ドックの上部にある二重矢印をクリックする方法です（図13）。クリックするごとに表示が切り替わります。
図13: ドックの上部にある二重矢印をクリックします
もう1つは、ドックの左上にあるグリッパーをクリックしながらドラッグしてサイズを変更する方法です（図14）。「アイコンおよびテキスト」あるいは「アイコンのみ」表示の場合、グリッパーを使ってサイズを変更すれば、ドックの幅に応じて表示方法が切り替わります。
図14: グリッパーを使ってドックの幅を変更でき、その幅に応じて「アイコンおよびテキスト」あるいは「アイコンのみ」と表示が切り替わります
Flashではいつも課題となっている作業領域ですが、このドックの機能を使えば、スペースを有効に活用できるようになるでしょう。この機能でワークフローが大幅に改善されるかもしれませんね。もしかしたら、モニタを2台使っている人は1台ですむかも。いや、やっぱり2台必要かも。
＜ワークスペースの保存と変更＞
れまでと同様にお気に入りのワークスペース状態を保存できますし、保存したワークスペース状態同士で瞬時に切り替えることもできます。Flash CS3では、編集バーにあるワークスペースメニューから、ワークスペース状態の保存・変更ができるうようになっています（図15）。
図15: 編集バーにあるワークスペースメニューから、ワークスペース状態の保存・変更ができます
一度ワークスペースの状態を保存したら、その保存名はワークスペースメニュー項目の上部に表示されます。ワークスペースメニューでは、新しくワークスペース状態を保存できるほか、削除や名前変更などの管理を行ったり、デフォルト状態へ戻したり、最大化モードに変更したりすることができます。Macintosh版で最大化モードに変更すると、ドキュメントのタイトルが非表示になり、ドックやツールパネルの下部スペースがグレーで埋められます。
狭いワークスペースで作業をしている人たちにとって、非常にうれしい機能でしょう。
＜Macintosh版での強化点＞
図16のように、Flash CS3ではMacintosh版でもドッキングパネルで作業ができるようになりました（図16）。オプションで、ドッキングパネルかフローティングパネルかを選ぶことができます。また、Windows版と同様にパネルをドッキングさせたり、ドッキング解除をしたりすることができます。
最大化モードに変更すると、ドキュメントのタイトルが非表示になり、ドックやツールパネルの下部スペースがグレーで埋められます（図16と図17）。
(+) 拡大
図16: フローティングパネルではなく、ドッキングパネルで作業ができます
(+) 拡大
図17: 最大化モードにしたところ
ここで紹介しているユーザーインターフェイスの特徴は、Creative Suite 3の他の製品でも採用されています。Adobe Photoshop®、Adobe Illustrator®、Adobe InDesign®でも同じ機能が使えるのです。ユーザーインターフェイスの新機能に関するビデオチュートリアルは、Using shared elements of the Photoshop, Illustrator, InDesign, and Flash workspaceです。
ワークスペースの新機能
前の項目では、ドックなど、新しいワークスペースのインターフェイスの特徴を解説しました。実は、ダイアログボックスでも新機能の追加や変更が施されています。この項目では、描画、他の製品との連携、ビデオ、新コンポーネント、ActionScriptに関する新機能を解説します。
＜ビットマップシンボルライブラリアイテムダイアログボックス＞
ライブラリに読み込まれたビットマップ画像をダブルクリックすると、ビットマップシンボルライブラリアイテムダイアログボックスが開き、そのビットマップ画像の情報を見ることができます。このダイアログボックスが新しくなりました。図18のように、ビットマップ画像のプレビュー領域がかなり大きくなりました。
図18: 左がFlash 8 、右が Flash CS3のビットマップシンボルライブラリアイテムダイアログボックス
リンケージ見出しの下の部分にも変更点があります。「基本クラス」という項目が追加され、シンボルに基本クラスを設定することができます。シンボルの基本クラスについては、この記事の ActionScript 3.0の項目で詳しく解説します。
＜境界ボックスのカラーのコントロール＞
Flash CS3では、選択時に表示される境界ボックスのカラーをエレメントのタイプごとに設定できます。描画オブジェクト、描画プリミティブ、グループ、シンボル、その他のエレメントに分けて異なるカラーを設定することができるのです（図19）。些細なことですが、非常に役立つ改善点です。
図19: エレメントのタイプごとに境界ボックスのカラーを色分けしたところ
境界ボックスのカラーの変更は、Windows版はメニューから「編集／環境設定」、Macintosh版はメニューから「Flash／環境設定」を選び、環境設定ダイアログ上で行います。
＜Internet Explorerのアクティブコンテンツ検出への対応＞
FLAファイルをパブリッシュする際、初期状態では、SWFファイルの他にも AC_RunActiveContent.jsというファイルが書き出されるようになりました。これは、Internet Explorerのアクティブ（埋め込み）コンテンツ検出に対応するための外部 JavaScriptファイルです。通常、Internet ExplorerではSWFファイルなどの埋め込みコンテンツを表示する際にメッセージが表示され、コンテンツを動作させるにはユーザーがそのコンテンツをクリックしなければなりません。SWFファイルとHTMLファイルと一緒に、このAC_RunActiveContent.jsをサーバにアップロードしておけば、Internet Explorerにおいても、ユーザーのクリック操作なしに自動でコンテンツを動作させることができます。
AC_RunActiveContent.jsを利用した、Internet Explorerのアクティブ（埋め込み）コンテンツ検出への対応についての詳細は、「ブラウザの更新に備えたアクティブコンテンツ使用Webサイトの準備」を参考にしてください。
＜ステージ上で9スライスのプレビュー＞
Flash CS3では、ステージ上で9スライスのプレビューができるようになりました。9スライスを適用したムービークリップを修正して、結果を見たいと思えばすぐ見ることができるのです。新規シンボルを作成して、ダイアログの「9スライスの拡大／縮小のためのガイドを有効にする」にチェックを入れてください。そのシンボルをダブルクリックしてシンボル編集モードにすると、9スライスグリッドが表示されるはずです（図20）。
図20: シンボル編集モードにすると、9スライスグリッドが表示されます。グラウンドホッグのイラストに9スライスを適用させるのは無意味かもしれませんが、どのような機能なのかをイメージしていただけると思います
＜モーションやフィルタのコピー＆ペースト＞
コピー＆ペーストに関してはかなりの機能強化が施されています。まずはじめに説明するのは、モーションのコピー＆ペーストです。あるオブジェクトのモーショントゥイーンを他のオブジェクトにコピー＆ペーストで適用することができます。フレーム、トゥイーン、オブジェクトの各種情報をペーストでき、その内容を選択してペーストすることもできます。
以下の手順でモーションのコピー＆ペーストを行います。記事のサンプルファイル 「copypastemotion.fla」 で試してみてください。
- 新規シンボルあるいはグループを作成して、ステージ上のレイヤー1に配置します。
- タイムラインアニメーションでレイヤー1のインスタンスにアニメーションを作成します。サンプルファイルでは、レイヤー1に単純なモーショントゥイーンを追加しています。
- 新規レイヤー（レイヤー2）を追加します。
- レイヤー2に新規シンボルあるいはグループを作成します。ライブラリからもう1つインスタンスを追加してもいいでしょう。
- タイムラインのレイヤー1のアニメーション部分を選択し、コンテクストメニューから「モーションをコピー」を選びます（図21）。
図21: アニメーション部分を選択して、コンテクストメニューから「モーションをコピー」を選びます
Tips: アニメーション部分を選択するには、まず始アニメーションの最初のフレームをクリックして、Shiftキーを押しながらアニメーションの最後のフレームをクリックします
- レイヤー2にある、アニメーションをペーストしたいインスタンスのフレームを選択します。
- フレームが選択された状態で、コンテクストメニューから「モーションをペースト」を選びます
これでレイヤ－1のモーショントゥイーンをレイヤー2のインスタンスに適用することができました。
ノート: モーションのコピーする際の選択肢として「ActionScript 3.0としてのモーションのコピー」というのがあります。その詳細については、 「ActionScriptとコードエディタにおける変更点」 を見てください。
- ステージ上に2つのシンボルインスタンスを追加します。 (記事のサンプルファイル 「copypastemotion.fla」 で試してみてください。
- フィルタパネルを開きます（メニューから「ウィンドウ／プロパティ／フィルタ」）。
- どちらかのインスタンスを選び、フィルタパネルのフィルタの追加メニューからフィルタを追加します。どのようなフィルタでも構いません。
- フィルタを適用後、そのインスタンスを選択して、フィルタパネルの「フィルタをコピー」メニューから「選択範囲をコピー」を選びます。
- 2つ目のインスタンスを選択して、フィルタパネルの「フィルタをペースト」ボタンをクリックすれば、1つ目のフィルタが適用されます。
ノート:複数のフィルタを使用し、そのすべてを他のインスタンスに適用させたい場合は、フィルタパネルの「フィルタをコピー」メニューから「すべてをコピー」を選びます。
Flash CS3では、PhotoshopやIllustratorとの連携も強化されています。 次の項目でその内容を解説しましょう。
ファイル読み込みや他のアドビ製品との連携に関する改善点
Flash CS3では、他の製品との連携、AIファイルやPSDファイルの読み込みに関しても多くの改善が施されています。この項目では、AIファイルやPSDファイルの読み込み方法、Creative Suite 3の製品間の連携について解説します。
＜AIファイルやPSDファイルの読み込み＞
Creative Suite 3の製品間の連携において、最も大きな改善の1つはAIファイルやPSDファイルの読み込み機能です。Flash CS3では、AIファイルやPSDファイルを直接読み込むことができ、ほとんどのデータタイプをサポートしています。ファイルの読み込みに際して、多くのオプションが用意されており、ファイルごとに読み込みを制御できます。たとえば、レイヤーを維持したり、新しく追加したり、名前を変更したり。他にも、シンボルインスタンスを追加したり、インスタンス名を追加したりすることが可能です。
メニューの「ファイル／読み込み／ステージに読み込み」あるいは「ファイル／読み込み／ライブラリに読み込み」を選んでPSDファイルを読み込む際に、以下のダイアログが表示されます。
図22: PSDファイルを読み込む際に表示されるダイアログ
ダイアログの左側を見ると、ファイル内のレイヤーやレイヤー名が維持されているのがわかります。PSDファイルを読み込んだ後でも、Flashでそのファイルのコンテンツを編集することができます。コンテンツを編集する必要がないというのであれば、レイヤーを結合してビットマップ画像として読み込むこともできます。
PSDファイルのレイヤーをFlashのタイムラインのレイヤーやキーフレームとして変換できますし、ムービクリップとして読み込むこともできます。また、レイヤーの位置を元のPhotoshopでの位置と同じままの状態で読み込むことができます。その他にもファイルを読み込んだ後に、コンテンツをステージの中央に配置することもできます。
コンテンツをステージに読み込む際に、PSDファイルのキャンバスサイズに合わせてステージをリサイズすることもできます。この機能に喜ぶ人は多いのではないでしょうか。
また、Flash CS3ではIllustratorのAIファイルを読み込むことができます。メニューの「ファイル／読み込み／ステージに読み込み」あるいは「ファイル／読み込み／ライブラリに読み込み」を選んでAIファイルを読み込む際に、以下のダイアログが表示されます。
(+) 拡大
図23: AIファイルを読み込む際に表示されるダイアログ
PSDファイルの場合と同様に、AIファイルのレイヤーをFlashのタイムラインのレイヤーやキーフレームとして変換できます。さらに、すべてのコンテンツをFlashの1つのレイヤーに納めたり、レイヤーのコンテンツをムービークリップに変換したり、各レイヤーをビットマップ画像として読み込むことも可能です。
Illustratorのコンテンツをコピー＆ペーストでFlashに移すという人も多いでしょう。その方が、ファイル全体を読み込むより素早くできてかつ簡単です。Webサイトのレイアウトのような大きなデザインではなく、キャラクターやボタンなどのアセットをFlashに移したい場合も、ファイルを読み込むよりはコピー＆ペーストの方が簡単です。実際にコピー＆ペーストでデータを移してみてください。Illustratorファイル上でのパス、ストローク、シェイプ、階調、テキスト、シンボル、マスク、ブレンドモードなどの属性がそのままFlashにも引き継がれます。
このようにAIファイルやPSDファイルを読み込む際に表示されるダイアログで細かく制御できるようになったほか、環境設定でも読み込みを制御できます。環境設定を開くと、カテゴリリストに「PSDファイルインポータ」と「AIファイルインポータ」という項目が追加されました。ここで、AIファイルやPSDファイルを読み込む際の条件を設定できます（図24と図25）。
図24: PSDファイルインポータ
図25: AIファイルインポータ
ここで解説した以外にもたくさんの機能があります。詳しくはビデオチュートリアルを見てください。FlashとIllustratorの連携に関しては、 Importing Illustrator files into Flash, Using symbols effectively between Illustrator and Flash、 Using text effectively between Illustrator and Flash。 FlashとPhotoshopの連携に関しては、 Designing websites with Photoshop and Flash。
＜IllustratorやFireworksとの連携＞
FlashとIllustratorの連携に関する改善は、Flash側だけでなく、Illustrator側でも新機能が追加されました。たとえば、Illustratorを使ってシンボルを作成し、その基準点を操作したり、インスタンス名を割り当てたりすることができます。それらの情報を保持したまま、Flashで読み込むことができます。また、Illustratorでテキストを静的テキスト、動的テキスト、入力テキストとして書き出してFlashに渡すこともできます。詳細はビデオチュートリアルを見てください。IllustratorでFlash用のテキストフィールドを作成する方法に関しては、 Using text effectively between Illustrator and Flash。Flashで使用するシンボルをIllustratorで作成する方法に関しては、 Using symbols effectively between Illustrator and Flash。
Flashだけでなく、IllustratorやFireworks®でも9スライスをサポートするようになりました。いずれの製品でもシンボルを作成して、シンボルを拡大／縮小しても歪まないように9スライスを使用することができます。たとえば、Illustratorで9スライスを使用してボタンなどのインターフェイスパーツを作成し、Fireworksでそのボタンを取り入れたWebサイトのプロトタイプを作成し、Flashでそのボタンにアニメーションを追加して仕上げるといったことも可能です。
これまでと同様、Flash CS3でもFireworksとラウンドトリップ編集ができます。Flash CS3では、FireworksのPNGファイルを読み込む際に表示されるダアログが新しくなりました（図26）。新しいダイアログでは、FireworksのPNGファイルのページを任意に選んで読み込むことができます。
図26: FireworksのPNGファイルを読み込む際に表示されるダイアログ。左側は、Flash 8のダイアログ。右側は、Flash CS3のダイアログ
FlashとFireworksの連携に関する詳細は、アドビ システムズ社のスマートで粋なAlan Musselmanによるビデオチュートリアルを見てください。 Understanding the Fireworks and Flash workflow。
＜FlashとDevice Centralの連携＞
Flash CS3では、携帯電話などのデバイス向けコンテンツ開発のワークフローが変わりました。Flashだけではなく、新しいツール「Device Central CS3」を使用して開発を行います。Device Central CS3では、モバイル端末のエミュレートができるだけでなく、開発の初期段階からターゲットデバイスを想定して作業することが可能となりました。Device Central CS3では、ターゲットとするモバイルデバイスの性能や制約を瞬時に知ることができます。
Flash 8でモバイルデバイス向けコンテンツを作成する際は、主にモバイルデバイステンプレート、デバイス設定ダイアログ、パブリッシュ設定ダイアログで作業や条件設定を行っていました。
図27: Flash 8のデバイス設定ダイアログ
Device Central CS3を使用すれば、ターゲットのモバイルデバイスを想定しつつ、新規FLAファイルで開発作業を行うことができます。Device Central CS3のメニューから「ファイル／新規ドキュメントを作成／Flash」を選ぶと新しいウィンドウが開きます。そのウィンドウ上で、ターゲットとするデバイスを選び、適切な設定を行い、「作成」ボタンをクリックします（図28）。
(+) 拡大
図28: Device Central CS3の画面
「作成」ボタンをクリックすると、Flash CS3では先ほどDevice Central CS3で設定した情報にもとづいた新規ドキュメントが開きます。あとは、Flash側でコンテンツの作成・編集を行います。作業が終了し、エミュレートして確認する段階になったら、Flashでムービープレビューを選ぶとDevice Central CS3でエミュレート表示されます。
(+) 拡大
図29: Device Central CS3でFlashコンテンツをエミュレート表示
Device Central CS3のエミュレートには、反射、バックライト、時間帯などといった細かい設定項目が用意されています（図29の右側参照）。
Flashでのモバイルコンテンツの作成に関するビデオチュートリアルがあります。 Creating mobile content in Flash、Creating interactive content for mobile devices。 Device Central CS3の概要については、 Using the Device Central workspace。
＜Adobe Bridge、Version Cueとの連携＞
Flash CS3では、Adobe Bridge CS3やAdobe Version Cue® CS3との連携がさらに強化されています。Adobe Bridgeはファイルやアセットを管理するツールで、ファイルの管理／ブラウジング／プレビューなどの機能が用意されています。他にも、特定の作業を自動化したり、カラー設定を適用したり、さらにはストックフォトを購入することもできます。Version Cueはファイルのバージョンを管理するツールです。特にチームで作業を行う環境では、バージョン管理は必須です。
Adobe Bridgeでは、各製品のメニューから「ファイル／参照」で開きます。Adobe Bridgeのブラウジングシステムでは、クリック操作でブラウジングしたり、特定のファイルの情報を表示することができます。表示するファイルを条件で絞り込んだり、表示スタイルを変更することも可能です。さらに注目の機能は、SWFをプレビューでき（図30）、そしてメニューから「ファイル／Device Centralでテスト」を選ぶと、選択したSWFファイルをDevice Centralでプレビューすることもできるのです。
図30: Adobe Bridgeを使用したファイルのプレビュー
また、Adobe Bridgeでは、フィアルにラベルを付けたり、星印によるレーティングを付けることもできます（図31）。ドキュメントにいくつかのバージョンがあったり、たくさんの写真を扱うときなどにあると便利な機能です。ラベルは、初期状態で「選択」「第2候補」「承認済み」などがあり、任意の名前に変更できます。
図31: 写真に「作業用」ラベルと星4つを付けたところ
Adobe BridgeにはBridge Home というディレクトリがあります。ここでは、お役立ちリソースサイトや、 Adobe Video Workshopのトレーニングビデオや、Adobe Design Centerのビデオコンテンツなどへのリンク集があります。
Version Cueを使えば、プロジェクトのバージョンをコントロールできます。特に、大きなプロジェクトや、チームで作業を行うプロジェクトの場合に役立つ機能です。Version CueはAdobe Bridgeと連携して機能します。Adobe Bridgeを使用して、Version Cueが管理しているプロジェクトやファイル、サーバなどの閲覧／検索／比較を行います。
Creative Suite 3をインストールするとVersion Cueもインストールされます。以下の手順でVersion Cueサーバを動作させ、各種設定を行います。
- 1. Adobe Bridgeのメニューから「ツール／新規プロジェクト」を選び、新しいVersion Cueプロジェクトを作成します。
Adobe Bridgeの「お気に入り」パネルの「Version Cue」をクリックすると、「Version Cueようこそ画面」が表示されます。
「Version Cueようこそ画面」の「サーバを開始」をクリックすると、Version Cueサーバが起動します。
新規のプロジェクトを作成するには、Adobe Bridgeのメニューから「ツール／Version Cue／新規プロジェクト」を選びます。 - プロジェクトの名前を入力後（ここでは、Groundhogという名前を付けています）、「OK」ボタンをクリックしてプロジェクトを作成します。これで、今作成したプロジェクトにファイルを追加していくことができます。
- Version Cueプロジェクトに追加したいファイルを選び、コンテキストメニューから「移動／プロジェクト名」を選びます。必要に応じてファイルにコメントを追加し（図32）、「OK」ボタンをクリックしてファイルを移動させます。
図32: ファイルをVersion Cueプロジェクトへ移動
- プロジェクトに追加されたかどうかを手早く確認する方法は、Adobe Bridgeの左側にあるカラムのフォルダタブをクリックして探します（図33）。
図33: プロジェクトファイルを閲覧するには、ファイルを選んで右クリックするか、ファイルの上にあるアイコンで操作します。
新しい描画ツール
Flash 8では、線や塗りの新しい仕様や、新しい描画モデルが導入されました。そしてFlash CS3では、新しい描画ツールが追加された上に、ペンツールも強化され、Illustratorのペンツールのように動作します（もちろん、Flashの固有のペーンツール特性は保持されています）。これは、FlashとIllustratorを一緒に使用しているユーザーにとってはうれしいことでしょう。
＜強化されたペンツール＞
製品間での操作性を統一するために、Flash CS3のペンツールは、Illustratorのペンツールと同じような動作を行うように改善されています。また、三次から二次への変換がより効率的になり、その結果、正確さが増し、ポイント数が少なくなりました。
ツールパネルのペンツールのサブメニューには、アンカーポイントの追加ツール、アンカーポイントの削除ツール、アンカーポイントの切り替えツールが表示されます（図34）。
図34: ペンツールのサブメニュー
各ツールの機能は、その名が示す通りです。アンカーポイントの追加ツールを使えば、パスにアンカーポイントを追加できます。アンカーポイントの削除ツールを使えば、パスのアンカーポイントを削除できます。アンカーポイントの切り替えツールを使えば、スムーズポイントをコーナーポイントに変換できます（その逆も可能です）。
ペンツールに関連したポインタの詳細については、Flash LiveDocs内の ペンツールの操作」を参考にしてください。
さらに、ペンツールやダイレクト選択ツールを使用しているときに、Controlキー （Windows）あるいはCommandキー（Macintosh）を押すと、自由変形ツールに切り替わります（図35）。わざわざドローイングの作業を中断してツールを選びなおさなくても、すぐにセグメントを変形できるのです。これでドローイングの作業もすっきりとするので、作業の効率化が期待できます。
図35: ベクターグラフィックをペンツールやダイレクト選択ツール選択中にControlキー （Windows）あるいはCommandキー（Macintosh）を押すと、自由変形ツールに切り替わります
ペンツールの使い方に関するビデオチュートリアルは、 Drawing with the Pen tool。
＜矩形プリミティブツールと楕円プリミティブツール＞
Flash CS3では、矩形や楕円を作成する新しい描画ツールが追加されています。矩形プリミティブツールと楕円プリミティブツールです。これらのツールで作成した矩形や楕円は、そのプロパティをプロパティインスペクタで編集できます。これらのツールを使用するには、ツールパネルにある矩形ツールのサブメニューから選びます（図36）。
図36: 矩形プリミティブツールと楕円プリミティブツールは、ツールパネルにある矩形ツールのサブメニューから選びます
矩形プリミティブツールはいろいろと変形させることができます。たとえば、四隅を角丸にしたり、丸く凹ませたり（図37）。1つのシェイプですが、複数のオブジェクトから構成されているかのように編集できます。
図37: 矩形プリミティブツールで作成した矩形に対して、プロパティインスペクタにある「矩形の角丸の半径」を設定しているところ
みなさんもぜひ試してみてください。矩形プリミティブツールで矩形を作成して、プロパティインスペクタにある「矩形の角丸の半径」の値をスライダーで変更するだけです。4つの角丸を連鎖させて一度に設定することもできますし、個別に設定することもできます。
いったん変形させた後に別な作業を行っても、再度シェイプを選択してプロパティインスペクタで修正することが可能です。
Tips: 角丸を個別に設定するには、4つの半径入力フィールドの中心にある鍵アイコンをクリックします。
楕円プリミティブツールで作成した楕円に対して、プロパティインスペクタ上で「開始角度」「終了角度」「内側の半径」を設定できます。内側の半径とは、中にある円の半径のことです（ドーナツのようなイメージですね）。開始角度と終了角度は、楕円から扇形状のシェイプを抜き取った状態にするための設定です。これを使えば半円も簡単に作成できます。
図38: 楕円プリミティブツールで作成した楕円に対して、プロパティインスペクタにある「開始角度」と「終了角度」を設定しているところ
プリミティブ描画ツールを含む描画ツールに関するビデオチュートリアルは、 Using the drawing tools。
Flashビデオに関する強化点
Flash CS3では、ビデオのワークフローに関しても数多くの改善が施されています。Flashビデオにキャプションを簡単に付けることができるようになり、またキューポイントの保存とロードの機能が追加され、FLVファイルに追加したキューポイントを保存して別のFLVファイルに適用できるようになりました。さらに、QuickTime書き出しも強化され、アニメーションをより簡単に配信できるようになっており、どんなアニメーションでもMOVファイルに書き出せます。
＜強化されたQuickTimeサポート＞
以前のバージョンでは、QuickTimeで書き出せるアニメーションは限られていました。ムービークリップアニメーションやスクリプトベースのアニメーションが含まれているアニメーションは書き出すことができませんでした。この制限は、テレビやDVDで再生するアニメーション用のビデオフォーマットに書き出したい人や、さらにビデオ編集ツールで編集したい人たちにとっては厄介な問題でした。Flash CS3では、この問題が解決されています。ムービークリップアニメーションやスクリプトベースのアニメーションが含まれていても、QuickTimeで書き出すことが可能です。
QuickTime書き出しのビデオチュートリアルは、 Exporting QuickTime files。
＜キューポイントの保存とロード、FLVPlaybackCaptioningコンポーネント＞
Flash Video Encoderには新しくキューポイントタブが追加され、FLVファイル内にあるすべてのキューポイントを保存し、さらに別のFLVファイルに適用できるようになりました。キューポイントはタイムコードをベースとしたXMLファイルとして保存されるので、ロードする際も手作業で一つづつ追加する必要はなく、図39の「キューポイントをロード」ボタンをクリックして、あとはエンコードするFLVファイルに適用するだけです。
図39: Flash Video EncoderでFLVファイルにキューポイントを追加してるところ。他のFLVファイルのキューポイントロードして適用させることも可能です
Flash 8には、アプリケーション内でFLVを再生するためのFLVPlaybackコンポーネントがありました。Flash CS3では、 FLVPlaybackCaptioningコンポーネントが追加され、それを使えばFLVPlaybackコンポーネントで再生するビデオにキャプション（字幕）を付けることができます。FLVPlaybackCaptioningコンポーネントを使用すると、ビデオプレーヤにキャプションのオン／オフボタンが追加されます。キャプションは、Timed Text XML（W3C標準のXMLフォーマット）で用意するか、キューポイントを使って追加します。
図40: Flash CS3のビデオ関連コンポーネント
FLVPlaybackCaptioningコンポーネント使い方の詳細は、 Using the FLVPlayback Captioning Component*。
なお、FLVPlaybackコンポーネントはActionScript 3.0仕様にアップデートされています。詳細については、 Using the FLVPlayback Component*。
新しいActionScript 3.0コンポーネント
Flash 8にはV2コンポーネントが、Flash MX 2004にはほぼそれと同じようなコンポーネントが用意されており、両方ともActionScript 2.0ベースで作成されていました。Flash CS3ではActionScript 3.0が導入され、コンポーネントもActionScript 3.0コンポーネントに変わりました。
ノート: 新しく加わったFLVPlaybackCaptioningコンポーネントについては、この記事の 「Flashビデオに関する強化点」項目で詳しく解説しています。
ActionScript 3.0が導入されとはいえ、すぐに移行できる人ばかりではありません。ActionScript 2.0で制作する機会もあるでしょう。Flash CS3では、V2コンポーネントも使用できるようになっています。
新規ファイルを作成する際に、ファイルタイプから「Flashファイル（AS2.0）」を選ぶと、コンポーネントパネルにはV2コンポーネントが表示されます。ファイルタイプから「Flashファイル（AS3.0）」を選ぶと、コンポーネントパネルにはActionScript 3.0コンポーネントが表示されます（図41）。
図41: ActionScript 3.0コンポーネントのリスト
ActionScript 3.0コンポーネントは、V2コンポーネントに比べてより軽く、スキンを変更しやすくなっています。ActionScript 3.0コンポーネントには、新しいコンポーネントが追加されてますし、逆に削除されているコンポーネントもあります。新しいコンポーネントは、ColorPickerコンポーネント、 Sliderコンポーネント、TileListコンポーネントです。V2コンポーネントのUIフォルダ内にあったコンポーネントで削除されたものがありますが、もしそれらを使用したい場合は、ファイルタイプを「Flashファイル（AS2.0）」として作成してください。
ノート: V2コンポーネントのLoaderコンポーネントは、ActionScript 3.0コンポーネントではUILoaderコンポーネントと名前が変更されています。Flash CS3では、flash.displayパッケージにLoaderクラスが含まれているため、Loaderコンポーネントと混乱しないようにと名前が変更されたのです。コンポーネントの機能としては同じです。
V2コンポーネントとActionScript 3.0コンポーネントとの一番の違いは、コンポーネントを動作させるのにActionScript 3.0を使うという点です。実際に両方の方法で同じサンプルを作成して、その違いを確認してみましょう。まず、ActionScript 2.0ベースのV2コンポーネントを使う方法です。
- Flash 8あるいはFlash CS3でActionScript 2.0ベースの新規FLAファイルを作成します。
- コンポーネントパネルにあるButtonコンポーネントとScrollPaneコンポーネントをライブラリにドラッグします。ドキュメントにButtonとScrollPaneのインスタンスを追加します。
- タイムラインの1フレーム目を選択して、アクションパネルのスクリプトペインに以下のコードを記述します。
import mx.containers.ScrollPane; import mx.controls.Button; System.security.allowDomain("http://www.helpexamples.com"); this.createClassObject(Button, "myButton", 10, {label:"Load", _x:10, _y:10}); myButton.addEventListener("click", clickHandler); var myScrollPane:ScrollPane = this.createClassObject(ScrollPane, "myScrollPane", 20, {_x:10, _y:40}); function clickHandler(eventObject:Object):Void { myScrollPane.contentPath = "http://www.helpexamples.com/flash/images/image2.jpg"; } - ムービープレビューを行います。ボタンをクリックすると、スクロールペインに画像が読み込まれるはずです。
では、これと同じものをActionScript 3.0とActionScript 3.0コンポーネントを使って作ってみましょう。
- Flash CS3でActionScript 3.0ベースの新規FLAファイルを作成します。
- コンポーネントパネルにあるButtonコンポーネントとScrollPaneコンポーネントをライブラリにドラッグします。ドキュメントにButtonとScrollPaneのインスタンスを追加します。
- タイムラインの1フレーム目を選択して、アクションパネルのスクリプトペインに以下のコードを記述します。
import fl.containers.ScrollPane; import fl.controls.Button; var myButton:Button = new Button(); myButton.label = "Load"; myButton.x = 10; myButton.y = 10; myButton.addEventListener(MouseEvent.CLICK, clickHandler); addChild(myButton); var myScrollPane:ScrollPane = new ScrollPane(); myScrollPane.move(10, 40); addChild(myScrollPane); function clickHandler(event:MouseEvent):void { myScrollPane.source = "http://www.helpexamples.com/flash/images/image2.jpg"; } - ムービープレビューを行います。ボタンをクリックすると、スクロールペインに画像が読み込まれるはずです。
以上です。V2コンポーネントとActionScript 3.0コンポーネントとの違いが分かっていただけたと思います。コンポーネント使い方の詳細は、Flashヘルプの Using ActionScript 3.0 Components book*を参照してください。
ActionScript 3.0のUIコンポーネントのビデオチュートリアルは、 Using Components, Writing ActionScript for components、 Creating a simple application with components。また、Flashデベロッパーセンターの Flash クイックスタートでも、新しいコンポーネントにつてい解説しています。
ActionScriptとコードエディタに関する変更点
Flash CS3の最も注目すべき特徴の1つが、ActionScriptの新バージョンであるActionScript 3.0です。それにともない、アクションパネルやスクリプトウィンドウ、そしてデバッグツールの機能も強化されました。
ActionScript 3.0のサポートはもちろんこと、効率よくコーディングできるようになっています。また、Flex Builderと同じコンパイラを使用しています。それでは、個々の特徴を見ていきましょう。
＜強化されたActionScriptのコーディングとテスト環境＞
アクションパネルやスクリプトウィンドウでは、コードの任意の範囲を折り畳んで隠すことができます。この機能を使用するには、まず折り畳みたいコード部分を選択してハイライト表示します。すると、コードと行番号の間にあるスペースに2つの三角マークとラインが表示されます。この状態で、三角マークをクリックするとコードが折り畳まれ隠れてしまいます（図42）
図42: コードを折り畳んで隠すことができます
再度コードを表示したいときは、三角マークをクリックします。
Tips: コードを隠す方法は、上記以外にも、アクションパネルやスクリプトウィンドウの上部にあるボタンを使う方法もあります。この場合、括弧内のコードを折り畳んで隠します。ボタンをクリックしたときにどのコード部分が隠れるかは、カーソルの位置や、コードの折り畳みの状況によって決まります。隠したコードを表示するには、「すべてを展開」ボタンをクリックします。
図43: ボタンを使ってコードを隠したり表示したりできます
また、コードの任意の範囲をコメントにするボタンもあります。コメントにしたいコード部分を選択して、「ブロックコメントを適用」ボタンか「行コメントを適用」ボタンをクリックします（図44）。
図44: コードをコメントにすることができます
コメントを解除するには、「コメントを削除」ボタンを使います。
おそらく、スクリプト関連のパネルに施された機能強化の中で一番素敵な機能は、コンパイルエラーパネルのダブルクリックエラー表示機能でしょう。コンパイルエラーパネルでは、以前のバージョンと比べて、エラー内容をより詳しく説明するようになりました。さらに、エラー項目をダブルクリックすると、スクリプトウィンドウ内の該当コード部分が自動でハイライト表示されます。以下のサンプルコードで試してみましょう。
import fl.containers.ScrollPane;
import fl.controls.Button;
var myButton:Button = new Button();
myButton.label = "Load";
myButton.x = pelicans;
myButton.y = cat;
myButton.addEventListener(MouseEvent.CLICK, clickHandler);
addChild(myButton);
var myScrollPane:ScrollPane = new ScrollPane();
myScrollPane.move(10, 40);
addChild(myScrollPane);
function clickHandler(event:MouseEvent):void {
myScrollPane.source = "http://www.helpexamples.com/flash/images/image2.jpg";
}
このコードにはあらかじめエラーを入れています。デバッグを行うと、どこにエラーがあるのかを、コンパイルエラーパネルが教えてくれます（図45）。
(+) 拡大
図45: x座標やy座標にpelicansやcatsは使用できないとFlashが教えてくれました。では、何を使いましょう？
エラー項目をダブルクリックすると、該当するコード部分をハイライト表示してくれます（図46）。
(+) 拡大
図46: コンパイルエラーパネルの項目をダブルクリックすると、該当するコードがハイライト表示されます
これに関連した機能として、Flash CS3ではActionScriptファイルと特定のFLAファイルを関連づけることができます。スクリプトウィンドウからFlashアプリケーションをチェックしたい場合に便利な機能です。
(+) 拡大
図47: ターゲットメニューからActionScriptファイルと関連づけるFLAファイルを選びます
ActionScriptファイルと関連づけるには、そのFLAファイルを開いておかなければなりませんが、それでも一々FLAファイルを選んでチェックするよりは効率的です。
コーディング／デバッグ環境は、Flash 8に比べて非常に改善されています。以前なら、エラーのあったコードを自分で探さなければなりませんでした。もう1つ重要な特徴があります。それは、ドキュメントクラスです。
＜ドキュメントクラスの作成＞
Flash CS3では、FLAファイルに対してドキュメントクラスを作成することができます。ドキュメントクラスは、メインのタイムラインと関連づけられたクラス定義です。タイムラインが初期化される際に、ドキュメントクラスが作成されます。ドキュメントクラスは、プロパティインスペクタで設定することができ、ドキュメントクラス欄にその名前を入力します（図48）。
図48: プロパティインスペクタのドキュメントクラス欄にドキュメントクラスの名前を入力します
ドキュメントクラスは以下のように使用します。
- ActionScript 3.0ベースの新規FLAファイルを作成し、ファイル名をdocclass.flaとします。
- 新規ActionScriptファイルを作成し、ファイル名をMainMovie.asとしてdocclass.flaと同じフォルダ内に保存します。
- MainMovie.asに以下のコードを記述します。
package { import flash.display.MovieClip; import flash.system.Capabilities; public class MainMovie extends MovieClip { // Constructor public function MainMovie() { traceCapabilities(); } public function traceCapabilities():void { trace(Capabilities); trace("hasAccessibility:", Capabilities.hasAccessibility); trace("isDebugger:", Capabilities.isDebugger); trace("language:", Capabilities.language); trace("manufacturer:", Capabilities.manufacturer); trace("os:", Capabilities.os); trace("playerType:", Capabilities.playerType); trace("version:", Capabilities.version); } } } - 保存して、docclass.flaに戻ります。
docclass.flaでは、何も選択せずに、プロパティインスペクタのドキュメントクラス欄にMainMovieと入力します。
ノート: ドキュメントクラス欄では、as拡張子を付けないでください
- 保存して、ムービーのプレビューを行います。
ドキュメントクラスの作成に関するビデオチュートリアルは、 Creating a document class using ActionScript 3.0。
＜シンボルの基本クラス＞
Flash CS3では、ライブラリ内のシンボルにクラスと基本クラスを指定することができます。この機能により、シンボルのインスタンスをダイナミックに作成することが可能となりました。以下は、その手順です。
- ActionScript 3.0ベースの新規FLAファイルを作成し、ファイル名をdraggable.flaとします。
- 何かグラフィカルな要素があるムービークリップを作成します。
ライブラリ内のムービークリップを選択して、パネルメニューからリンケージを選ぶと（あるいは、右クリックしてコンテキストメニューからリンケージを選びます）、リンケージプロパティダイアログが開きます。クラス欄にDraggableClip、基本クラス欄にflash.display.MovieClipと入力します（図49）。
図49: クラス欄と基本クラス欄を入力します
これで、このシンボルにDraggableClipクラスを指定したことになります。では、このFLAファイルで使用するDraggableClipクラスを作成しなければなりません（今回は、記事のサンプルとして用意してあります）。
ノート: 新規シンボルダイアログやシンボルに変換ダイアログにも基本クラス欄があり、指定できます。
- 記事のサンプルの中にあるDraggableClip.asをdraggable.flaと同じフォルダ内に入れます
- draggable.flaに戻り、ムービーのプレビューを行います。
ムービークリップをドラッグしてステージ上を動かせるはずです。
＜強化されたデバッガ＞
Flash CS3では新しいデバッガツールが追加されました。新しいデバッガツールでは、ActionScript 3.0のコードを簡単に検証できます。デバッグを実行すると、ワークスペース全体がデバッグ環境に変わり（デバッグワークスペースと呼びます）、デバッグ用のFlash PlayerでSWFファイルが表示されます。Flash 8では1つのパネルで管理されていた項目が、Flash CS3では個別のパネルで表示されます。アクションパネルやスクリプトウィンドウ、変数パネル、デバッグコンソールパネル、出力パネルです（図50）。各パネルの機能や使い方は、これまでと同じですが、以前よりフレキシブルなデバッグ環境となっています。
図50: 新しいデバッグ環境。デバッグワークスペースでデバッグ作業を楽しんでください
ノート: Flash CS3のデバッグ環境はFlex Builder 2と同じ内容です。
Flash CS3でデバッグを行うには、FLAファイルやASファイルを開いて、メニューから「デバッグ／ムービーのデバッグ」を選ぶだけです。ASファイルで、ムービーのデバッグを実行するには、あらかじめFLAファイルと関連づけておく必要があります（図47）。
ノート: ASファイルのターゲットメニューからFLAファイルを選ぶには、該当するファルを開いておく必要があります。
デバッグを終了するには、メニューから「デバッグ／デバッグセッションを終了」を選びます。
また、リモートにあるActionScript 3.0ベースのSWFファイルをもデバッグすることが可能です。詳細は、Flash ヘルプ内にある Debug a remote ActionScript 3.0 file* を参照してください。デバッガの使用方法に関しては、 Introducing the ActionScript 3.0 debugger*を参照してください。
＜ActionScript 3.0としてのモーションのコピー＞
デベロッパーの方なら、タイムラインアニメーションをコードアニメーションに変換する仕事を依頼されたこともあるでしょう。複雑なアニメーションを複雑なコードで再現するとなると、非常に難しく手間のかかる作業です。
でも、そんな苦労をしなくても済むようになりました。メニューオプションを選ぶだけで、コードができあがるのです。Flash CS3では、タイムラインの中にあるモーショントゥイーンのプロパティをActionScript 3.0コードに書き換えた状態でコピーして、別なシンボルに適用することができます。コードは、タイムラインコードやクラスファイル用として適用することが可能です。
以下は、モーショントゥイーンのモーショントゥイーンをActionScript 3.0としてコピーして、別なシンボルに適用させる手順です。
- 新規シンボルあるいはグループを作成して、ステージ上のレイヤー1に配置します。
- タイムラインアニメーションでレイヤー1のインスタンスにアニメーションを作成します。
- 新規レイヤー（レイヤー2）を追加します。
- レイヤー2に新規シンボルあるいはグループを作成します。ライブラリからもう1つインスタンスを追加してもいいでしょう。
タイムラインのレイヤー1のアニメーション部分を選択し、コンテクストメニューから「ActionScript 3.0としてのモーションのコピー」を選びます。ActionScriptコードがクリップボードにコピー＆ペーストされます。
Tips: アニメーション部分を選択するには、まず始アニメーションの最初のフレームをクリックして、Shiftキーを押しながらアニメーションの最後のフレームをクリックします
- ActionScriptで使用するインスタンス名を入力します。ActionScriptコードを適用するインスタンのインスタンス名にするといいでしょう。
- レイヤー2に追加したインスタンスを選択して、プロパティインスペクタに先ほどのインスタンス名を入力します。
- 新規レイヤー（レイヤー3）を追加します。１フレーム目を選択して、アクションパネルを開いて、ActionScriptコードをペーストします。
- ムービーのプレビューを行う前に、レイヤー2がレイヤー1と同じフレーム数だけあるかを確認します（アニメーション中に、シンボルが消えてしまわないようにします）。タイムラインでフレームを追加するには、フレームを選んで、F5を押します。
- ムービーのプレビューを行います。レイヤー1とレイヤー2が同じアニメーションとなれば成功です。１つはタイムラインのアニメーション、もう1つはコードのアニメーションです。
ActionScript 3.0としてのモーションのコピーに関するビデオチュートリアルは、 Copying and pasting ActionScript from an animation、Creating an effective workflow between design and development。
＜新しいActionScript＞
ActionScript 3.0は、堅実で健老なプログラミング言語です。Javaのようなオブジェクト指向プエオグラミング言語を理解している方であれば、ActionScript 3.0も馴染みやすいでしょう。ActionScript 3.0は、以前のバージョンより分かりやすくなっていますし、コードの再利用もできます。膨大なデータを扱う複雑なアプリケーションを制作することもできるでしょう。また、Flash PlayerのActionScript Virtual Machine （AVM2）の性能もアップし、パフォーマンスが著しく向上しています。
ノート: Flash CS3やFlash Player 9でも、ActionScript 1.0やActionScript 2.0を使用することは可能です。パブリッシュ設定でActionScriptのバージョンを設定できます。
ActionScript 3.0を使い始めてまず気づくのが、シンタックスの違いでしょう。新しいクラスがたくさん追加されていますし、 Tweenクラスなどの既存のクラスもアップデートされています。また、コードでインスタンスを作成する際に、新しいシンボルタイプを使うこともできます。たとえば、スプライトというタイムラインのないムービークリップを作成できます。
ノート: スクリプトアシスタントもActionScript 3.0をサポートしています。スクリプトアシスタントを使ったActionScript 3.0の記述方法に関するビデオチュートリアルは、 Using Script Assist to add interactivity。
変更点がかなり多く、この記事ではカバーしきれません。本が1冊かけるくらいのボリュームです。この記事では、基本的なところを紹介します。まずは、誰もが使うボタンを題材に、ActionScript 2.0とActionScript 3.0の違いを見てみましょう。
ステージ上にボタンがあり、そのインスタンス名はmyBtnです。ActionScript 2.0の場合、たとえば、メインのタイムラインに以下のようなコードを書きます。
myBtn.onRelease = function(){
getURL("http://www.adobe.com");
};
ActionScript 3.0では、少し違います。以下の手順でインタラクティブボタンを作成します。
- 簡単なボタンを作成します。
- インスタンスを選択して、インスタス名をmyBtnとします。
- 新規レイヤーを作成して、レイヤー名をアクションとします。
- アクションパネルを開いて、アクションレイヤーの１フレーム目を選び、以下のActionScriptコードを記述します。
myBtn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event:MouseEvent):void { navigateToURL(new URLRequest("http://www.adobe.com/")); } - ムービーのプレビューを行います。
おまけとして、ゼロからコードで作るボタンのActionScriptコードを以下に紹介しておきます。ActionScript 3.0ベースの新規ファイルを作成して、以下のコードをタイムラインの１フレーム目に記述します。
var spr:Sprite = new Sprite();
spr.graphics.beginFill(0xFF0000, 1);
spr.graphics.drawRect(0,0, 100, 22);
spr.graphics.endFill();
var btn:SimpleButton = new SimpleButton();
btn.upState = spr;
btn.overState = spr;
btn.downState = spr;
btn.hitTestState = spr;
btn.useHandCursor = true;
btn.x = 20;
btn.y = 20;
btn.addEventListener(MouseEvent.CLICK, clickHandler);
addChild(btn);
function clickHandler(event:MouseEvent):void {
navigateToURL(new URLRequest("http://www.adobe.com/"));
trace("clicked the button at (" + event.localX + "," + event.localY + ")");
}
ActionScriptに関しては、シンタックスから、パフォーマンス、クラスまでと様々な点で機能強化や改善が施されています。たくさんありすぎて、ここではその触りしか紹介できていません。ActionScript 3.0の詳細については、FlashヘルプやFlash LiveDocにある 「ActionScript 3.0のプログラミング」 項目を参照してください。また、ドキュメントクラスの作成に関するビデオチュートリアルは、 Getting Started with ActionScript 3.0、 Creating a document class using ActionScript 3.0.
＜さらに学習したい方へ＞
Flash 8と比較しながら、Flash CS3の主な新機能を紹介してきましたが、参考になりましたでしょうか。
Flash 8との大きな違いであるActionScript 3.0についてもっと詳しく知りたい人は、以下をおすすめします。
- ActionScript 3.0 Cookbook excerpts: From custom classes to the rendering model* (by Joey Lott, Darron Schall, and Keith Peters)
- Creating, populating, and resizing a DataGrid* (by Peter deHaan)
- Programming animations* (by Buck DeFore)
- (Video tutorial) Using Script Assist to add interactivity (by Lee Brimelow)
- (Video tutorial) Getting Started with ActionScript 3.0 (by Justin Everett-Church)
- (Video tutorial) Creating a document class using ActionScript 3.0 (by Justin Everett-Church)
今後、デベロッパーセンターでは、「ActionScript 3.0への移行」や「デザイナー向けのActionScript 3.0」をテーマとした記事を予定しています。また、 Adobe Creative Suite 3 ビデオワークショプでは、Flash CS3をはじめ、Creative Suite 3製品の新機能をビデオで紹介していますので、活用してください。
著者について
Sorry, this page is not available
Broken link?
このURLは存在しません。
日本語のホームページにお戻りください。
他のサイトのリンクでこのページにたどりついた場合はそのサイトの
ウェブマスターにリンクが壊れている旨をお伝えください。
Error returned: 404
You may wish to try one of the following links:
