スマートフォンにおけるアニメーション実装∼FlashからHTML5にシフトするには∼株式会社CyberX 佐野 裕
自己紹介佐野 裕2011年6月 入社Flashディベロッパー現在は開発部にて主にスマートフォン向けのフロント部分の実装/開発etc
Agenda現在のスマートフォン対応状況スマートフォン向けアニメーション実装手法制作の際注意したいことアニメーション実装の今後
現在のスマートフォン対応状況
現在のスマートフォン対応状況iPhone Flash非対応Adobe Flashモバイル(ブラウザ)からの撤退Android Chrome Flash非表示
現在のスマートフォン対応状況FlashがiOS/Androidともに対応出来なくなるのはすぐそこまで来ている弊社で開発しているソーシャルゲームのメインプラットフォームはスマートフォンに移行しつつある考えるべきは「対応する/しない」ではなく「どう...
スマートフォン向けアニメーション実装方法
どんな手法があるか大きく分けて3パターン1. IDE(GUI)ツールを使ってアニメーションを作る2. JavaScript/CSSでアニメーションを実装する3. 変換ツールを使う
1.ツールを使った実装Flash IDEライクなタイムラインベースのアニメーション制作ツールを用いて制作する方法
長所/短所長所アニメーターが作りやすい短所ツールの習得コストフィーチャーフォンと両立しなければならないまだ過渡期のためツールの仕様変更が発生しやすい
1.ツールを使った実装Adobe EdgejQueryベースでアニメーションを実装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.jsCanvas用ライブラリ Flashライクな実装が売りEasel.jsadobeが採用...その他色々
3.変換ツールを使う
3.変換ツールを使う長所フィーチャーフォンとの両立アニメーション制作ツールとしてFlashが使える短所ASのボタン処理などを変換してやる必要があるパフォーマンスチューニング
変換ツールswfキャプチャFlaファイル変換swfファイル変換
変換ツール(キャプチャ系)swfをフレーム毎にキャプチャしてスプライトシートを作りJavaScriptで再生実装が容易/不具合は出にくい
変換ツール(キャプチャ系)自社用ツールSWF Animation ConverterASに対応させたツール
変換ツール(Flaファイル変換系)Flaファイルからアニメーションを生成するツール
変換ツール(Flaファイル変換系)Wallabyadobe製変換ツールFlaファイルをCSS3ベースのアニメーションに変換SVGをPNGに変換すればAndroidでも動作する一年近くバージョンアップ無し
変換ツール(Flaファイル変換系)Swiffygoogle製変換ツール通常変換サーバでswfを変換。拡張Extentionを使うとIDEからFlaファイルから直接変換出来るSWFをjsonデータに変換、独自プレイヤー(js)で再生ベクターはSV...
変換ツール(swf変換系)SWFを直接変換してJavaScriptなどで再生する動的生成したswfにも対応出来る
変換ツール(swf変換ファイル系)FlashForwardParserがphpSVG/Canvas両対応まだ不完全(ex.グラデーション)
変換ツール(swf変換ファイル系)Reel(Gree) / ExGame(Mobage)JavaScriptでSWFを再生するそれぞれプラットフォームに参加していなければ使用出来ない
変換ツール (swf変換系)LightningSwfmillで変換したXMLファイルをパースしてCSSベースのアニメーションで再生動作環境 python
制作の際の注意点
Androidから作れAndroid2.1ではCanvas処理にバグありツール系のものでもサポートされてない場合あり大量の端末の多さ / SDKバージョン違い今後はAndroid Chrome対応も
通信環境は3G大量に素材読み込む時はローディング周りには注意使うツールライブラリではプリロードに対して無自覚なものもあるので注意(特にPC向けのライブラリ)
アニメーション実装の今後
現在は過渡期ツールもライブラリもまだ成熟していない決め手にかける
フィーチャーフォンとの両立スマホ対応だけでいいのか?FlashとHTML5それぞれでアニメーションが作れるか?→出来ないなら変換ツールを使う方向を検討
今後の動向Adobe CreateJSFlashIDEからHTML5コンテンツをexport
最後にアニメーションはセンス→センスを活かせる環境のチョイスが重要基準はフィーチャーフォンなのかスマホなのか→スマホの性能を生かしたもの方がクオリティは良いはず
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

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

13,385 views

Published on

 エンジニアカフェ× CyberX 技術勉強会 #2
 ~スマホ対応でJavascript,HTML5はどう使う?~

Published in: Technology
1 Comment
29 Likes
Statistics
Notes
No Downloads
Views
Total views
13,385
On SlideShare
0
From Embeds
0
Number of Embeds
1,540
Actions
Shares
0
Downloads
81
Comments
1
Likes
29
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • スマートフォンにおけるアニメーション実装 ~FlashからHTML5へシフトするには~

    1. 1. スマートフォンにおけるアニメーション実装∼FlashからHTML5にシフトするには∼株式会社CyberX 佐野 裕
    2. 2. 自己紹介佐野 裕2011年6月 入社Flashディベロッパー現在は開発部にて主にスマートフォン向けのフロント部分の実装/開発etc
    3. 3. Agenda現在のスマートフォン対応状況スマートフォン向けアニメーション実装手法制作の際注意したいことアニメーション実装の今後
    4. 4. 現在のスマートフォン対応状況
    5. 5. 現在のスマートフォン対応状況iPhone Flash非対応Adobe Flashモバイル(ブラウザ)からの撤退Android Chrome Flash非表示
    6. 6. 現在のスマートフォン対応状況FlashがiOS/Androidともに対応出来なくなるのはすぐそこまで来ている弊社で開発しているソーシャルゲームのメインプラットフォームはスマートフォンに移行しつつある考えるべきは「対応する/しない」ではなく「どうやって対応するか」
    7. 7. スマートフォン向けアニメーション実装方法
    8. 8. どんな手法があるか大きく分けて3パターン1. IDE(GUI)ツールを使ってアニメーションを作る2. JavaScript/CSSでアニメーションを実装する3. 変換ツールを使う
    9. 9. 1.ツールを使った実装Flash IDEライクなタイムラインベースのアニメーション制作ツールを用いて制作する方法
    10. 10. 長所/短所長所アニメーターが作りやすい短所ツールの習得コストフィーチャーフォンと両立しなければならないまだ過渡期のためツールの仕様変更が発生しやすい
    11. 11. 1.ツールを使った実装Adobe EdgejQueryベースでアニメーションを実装Sencha Animater独自フレームワークによるアニメーションHype独自フレームワーク 安価
    12. 12. 2.JavaScript/CSSによる実装
    13. 13. 2.JS/CSSによる実装JavaScriptとCSS3でアニメーションを実装するDOM/Canvasの2パターン
    14. 14. 2.JS/CSSによる実装DOMフレーム毎にDIVタグなどのDOM要素のパラメータをJS/CSSを用いて変えながらアニメーションを表現Canvasフレーム毎にCanvas要素をリフレッシュしながら再描画を行ってアニメーションを表現
    15. 15. 長所/短所長所フレーム毎の処理が出来るのでゲームなどの実装に向いている短所直感的なアニメーションの実装が難しいプログラマーとアニメーターの分業をどうするかフィーチャーフォンとの両立
    16. 16. 各種ライブラリenchant.jsゲーム開発向けライブラリ DOMベースArctic.jsCanvas用ライブラリ Flashライクな実装が売りEasel.jsadobeが採用...その他色々
    17. 17. 3.変換ツールを使う
    18. 18. 3.変換ツールを使う長所フィーチャーフォンとの両立アニメーション制作ツールとしてFlashが使える短所ASのボタン処理などを変換してやる必要があるパフォーマンスチューニング
    19. 19. 変換ツールswfキャプチャFlaファイル変換swfファイル変換
    20. 20. 変換ツール(キャプチャ系)swfをフレーム毎にキャプチャしてスプライトシートを作りJavaScriptで再生実装が容易/不具合は出にくい
    21. 21. 変換ツール(キャプチャ系)自社用ツールSWF Animation ConverterASに対応させたツール
    22. 22. 変換ツール(Flaファイル変換系)Flaファイルからアニメーションを生成するツール
    23. 23. 変換ツール(Flaファイル変換系)Wallabyadobe製変換ツールFlaファイルをCSS3ベースのアニメーションに変換SVGをPNGに変換すればAndroidでも動作する一年近くバージョンアップ無し
    24. 24. 変換ツール(Flaファイル変換系)Swiffygoogle製変換ツール通常変換サーバでswfを変換。拡張Extentionを使うとIDEからFlaファイルから直接変換出来るSWFをjsonデータに変換、独自プレイヤー(js)で再生ベクターはSVGに変換される
    25. 25. 変換ツール(swf変換系)SWFを直接変換してJavaScriptなどで再生する動的生成したswfにも対応出来る
    26. 26. 変換ツール(swf変換ファイル系)FlashForwardParserがphpSVG/Canvas両対応まだ不完全(ex.グラデーション)
    27. 27. 変換ツール(swf変換ファイル系)Reel(Gree) / ExGame(Mobage)JavaScriptでSWFを再生するそれぞれプラットフォームに参加していなければ使用出来ない
    28. 28. 変換ツール (swf変換系)LightningSwfmillで変換したXMLファイルをパースしてCSSベースのアニメーションで再生動作環境 python
    29. 29. 制作の際の注意点
    30. 30. Androidから作れAndroid2.1ではCanvas処理にバグありツール系のものでもサポートされてない場合あり大量の端末の多さ / SDKバージョン違い今後はAndroid Chrome対応も
    31. 31. 通信環境は3G大量に素材読み込む時はローディング周りには注意使うツールライブラリではプリロードに対して無自覚なものもあるので注意(特にPC向けのライブラリ)
    32. 32. アニメーション実装の今後
    33. 33. 現在は過渡期ツールもライブラリもまだ成熟していない決め手にかける
    34. 34. フィーチャーフォンとの両立スマホ対応だけでいいのか?FlashとHTML5それぞれでアニメーションが作れるか?→出来ないなら変換ツールを使う方向を検討
    35. 35. 今後の動向Adobe CreateJSFlashIDEからHTML5コンテンツをexport
    36. 36. 最後にアニメーションはセンス→センスを活かせる環境のチョイスが重要基準はフィーチャーフォンなのかスマホなのか→スマホの性能を生かしたもの方がクオリティは良いはず
    37. 37. ご清聴ありがとうございました。

    ×