[Animate|Flash] Flashで作ったものをAnimateのCanvasで書き出して、再生・停止をplay/stopで制御したい

2016/11/18

こんにちは。きんくまです。

以前にFlashで作ったステージのタイムラインアニメーションをCanvasアニメーションに変更して、さらに再生、停止を制御したいと思いました。
Animate CC 2017でやってみました。

Canvasに変換

検索しましたら公式のページを発見
>> Converting your Flash Ads to HTML5 Canvas

1. Commands -> Convert To Other Document Formats を選択
2. HTML5 Canvas を選択

Canvasに変換されるので、パブリッシュ（なんかパブリッシュ設定みると、画像を1つずつ書き出さずにSpritesheetにしたりできるみたい）

すると、html と js ファイルが生成されます。

再生・停止を制御したい

どうやってやるのかなーと思ってまた検索してみました。

>> Play/Pause a Animate CC Canvas from external button

どうやら、exportRoot っていうグローバル変数で、play/stopが呼び出せるみたいです。
この情報に加えて、吐き出されたコードも読んでみたところ、Animateのステージ上のタイムラインは createjs.MovieClip になっているみたいです。

>> MovieClip Class

なので、おなじみの gotoAndPlay(1); とかも呼び出せました！！

つくってみたのでお見せします。最初は何も表示されないのですが、左下のstartボタンを押すとはじまります。
start: 開始(play)
stop: 停止(stop)
replay: はじめから(gotoAndPlay)

試しに書いたソースコードです。

//ここから追加項目
 
var startButton = document.getElementById('start_button');
var stopButton= document.getElementById('stop_button');
var gotoAndPlayButton = document.getElementById('goto_and_play_button');
 
exportRoot.stop();
startButton.addEventListener('click', function(){
    exportRoot.play();
});
stopButton.addEventListener('click', function(){
    exportRoot.stop();
});
gotoAndPlayButton.addEventListener('click', function(){
    exportRoot.gotoAndPlay(1);
});