Animate CCのHTML5書き出しは使い分けよう

今回は仕事の話です。

WebアニメーションでDOM操作やclassを付与する必要がある場合、Animate CCでHTML5書き出しするよりも最初からjsライブラリ使ったほうが良いかもしれないという話。

7~8年ほど前、クライアントに「写真を動かして欲しい」とか、「動画っぽいのをトップページに」と言われると、Adobe Flash でよくアニメーションを作っていました。

今や害悪認定されてしまったFlashプレーヤーを使うあれですね。

今はAnimate CCの名で開発されています。
今やっている案件で、アニメーションをつける作業が発生したので、久しぶり使ってみると、書き出しでHTML5が追加されていました。
吐き出されるソースを見てみると、canvasとjsで見事にアニメーションしてくれています。

Flash時代のUIのままHTML5対応できるのに軽く感動を覚えながら、作業していたのですが、ちょっと変数を渡してHTMLを操作したかったのですが、いざソースを読んでみると、globalな関数や変数以外のフレームアクションなどはすべてコメント扱いになるし、as3.0をjsルールに変換している部分のソースが複雑で、読んでるうちに「これ、最初からjsで書いたほうが早いかも」という事に気が付き、ライブラリを探してみましたが、良いのが見つかりました。

Animate CCはHTML5で書き出す際に、押さえておくべき注意点がある。

今回僕がやった際のポイントは下記のみ

  • as3.0の型は削除する
  • フレームアクションはコメントアウトされる
  • ゆえにアクションはグローバル化する

特に、フレームアクションが利用できずにグローバル化を強制される作業はとても面倒で、この時点でAnimateCCを積極的に利用する意味が薄れます。

公式にもas3.0特有の記述を変換するよう解説がある。
ActionScript コードの HTML5 の変換

 

こんな事するくらいなら、最初からjsで書いたほうが良いような?
膨らむ疑問はひとつのjsライブラリの発見により確信に変わります。

 

KUTE.js
http://thednp.github.io/kute.js/

これ、とてもいいですよ。

良い点

  • 軽い
  • jsアニメーションでよく見る動きは、ほぼ対応可能
  • 拡張機能でCSSアニメショーンSVG対応テキストのアニメーションが可能です
  • 最新ブラウザに完全対応
  • IE8やIE9にもある程度まで対応(レガシーモード?)
  • 最初からDOM操作やclass操作を想定して設計できる
  • 公式サイトが読みやすい、説明わかりやすい

使用方法などは、公式を見たほうが早いので割愛します。
どうしても日本語が良いという方は、こちらの記事が非常に丁寧なのでオススメ

HTMLもSVGもテキストも自在!DOMアニメーションの決定版「KUTE.js」が登場