サイトトップ
Director Flash 書籍 業務内容 プロフィール
 

Now Writing...(鋭意執筆中)
ActionScript 3.0プロフェッショナルガイド

■Mailing List: ActionScript 3.0

F-siteセミナー

3 stepで始めるAS3のスクリプト

Date: 2008年5月31日 Product: Flash Platform: All Viersion: CS3/ActionScript 3.0

    index
  1. インスタンスをつくって表示する
  2. [ライブラリ]からインスタンスをつくる
  3. 外部ファイルをロードする
  4. イベントを待受けて処理する

    5. ■サンプルファイル (Flash CS3形式/約104KB)

ActionScript 3.0は以前のバージョンと比べて、書くのが面倒になったといわれる。しかし、それはビジネスレターに、もって回った形式や作法があるのに似ている。一見わずらわしく思えても、その作法にしたがいさえすれば、案内状でも礼状でも注文書でも、型どおりの書き方で作成できる。今回はActionScript 3.0の中でも、もっとも基本的な型を3つ紹介する。

1. インスタンスをつくって表示する
まず、インスタンスをつくるには、そのクラスを確かめて、new演算子(演算記号)でクラス名の特別な関数(コンストラクタ)を呼出す。インスタンスは、ActionScriptにおけるメモリである変数に入れておかないと[*1]、あとで扱えない。変数はvar宣言して、変数名のあとにコロン(:)をつけて、インスタンスのクラスを指定する(データ型の指定という)。なお、変数名には、基本的に半角の英数字を使う[*2]

基本その1●インスタンスをつくる
var 変数名:クラス名 = new クラス名(ここにパラメータを入れることもある);

インスタンスをつくっても、まだメモリ上の存在なので、ステージには表示されない。表示するには、タイムラインの子として表示階層(表示リスト)に加える必要がある。使う命令(メソッド)は、addChild()だ。パラメータ(引数)には、表示したいインスタンスを指定する。

基本その2●インスタンスをタイムラインに表示する
addChild(表示したいインスタンス);

たとえば、[テキストツール]を使って、テキストフィールドをステージに配置し、テキストを入力するという操作(図001)を、ActionScript 3.0で処理してみよう。フレームに記述するスクリプト(フレームアクション)は、以下のとおりだ(スクリプト01・図002)。

図001■TextFieldインスタンスを配置してテキストの設定

スクリプト01■TextFieldインスタンスをつくりステージに配置してテキストの設定(01_TextField.fla)

var _txt:TextField = new TextField();
addChild(_txt);
_txt.text = "F-site Seminar";

テキストフィールドをつくったり操作するためのクラスはTextFieldだ。インスタンスは前述のとおりnew演算子で作成し、addChild()メソッドを使ってタイムラインに表示する。テキストを設定するには、textプロパティにテキストを代入する。スクリプトの動作を確かめるには、[制御]メニューから[ムービープレビュー](ショートカット[command]+[return]または[Ctrl]+[Enter])を実行する(図002)。

図002■フレームアクションを[ムービープレビュー]で確かめる

[*1] =記号(代入演算子)で値を入力(メモリ)することは、「代入」と呼ばれる。

[*2] 大文字と小文字は区別されるので注意。なお、記号は「_」(アンダースコア)と「$」(ドル記号)のみ用いることができる(「ActionScript 3.0を使ってみよう」01-02「インスタンス名と識別子」参照)。

2. [ライブラリ]からインスタンスをつくる
つぎに、[ライブラリ]からインスタンスをつくってみよう。今回扱うのは、ムービークリップ(MovieClip)シンボルだ。[ライブラリ]のシンボルからインスタンスをつくりたい場合、シンボルにはデフォルトではクラスがない。そこで、[ライブラリ]にあるシンボルを選んで、[リンケージプロパティ]ダイアログボックス([ライブラリ]のオプションポップアップメニューから[リンケージ])で[ActionScriptに書き出し]をチェックしたうえで、[クラス]に任意の名前を入力する(図003)。[クラス]に指定する名前も、変数と同じく、半角の英数字を用いる。

図003■[ライブラリ]のシンボルに[リンケージプロパティ]ダイアログボックスで[クラス]を設定

ひとたび[クラス]が設定できてしまえば、インスタンスをつくってステージに表示する方法は、TextFieldの場合と同じだ。つまり、new演算子でインスタンスをつくり、addChild()メソッドによりタイムラインに加えればよい(スクリプト02)。

スクリプト02■MovieClipシンボルからインスタンスをタイムラインに配置(02_MovieClipSymbol.fla)

var _mc:MovieClip = new Pen();
addChild(_mc);
_mc.x = 120;
_mc.y = 90;

[リンケージプロパティ]ダイアログボックスで[クラス]を設定した場合、データ型の指定には[基本クラス]のフィールドにデフォルトで記載されているクラスを使う。なお、インスタンスの水平および垂直座標のプロパティは、xとyである。[ムービープレビュー]を確かめると、インスタンスがタイムラインの指定座標に配置される(図004)。

図004■インスタンスがタイムラインの指定座標に配置される

[ライブラリ]のサウンドを再生するのは、もっと簡単だ。サウンドは、ステージに表示しないからである。したがって、addChild()メソッドは使わない。[リンケージプロパティ]ダイアログボックスで[クラス]を設定するのは、MovieClipシンボルの場合と同じだ(図005)。

図005■[ライブラリ]のサウンドに[リンケージプロパティ]ダイアログボックスで[クラス]を設定

サウンドのインスタンスはnew演算子でつくる。そのインスタンスに対してplay()メソッドを呼出せば、サウンドが再生される(スクリプト03)。[ムービープレビュー]で確かめよう。

スクリプト03■[ライブラリ]のサウンドを再生(03_Sound.fla)

var _sound:Sound = new MySound();
_sound.play();

[ライブラリ]のビットマップをステージに表示するには、MovieClipシンボルの場合よりひと手間加わる。というのは、ビットマップのインスタンスは、addChild()のパラメータに指定できる資格がないからだ。そのため、その資格のあるBitmapインスタンスという容れ物に入れたうえで、タイムラインに配置しなければならない。まず、[リンケージプロパティ]ダイアログボックスで[クラス]を設定したうえで、インスタンスをnew演算子でつくるのは、毎度のとおりだ(図006)。

図006■[ライブラリ]のビットマップに[リンケージプロパティ]ダイアログボックスで[クラス]を設定

Bitmapインスタンスも、原則どおりnew演算子でつくる。ただし、その中に入れるビットマップのインスタンスを、パラメータとしてコンストラクタの括弧()内に指定する。そして、そのBitmapインスタンスを、addChild()メソッドでタイムラインに配置すればよい(スクリプト04)。

new Bitmap(ビットマップのインスタンス)
スクリプト04■[ライブラリ]のビットマップをタイムラインに配置(04_Bitmap)

var myBitmapDataa:BitmapData = new Pen(0, 0);
var myBitmap:Bitmap = new Bitmap(myBitmapDataa);
addChild(myBitmap);
myBitmap.x = 30;

[ライプラリ]で[クラス]を設定したビットマップのインスタンスを作成するとき、ふたつの数値がパラメータとして必要とされる[*3]。この値はともに0でよい。[ムービープレビュー]を実行すると、ビットマップがタイムラインに表示される(図007)。なお、「ビットマップをダイナミックに配置する」も、併せて参照してほしい。

図007■ビットマップがタイムラインの指定座標に配置される

ここまで、ActionScript 3.0では、new演算子とクラスのコンストラクタによりインスタンスを作成し、(必要があれば)addChild()メソッドでタイムラインに配置するというふたつの基本を確認した。では、ActionScript 2.0ではどうだったのか、ポイントとなる命令文(ステートメント)を比較してみよう(表001)。

表001■ActionScript 3.0と2.0の処理の違い
TextFieldインスタンスを配置
3.0 var _txt:TextField = new TextField();
addChild(_txt);
2.0 var _txt:TextField = createTextField("my_txt", getNextHighestDepth(), 0, 0, 100, 25);
MovieClipシンボルのインスタンスを配置
3.0 var _mc:MovieClip = new Pen();
addChild(_mc);
2.0 var _mc:MovieClip = attachMovie("Pen", "my_mc", getNextHighestDepth());
サウンドの再生
3.0 var _sound:Sound = new MySound();
2.0 var _sound:Sound = new Sound(this);
_sound.attachSound("MySound");
ビットマップの配置
3.0 var myBitmapDataa:BitmapData = new Pen(0, 0);
var myBitmap:Bitmap = new Bitmap(myBitmapDataa);
addChild(myBitmap);
2.0 var myBitmapDataa:BitmapData = BitmapData.loadBitmap("Pen");
var _mc:MovieClip = createEmptyMovieClip("my_mc", getNextHighestDepth());
_mc.attachBitmap(myBitmapDataa, _mc.getNextHighestDepth());

ActionScript 2.0は、3.0と比べて一般にステートメント数は少ない傾向があるものの、その分パラメータは煩雑になりがちだ。しかも、呼出すメソッド名とそのターゲットには、はっきりとした決まりがない。

[*3] ふたつのパラメータは、幅と高さを示す。しかし、インスタンスの幅と高さは、パラメータの値にかかわらず[ライブラリ]のビットマップの値が自動的に設定されるので、ふたつの数値はいくつでも構わない。

3. 外部ファイルをロードする
つぎに、外部ファイルのロードについて、サンプルをいくつか紹介する(図008)。外部MP3サウンドファイルをストリーミング再生する例から始めよう。new演算子でインスタンスをつくり、play()メソッドで再生するという流れは、前掲スクリプト03と同じだ。変わる点は、ふたつある。

図008■外部ファイルをFlashムービーにロードする

第1に、[ライブラリ]のサウンドではないので、クラスを設定する必要はない。クラスは、ActionScript 3.0に定義済みのSoundを使う。

第2に、外部MP3ファイルをロードするには、Soundインスタンスをターゲットとしてload()メソッドを呼出す。このとき、パラメータには、MP3ファイルのURLを指定する[*4]。URLは単なるテキストだが、このURLもnew演算子でインスタンスにしなければならない。クラスはURLRequestで、URLのテキストをパラメータにする(スクリプト05)。

new URLRequest(URLのテキスト)
スクリプト05■外部MP3サウンドファイルをストリーミング再生する(05_LoadingSound.fla)

var _sound:Sound = new Sound();
var myRequest:URLRequest = new URLRequest("sound.mp3");
_sound.load(myRequest);
_sound.play();

外部JPEGファイル(前掲図008参照)をロードして、タイムラインに配置するというのも、基本的にMP3ファイルの再生と同じ処理の流れだ。ただし、ふたつ注意すべき点がある。第1に、JPEGファイルをロードするインスタンスは、Loaderクラスで作成する。第2に、インスタンスをタイムラインに表示するには、addChild()メソッドを呼出す必要がある。

外部JPEGファイルをロードするメソッドはload()で、パラメータにはURLを指定したURLRequestインスタンスをつくる、といった点はMP3ファイルの再生と同じである(スクリプト06)。

スクリプト06■外部JPEGファィルをロードする(06_Loader.fla)

var myLoader:Loader = new Loader();
addChild(myLoader);
myLoader.x = 30;
var myRequest:URLRequest = new URLRequest("PenBitmap.jpg");
myLoader.load(myRequest);

Loaderクラスを使うということ以外は、MovieClipシンボルのインスタンス配置と、外部MP3ファイルのロードについての知識を組合わせれば、理解できるスクリプトだろう。[ムービープレビュー]を実行すると、外部JPEGファイルがタイムラインの指定座標に配置される(図009)。

図009■MovieClipシンボル内にはふたつのMovieClipインスタンスを配置

[*4] URLは通常相対パスで指定する。ただし、その起点は、SWFファイルではなく、それを埋込んだHTMLドキュメントファイルになる。

4. イベントを待受けて処理する
最後に、外部テキストファイルをロードして、タイムラインに表示してみよう。外部テキストファイルを読込むのに用いるのは、URLLoaderクラスだ。すると、つぎのようなフレームアクションで、外部テキストファイル"test.txt"が読込めそうだ。

var myLoader:URLLoader = new URLLoader();
var myRequest:URLRequest = new URLRequest("test.txt");
myLoader.load(myRequest);

確かに、これで外部テキストファィルのロードはできる。しかし、このままでは、タイムラインに表示されない。そして、URLLoaderインスタンスは、addChild()メソッドのパラメータとしての資格がないだけでなく、表示そのものができないのだ。

したがって、タイムラインに表示するには、そのためのTextFieldインスタンスを別途配置し、URLLoaderインスタンスにロードしたテキストをTextFieldのtextプロパティに設定する必要がある。URLLoaderインスタンスに読込まれたテキストは、dataプロパティで取出せる。では、フレームアクションをつぎのように直せばよいだろうか。

var _txt:TextField = new TextField();
addChild(_txt);
var myLoader:URLLoader = new URLLoader();
var myRequest:URLRequest = new URLRequest("test.txt");
myLoader.load(myRequest);
_txt.text = myLoader.data;

[ムービープレビュー]で試すと、エラーが出る(図010)。これは、URLLoaderインスタンスのdataプロパティに、まだテキストが読込まれていないためだ。電話で相手の番号をプッシュし終わったからといって、いきなり話し始めても相手には通じない。呼出し音が止まり、相手が出たのを確かめて、話す必要がある。

図010■URLLoaderインスタンスのdataプロパティをTextFieldに設定するとエラー

URLLoaderインスタンスについても、外部テキストファイルがロードし終えるまで、TextFieldインスタンスへのテキストの設定は待たなければならない。データのロードの完了とか、ユーザーがボタンをクリックしたとか、処理の要となるタイミングのことを「イベント」という。ActionScript 3.0では、イベントには関数を登録して処理する。イベントをいわば待受ける関数は、リスナー関数とも呼ばれる。イベントの待受けは、つぎのように行う。

基本その3●イベントを待受けて処理する
インスタンス.addEventListener(イベント, 関数名);
function 関数名(eventObject:イベントのデータ型):void {
  待受けてやりたい処理;
}

外部テキストファイルのロードの完了というイベントを待受けるためには、以下のスクリプト07のように、リスナー関数をURLLoaderインスタンスに登録する。addEventListener()メソッドにパラメータとして指定するロード完了のイベントは、[ヘルプ]で調べればEvent.COMPLETEだとわかる。関数名は、変数やクラスの名前と同じく、半角英数字で任意に決めてよい。

関数は一般にfunctionキーワードで定義し、関数名に続けて括弧()を記述する。括弧()内はパラメータを指定する場合もあれば、しないこともある。リスナー関数には、パラメータをひとつ設定する必要がある[*5]。コロン(:)に続けて指定するデータ型(Event)は、addEventListener()メソッドのパラメータに指定したイベント(Event.COMPLETE)のクラスと一致させる。

スクリプト07■外部テキストファイルをロードしてタイムラインに配置(07_LoadingText.fla)

var _txt:TextField = new TextField();
addChild(_txt);
var myLoader:URLLoader = new URLLoader();
var myRequest:URLRequest = new URLRequest("test.txt");
myLoader.addEventListener(Event.COMPLETE, xSetText);
myLoader.load(myRequest);
function xSetText(eventObject:Event) {
  _txt.text = myLoader.data;
}

これで、URLLoaderインスタンスに外部テキストファイルがロードし終わると、そのイベントEvent.COMPLETEに登録したリスナー関数が呼出され、関数内に定義した処理が行われる。つまり、読込んだ外部ファイルのテキストが、タイムラインに配置したTextFieldインスタンスのtextプロパティに設定される(図011)。

図011■URLLoaderインスタンスにロードされた外部ファィルのテキストとがTextFieldに設定

[*5] パラメータは、基本的に変数として扱われる。したがって、半角英数字で任意の名前を指定する。

作成者: 野中文雄
更新日: 2008年6月9日 F-site「ビットマップをダイナミックに配置する」を参考として追加。
作成日: 2008年6月2日
ドラフト作成: 2008年5月30日
Copyright © 2001-2008 Fumio Nonaka.  All rights reserved.