HTML5は、HTML5という名前のくせに98%ほどはJavaScriptという、詐欺っぽい名前でありながら一世を風靡したとおもいきや、FacebookのCEOの発言で一悶着あったりと、まだまだいろいろな話題を提供し続けてくれています。個人的にはGPUサポートやスマートフォンの高速化などがこなれてくれば、さまざまな用途で活用できるようになるだろうな、と思っています。HTMLのレイアウトがGPGPUとかで行われるようになれば、CPUでレイアウトを処理している今時のGUIツールキットよりも高速に動くようになる時代が来てもおかしくないですしね。今はまだまだHTML 5に投資し続ける時ですよ！バカ発見器のTwitterのTLになんとなく踊らされた人たちが寝転んでいる今がチャンスです。
そんな中、アドビ社がAdobe Edge Animate 1.0を無償提供することを発表しました。Flash四天王のうちの最弱なモバイル端末のFlash Playerはやられてしまいましたが、なんだかんだでFlashとAdobeの影響力はまだまだ強いな、と感じています。ゲームエンジンとしてしのぎを削っているUnreal EngineとUnity 3DはそれぞれFlash向けのエクスポータを開発中です。10年近くパフォーマンスチューニングされ続けたFlashは、マルチプラットフォームなブラウザ用のVMとして強力ということでしょう。AAAタイトルのゲームのエンディングのロールを見ると、だいたいScaleFormという文字が出てきます。これはゲームコンソールやモバイル端末用の特殊なFlashプレーヤーです。インタラクティブなメニューやちょっとしたカットシーンはFlashが活用されているということです。AIRもスマートフォン向けのアプリ開発環境として変換ツールが開発されていますし、インタラクティブなアート作成環境として、一定数のスキルをもったデザイナーさんが確保できるツールはFlash以外は見当たりません。
HTML5、とりわけCSS3がFlashキラーといっても、デザイナーさんがFlashのように自在に使えるツールの決定版は今まではありませんでした。Sencha Animatorとかはありましたが・・・本とかもFlashほどは見かけないですよね？僕自身、Adobeのツールの中で一番使い方が分かっているのがFlashなので(5, MX, CS5と来て、ほぼマクロメディア時代の知識ですし、教わったわけではないので勘違いしているところもあると思いますが)、数時間触ってみて分かる範囲でFlashとの比較をしてみようと思います。作った絵にセンスがなくてすんません。
Edge Animate 1.0とFlashで大きく変わったところ
エクスポートするものが、swfではなく、HTML + JavaScript
まあ、当然ですよね。見ると、EdgeというAdobeが作ったとおもわれるJSライブラリとjQueryを使っているようなHTMLが生成されます。staticなHTMLが作れるオプションとかもありました。Mac OS Xのダッシュボードウィジェットや、iBooksのコンテンツも作れるみたいです。
ActionScriptではなくJavaScript
これも当然と言えば当然ですが、JavaScriptを使います。イベントハンドラの中に書いていく構造なのでどちらかというと使い勝手はAction Script 2.0系に近いような気がします。
シンボルの種類が3種類→1種類
Flashはボタン、ムービークリップ(タイムラインを持つ)、グラフィックス(タイムラインを持っていない)の三種類ありましたが、Edge Animateはシンボルという名前のものが1つだけです。シンボルはタイムラインを持っていますし、クリックとかマウスオーバーとか、いろいろなイベントのハンドラを簡単に書けるので、３種類のシンボルでできることは全部できるようになっています。
キーフレームを作る時に「この値だけを変更」みたいなのを指定して作る
Flashはキーフレームごとの違いはなく、キーフレームをごとにすべての値が操作できますが、Edge Animateは「このトランジションの間ではこの値を変更する」というのを指定します。指定した項目はレイヤー？のところに表示されるので、どこでどの値が変わっているかが把握しやすいです。その分、大きなディスプレイが欲しくなりそうですが・・・
プレビューがブラウザ起動
Flash Playerというものがないので、当然ですがブラウザが起動します。
レイヤーではなくオブジェクトのリスト
Flashは1つのレイヤーに複数のオブジェクトを格納できますが、Edge Animateはレイヤーには1つしか格納できないようになっています。レイヤーのリストの項目数＝オブジェクトの数です。モーショントゥイーンを作ると勝手にレイヤー上のオブジェクトがまとまったシンボルが作られたりしましたが、そういうことはありません。Flashと違って、どこかをクリックしないと設定の詳細が別のウインドウに表示されないということは少なくて、このレイヤー上の情報量が増えています。
フレームという概念がなくなった
Flashの時間の管理は、フレームという単位になっています。ルートで１秒間のフレーム数を決定することで、実時間が決定されます。Edge Animateは直接、秒を使って指定します。
各オブジェクトが1つのdivタグになる
実にHTMLです。内部構造がHTMLと1対1に対応しています。
フォント指定が変わった
ブラウザがターゲットなので、環境によって使えるフォントが変わります。Edge Animateでは、フォント選択のところに複数フォント名が書かれていて、フォールバックするようになっています。自分でも定義できそうになっていますが、10セットほどプリセットされています。きちんと調べていませんが、Edgeシリーズで同時発表のあったWebFontもたぶん使えるはず。
Flashに比べて優っている点
各オブジェクトにいろんなイベントが設定できる
HTMLのイベントがもろもろ設定できるようになっています。イベントの種類は多そう。
ライブラリが要素の種類ごとに分類されるようになった
大項目として、アセット、シンボル、フォントが最初から存在し、その中に整理されます。シンボルもFlashよりは増えない仕様ですし、整理はしやすいと思います。フォントもライブラリに入れられるようになっています。
フレームに入った時のスクリプトを書く場所が1箇所に集約されている
いろんなレイヤーに分散してどこいったか？ということがないです。レイヤーの一番上段にあります。
フローレイアウト対応
Flashはステージサイズを最初に決めます。Edge Animateは各要素がmin W, min H、max W, max H、オーバーフローモードなどを持っています。より柔軟に解像度の違いを吸収できるレイアウトが可能っぽいです。詳細には触っていないですが・・・
Flashに比べて劣っているところ
全体的にベクター系の要素がだいぶ少ないです。
- 多彩なパスによるシンボル作成ができない(四角、角丸、丸ぐらいしかない)
- 塗りへの変換とか、ビットマップのパースとかはなさそう(Fillオブジェクト、Strokeオブジェクトというものがない)
- 3D的な変換ができない
- 音、ムービーのサポートがない
- 色のグラデーションがない
- 線のスタイルが少ない
- 複数シーンが作れないっぽい
- UIやアプリ作りのプラットフォームとしての機能はなさげ(コンポーネントとかテキスト入力とか)
- テキストのレイアウトの種類が少ない
- ドロップシャドウ以外のフィルタがない
- イージングの種類は増えたが、自由なカスタムイージングは利用できない
- ガイドに沿ったモーショントゥイーンがない？
- 自由な画像を使ったマスクとかもなさそう
- シェイプトゥイーンがない？
まだ把握してない項目
プリローダー、下位ステージ、ポスター、ピンといった名前があるのですが、まだ把握できてません。ピンはチュートリアルにあったので、時間を取って学べばわかるかも。なにせ説明を読まずに触ったので・・・あと、FlashはJSFLというマクロメディア臭のするAPIでIDEの拡張機能が作れますが、そこの部分は大幅に変わっています。ただ、Flash(やExcelのVBA)と違って、実際に操作して、それをスクリプトとして保存とかもできないので、難易度は5割増ですね。
感想
ベクターを使ったアニメ絵的なムービークリップの作成はまだ難しそうです。静止画を貼ってそれを複雑に動かすのとか、マウスを使ったインタラクションはできそうです。現時点でもちょっとしたゲーム入りの広告とか、ブラウザゲームのソーシャルゲーム的なことは十分にできそうです。今後はFlashからのインポートとか、ベクター系のところが良くなっていけばFlashのデザインスキルが十分に使えるツールになっていくんじゃないかな、と思います。
Flashはepsを取り込んだり、epsとしてベクターデータを出力する機能があって、ExcelからグラフをコピペしてFlashに貼り付けると、TeXで使えるepsの挿絵を作れるベクター変換ツールとして便利(かつIllustratorよりも安い)ということで、大学時代によく使っていたのですが、そういう用途ではまだFlashの代わりにはならないですね。
補足
プリローダーと下位ステージについては、Adobeのサイトに記事があがってました。さすが本家は早いですね。Twitterを見る限り、このブログが日本語では2件目のエントリーかも？絵が少なくてすみません。
補足その2
できない機能としては、まだFlash上でも使ったことはないですがボーンアニメーションとかもないですね。できることの追加としては、逆転再生ができそう、SVGが画像として使えるあたりも足しておきます。
