[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);
	});

>> ファイル一式

まとめ

ひとまず、play / stop ができるということがわかったので、制御自体はなんとかなりそうです。
アニメーションファイルのjsは素材としてそのまま使って、index.htmlの方にかかれている js を自前で書き直せば、他の部分と連携できそうです。

exportRoot の部分のコードは

exportRoot = new lib.flash1_Canvas();

となっていて、new でインスタンス化することで使えるようになるので、実行時メモリ的にも大丈夫なのではないかと。

あとは、複数flaファイルから書きだした アニメーションの切り替えについて。

Animateからパブリッシュするときに lib というネームスペースが設定できます。
パブリッシュ設定の Advancedタブ / Symbols: のところ
Animateのライブラリのシンボルたちが、そこにぶらさがって書き出されていました。

lib.Rect , lib.Text1 という感じです。

だから、複数アニメーションファイルを書き出すときは、この lib というところを各ファイルごとに変えてあげれば、js上のデータのぶつかりは避けられそうです。まだ試してないけど、、。

Animateで書き出したアニメーションを素材に、何かするコンテンツ作りのヒントになれば幸いでございます。


自作iPhoneアプリ 好評発売中!
フォルメモ - シンプルなフォルダつきメモ帳
ジッピー電卓 - 消費税や割引もサクサク計算!

ページトップへ戻る