Edge Animate

トップページをEdge Animateを使ったアニメーションにしてみました。営業用にレスポンシブデザインの説明をしてみたのですが、ちゃんと伝わっているかどうかちょっと心配です。

このアニメーション自体がレスポンシブです。ブラウザの幅を狭めて、再読み込みして試してみてください。アニメーション内のノートパソコンのエレメントはレスポンシブにサイズを縮小、スマホとタブレットのエレメントはそのまま縮小すると小さくなりすぎるので、サイズを縮小せずに位置を変えるようにしています。そのためスマホサイズではスマホのエレメントは場面によっては画面からはみ出す感じにしています。

アニメーションの最大幅は600pxにしているのですが、スマホでは320px、つまり横幅が半分でも内容が伝わるようにする、バランス的におかしくならない、という工夫は結構大変でした。レイアウトやアクションの制限がかなり生じます。

最大幅をもっと大きくして、迫力を出したかったのですが、これくらいが限界でした。480px未満（スマホ縦）だけは別のアニメーションにする方が、いいかも知れません。

Adobe Edge Animate、先頃、有償バージョンEdge Animate CCがリリースされたばかりです。新バージョンのウリは、モーションパスに対応したことなんですが、これ、レスポンシブにするためにエレメントの位置やサイズをステージに対して%で設定するとモーションパスは効きません。パーセントで設定した数値をそのパスの回転やカーブに沿ってピクセル単位に計算するという機能まではない、ということです。

今後Flashに代わるツールとなることを期待されているアプリケーションで、インターフェースもFlashに似ているのですが、タイムラインに空白のフレームを挿入できない、というのもキツイです。アクションの部分的な速度を変えたりするのは、アニメーションが複雑になると、かなり大変です。

それでも、まだバージョン2で、アドビもイラストレーターやフォトショップなど、他のアプリのバージョンアップパターンよりも、かなり高頻度で更新していくそうで、どんどん改良されていくと思います。

できあがったアニメーションはHTML5とCSS、JavaScript、それと読み込んだ画像だけなので、出来上がってからCSSで修正したりすることもできます。それぞれのエレメントはid付のdivタグで出力されます。このidに対して!important付でスタイル設定してやるといいです。

こんな営業用のプレゼンテーションだけじゃなくて、サイトのナビゲーションメニューなどのユーザーインターフェース、外部のAPIと組み合わせて、動画や地図といった情報と組み合わせることも可能なはずです。

あとはアイデアとセンスと勉強、ということになりそうです。

まだまだ未完成さを感じる部分が多いですが、限りない魅力を感じさせるアプリケーションです。

Drupalへの組み込みはEdge Suiteモジュールです。現状はoamという形式でパブリッシュしたアニメーションを組み込んでくれるだけで、未だdevバージョンですが、かなり安定して機能してくれます。このEdge Suiteモジュール、Edge Animateの開発に関わっている方（あるいはチーム）自身から提供されているみたいで、今後、Drupalのエンティティをアニメーションのエレメントとして組み込んだりもできるようになるのではないか、と期待しているところです。