FlashCS6のHTML5書出しと、EdgeでつくったHTML5を比べてみた。[HTML5,FlashCS6,Edge]


ちょっと気になって、FlashCS6のHTML書出しとEdgeのHTML書出しを比べてみました。

FlashCS6の書出し

デモ:FlashCS6でのアニメーション
FlashCS6は基本的に<canvas>に書きだされるようです。
これはFlashの一番キモなきのうとしてのアニメーションツールとしての表現に依存してそうです。
シェイプトゥイーンや、細かな表現はやはりCanvasのパスを使った方が綺麗に出せるからなのかなぁと感じました。
書出しエクステンションのCreateJS自体がCanvasベースなのもあると思いますが、やはりFlashとしては、
アニメーションの制作ツールとして非常に秀逸な機能を持っていると思うので、Flashで使える表現をなるべく
維持できる<canvas>を使用しているCreateJSを公認の書出しツールとして選んだのかと思いました。

Edgeの書出し

デモ:Edgeでのアニメーション
一方Edgeのアニメーションは、<div>タグが使われています。
これは<canvas>タグを使った場合に表示領域が大きくなった場合のパフォーマンスが落ちてくる事を懸念して、
<div>タグにしているのでは?とおもいました。
<canvas>での表現ではパフォーマンスが悪い、条件が良くないなどのケースで使い分けになって行きそうな気がします。

SenchaAnimator

デモ:SenchaAnimatorでのアニメーション
AdobeのEdgeに先駆けてリリースされているSenchaAnimatorも見てみると<div>タグベースのようです。

enchant.js

デモ:enchant.jsでのゲーム
ActionScriptライクなプログラミングが出来るenchant.jsもdivタグがベースになっているようです。
divタグベースでアニメーションさせた方がパフォーマンスがいいのかな?と想像。

まとめ

今後もどんどんこの手のツールは出てきそうなので、それぞれの特性(canvas,div,またSVGなど)をよくよく理解して、
使い分けて良く必要がありそうです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です