SlideShare a Scribd company logo
1 of 12
Download to read offline
FlashのPNGシーケンスとス
プライトシート
を使ってみたよ
Flashが、アニメーションとして
SWF以外に書き出せる主なもの
• HTML5 Canvas
• WebGL
• ムービー(MOV)
• アニメーションGIF
• PNGシーケンス(JPEGシーケンス、GIFシーケンス)
• スプライトシート
Flashアニメーションの
みどころ
• プログラミングされた動きの美しさとは対極に近い
位置にある、人の手が入った動きの面白さ
• 比較的習得が容易な技術のため、裾野の広さ 納品
レベルのクオリティの高さ
• 書き割りアニメ(コマアニメ、パラパラアニメ)と
トゥィーンとの親和性の高さ
順番にみてみましょう
HTML5 Canvas
特徴
• Canvasが使える案件なら積極的に導入したい
• Flash5∼MXあたりでつまずいた人でも使いこなせ
る
• Canvasは使えないがCSS3アニメーションが使え
る案件なら、AdobeEdgeという選択肢も
PNGシーケンス
特徴
• いわゆる連番PNG
• とりあえずこれで書き出しておけば後はなんとでもなる程の汎
用性の高さ
• ムービークリップの入れ子はNG。アニメーションの階層構造は
グラフィックシンボルで
• アニメーションGIFも、いったんこれで書き出しておけばいい
(Flashでそのまま書き出すと色数が落ちて汚いので、いったん
PNGシーケンスで書き出しといて、PhotoShop経由などでGIF
アニ化させるのがセオリー)
スプライトシート
特徴
• スプライトシート最強伝説が今始まると言っても過言では
ない
• 過言かもしれない
• スプライトシートは、PNGシーケンスで書き出しておいて
TexturePackerでスプライトシート化が最高だが、Flash
から直接作れる手軽さはあなどれない
• Androidなどでタイル上に並べるときに切れ目が見えちゃ
う場合は、「シェイプの余白」を5px前後にするといいよ
スプライトシートって?
• 複数の画像ファイルを一枚のファイルにまとめたも
の。読み込み、表示、いずれにおいても複数ファイ
ルのままより管理しやすい
• 別途、場所の情報が書かれたファイルが必要で、そ
の役割をXMLやJSONが担う
• 場所情報が書かれたXMLやJSONのフォーマットの
違いによって、いろんな種類がある
番外
• CanvasもCSS3アニメも封じられた場合どうする
の?
• →jQueryでごりごりアニメーションします
• mach3さんがFlashのスプライトシートをjQuery
で使用するライブラリを公開されています
• http://mach3.github.io/flashspritejs/

More Related Content

What's hot (6)

VIOPS10: DMM.comのインフラのこれから
VIOPS10: DMM.comのインフラのこれからVIOPS10: DMM.comのインフラのこれから
VIOPS10: DMM.comのインフラのこれから
 
DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話 - DMM Study night
DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話 - DMM Study nightDMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話 - DMM Study night
DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話 - DMM Study night
 
Why prism for xamarin.forms
Why prism for xamarin.formsWhy prism for xamarin.forms
Why prism for xamarin.forms
 
Cocoa Binding 童貞だけど解説してみる
Cocoa Binding 童貞だけど解説してみるCocoa Binding 童貞だけど解説してみる
Cocoa Binding 童貞だけど解説してみる
 
モダンJavaScriptフレームワークで技術的負債を作らないために
モダンJavaScriptフレームワークで技術的負債を作らないためにモダンJavaScriptフレームワークで技術的負債を作らないために
モダンJavaScriptフレームワークで技術的負債を作らないために
 
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオンWord pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
 

Viewers also liked

Viewers also liked (20)

動くサイトにプログラムが必要な時代は終わった。〜デザイナー歓喜のAnimate CCとSpineの紹介
動くサイトにプログラムが必要な時代は終わった。〜デザイナー歓喜のAnimate CCとSpineの紹介動くサイトにプログラムが必要な時代は終わった。〜デザイナー歓喜のAnimate CCとSpineの紹介
動くサイトにプログラムが必要な時代は終わった。〜デザイナー歓喜のAnimate CCとSpineの紹介
 
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
熊本地震支援サイトを30分で立ち上げ即日運用開始した話熊本地震支援サイトを30分で立ち上げ即日運用開始した話
熊本地震支援サイトを30分で立ち上げ即日運用開始した話
 
Flash Lite
Flash LiteFlash Lite
Flash Lite
 
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
 
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
 
[UX]は投げ捨てろ!
[UX]は投げ捨てろ![UX]は投げ捨てろ!
[UX]は投げ捨てろ!
 
ShibuyaUX - UX and Analytics
ShibuyaUX - UX and AnalyticsShibuyaUX - UX and Analytics
ShibuyaUX - UX and Analytics
 
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
 
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
 
はじめてのUXとUIの話
はじめてのUXとUIの話はじめてのUXとUIの話
はじめてのUXとUIの話
 
UIの話は会議室でするな
UIの話は会議室でするなUIの話は会議室でするな
UIの話は会議室でするな
 
なぜUXをデザインしているのか
なぜUXをデザインしているのかなぜUXをデザインしているのか
なぜUXをデザインしているのか
 
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
 
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンドネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
 
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
 
UXの考え方とアプローチ
UXの考え方とアプローチUXの考え方とアプローチ
UXの考え方とアプローチ
 
UXとブランド
UXとブランドUXとブランド
UXとブランド
 
UXはじめの一歩
UXはじめの一歩UXはじめの一歩
UXはじめの一歩
 
UIデザインの基本
UIデザインの基本UIデザインの基本
UIデザインの基本
 
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
 

Recently uploaded

研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
atsushi061452
 

Recently uploaded (14)

Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
 
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
 
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )
 
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdKeywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltd
 
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
 
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
 
20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf
 
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
 
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイント
 
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
 
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
論文紹介:Deep Occlusion-Aware Instance Segmentation With Overlapping BiLayers
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
 

Flashアニメーションの書き出し