Movatterモバイル変換


[0]ホーム

URL:


Yutaka Sano, profile picture
Uploaded byYutaka Sano
KEY, PDF6,113 views

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

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

Embed presentation

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

Recommended

PDF
Xamarin の概要と活用事例
PDF
Xamarin 概要~Windows Embedded の業務用端末から Android へのシームレスな移行~
PPTX
ゆるふわ Xamarin Tips
PPTX
Xamarinで作るiPhoneとwindowsストアアプリの共通コンポーネント
PDF
Computer Vision と Translator Text API 使ってみた
PPTX
Developers.io.札幌 xamarinってどうよ
PPTX
証券取引アプリについて
PPTX
私とXamarinと。
PPTX
受託開発のPhalcon
PPTX
アプリケーション・デベロッパー 〜Xamarinによるクロスプラットフォーム開発〜
PPTX
20分でできる!Xamarin.Forms入門
PDF
Xamarinをこれから始める皆様へ
PDF
テックヒルズ#3_R土濱
PPTX
Sl17
PDF
20171202 Xamarinの歩き方
PDF
BlueMonkeyプロジェクトのご紹介
PDF
Realm Mobile Platform 概要
PPTX
Xamarinを企業向けアプリ開発の プラットフォームとして選定し 実際にアプリをリリースした話
PDF
NET Standard と Xamarin
PPTX
証券取引アプリとNote app作ってみた
PDF
Xamarin.forms+azureで始めるモバイル開発
PDF
Xamarin概要と活用方法
PDF
Xamarin.Forms アプリケーション 設計パターン
PDF
BoxViewの美味しい食べ方
PDF
Xamarin から使う Azure
PDF
モバイル向けクロスプラットフォーム開発ツール Xamarin の概要とその利点
PPTX
ソフト屋が挑戦した電子工作 〜力ずくの10か月〜
PDF
Xamarin概要+最新情報
PDF
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
PDF
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋

More Related Content

PDF
Xamarin の概要と活用事例
PDF
Xamarin 概要~Windows Embedded の業務用端末から Android へのシームレスな移行~
PPTX
ゆるふわ Xamarin Tips
PPTX
Xamarinで作るiPhoneとwindowsストアアプリの共通コンポーネント
PDF
Computer Vision と Translator Text API 使ってみた
PPTX
Developers.io.札幌 xamarinってどうよ
PPTX
証券取引アプリについて
PPTX
私とXamarinと。
Xamarin の概要と活用事例
Xamarin 概要~Windows Embedded の業務用端末から Android へのシームレスな移行~
ゆるふわ Xamarin Tips
Xamarinで作るiPhoneとwindowsストアアプリの共通コンポーネント
Computer Vision と Translator Text API 使ってみた
Developers.io.札幌 xamarinってどうよ
証券取引アプリについて
私とXamarinと。

What's hot

PPTX
受託開発のPhalcon
PPTX
アプリケーション・デベロッパー 〜Xamarinによるクロスプラットフォーム開発〜
PPTX
20分でできる!Xamarin.Forms入門
PDF
Xamarinをこれから始める皆様へ
PDF
テックヒルズ#3_R土濱
PPTX
Sl17
PDF
20171202 Xamarinの歩き方
PDF
BlueMonkeyプロジェクトのご紹介
PDF
Realm Mobile Platform 概要
PPTX
Xamarinを企業向けアプリ開発の プラットフォームとして選定し 実際にアプリをリリースした話
PDF
NET Standard と Xamarin
PPTX
証券取引アプリとNote app作ってみた
PDF
Xamarin.forms+azureで始めるモバイル開発
PDF
Xamarin概要と活用方法
PDF
Xamarin.Forms アプリケーション 設計パターン
PDF
BoxViewの美味しい食べ方
PDF
Xamarin から使う Azure
PDF
モバイル向けクロスプラットフォーム開発ツール Xamarin の概要とその利点
PPTX
ソフト屋が挑戦した電子工作 〜力ずくの10か月〜
PDF
Xamarin概要+最新情報
受託開発のPhalcon
アプリケーション・デベロッパー 〜Xamarinによるクロスプラットフォーム開発〜
20分でできる!Xamarin.Forms入門
Xamarinをこれから始める皆様へ
テックヒルズ#3_R土濱
Sl17
20171202 Xamarinの歩き方
BlueMonkeyプロジェクトのご紹介
Realm Mobile Platform 概要
Xamarinを企業向けアプリ開発の プラットフォームとして選定し 実際にアプリをリリースした話
NET Standard と Xamarin
証券取引アプリとNote app作ってみた
Xamarin.forms+azureで始めるモバイル開発
Xamarin概要と活用方法
Xamarin.Forms アプリケーション 設計パターン
BoxViewの美味しい食べ方
Xamarin から使う Azure
モバイル向けクロスプラットフォーム開発ツール Xamarin の概要とその利点
ソフト屋が挑戦した電子工作 〜力ずくの10か月〜
Xamarin概要+最新情報

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

PDF
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
PDF
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
PPTX
インタラクティブコンテンツにおけるHTML5とFlash
PDF
「Flashユーザーが取り組むHTML5」アンケート結果
KEY
iPhoneで動くFlash Playerを実装した苦労話LT資料
PPTX
ハイブリットソーシャルゲームの現場
PDF
The forefront of html5 implementation
PDF
Test doc
PPTX
Flash lite概要
PDF
Yapc asia-2012-lt-thon
PDF
フラッシャーはこれからどうしたらいいのか。
KEY
12.09.08 明星和楽2012 KLabハンズオンセッション
PDF
モバイルWebアプリのこれまでとこれから
改めて注目される2D アニメーションツール SpriteStudio ~国産2Dツールが(舶来ゲームエンジンの力を借りながら)世界へ~
HTML5スマートフォン業務アプリ開発セミナー(応用)テキストの抜粋
インタラクティブコンテンツにおけるHTML5とFlash
「Flashユーザーが取り組むHTML5」アンケート結果
iPhoneで動くFlash Playerを実装した苦労話LT資料
ハイブリットソーシャルゲームの現場
The forefront of html5 implementation
Test doc
Flash lite概要
Yapc asia-2012-lt-thon
フラッシャーはこれからどうしたらいいのか。
12.09.08 明星和楽2012 KLabハンズオンセッション
モバイルWebアプリのこれまでとこれから

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

Editor's Notes


[8]ページ先頭

©2009-2025 Movatter.jp