サイトトップ

Director Flash 書籍 業務内容 プロフィール

F-siteセミナー

ActionScriptどこに書く? − MXスタイルからAS2.0まで

Date: 2004年5月15日 Product: Flash

Platform: All
Viersion: MX 2004

【宣伝】6月15日発売予定『FLASH OOP − ActionScriptによるオブジェクト指向プログラミング
(F-siteセミナー参加者じゃんけん大会プレゼント提供書籍)

■サンプルファイル: F-site_May15_04 (約44KB Zip/Sit)
*.flaファイルはいずれもFlash MX 2004で作成していますが、ActionScript2.fla以外は[Flash MXドキュメント(*.fla)]のフォーマットで保存しています。ActionScript 2.0クラス定義ファイルEasing.asは、テキストファイルですので、エディタ等で開くことができます。

1. Flash 5スタイル
フレームアクションとMovieClipアクション、Buttonアクションで、機能分担。イベントに対応するスクリプトはMovieClipアクションとButtonアクションに、フレームで実行すべき処理はフレームアクションに記述する。フレームアクションはシンボルに共有され、MovieClipアクションとButtonアクションはインスタンスごとに設定されることに注意。

スクリプト01■Flash5.fla

// MovieClip: 移動するインスタンス
// MovieClipアクション
// 初期設定
onClipEvent (load) {
  var nDeceleration = 0.2;  // 減速率
  var nTargetX = _x;  // 初期水平(x)位置座標
}
// アニメーション処理
// *減速のアニメーションについては「MovieClipのターゲットパスとプロパティ」参照
onClipEvent (enterFrame) {
  _x += (nTargetX-_x)*nDeceleration;
}

// MovieClip: ボタン
// MovieClipアクション
on (release) {
  _parent.my_mc.nTargetX += 10;
}


MovieClipとonハンドラ
MovieClipインスタンスにButtonと同じonイベントハンドラアクションが設定できるのは、Flash MX以降。

2. Flash MXスタイル(コンポーネント方式)
Flash MXから、イベントハンドラメソッドが実装された。これにより、イベントハンドラの処理を、フレームアクションとして記述することが可能になった。基本的なスクリプトは処理の対象となるタイムライン(MovieClip)の(第1)フレームアクションにまとめ、インスタンスごとに処理のことなるスクリプトをButtonやMovieClipアクションに設定する。

スクリプト02■FlashMX_01.fla

// MovieClip: 移動するインスタンス
// 第1フレームアクション
// 初期設定
var nDeceleration = 0.2;
var nTargetX = _x;
// イベントハンドラメソッドを使用したアニメーション処理
this.onEnterFrame = function() {
   _x += (nTargetX-_x)*nDeceleration;
};

3. Macromedia推奨スタイル
基本的に、メインタイムラインの第1フレームに記述(外部ファイルで#include)。インスタンスには、できるかぎりスクリプトを書かない。スクリプトとデザインを分離する。チームプロジェクトに適している。スクリプトを記述するタイムラインとイベントハンドラメソッドの定義先インスタンスとが異なるため、コールバック関数内でthis参照とデフォルト(ターゲットパスを省略した)参照が違ってくることに注意。

スクリプト03■MacromediaStyle_01.fla

// _root: メインのタイムライン
// 第1フレームアクション

// アニメーションするインスタンスの処理
// MovieClip: _root.my_mc
my_mc.nDeceleration = 0.2;
my_mc.nTargetX = my_mc._x;
my_mc.onEnterFrame = function() {
   this._x += (this.nTargetX-this._x)*this.nDeceleration;
};

// ボタンの(MovieClip)インスタンスの処理
// MovieClip: _root.button_mc
button_mc.onRelease = function() {
   this._parent.my_mc.nTargetX += 10;
};


表01■Flash MXのコンポーネントスタイルとMacromeida推奨スタイルとの違い
Macromedia推奨スタイル

【長所】
・基本的に、メインタイムラインの第1フレームアクションで、すべての処理が把握できる。
・スクリプトをデザインと分離できる。プログラマは、ムービーを見る必要がない。
・外部.asファイルを#includeすればよく、スクリプトが流用しやすい。
【短所】
・スクリプトとデザインの整合性に注意しなければならない。基本的に仕様書が必要。
・スクリプトの一字一句の変更も、必ずプログラマが対応することになる。
・大規模の開発向きで、小回りは利きにくい。

コンポーネントスタイル

【長所】
・スクリプトと(ビジュアル)素材がパーツとして一体化される。
・プログラマが作成したものを、デザイナーがアレンジ・修正できる。
・コンポーネント化を意識して作成すれば、ライブラリ化も可能。
【短所】
・スクリプトの記述場所が、分散化する。
・プログラマとデザイナーの役割分担を、予めよく相談しておく必要がある。
・大規模の開発には、対応しにくい。

4. functionの利用
Flash MX以降は、イベントハンドラメソッドを始め、functionの活用が重要。イベントハンドラメソッドは、ダイナミックに設定・クリアできる。

スクリプト04■FlashMX_02.fla

// MovieClip: 移動するインスタンス
// 第1フレームアクション
// [初期設定]=====
var nDeceleration = 0.2;
var nTargetX = _x;
// [function定義]=====
// 関数xEaseTo(): イーズアウトの開始
// 引数nX: 移動ピクセル数
function xEaseTo(nX) {
  nTargetX = _x+nX;
  this.onEnterFrame = xFrameAnimation;
}
// 関数xFrameAnimation(): アニメーション処理
// 引数: なし
function xFrameAnimation() {
  var nDistanceX = nTargetX-_x;
  if (Math.abs(nDistanceX)>0.5) {
    _x += nDistanceX*nDeceleration;
  } else {
    _x = nTargetX;
    // イベントハンドラメソッドのクリア
    delete this.onEnterFrame;
  }
  trace(_x); //  確認用
}

// MovieClip: ボタン
// MovieClipアクション
on (release) {
   _parent.my_mc.xEaseTo(10);
}


スクリプト05■MacromediaStyle_02.fla

// _root: メインのタイムライン
// 第1フレームアクション

// MovieClip: _root.my_mc
// [初期設定]=====
my_mc.nDeceleration = 0.2;
my_mc.nTargetX = my_mc._x;
// [function定義]=====
function xEaseTo(nX) {
  my_mc.nTargetX = my_mc._x+nX;
  my_mc.onEnterFrame = xFrameAnimation;
}
function xFrameAnimation() {
  var nDistanceX = this.nTargetX-this._x;
  if (Math.abs(nDistanceX)>0.5) {
    this._x += nDistanceX*this.nDeceleration;
  } else {
    this._x = this.nTargetX;
    delete this.onEnterFrame;
  }
  trace(this._x);  // 確認用
}

// MovieClip: _root.button_mc
button_mc.onRelease = function() {
  this._parent.xEaseTo(10);
};

5. ActionScript 2.0(スクリプトエディタはProfessionalのみ)
ActionScript 2.0は、クラス定義のスタイルが最大の特徴。classステートメントで明確にクラスを定義し、変数(プロパティ)や関数(メソッド)にデータ型の指定ができる。クラスをシンボルに対して設定することも可能。シンボルのインスタンスは、MovieClipとして動作させる必要があるので、MovieClipクラスを継承する。

スクリプト06■Easing.as

// ActionScript 2.0クラス定義ファイル: Easing.as
// class定義: MovieClipクラスを継承
class Easing extends MovieClip {
  // [プロパティ宣言]=====
  var nDeceleration:Number = 0.2;
  var nTargetX:Number;
  // [コンストラクタ関数]=====
  // インスタンス生成時に呼出される
  function Easing() {
    nTargetX = _x;
  }
  // [メソッド(function)定義]=====
  function xEaseTo(nX:Number):Void {
    nTargetX = _x+nX;
    this.onEnterFrame = xFrameAnimation;
  }
  function xFrameAnimation():Void {
    var nDistanceX:Number = nTargetX-_x;
    if (Math.abs(nDistanceX)>0.5) {
      _x += nDistanceX*nDeceleration;
    } else {
      _x = nTargetX;
      delete this.onEnterFrame;
    }
  }
}

ムービークリップシンボルの[シンボルプロパティ]ダイアログボックスの[AS 2.0クラス]にクラス名を入力して、シンボルとクラスとの関連づけができる(図01/ActionScript2.fla)。Object.registerClass()メソッドは不要になる。

図01■[シンボルプロパティ]の[AS 2.0クラス]にクラス名を設定

ActionScript 2.0を使ったクラス定義について、詳しくは「オブジェクト指向プログラミング」またはオンラインヘルプ「ActionScriptリファレンスガイド」を参照。

_____

作成者: 野中文雄
更新日: 2004年5月19日 アップ用に修正
作成日: 2004年5月15日 ドラフト作成


Copyright © 2001-2006 Fumio Nonaka.  All rights reserved.