メモ

Adobe Edge Animate 1.0 使ってみたので雑感つらつら

Posted on by seigo

この記事は2012/10/5現在のものです。今後、Adobe Edge Animateがバージョンアップするにつれ改善されたり食い違う部分があるかも知れません。あらかじめご了承ください。

先日Android4.1なNexus7が届きました。FlashPlayerが乗らなくなった寂しさを覚えつつも、今回は近々行われるAdobe Developer Connection Presents ADC MEETUP ROUND 06 CREATE THE WEB TOUR in Tokyo | Adobeに備えAdobe Edge Animateを触ってみたのでメモしておきます。

Adobe Edge AnimateはHTML5/CSS3/JavaScriptを駆使してアニメーションを作成できるツールです。自分としてはHTML5を利用したアニメーションの中で、とりわけCSS3アニメーションが制御しにくそうだなと思っていたところ、Adobe Edge Previewが昨年リリースされて注目しておりました、そして、ついにAdobe Edge Animateとして先日リリースされました。

Adobe Edge Animateの詳しい紹介はこちら。

Adobe Edge Animate | Edge Tools & Services | Adobe & HTML JP

なによりレッスンがわかりやすかった

インターフェースは他のAdobe製品に近い雰囲気で、とくにAfter Effectを彷彿とさせます。タイムラインは「自動キーフレームモード」がFLASHのモーションを作るときに似ているので、スッと慣れることが出来ました。

加えて、レッスンが親切。

おおまかな操作であれば前述のとおりとっつきやすいです。しかし、細かなところでつまづいたり、もっと効率がいい方法があるのでは？と思った時にレッスンで立ち戻れるのでありがたかったです。使用から1週間くらいたってますが、まだお世話になっています。

どのレッスンもイントロダクションでサンプルが開けてステップを進んでいけるので、途中の説明を読み違えても間違った状態になったことも気づきやすいです。

その他リソース

レッスン以外にその他リソースを列記しておきます。

やはり本家のヘルプ。日々増えているようで勉強になります。

そして、早速、本家に2つの記事が上がっています。

使う前にみてもためになりましたが、レッスンを通じて色々とわかってくると、あたらめて気づくこともあり理解が深まって楽しいです。

サンプル

とりあえず、サンプル載せておきます。細胞的な動き。

→別ページで開く

とくに良かった点

使っていて「おお！」と思った点をいくつか。新しい気持ちのうちに書いておきます。

多彩なインタラクションとJavaScript連携のUIが整っている

  • 各パーツにJavaScriptでインタラクションをつけるインターフェースが揃っています。
  • clickやkeydownといった基本的なものもさることながら、orientationchange（スマートフォンでの回転イベント）といったものも取得可能です。複数のイベント当てることもできるます。
  • 使い始めはちゃんとコメントで「// orientationchange イベントのコードをここに挿入」といった形でフォローしてくれるのも迷わなくてありがたい。

アニメが入れ子に出来るシンボル機能が秀逸

  • FLASHにおけるムービークリップほどではないですが、アニメをシンボルにして入れ子に出来ます。
  • シンボル内は独立したタイムラインとなっていて細かなアニメが作成可能です。もちろん、JavaScriptも記述可能です。

トリガーがステキ

  • タイムライン上でトリガーというのが作れるのですが、FLASHでいうフレームスクリプトに似た処理がかけるので、ループ処理や特定の秒数にジャンプといったことが作成できます。

イージングが揃っている

  • イージングが揃っています。イン・アウト、Quad・Sineといったものが使えてとっつきやすいです。Bounceもあります。
  • FLASHで設定できるカスタムイージングのようなものはできない。

プレビューがブラウザで見れる

  • HTML＋JavaScriptなので当然なのですがプレビューがブラウザで確認できます。自分の場合、Chromeがデフォルトブラウザなので、あまりプレビューしすぎると大量にタブが開きます＾＾；

標準で日本語版がある。

  • いやほんとありがたい。ためしにメニュー＞ヘルプ＞言語を変更で、英語版にしてみたら、スタートアップが日本語であるありがたみがよくわかる。

個人的に使って見たメモ

以下は雑感です。

  • FPSでなく秒数の管理
    • FLASHのようにFPSでフレーム概念ではなく秒数での管理となります
  • オブジェクトはDIVタグ単位
  • 矩形・角丸・円形が使えるがCSSの描画はブラウザごとに可能不可能があるので頭に入れておく必要がある。　今後、要勉強！
    • 例えば上記サンプルはAndroid2.3で円形が表現できず矩形となる。
    • 難しいビジュアルは画像読み込みでの対応がよさそう
  • JavaScriptとHTMLに書き出される。jQueryやEdge独自のライブラリも吐き出される。
  • SVGが使えるということでFLASH内の素材をSVG化しようと思ったらFLASH CS6ではその書き出しフローが無くて泣けた。
    • SVG使いたい時は、Illustratorなりでちゃんと元ネタを残しておくべき
  • JSFLとかJSLみたいな自動制御がまだ無理。Java Script Adobe Edge AnimateでJSAEAとかあったらな。

おわりに

いかがでしたでしょうか。得手不得手はあるので、もちろんFLASHでできていたことが全てできるわけではないですが、ひとつづきのアニメや、シンプルめなインタラクションで分岐するアニメなどには有効だと思いました。JavaScriptとの連携も組み方次第で可能性が広がりそうなのも楽しみです。

他のツールやCreateJSやSwiffyなどもありますし、しばらくは内容に応じて使い分けになりますねー。

よき Adobe Edge Animate Lifeを！

、、
seigo