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

F-siteセミナー

AS3.0で行こう！

Date: 2006年8月26日 Product: Flash

Platform: All
Viersion: 9.0
    index
  1. ActionScript 1.0のMovieClipアクション − Flash 5スタイル
  2. ActionScript 1.0のフレームアクション − Flash MXスタイル
  3. ActionScript 3.0のフレームアクション
  4. ActionScript 2.0クラス定義
  5. ActionScript 3.0のクラス定義

    6. ■サンプル (Flash 8およびFlash 9形式/約36KB)

1. ActionScript 1.0のMovieClipアクション − Flash 5スタイル (as1/as1_1.fla)
ActionScript 1.0でMovieClipアクションにスクリプトを記述するFlash 5スタイル。MovieClipアクションを設定したインスタンスが、マウスポインタの方向に回転する(図001)。

図001■マウスポインタを追いかけてMovieClipが回転する

アニメーションの処理は、onClipEvent(enterFrame)ハンドラに記述。マウスポインタの座標値MoiveClip._xmouse/MovieClip._ymouseから、回転する角度を計算する(スクリプト001)[*1]。座標値から角度を計算する関数は、getAngle()としてメインタイムラインに定義する。「マウスの方向に回転」するスクリプトの内容について詳しくは、F-siteセミナー「MovieClipのターゲットパスとプロパティ」を参照。

スクリプト001■マウスポインタに追随してインスタンスを回転するMovieClipアクション

// MovieClip: マウスを追いかけて回転するインスタンス
// MovieClipアクション
onClipEvent (load) {
  var nDeceleration:Number = 0.2;
}
onClipEvent (enterFrame) {
  _rotation += _root.getAngle(_xmouse, _ymouse)*nDeceleration;
}

メインタイムラインのフレームアクションに定義したgetAngle()関数は、Math.atan2()メソッドで、座標からラジアン値の角度を取得する。ラジアンから度数への変換比率は、定数(変数)に設定して用いる。変換された度数値を、関数の値として返す(スクリプト002)。

スクリプト002■xy座標から度数値を返す関数getAngle()の定義

// タイムライン: _level0
// 第1フレームアクション    
var RADIAN_TO_DEGREE:Number = 180/Math.PI;
function getAngle(nX:Number, nY:Number):Number {
  var nRadian:Number = Math.atan2(nY, nX);
  var nDegree:Number = nRadian*RADIAN_TO_DEGREE;
  return nDegree;
}

[制御]メニューから、[ムービープレビュー]を実行して、動作を確認する。

[*1] 本稿ではActionScript 1.0スタイルのスクリプトについても、ActionScript 2.0の厳密な型指定を用いる。変数に対しては、その宣言時にデータ型を指定。

var 変数名:データ型;

また、関数(function)の引数や戻り値についても、データ型を指定することが可能。

function 関数名(引数:データ型):戻り値のデータ型 {
   ステートメント;
}

なお、厳密な型指定について詳しくは、Flash 8オンラインヘルプ[ActionScript 2.0の学習] > [データおよびデータ型] > [データ型について] > [データ型の割り当てと厳密な型指定について]およびFlash ActionScript入門ノート「厳密な型指定」を参照。

2. ActionScript 1.0のフレームアクション − Flash MXスタイル (as1/as1_2.fla)
ActionScript 3.0は、インスタンスに記述することはできない。そこで、Flash MXで実装されたイベントハンドラメソッドを使って、まずスクリプト001をフレームアクションに書替える。

onClipEvent(load)ハンドラは初期設定なので、ステートメントを第1フレームに直接記述。onClipEvent(enterFrame)イベントハンドラアクションは、MovieClip.onEnterFrameイベントハンドラメソッドで書替える(スクリプト003)。イベントハンドラメソッドは、名前のない関数で定義する方法のほか、スクリプト003のように名前のある関数で定義することもできる。

スクリプト003■マウスポインタに追随してインスタンスを回転するフレームアクション

// MovieClip: マウスを追いかけて回転するインスタンス
// フレームアクション
var nDeceleration:Number = 0.2;
function onEnterFrame():Void {
  _rotation += _root.getAngle(_xmouse, _ymouse)*nDeceleration;
}

上記スクリプト003とメインタイムラインに記述したスクリプト002は、ともにフレームアクションなので、ActionScript 3.0への書替えが可能になる。

3. ActionScript 3.0のフレームアクション (as3/as3_1.fla)
まず、メインタイムラインのフレームアクション(スクリプト002)は、ActionScript 3.0でそのまま動作する。

MovieClipシンボル内に記述したフレームアクション(スクリプト003)は、大きくふたつの観点からの修正が必要。第1に、イベントハンドラメソッドは、イベントリスナーに変更する。第2は、プロパティ名の変更である。

まず、イベントリスナーとして、処理の内容を任意の関数で定義する。つぎにその関数を、EventDispatcher.addEventListener()メソッドによりイベントリスナーとして登録する。メソッドのターゲットは、イベントを受取るインスタンスになる。

インスタンス.addEventListener(イベント, 関数);

プロパティ名は、ActionScript 3.0では先頭にアンダースコア「_」がつかなくなる。さらに、名称の変わったプロパティもある(表001)。

表001■ActionScript 1.0/2.0からActionScript 3.0へのプロパティ名変更の例
変更方法
ActionScript 1.0/2.0
ActionScript 3.0

「_」削除

_root、_rotation

root、rotation

名称変更

_xmouse、_ymouse

mouseX、mouseY

以上ふたつのポイントを修正すると、ActionScript 3.0のフレームアクションとして動作する(スクリプト004)。

スクリプト004■ActionScript 3.0で記述したフレームアクション

// MovieClip: マウスを追いかけて回転するインスタンス
// フレームアクション
var nDeceleration:Number = 0.2;
addEventListener("enterFrame", enterFrame);
function enterFrame(eventObject:Event):void {
  rotation += root.getAngle(mouseX, mouseY)*nDeceleration;
}

4. ActionScript 2.0クラス定義 (as2/as2_1.fla、MyClass.as、MyMath.as)
ActionScript 1.0のフレームアクション(スクリプト003)を、ActionScript 2.0のクラス定義に書替えてみる。ActionScriptファイルを作成して、ActionScript 2.0クラス定義を行う(表002)。クラス定義の中身(本体)は、var宣言したプロパティとメソッド(関数)定義のみ(ともに型指定可能)。

表002■ActionScript 2.0のクラス定義
スクリプトの記述場所 外部ActionScriptファイル。
ファイル名 クラス名と同一。拡張子.as。
クラス定義 classステートメント。
コンストラクタ関数 クラス名と同一(省略可)。
プロパティ コンストラクタ関数の前にvar宣言。型指定可能。
メソッド function定義。引数と戻り値の型指定可能。
継承 extendsキーワード。

クラス名はMyClassとし、コードブロックにはMovieClipシンボルのフレームアクション(スクリプト003)をカット&ペーストする。そのうえで、スクリプトに加えるべきことが2点ある。第1は、空のコンストラクタ関数を定義すること。そして第2は、extendsキーワードにより、MovieClipクラスを継承することである。

コンストラクタ関数は、インスタンスが作成(配置)されるときに呼出される。初期化に必要な処理を記述することが通常。とくに初期化の処理がなければ、空でも構わない[*2]。

このクラスMyClassは、MovieClipシンボルに設定する。[ライブラリ]パネルでMovieClipシンボルをクリックし、パネルのオプションポップアップメニューから[プロパティ]を選択。[シンボルプロパティ]ダイアログボックスで、[リンケージ]の[アクションスクリプトに書き出し]にチェックをつけ、[識別子]に半角英数字で任意の名前(たとえば"Pen")をタイプしたら、[AS 2.0クラス]に、設定するクラス名"MyClass"を入力する(図002)。

図002■[シンボルプロパティ]ダイアログボックスの[AS 2.0クラス]にクラス名を入力
シンボルプロパティ

[AS 2.0]クラスを設定すると、このシンボルのインスタンスは、MovieClipでなくカスタムクラスMyClassのインスタンスになる。そうなると、MyClassのプロパティやメソッドが利用できる反面、MovieClipのメソッドやプロパティは使えなくなってしまう。そこで、extendsステートメントによりMovieClipクラスを継承する。すると、MovieClipクラスをベースとしたうえで、MyClassのプロパティ・メソッドを拡張(extend)するかたちになる。つまり、MovieClipクラスのプロパティ・メソッドも、MyClass自身のものと同じようにアクセスできる。

スクリプト004■ActionScript 2.0でMovieClipのスクリプトをクラス定義

// ActionScript 2.0クラス定義ファイル: MyClass.as
class MyClass extends MovieClip {
  var nDeceleration:Number = 0.2;
  function MyClass() {}   // 空のコンストラクタ関数
  function onEnterFrame():Void {
    _rotation += _root.getAngle(_xmouse, _ymouse)*nDeceleration;
  }
}

メインタイムラインのフレームアクション(スクリプト002)はそのままにして、[ムービープレビュー]で動作を確認する。問題なく動作することを確かめてから、スクリプト002をActionScript 2.0クラスとして定義する。

スクリプト004と同様の手順で、クラス名はMyMathとして、ActionScriptファイルを作成する。ただし、このクラスはMovieClipシンボルには適用しない。クラスのコードブロックに、メインタイムラインのフレームアクションスクリプト002をカット&ペーストする。追加の内容は1点[*3]。プロパティ(変数)とメソッド(関数)に、staticステートメントを加える(スクリプト005)。

スクリプト005■ActionScript 2.0でメインタイムラインのスクリプトをクラス定義

// ActionScript 2.0クラス定義ファイル: MyMath.as
class MyMath {
  static var RADIAN_TO_DEGREE:Number = 180/Math.PI;
  static function getAngle(nX:Number, nY:Number):Number {
    var nRadian:Number = Math.atan2(nY, nX);
    var nDegree:Number = nRadian*RADIAN_TO_DEGREE;
    return nDegree;
  }
}

static宣言したメソッドは、クラスのインスタンスをつくることなく、クラスを直接参照して呼出す[*4]。したがって、MovieClipシンボルに設定したActionScript 2.0クラス(スクリプト004)の中で、getAngle()メソッドを呼出しているステートメントを、MyMath.getAngle()という呼出しに修正する必要がある(スクリプト006)。

スクリプト006■ActionScript 2.0でMovieClipのスクリプトをクラス定義を修正

// ActionScript 2.0クラス定義ファイル: MyClass.as
class MyClass extends MovieClip {
  var nDeceleration:Number = 0.2;
  function MyClass() {}
  function onEnterFrame():Void {
    _rotation += MyMath.getAngle(_xmouse, _ymouse)*nDeceleration;
  }
}

これで、Flashムービー内のスクリプトは、すべてActionScript 2.0クラスで定義された。

[*2] 実際にはクラスにコンストラクタ関数を記述しなくても、クラスは正常に書出される。「クラスファイル内にコンストラクタ関数を明示的に宣言していない場合、つまり、クラスと同じ名前の関数を作成していない場合は、コンパイラによって空のコンストラクタ関数が自動的に作成され」るからだ(Flash 8オンラインヘルプ[ActionScript 2.0の学習] > [関数とメソッド] > [関数とメソッドについて] > [メソッドと関数の種類について] > [コンストラクタ関数について])。

[*3] スクリプト005では、コンストラクタ関数の定義は省略した。なお、前出注釈[*2]参照。

[*4] プロパティ(変数)RADIAN_TO_DEGREEは、static宣言したメソッドgetAngle()から呼出すため、やはりstaticステートメントで定義しなければならない。

5. ActionScript 3.0のクラス定義 (as3/as3_2.fla、MyClass.as、MyMath.as)
まず、ActionScript 3.0でMovieClipシンボルに記述したフレームアクション(スクリプト004)を、クラス定義に修正する。クラス名はMyClassとして、ActionScriptファイルを同名で保存することや、クラス定義の基本は前項「4. ActionScript 2.0のクラス定義」と基本的に同じ。ただし、3つ追加すべきことがある。

第1に、packageキーワードを用いて、クラス定義全体をすっぽりと囲む必要がある。「パッケージ」は、クラスをフォルダ/ディレクトリのようにグループ分けする機能である。packageキーワードの後に、パッケージ名を指定する。パッケージ名は、指定しないことも可能(今回のサンプルは無指定とした)。

第2に、importステートメントの記述である。ActionScript 3.0では、クラスがパッケージに再構成された。パッケージのクラスを使用するには、importステートメントで、パッケージも含めたクラスのフルパス名(完全修飾クラス名)を宣言しなければならない[*5]。

第3に、classキーワードの前に、属性キーワードpublicを指定する(スクリプト007)。これは、クラスを外部からアクセス可能にする設定である。MovieClipシンボルに設定するクラスは、public指定する必要がある。

スクリプト007■ActionScript 3.0でMovieClipのスクリプトをクラス定義

// ActionScript 3.0クラス定義ファイル: MyClass.as
package {
  import flash.display.MovieClip;
  import flash.events.Event;
  public class MyClass extends MovieClip {
    var nDeceleration:Number = 0.2;
    function MyClass() {
      addEventListener(Event.ENTER_FRAME, enterFrame);
    }
    function enterFrame(eventObject:Event):void {
      rotation += root.getAngle(mouseX, mouseY)*nDeceleration;
    }
  }
}

もうひとつ、EventDispatcher.addEventListener()メソッドの第1引数であるイベントを、文字列"enterFrame"から、Event.ENTER_FRAME定数(プロパティ)に変更した。定数の内容は"enterFrame"という文字列なので、動作結果は変わらない。しかし、Event.ENTER_FRAMEを使うと、文字列とは異なり、スペルミスに対するシンタックスチェックが働く。

ActionScript 2.0と同様に、クラスMyClassはMovieClipシンボルに設定する(図003)。[Test Movie](ムービープレビュー)で動作を確認したら、つぎにメインタイムラインのフレームアクションをクラス定義に書替える。

図003■[Symbol Properties]ダイアログボックスの[Class]にクラス名を入力
シンボルプロパティ

ActionScriptファイルを作成して、クラス名はMyMathとする。packageおよびclassをスクリプト007と同様に記述したうえで(public指定はなくてよい)、メインタイムラインのフレームアクション002をカット&ペーストする。ActionScript 2.0のスクリプト005と同じく、メソッドとプロパティにはstatic属性キーワードをつける(スクリプト008)。

スクリプト008■ActionScript 3.0でメインタイムラインのスクリプトをクラス定義

// ActionScript 3.0クラス定義ファイル: MyMath.as
package {
  class MyMath {
    static const RADIAN_TO_DEGREE:Number = 180/Math.PI;
    static function getAngle(nX:Number, nY:Number):Number {
      var nRadian:Number = Math.atan2(nY, nX);
      var nDegree:Number = nRadian*RADIAN_TO_DEGREE;
      return nDegree;
    }
  }
}

ActionScript 2.0とは異なる点として、プロパティのvar宣言をconstキーワードに替えている。const指定されたプロパティは「定数」(constant)とされ、ひとたび設定した値を書替えることはできなくなる(varのままでも、スクリプトとしては問題なく動作する)。

MovieClipに設定するActionScript 3.0クラス定義(スクリプト007)の、getAngle()メソッドの呼出しをMyMath.getAngle()に修正して完成。

スクリプト009■MovieClipに設定するActionScript 3.0クラス定義を修正

// ActionScript 3.0クラス定義ファイル: MyClass.as
package {
  import flash.display.MovieClip;
  import flash.events.Event;
  public class MyClass extends MovieClip {
    var nDeceleration:Number = 0.2;
    function MyClass() {
      addEventListener(Event.ENTER_FRAME, enterFrame);
    }
    function enterFrame(eventObject:Event):void {
      rotation += MyMath.getAngle(mouseX, mouseY)*nDeceleration;
    }
  }
}


[*5] importステートメントは、ActionScript 2.0にも存在した。しかし、3.0では仕様が変わったことに注意が必要である。詳しくは、F-site「importの使い方が変わった」および「import指示子」を参照。

【付記】このセミナーの内容をベースにしたActionScript 3.0の解説を、Flashデベロッパーセンターに寄稿する予定である。掲載された際には、FumioNonaka.comおよびF-siteにその情報を投稿する。

作成者: 野中文雄
作成日: 2006年9月5日
Copyright © 2001-2006 Fumio Nonaka.  All rights reserved.