ActionScriptを外部ファイル化する

先週の授業では、ムービークリップの属性(プロパティ)を操作する際に、ActionScriptをタイムラインのキーフレーム内に記述していました。このフレームにActionScriptを書き込む手法をフレームスクリプトと呼んでいます。

フレームスクリプトは手軽にスクリプトを記述できて便利なのですが、いくつかの欠点もあります。

• 複数の場所にコードが散在してしまい、コードの整理と管理が困難になり易い
• 既存のFLAのコードに対する拡張が困難
• コードの変更はFLA内でのみ可能
• FLAファイルの作業を行えるのは、一度に１ユーザだけ

これらの欠点を解決するために、ActionScriptを外部ファイルとして記述する方法について、今日の授業では取り扱っていきます。この手法は将来的により大規模なFlashプロジェクトを制作しようとする際に、とても重要な手法となります。

ドキュメントクラスを指定

まず始めに、Flashファイル(AS3.0) 形式で新規にFLAファイルを作成します。FLAファイルが開いたら、何も選択しない状態で、プロパティパネルを開きます。

プロパティパネルのパブリッシュの欄にあるクラスの入力欄に半角英数文字で名前を指定します(例：Main)。ここでつけた名前がドキュメントクラスの名称となります。

ドキュメントクラスとは

ドキュメントクラスとは、作成するFLAファイルのメインのタイムラインに関連付けられたプログラム(正確にはクラス)です。ドキュメントクラスに設定した命令がSWF実行時に最初に起動されます。ドキュメントクラスは、外部ファイルとして作成します。この際にFLAファイルで指定したクラスの名称と同じ名前のファイルにする必要があります。拡張子は「.as」です。

例えば、FLAのクラス欄に「Main」と設定した場合は、ドキュメントクラスのファイル名は「Main.as」になります。

ドキュメントクラスを使用することで、FLAファイルにはActionScriptを一切書き込むことなく、Flashプロジェクトを作成していくことが可能となります。

ドキュメントクラスを作成する

では早速ドキュメントクラスを作成してみましょう。FLAでクラスを「Main」という名前で設定します。次に「ファイル」→「新規」を選択して、作成する新規ドキュメントの選択画面を表示します。リストの中から「ActionScript (AS) ファイル」を選択します。

作成したActionScriptファイルは、FLAファイルと同じ場所に「Main.as」というファイル名で保存します。

Main.asに下記のActionScriptを記入して、FLAファイルの「制御」→「ムービープレビュー」を実行してみましょう。

[sourcecode language=”as3″]
package {
import flash.display.Sprite;
public class Main extends Sprite {
public function Main() {
trace("こんにちは、世界!");
}
}
}
[/sourcecode]

すると、出力パネルに「こんにちは、世界!」というメッセージが表示されるはずです。これは、SWFが実行される際に正しくドキュメントクラス「Main.as」が読み込まれ実行されたことを意味しています。

ライブラリに格納したムービクリップをステージに配置

先週の授業では、タイムラインスクリプトから、ライブラリに格納したムービークリップシンボルを呼び出してステージに表示するというサンプルについて紹介しました。

これと同じ操作を、ドキュメントクラスから行うことも可能です。やり方はタイムラインスクリプトから呼び出す際と同様に、まず作成したムービークリップにクラス名を割り当て(例：MyCircle)、ドキュメントクラスからそのクラスを呼び出し実体を生成(インスタンス化)します。あとは、addChild() を使用して円のインスタンスをステージ上に配置すると、画面に表示されます。

[sourcecode language=”as3″]
package {
import flash.display.Sprite;
public class Main extends Sprite {
public function Main() {
var circle:MyCircle = new MyCircle();
circle.x=200;
circle.y=150;
this.addChild(circle);
}
}
}
[/sourcecode]

/wp-content/uploads/2010/10/ClassTest02.swf, 400, 300

複数のムービクリップをステージに配置する

ライブラリに格納した複数のムービクリップを、それぞれ配置することも簡単です。例えば、丸、四角形、三角形の形をそれぞれMyCircle、MyRect、MyTriangleとうクラス名でMovieClipとしてシンボル化し、ライブラリに格納します。この例では、それをドキュメントクラスから順番に呼び出して、ステージ上に配置しています。

[sourcecode language=”as3″]
package {
import flash.display.Sprite;
public class Main extends Sprite {
public function Main() {
var circle:MyCircle = new MyCircle();
circle.x=200;
circle.y=150;
this.addChild(circle);

var rect:MyRect = new MyRect();
rect.x=140;
rect.y=100;
this.addChild(rect);

var tri:MyTriangle = new MyTriangle();
tri.x=220;
tri.y=200;
this.addChild(tri);
}
}
}
[/sourcecode]

/wp-content/uploads/2010/10/ClassTest03.swf, 400, 300

今日のまとめ

今日の授業では、FLAファイルとActionScriptファイルを分離する方法として、ドキュメントクラスの作成について学びました。

ドキュメントクラスを使用することで、ActionScriptとFLAファイルを分離することで、FLAファイルはムービークリップや画像、音声などFlashに必要となるリソースを格納するためだけの機能として使用し、その動きやインタラクション、画面遷移などのロジックは全て外部ファイルのActionScriptとしてプロジェクト全体を構成していくことが可能となります。

Flashのデザインに必要なパーツとロジックを分離することで、複数人での共同作業や、大規模で更新可能なFlashプロジェクトの作成などが可能となります。本格的なFlashコンテンツを制作する際には必須のテクニックと言えるでしょう。

サンプルファイルのダウンロード

今日の授業で紹介したサンプルは下記からダウンロードしてください。

• サンプルファイル10月20日分(Zip, 29KB)