CreateJSのMovieClipクラスを拡張する

CreateJSの各クラスは、JavaScriptベースで作成されています。そのため（あまりお行儀がいい方法ではありませんが）、実行時に各クラスに任意のメソッドを付け加えてしまう、なんて事も可能です。

例えば、MovieClipクラスに「次のフレームへ移動」する「nextFrameメソッド」と「前のフレームに移動」する「prevFrameメソッドを実行時に付け加えたい場合には、コンテンツ開始時に実行する処理として、次のようにコードを記述します。

//nextFrameメソッドを付け加える
createjs.MovieClip.prototype.nextFrame = function(){
　var tl = this.timeline;
　var d = tl.duration;
　this.gotoAndStop((tl.position+1)%d);
};

//prevFrameメソッドを付け加える
createjs.MovieClip.prototype.prevFrame = function(){
　var tl = this.timeline;
　var d = tl.duration;
　this.gotoAndStop((tl.position-1+d)%d);
};

CreateJSの各クラスは、デフォルトでは「createjs.クラス名」という「createjsネームスペース」上のFunctionとして作成されていますので、目的のクラスのprototypeにメソッドを付け加える事で、カスタムメソッドを後から押し込んでいるわけですね。

このようにすると、Flashから持ち込んだMovieClip等を、nextFrame、prevFrameメソッドで操作できるようになります。

//「Hoge」として書き出したムービークリップを「mc」に格納
var mc = new lib.Hoge();
//nextFrame等、あとから付け加えたメソッドで操作可能
mc.nextFrame();

ただし、この処理は既存のクラス定義を「上書き」している事にもなりますので、メソッド名や処理内容によっては、思わぬ動作になったり、既存の処理とぶつかってしまうケースもありますのでご注意を。

---

2012/11/29 吉岡 梅