とみみの各アニメーション比較

webアニメーションといえば、FLASH（swf）が長年デザイナーによく使われていました。しかし近年スマートフォンの普及により、FLASHが再生しないデバイスが増えてきました。web制作現場では【FLASHの代替】になる技術/アプリケーションを求め、それに呼応するように次々と新しい技術・サービスが誕生しています。

新しい技術を得るには、それなりの勉強や研究が必要になります。
今回は数々の新技術の中から「デザイナーにとって扱いやすいか」「スマートフォンに対応が容易か」という観点で数点の技術・ツールをピックアップ、研究してみました。

FlashとはAdobeSystems社の、web制作アプリケーション「Adobe Flash」の略称。及びFlashフォーマットで作成されたswfファイルなどのコンテンツを指します。

Flashを再生

「SWF Animation Converter」は株式会社アイ・エム・ジェイ　マルチデバイスLab.が配布している、フリーアプリケーション。swfアニメーションを、jsベースのアニメーションに変換 (いわゆるスプライトシートアニメーションに)する。

pngアニメ（SVG-AC）を再生

Toolkit for CreateJSはFlashの拡張機能の１つ。canvasという、XHTML5に新しく追加されたピクセルベース画像描画機能でアニメーションを生成する。

CANVAS（createJS）を再生

Google swiffyはFlashの拡張機能の１つ。SVG[Scalable Vector Graphics]という、XMLベースの2Dベクター画像記述言語でアニメーションを生成する。

SVG（Google-swiffy）を再生

Adobe Edge Animateは、AdobeSystems社の、HTML5に対応したアニメーション作成アプリケーション。Adobe Creative Cloudに登録することで使用できる。png、jpeg、SVGなどを素材として扱うことが出来、書き出すとJavascriptとhtmlが生成される。

SVG（Adobe-Edge-anime）を再生

CSS3よりアニメーション用に２種類追加された「Transition」と「Animation」プロパティを用いると、簡単なアニメーションを作成することができる。

CSS3アニメを再生