【ハウツー】

Flash 9 ActionScript 3.0 Previewのイベントリスナーとクラス定義

1 ActionScript 1.0/2.0から3.0にスクリプトを書替える(1)

    野中文雄  [2006/10/31]

    Flash 5スタイルのMovieClipアクション

    ActionScript 3.0は、ECMAScript 4に準拠する[*1]。この点では、ActionScript 2.0と同じだ。しかし、クラスの構成やイベントの扱い、細かなプロパティ・メソッドの仕様が変わっている。したがって、従来のActionScriptの知識だけでは3.0への対応が難しい。ヘルプなどのドキュメントをよく確認する必要がある。

    そこで本稿では、まずFlash 5から実装されたActionScript 1.0の初期のスタイルでサンプルスクリプトを作成し、それを順次ActionScript 3.0に対応できるように書替えてみたい。そのうえで、ActionScript 3.0におけるイベントの扱いとその利点、およびクラスの定義方法について解説する。

    つぎのスクリプト001は、Flash 5スタイルでMovieClipインスタンスに定義したMovieClipアクションだ(図001)[*2]。このスクリプトを設定したMovieClipは、水平方向にバネ運動のようなアニメーション(単振動)を行う[*3]。

    図001 MovieClipインスタンスにMovieClipアクションを設定

    スクリプト001 インスタンスを水平に揺らすMovieClipアクション

    // MovieClip: アニメーションするインスタンス
    // MovieClipアクション
    onClipEvent (load) {
    var nCenterX:Number = Stage.width/2;
    var nCenterY:Number = Stage.height/2;
    var nRadian:Number = 0;
    var nRadiusX:Number = 100;
    var nRadiusY:Number = 60;
    _x = nCenterX;
    _y = nCenterY;
    }
    onClipEvent (enterFrame) {
    nRadian += 0.1;
    _x = nCenterX+nRadiusX*Math.cos(nRadian);
    }

    MovieClipインスタンスに記述するMovieClipアクションには、イベントハンドラアクションが指定されていなければならない。スクリプト001では、onClipEvent()イベントハンドラを用い、loadイベントで初期設定を行い、enterFrameイベントで描画の更新ごとに処理するアニメーションを実行している。

    onClipEvent (load)ハンドラの初期設定では、変数にステージ中心のxy座標やアニメーションする幅と高さの値を格納する。このスクリプトのアニメーションは水平方向のみで、垂直方向の値は当面使わず、後に作成するスクリプトで利用することになる。onClipEvent (enterFrame)ハンドラは、ラジアン角を表す変数に0.1ずつ加算し、インスタンスに水平方向の単振動のアニメーションを行わせている。

    [*1] Flash Player 9およびActionScript 3.0の概要については、「【インタビュー】AdobeのFlash担当者に訊く - Flash Player 9とActionScript 3.0何が変わる?」を参照してほしい。
    [*2] スクリプトはActionScript 1.0のFlash 5スタイルを採っているものの、ActionScript 2.0の「厳密な型指定」を用いている。
    「厳密な型指定」というのは、var宣言した変数や、関数の引数・戻り値などに対して、コロン(:)に続けてデータ型の割当てを行うことだ。プログラム内でデータ型の不一致が見つかるとエラーが生じるため、デバッグの手助けになる。「厳密な型指定」について詳しくは、Flash 8オンラインヘルプの「データ型の割り当てと厳密な型指定について」をご覧いただきたい。
    [*3] 直線上におけるバネのような振動(単振動)は、振動の中心をa、振幅をbとし、振動のスピードを決め、直線的に変化する変数をθとすると、振動する位置xはつぎの式で表せる。
    x = a + b×cos(θ)
    なお、単振動などの運動については、Wikipedia「振動運動」が詳しい。

    新着記事

    特設サイトの情報

      人気記事

      一覧

        イチオシ記事

        新着記事

        特別企画

        マイナビニュースマガジン