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: プロパティインスペクタのドキュメントクラス欄にドキュメントクラスの名前を入力します

ドキュメントクラスは以下のように使用します。

1. ActionScript 3.0ベースの新規FLAファイルを作成し、ファイル名をdocclass.flaとします。
2. 新規ActionScriptファイルを作成し、ファイル名をMainMovie.asとしてdocclass.flaと同じフォルダ内に保存します。
3. 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);
                     
               }
         }
   }
                

4. 保存して、docclass.flaに戻ります。

5. docclass.flaでは、何も選択せずに、プロパティインスペクタのドキュメントクラス欄にMainMovieと入力します。

   ノート: ドキュメントクラス欄では、as拡張子を付けないでください

6. 保存して、ムービーのプレビューを行います。

ドキュメントクラスの作成に関するビデオチュートリアルは、 Creating a document class using ActionScript 3.0。

＜シンボルの基本クラス＞

Flash CS3では、ライブラリ内のシンボルにクラスと基本クラスを指定することができます。この機能により、シンボルのインスタンスをダイナミックに作成することが可能となりました。以下は、その手順です。

1. ActionScript 3.0ベースの新規FLAファイルを作成し、ファイル名をdraggable.flaとします。
2. 何かグラフィカルな要素があるムービークリップを作成します。

3. ライブラリ内のムービークリップを選択して、パネルメニューからリンケージを選ぶと（あるいは、右クリックしてコンテキストメニューからリンケージを選びます）、リンケージプロパティダイアログが開きます。クラス欄にDraggableClip、基本クラス欄にflash.display.MovieClipと入力します（図49）。

   

   図49: クラス欄と基本クラス欄を入力します

   これで、このシンボルにDraggableClipクラスを指定したことになります。では、このFLAファイルで使用するDraggableClipクラスを作成しなければなりません（今回は、記事のサンプルとして用意してあります）。

   ノート: 新規シンボルダイアログやシンボルに変換ダイアログにも基本クラス欄があり、指定できます。

4. 記事のサンプルの中にあるDraggableClip.asをdraggable.flaと同じフォルダ内に入れます
5. 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. タイムラインアニメーションでレイヤー1のインスタンスにアニメーションを作成します。
3. 新規レイヤー（レイヤー2）を追加します。
4. レイヤー2に新規シンボルあるいはグループを作成します。ライブラリからもう1つインスタンスを追加してもいいでしょう。

5. タイムラインのレイヤー1のアニメーション部分を選択し、コンテクストメニューから「ActionScript 3.0としてのモーションのコピー」を選びます。ActionScriptコードがクリップボードにコピー＆ペーストされます。

   Tips: アニメーション部分を選択するには、まず始アニメーションの最初のフレームをクリックして、Shiftキーを押しながらアニメーションの最後のフレームをクリックします

6. ActionScriptで使用するインスタンス名を入力します。ActionScriptコードを適用するインスタンのインスタンス名にするといいでしょう。
7. レイヤー2に追加したインスタンスを選択して、プロパティインスペクタに先ほどのインスタンス名を入力します。
8. 新規レイヤー（レイヤー3）を追加します。１フレーム目を選択して、アクションパネルを開いて、ActionScriptコードをペーストします。
9. ムービーのプレビューを行う前に、レイヤー2がレイヤー1と同じフレーム数だけあるかを確認します（アニメーション中に、シンボルが消えてしまわないようにします）。タイムラインでフレームを追加するには、フレームを選んで、F5を押します。
10. ムービーのプレビューを行います。レイヤー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では、少し違います。以下の手順でインタラクティブボタンを作成します。

1. 簡単なボタンを作成します。
2. インスタンスを選択して、インスタス名をmyBtnとします。
3. 新規レイヤーを作成して、レイヤー名をアクションとします。
4. アクションパネルを開いて、アクションレイヤーの１フレーム目を選び、以下のActionScriptコードを記述します。

   myBtn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
   
   function mouseDownHandler(event:MouseEvent):void {
         navigateToURL(new URLRequest("http://www.adobe.com/"));
   }
                

5. ムービーのプレビューを行います。

おまけとして、ゼロからコードで作るボタンの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製品の新機能をビデオで紹介していますので、活用してください。

ページ 1 / 8

次のページ

著者について