Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
スマートフォンにおけるアニメーション実装∼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,689 views

Published on

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

Published in: Technology

スマートフォンにおけるアニメーション実装 ~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. ご清聴ありがとうございました。

×