図で見てわかるToolkit for CreateJS:その4

ENTER_FRAMEのようなことをするスクリプト

ENTER_FRAMEのように、フレームごとに繰り返しするスクリプトは、
htmlファイルのcreatejs.Tickerを利用します。

例えば「ムービークリップをずっと回転させる」というのを作ってみます。

サンプルとして、その2で作ったムービーに、ムービークリップを1つ追加して、monstar2というインスタンス名をつけて、これを回転させてみます。

testC

ムービークリップをただ置いただけでは回転しません。

ActionScriptなら、ENTER_FRAMEを使って繰り返し少しずつ角度を変えて回転させます。

this.addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(e:Event):void {
  this.monstar2.rotation += 4;
}

これと同じことをJavaScriptで行います。htmlの中のプログラムを修正して、以下のようにムービークリップを回転させてみましょう。

testC

testC

htmlファイルでは、canvas要素でFlashのステージを用意

自動で書き出されるhtmlファイル

testChtml

まずは、自動で書き出されたhtmlファイルのinitの中を見てみると、

createjs.Ticker.setFPS(24);
createjs.Ticker.addEventListener("tick", stage);

と、フレームレートを24に設定して、毎フレームごとにstageを呼び出しを行うように記述されています。

ここに、自作したmyTick関数も呼び出すようにaddEventListenerを追加します。

createjs.Ticker.addEventListener("tick", myTick);

そして、myTick関数の中で繰り返す処理を書きます。

function myTick() {
        exportRoot.monstar2.rotation+=4;
}

ここでは、ムービークリップを回転させるので、exportRoot(Flashのステージ)にある、monstar2のムービークリップのrotationプロパティに少しずつ値を足して、呼び出されるたびに少しずつ回転するようにします。

testChtml2

htmlファイルでは、主にステージの初期化の処理を行っていますが、ここに自作の関数を足すことで、jsファイルを触ることなくムービーのコントロールすることができるようになります。

ステージに配置したムービークリップにアクセスするには、exportRootからたどることでアクセスできます。