• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
スマートフォンにおけるアニメーション実装  ~FlashからHTML5へシフトするには~
 

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

on

  • 12,146 views

 エンジニアカフェ× CyberX 技術勉強会 #2

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

Statistics

Views

Total Views
12,146
Views on SlideShare
10,838
Embed Views
1,308

Actions

Likes
29
Downloads
79
Comments
1

9 Embeds 1,308

http://makoto-tanaka.com 1288
http://us-w1.rockmelt.com 7
http://webcache.googleusercontent.com 5
https://twitter.com 2
http://s.deeeki.com 2
http://localhost 1
http://nodeslide.herokuapp.com 1
http://static.ak.facebook.com 1
https://www.google.co.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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へシフトするには~ スマートフォンにおけるアニメーション実装 ~FlashからHTML5へシフトするには~ Presentation Transcript

  • スマートフォンにおけるアニメーション実装∼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)で再生ベクターはSVGに変換される
  • 変換ツール(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
  • 最後にアニメーションはセンス→センスを活かせる環境のチョイスが重要基準はフィーチャーフォンなのかスマホなのか→スマホの性能を生かしたもの方がクオリティは良いはず
  • ご清聴ありがとうございました。