スマートフォンにおけるアニメーション実装～FlashからHTML5へシフトするには～

スマートフォンにおける
アニメーション実装
∼FlashからHTML5にシフトするには∼

株式会社CyberX 佐野裕

自己紹介

佐野裕

2011年６月入社

Flashディベロッパー

現在は開発部にて主にスマートフォン向けのフロント
部分の実装/開発etc

Agenda

現在のスマートフォン対応状況

スマートフォン向けアニメーション実装手法

制作の際注意したいこと

アニメーション実装の今後

現在のスマートフォン
対応状況


iPhone Flash非対応

Adobe Flashモバイル（ブラウザ）からの撤退

Android Chrome Flash非表示


FlashがiOS/Androidともに対応出来なくなるのはすぐ
そこまで来ている

弊社で開発しているソーシャルゲームのメインプラッ
トフォームはスマートフォンに移行しつつある

考えるべきは「対応する/しない」ではなく「どう
やって対応するか」

スマートフォン向け
アニメーション実装方法

どんな手法があるか

大きく分けて３パターン

1. IDE(GUI)ツールを使ってアニメーションを作る

2. JavaScript/CSSでアニメーションを実装する

3. 変換ツールを使う

1.ツールを使った実装

Flash IDEライクなタイムラインベースのアニメーショ
ン制作ツールを用いて制作する方法

長所／短所
長所

アニメーターが作りやすい

短所

ツールの習得コスト

フィーチャーフォンと両立しなければならない

まだ過渡期のためツールの仕様変更が発生しやすい

1.ツールを使った実装

Adobe Edge
jQueryベースでアニメーションを実装

Sencha Animater
独自フレームワークによるアニメーション

Hype
独自フレームワーク安価

2.JavaScript/CSSによる実装

2.JS/CSSによる実装

JavaScriptとCSS3でアニメーションを実装する

DOM／Canvasの2パターン

2.JS/CSSによる実装
DOM
フレーム毎にDIVタグなどのDOM要素のパラメータを
JS/CSSを用いて変えながらアニメーションを表現

Canvas
フレーム毎にCanvas要素をリフレッシュしながら再
描画を行ってアニメーションを表現

長所／短所
長所
フレーム毎の処理が出来るのでゲームなどの実装に向
いている

短所
直感的なアニメーションの実装が難しい
プログラマーとアニメーターの分業をどうするか
フィーチャーフォンとの両立

各種ライブラリ
enchant.js
ゲーム開発向けライブラリ DOMベース

Arctic.js
Canvas用ライブラリ Flashライクな実装が売り

Easel.js
adobeが採用

...その他色々

3.変換ツールを使う

長所
アニメーション制作ツールとしてFlashが使える
短所
ASのボタン処理などを変換してやる必要がある
パフォーマンスチューニング

変換ツール

swfキャプチャ

Flaファイル変換

swfファイル変換

変換ツール(キャプチャ系)

swfをフレーム毎にキャプチャしてスプライトシート
を作りJavaScriptで再生

実装が容易/不具合は出にくい

変換ツール(キャプチャ系)

自社用ツール

SWF Animation Converter
ASに対応させたツール

変換ツール(Flaファイル変換系)

Flaファイルからアニメーションを生成するツール


Wallaby
adobe製変換ツール

FlaファイルをCSS3ベースのアニメーションに変換

SVGをPNGに変換すればAndroidでも動作する

一年近くバージョンアップ無し


Swiffy
google製変換ツール

通常変換サーバでswfを変換。拡張Extentionを使うと
IDEからFlaファイルから直接変換出来る
SWFをjsonデータに変換、独自プレイヤー(js)で再生

ベクターはSVGに変換される

変換ツール(swf変換系)

SWFを直接変換してJavaScriptなどで再生する

動的生成したswfにも対応出来る

変換ツール(swf変換ファイル系)

FlashForward
Parserがphp

SVG/Canvas両対応

まだ不完全（ex.グラデーション）

変換ツール(swf変換ファイル系)

Reel(Gree) / ExGame(Mobage)
JavaScriptでSWFを再生する

それぞれプラットフォームに参加していなければ使用
出来ない

変換ツール (swf変換系)

Lightning
Swfmillで変換したXMLファイルをパースして

CSSベースのアニメーションで再生

動作環境 python

Androidから作れ

Android2.1ではCanvas処理にバグあり

ツール系のものでもサポートされてない場合あり

大量の端末の多さ / SDKバージョン違い

今後はAndroid Chrome対応も

通信環境は3G

大量に素材読み込む時はローディング周りには注意

使うツールライブラリではプリロードに対して無自
覚なものもあるので注意（特にPC向けのライブラ
リ）

アニメーション実装の今後

現在は過渡期

ツールもライブラリもまだ成熟していない

決め手にかける


スマホ対応だけでいいのか？

FlashとHTML5それぞれでアニメーションが作れる
か？

→出来ないなら変換ツールを使う方向を検討

今後の動向

Adobe CreateJS
FlashIDEからHTML5コンテンツをexport

最後に

アニメーションはセンス

→センスを活かせる環境のチョイスが重要

基準はフィーチャーフォンなのかスマホなのか

→スマホの性能を生かしたもの方がクオリティは良
いはず

ご清聴ありがとうございました。

スマートフォンにおけるアニメーション実装～FlashからHTML5へシフトするには～

More Related Content

What's hot (20)

Similar to スマートフォンにおけるアニメーション実装～FlashからHTML5へシフトするには～ (13)