Adobe AnimateのCanvas書き出し

Adobe AnimateのCanvas書き出しでFlash的なコンテンツを作ろうとした場合、CreateJSに関する情報は数多くありますが、ちょっと工夫しないと、そのままでは動かないことが多いです。以下、Flashの製作者がAnimateのCanvas書き出しを行なう時に注意するべき点を、備忘録としてあげておきます。

Flashでは、タイムラインごとに変数が共有されていましたが、Canvasでは、フレームごとにfunctionのなかに記述されるので、変数はフレームごとになります。

また、Flashではタイムラインでステージに配置するなどした段階で、インスタンスが生まれて、配置したフレームが終わってステージから消えるといったん終了していたと思います。なので、もう一度配置したフレームにもどると、改めてインスタンスが生まれて、
タイムラインで指定したように配置されます。ところがCanvasでは、インスタンスが残り続けます。

例えば、ムービークリップのインスタンス「mc」を、フレーム10のタイムラインのプロパティでx座標が100の位置に配置したとします。これをスクリプトでx座標を200の位置に変更します。いったん「mc」が画面から消えて、再び、フレーム10に戻ってきたとき、これまでのFlashでは、タイムラインでの指定通り、x座標100の位置に配置されます。

ところが、Canvasでは、以前スクリプトで位置変更した情報が残っていて、x座標200の位置に配置されます。つまり、インスタンスの情報をスクリプトで変更すると、画面からインスタンスがいったん消えても、最後に変更した状態が残ってしまうのです。これはゲームなどでは、ゲームが終了した時の状態が残ってしまって、位置なども含めて、スクリプトで初期化を行わないといけなくなります。

このインスタンスが残るということは、イベントリスナーも残るということになります。addEventListenerを使うと、同じフレームにくるたびに、イベントリスナーが追加されることになります。on/offの切り替えといった場合には、addEventListenerがダブると機能しなくなるのでListenerの状況を確認してコントロールすることが必要です。

その他、こちらも御覧ください。

Adobe Animateに愛をこめて

Animate自体、使い方によっては、かなりの可能性を持っていると思いますが、「Flashのような操作でCanvasの書き出しができる」というだけでなく、Flash(ActionScript)と違っている点は、きちんと情報を公表すればいいのにと強く思います。やっぱり、基本的に、Flash的なものは好きなんですよね。こういう部分がWebに残って欲しいです。

実際に業務で制作してみて、多少ノウハウはたまってきたので、そのあたりのご相談などありましたらお問い合わせください。