AnimateCC（2017.1）のHTML5 Canvas書き出しを使用して気づいたこと

久々にAnimateCC（旧Flash）を使う機会があったので気づいたことを書いてみます。CreateJSやAnimateCCのアニメーション機能についてや古いFlash時代の情報がネットにあるけど、AnimateCCのHTML5 Canvas書き出しについて書かれている情報は少ないのではないかと思うので。

AnimateCC（2017.1）のHTML書き出しの種類には

• HTML5 Canvas書き出し
• WebGL書き出し

がある。WebGL書き出しはプレビュー版なので
実際に仕事で使用できるのはHTML5 Canvas書き出しのみ

• シェイプ画像はJSファイルに埋め込み出力※1 され、ビットマップ画像はスプライトシートにまとめられPNG出力※2される。
  • ※1 レンダリング->ビットマップとしてキャッシュ に設定されたシェイプ含む
  • ※2 個々のPNGとして出力する設定も可能
• 出力されるPNGの種類（8・24・32bit）を選べるが、32bit書き出しにて、pngminなどで圧縮したほうが実用的
• CreateJSはJavaScriptの各モジュール機能には非対応
  • 普通にscriptタグで読み込む
  • シェイプ画像が埋め込まれたJSファイルは重いのでasync属性をつけて非同期読み込み完了チェック
  • 今後モジュール対応予定あり https://github.com/CreateJS/EaselJS/issues/713
• タイムラインアニメーションをシェイプ画像で作成した場合、フレーム毎にムービークリップシンボル変換、
  レンダリング -> ビットマップとしてキャッシュ
  にチェックする。
  • ビットマップとしてキャッシュは、対象要素をCanvas内Canvasに置き換えることで、再描画の対象からはずれパフォーマンスが向上する。
  • EaselJSのDisplayObject.cache()と同機能
• シェイプ画像をビットマップに変換は画像がボケて汚くなる
  • ビットマップ画像を使う場合は大きめの画像を使う
• タイムラインのアクションを使ってstop()やgotoAndStop()など使う場合thisをつけてthis.stop()のようにする
• createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED
  を使ったほうがよい。
  • requestAnimationFrameベースの更新処理になる。
• DisplayObject.cursorにCSSのcursorプロパティを入れることでブラウザのカーソルを変えられる。
  • -webkit-grabなどベンダープリフィックスもCSSと同じに指定する
• GIFアニメーション書き出し機能がリニューアルされて良い感じ
• stats.jsを使おう。ブックマークレットもある https://github.com/mrdoob/stats.js/
• 関連 https://blogs.adobe.com/creativestation/web-animate-cc-2017-new-features