Macromedia DevCon 2002 Japan
オブジェクト指向で考えるActionScript

サンプルファイル<Movies.zip(約40KB)>

参考資料「メソッドもプロパティ」<MethodAsProperty.pdf(約280KB)>
*書籍の最終校正原稿ですので、若干の誤植が含まれている可能性があります。なお、p.116の記述に1点修正があります。拙著『モーショングラフィックスで学ぶActionScript − Flash MX −』「補足および正誤表」を併せてご参照ください。

おまけ: 講演内容として事前にマクロメディアさんに提出した概要は、以下のとおりです。実際のライブ講演とは一部異なる場合があります。

1 モジュール化
1.1 モジュール化以前

他のMovieClipのコントロールをすべてひとつのスクリプトで処理

□NonOOP.fla=====
// MovieClip: ボタン
// 第1フレームアクション
// MovieClip this;
this.onPress = function() {
  bMove = true;
};
this.onRelease = this.onReleaseOutside=function () {
  bMove = false;
};
this.onEnterFrame = function() {
  if (bMove) {
    _root.my_mc._x += 10;
    _root.my_mc2._x -= 10;
  }
};
this.nextFrame();
=====
スクリプトがすべて1カ所で把握できるのは利点。しかし、修正や拡張を加えると、全体が一体化してしまい、デバッグは困難になる。また、変更したスクリプトの影響がどこに及ぶかも、把握しにくくなる。

□NonOOP2.fla=====
// MovieClip: ボタン
// 第1フレームアクション
// 一部修正: ステージ幅を超えると反対の端に移動
this.onEnterFrame = function() {
  if (bMove) { // どのMovieClipをどう処理しているのかわかりにくい
    if (_root.my_mc._x<Stage.width) {
      _root.my_mc._x += 10;
    } else {
      _root.my_mc._x -= Stage.width;
    }
    if (_root.my_mc2._x>0) {
      _root.my_mc2._x -= 10;
    } else {
      _root.my_mc2._x += Stage.width;
    }
  }
};
=====

1.2 モジュール化後
他のMovieClipに対してはメソッドを実行するのみ。あとは各MovieClipに任せる。

□Module.fla=====
// MovieClip: ボタン
// 第1フレームアクション
// MovieClip this;
this.onPress = function() {
  _root.my_mc.xMove();
  _root.my_mc2.xMove();
};
this.onRelease = this.onReleaseOutside=function () {
  _root.my_mc.xStop();
  _root.my_mc2.xStop();
};
this.nextFrame();
// MovieClip: ボタンから制御される
// 第1フレームアクション
// ムービークリップシンボル共通処理
function xMove() {
  bMove = true;
}
function xStop() {
  bMove = false;
}
this.onEnterFrame = function() {
  if (bMove) {
    _x += nStep;
    if (_x>Stage.width) {
      _x -= Stage.width;
    } else if (_x<0) {
      _x += Stage.width;
    }
  }
};
// MovieClip: ボタンから制御される
// MovieClipアクション
// MovieClipインスタンスごとに異なる設定
onClipEvent (load) { // 初期設定
  nStep = 10;
}
=====

2 function切替え技=変身
2.1 メソッドはプロパティ
イベントハンドラメソッドは、'function'の代入。代入ということは、設定する'function'を切替えることが可能。

○メソッドもプロパティ
拙著『モーショングラフィックスで学ぶActionScript―Flash MX』「4.8 メソッドもプロパティ」。

□FunctionSwitching.fla=====
// 1.2のスクリプトを以下変更
// MovieClip: ボタンから制御される
// 第1フレームアクション
function xMove() {
  this.onEnterFrame = function() {
    _x += nStep;
    if (_x>Stage.width) {
      _x -= Stage.width;
    } else if (_x<0) {
      _x += Stage.width;
    }
  };
}
function xStop() {
  delete this.onEnterFrame;
}
=====

2.2 ローカル変数を参照する裏技
ローカル変数は、'function'実行終了後にメモリから破棄されるはず。その参照を残す裏技がこれ。

□ReferencingVar.fla=====
// 2.1のスクリプトを以下変更
// MovieClip: ボタンから制御される
// 第1フレームアクション
function xMove(nStep) { // 引数はローカル変数
  this.onEnterFrame = function() {
    // trace([this, nStep, typeof this.nStep]);
    _x += nStep;
    if (_x>Stage.width) {
      _x -= Stage.width;
    } else if (_x<0) {
      _x += Stage.width;
    }
  };
}

// 1.2のスクリプトを以下変更
// MovieClip: ボタン
// 第1フレームアクション
// MovieClip this;
this.onPress = function() {
  _root.my_mc.xMove(10);
  _root.my_mc2.xMove(-15);
};

'function'内のローカル変数は、その実行中に設定した'function'で参照し続けることができる。デバッガにも表れないので、注意。

3 組込みオブジェクトへのメソッド追加=改造
3.1 Mathオブジェクトにメソッド追加
グローバルオブジェクトに対しては、オブジェクトをターゲットとしてメソッドが定義できる。ターゲットパスを指定せずにメソッドの使用が可能。

□MathMethod.fla=====
// Mathオブジェクト
// radiansToDegreesメソッド定義: ラジアンを度数に変換
// nDegrees: 度数
Math.radiansToDegrees = function(nDegrees) {
  return nDegrees/Math.PI*180;
};
=====

3.2 Stringオブジェクトにメソッド追加
インスタンスの存在を必要とするオブジェクト(クラス)には、'prototype'プロパティを使ってメソッドの追加ができる。'prototype'とは、オブジェクトのひな形あるいは「基本プラン」。オプションとなるメソッドを追加することで、プランの拡張ができる。

□StringMethod.fla=====
// Stringオブジェクト
// replaceメソッド定義: 指定文字列を別の文字列に置換え
// sFrom: 検索文字列
// sTo: 置換え文字列
String.prototype.replace = function(sFrom, sTo) {
  return this.split(sFrom).join(sTo);
};
=====

3.3 ライブラリに設定
ライブラリに独自メソッドを定義。リンケージ書出しすれば、タイムラインへの配置も不要。第1フレームスクリプトの表示前に有効になる。「ムービーエクスプローラ」にも表示されないので、注意。

□MyLibrary.fla=====
#initclip
Math.radiansToDegrees = function(nDegrees) {
  return nDegrees/Math.PI*180;
};
String.prototype.replace = function(sFrom, sTo) {
  return this.split(sFrom).join(sTo);
};
#endinitclip
=====

4 MovieClip+独自クラスの定義=合体
ユーザー定義の独自クラスをムービークリップシンボルに設定。MovieClipを継承して作成。コンポーネント作成の基本。

□registerClass.fla=====
#initclip
function myClass() {
  this._x = Math.random()*Stage.width;
}
myClass.prototype = new MovieClip();
myClass.prototype.xMove = function(nStep) {
  this.onEnterFrame = function() {
    this._x += nStep;
    if (this._x>Stage.width) {
      this._x -= Stage.width;
    } else if (_x<0) {
      this._x += Stage.width;
    }
  };
};
myClass.prototype.xStop = function() {
  delete this.onEnterFrame;
};
Object.registerClass("mySymbol", myClass);
#endinitclip
=====


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