SWF研究会#2 発表#1 SWF の情報要素と バイナリの読み方

Slides:



Advertisements
Similar presentations
SWF 内 Lossless 画像の PNG 化によ る HTML5 Flash Player 処理軽減提 案 2011/11/17(Thu)
Advertisements

オブジェクト指向 言語 論 第八回 知能情報学部 新田直也. 多相性(最も単純な例) class A { void m() { System.out.println( “ this is class A ” ); } } class A1 extends A { void m() { System.out.println(
FxUG in Toyama # Presented by wacky. 最近 AMF 3 の Encode/Decode を実装してみました。 そこで得た知識を共有したいと思います! 30分後には … AMF の基本構造が分かっている AMF の得手不得手が分かっている BlazeDS.
特別支援教育で使える PowerPoint の活用法 研修 最低限必要なスキルはこれでバッチリ!! ICT 活用支援員 高松 崇.
Image J を用いた粒子径分析 目次 1.ImageJ ダウンード・開始 2. 粒子径分析の基本操作.
Flash SWF ファイル書き換え PHP extension 2008 年 7 月 21 日 よや.
コンピュータ基礎実習 ( 上級 ) 第九回 スタイルシート 清水淳紀. はじめに  今回の内容  スタイルシート (CSS) とは何か  CSS の役割  CSS の利点  スタイルシートの基本  CSS の記入方法  基本的な CSS の例.
Web アプリをユーザー毎に カスタマイズ可能にする AOP フレームワーク
SWF Binary Code Golf on FlashLite 1.1
PHP AV(Audio Visual) 拡張 クライアントサイド PHP アプリケーションPHP
Step.5 パケットダンプ Wiresharkでパケットをキャプチャする PC 1 PC 2 PC 3 PC 4 ネットワーク
TeX で数式を書くための PowerPoint アドイン Ver (2011/06/26) Ver. 0.1 (2007/5/30)
PHP AV(Audio Visual) 拡張 PHP asアプリケーション
Flash 書き換え PHP extension “SWF Editor”
第11回JavaScriptゼミ セクション8-2 発表者 直江 宗紀.
Flex “30分でわかるFlex”.
東京工科大学 コンピュータサイエンス学部 亀田弘之
情報・知能工学系 山本一公 プログラミング演習Ⅱ 第4回 配列(2) 情報・知能工学系 山本一公
プログラミング基礎I(再) 山元進.
Flash 書き換え PHP extension “SWF Editor”
talend活用事例 ・ナビゲータグラフのカスタマイズにおける事例 ・CSVダウンロードでのカスタマイズ事例
Ex8. Search for Vacuum Problem(2)
Javaのための暗黙的に型定義される構造体
TeX で数式を書くための PowerPoint アドイン Ver. 0.1 (2007/5/30)
アプレット (Applet)について.
アルゴリズムとデータ構造1 2007年6月12日
実行時のメモリ構造(1) Jasminの基礎とフレーム内動作
画像ファイル(ppm)の読み書き 画像データ用のメモリ確保・解放
基礎プログラミングおよび演習 第9回
ParaViewを用いたPHITS 計算結果の3次元表示
haXeでオリジナルコンポーネント作り WCAN mini Vol 小笠原
ユーリテクノスのFlashテクノロジーを 利用した様々なサービスのご提案
WWW上の3次元空間表現 A three-dimesional space expression on WWW
Flash 書き換え PHP extension “SWF Editor”
情報工学科 05A2301 樽美 澄香 (Tarumi Sumika)
HTTPプロトコルとJSP (1) データベース論 第3回.
リファクタリングのための 変更波及解析を利用した テスト支援ツールの提案
アルゴリズムとデータ構造 2011年6月20日
画像ファイル(ppm)の読み書き 画像データ用のメモリ確保・解放
IIR輪講復習 #5 Index compression
10: ファイル入出力 C プログラミング入門 基幹2 (月4) Linux にログインし、以下の講義ページ を開いておくこと
オブジェクト指向 プログラミング 第十四回 知能情報学部 新田直也.
11.6 ランダムアクセスファイル 11.7 StreamTokenizerクラス
第4回JavaScriptゼミ セクション2-8 発表者 直江 宗紀.
アルゴリズムとプログラミング (Algorithms and Programming)
オブジェクト指向 プログラミング 第十一回 知能情報学部 新田直也.
図書館職員のための アプリケーション開発講習会
オブジェクト指向 プログラミング 第十三回 知能情報学部 新田直也.
暗黙的に型付けされる構造体の Java言語への導入
オブジェクト指向 プログラミング 第十四回 知能情報学部 新田直也.
Java Bytecode Modification and Applet Security
オブジェクト指向言語論 第十一回 知能情報学部 新田直也.
演習2の解答例 2006年12月22日 海谷 治彦.
オブジェクト指向 プログラミング 第十ニ回 知能情報学部 新田直也.
オブジェクト指向言語論 第十一回 知能情報学部 新田直也.
統計ソフトウエアRの基礎.
アルゴリズムとプログラミング (Algorithms and Programming)
プログラミング言語論 第十三回 理工学部 情報システム工学科 新田直也.
TeX で数式を書くための PowerPoint アドイン Ver. 0.1 (2007/5/30)
PROGRAMMING IN HASKELL
TeX で数式を書くための PowerPoint アドイン Ver. 0.1 (2007/5/30)
アルゴリズムとデータ構造1 2009年6月15日
プログラミング基礎a 第9回 Java言語による図形処理入門(1) Javaアプレット入門
PROGRAMMING IN HASKELL
アルゴリズムとデータ構造 2012年6月21日
Molecular Devices Japan
アルゴリズムとデータ構造 2010年6月17日
オブジェクト指向言語論 第七回 知能情報学部 新田直也.
〜 前提知識から openpear/IO_Bit の紹介、応用事例まで 〜 “よや”
オブジェクト指向言語論 第十回 知能情報学部 新田直也.
Presentation transcript:

SWF研究会#2 発表#1 SWF の情報要素と バイナリの読み方 2012年9月25日(火) “よや“ <yoya@awm.jp>

自己紹介 六本木の方から来ました SWF バイナリ編集が趣味 (主に Flash Lite) 会社は着ているTシャツでお察し下さい アウェイで発表頑張ります! SWF バイナリ編集が趣味 (主に Flash Lite) PHP の SWFバイナリ編集ライブラリを作ってます (動的生成が下火でそろそろ過去形 ;ω;) http://sourceforge.jp/projects/swfed/ http://openpear.org/package/IO_SWF

伝えたい事 SWF フォーマットの読み方 SWF バイナリの切り出しのコツ SWF に含まれる情報要素とその意味 幾つかのパターンが分かれば簡単 Little Endian (Byte) , MSB (Bit) , “tag_and_length” Byte Alignment , 8 bit Flags Length Dependency Optional Field , ¥0 Terminate Offset to foobaa , Offset Table.

SWF を触る目的 ガラケー時代 > Flash Lite の制限に力づくで対応 \まさかの実行ファイル(SWF)動的生成/ 最大100KB ⇒ 最小限のデータを SWF に載せる 実行引数渡せない ⇒ SWF にパラメータ値を埋め込もう 画像を動的に入れ替えし辛い ⇒ SWF の画像も入れ替えちゃえ    \まさかの実行ファイル(SWF)動的生成/ スマートフォン時代 > Flash Player 代わりの処理 iOS に Flash Player が無い ⇒ JavaScript で SWF を解釈して何か表示 Android も 4.1 から Flash Player が無い ⇒ じゃぁ、こっちも!      \まさかの Flash Player 実装/

Flash Lite と SWF version Flash と Flash Lite の SWF version Macromedia Flash MX 以前 省略 以降 省略 Flash 4 Flash 5 Flash 6 Flash 7 Flash 8 Flash Lite 1.x Flash Lite 2.x Flash Lite 3.x 以降 省略 Flash Lite 1.1 Flash Lite 2.0 ガラケーのFlash というと、 大体コレがターゲット 互換性の問題で こっちもたまに見る 引用元) http://www.adobe.com/jp/devnet/devices/articles/develop_in_japan.html

お勧め → オーム社の Macromedia Flash ActionScript バイブル SWFの仕様 公式仕様書 http://www.adobe.com/devnet/swf.html データ形式は(正確さはさておき)  詳細に書かれているが、  意味の記述が全然足りない 自力で調べる必要あり Flash Player のブラックボックス解析 2000年初頭の書籍を漁る (だって Flash 4 だし…)  お勧め → オーム社の Macromedia Flash ActionScript バイブル

SWF 解説 ここまで前置き ここから本題

[Red:0, Green:0, Blue:0] (Black) SWF 全体構造 Header と Tag のイメージ    \概念/ SWF Header Tag Tag Tag Tag … Tag Tag (type:9 SetBackgroundColor) [Red:0, Green:0, Blue:0] (Black) Header Tag (type:21 DefineBitsJPEG2) Xmin Xmax FrameRate [CharacterID:1, ImageData: ] Ymin Ymax FrameCount Tag (type:22 DefineShape2) [CharacterID:2,BitmapID:1, … ,ShapeRecords: ] Tag (type:26 PlaceObject2) [CharatorID:2,    1 0 60 …, Matrix: 0 1 800 ] …

SWF Header (仕様書) SWF Header (仕様書)

SWF Header Header 詳細 Header Header FrameSize は 次ページで説明 Little Endian Xmin Xmax FrameRate Ymin Ymax Signature: FWS → 無圧縮 Version: 0x04 → Flash 4 FileLength: 0x00000a90 → 2,704byte FrameSize: (次ページで説明) FrameRate: 0x08.00 → 8 frames/sec FrameSize: 0x0028 → 40 frames FrameCount Header (Rectangle) FrameSize Signature Version FileLength FrameRate FrameCount 3 bytes 1 byte 4 bytes 2 bytes 2 bytes FrameSize は 次ページで説明

SWF Header FrameSize Header 詳細 Header bit packing ↓ ↑ byte alignment Xmin Xmax 7 0 0 0 0 9 6 0 0 0 0 0 9 6 0 0 01110000 00000000 00001001 01100000 00000000 00000000 10010110 00000000 Ymin Ymax 5 bits 14 bits 14 bits 14 bits 14 bits Nbits: 01110 → 14bits Xmin: 000 00000000 000 → 0 twips → 0 pixel Xmax: 01001 01100000 0 → 4800 twips → 240 pixel Ymin: 0000000 0000000 → 0 twips → 0 pixel Ymax: 0 10010110 00000 → 4800 twips → 240 pixel 勿体ないけど 3bits 捨てる ↑ byte alignment (Rectangle) FrameSize ※ 20 twips = 1 pixel FrameSize (Rectangle) Nbits Xmin Xmax Ymin Ymax 5 bits Nbits bits Nbits bits Nbits bits Nbits bits

[Red:0, Green:0, Blue:0] (Black) SWF Tag example ビットマップ画像を表示するのに最低限必要な Tag SWF Header Tag Tag Tag Tag Tag Tag 描画 背景色 Tag (type:9 SetBackgroundColor) DisplayList [Red:0, Green:0, Blue:0] (Black) Depth:1 Tag (type:0 End) Tag (type:21 DefineBitsJPEG2) [CharacterID: 1, ImageData: ] Tag (type:1 ShowFrame) Tag (type:22 DefineShape2) Tag (type:26 PlaceObject2) [CharacterID:2,BitmapID:1, … ,ShapeRecords: ] [CharatorID: 2,    1 0 60 Depth:1, Matrix: 0 1 800 , … ]

SWF Tag type SWF Tag type (仕様書の appendix B) Tag type

SWF Tag Categories SWF Tag type Categories ab Tag (type:21) Definition tags Control tags Tag (type:21) DefineBitsJPEG2 Tag (type:0) End Tag (type:22) DefineShape2 Tag (type:1) ShowFrame Tag (type:33) DefineButton2 Tag (type:9) SetBackgroundColor ab Tag (type:10) DefineFont インスタンス化 Tag (type:26) PlaceObject2 Tag (type:39) DefineSprite Tag (type:12) DoAction … …

SWF Tag format (仕様書) SWF Tag format (仕様書)

SWF Tag format (short) “ len≦0x3e ” Tag and Length Payload 2 bytes Length bytes TagCodeAndLength 1st byte 2nd byte 4 3 0 2 0100 0011 0000 0100 RECORDHEADER (short) Little Endian 0~0x3e 2nd byte 1st byte 0 2 4 3 0000 0010 0100 0011 0000001001 000011 10 bits 6 bits Length:3 type:9 tag code length ※ DefineBits 系は long形式を使う決まり Tag type 0x3f 00 00 00 → #000000 (black) Tag (type:9) SetBackgroundColor RECORDHEADER (long) → (次ページで説明)

SWF Tag format (long) “ len≧ 0x3f ” Tag and Length Payload 6 bytes Length bytes b f 0 0 1011 1111 0000 0000 TagCodeAndLength 0~0xffffffff 0 0 b f 0000 0000 101 11111 0000000010 111111 1st byte 2nd byte Length 0x3f Type:2 Little Endian 4 bytes 2nd byte 更に4bytes読む 1st byte RECORDHEADER (long) Tag (type:2) DefineShape 33 00 00 00 10 bits 6 bits Little Endian tag code length 00 00 00 33 111111 = 0x3f Tag type Length:0x33(=51)

ShowFrame, End ShowFrame, End ( payload 無し) Tag (ShowFrame) Tag (End) Tag & Length 4 0 0 0 0 0 0 0 0100 0000 0000 0000 0000 0000 0000 0000 2 bytes type:1 0 0 4 0 0000 0000 0100 0000 0000000001 000000 0 0 0 0 0000 0000 0000 0000 0000000000 000000 Tag (End) Tag & Length 2 bytes type:0

SetBackgroundColor (背景色設定) Tag (SetBackgroundColor) Tag & Length BackgroundColor 2 bytes 3 bytes 3 type:9 4 3 0 2 0100 0011 0000 0100 BackgroundColor Red Green Blue 1 byte 1 byte 1 byte 0 2 4 3 0000 0010 0100 0011 0000001001 000011 type:9 Length:3 00 00 00 → #000000 (black)

DefineBitsJPEG (JPEG画像) JPEG 画像が( chunk の並びが違うだけで、)ほぼそのまま格納されている。 詳しくは以下のサイトを参考 (length) bytes Tag (DefineBitsJPEG3) Charater ID JPEG Data Tag & Length 6 bytes 2 bytes type:35 http://labs.gree.jp/blog/2010/09/782/ SWFバイナリ編集のススメ第三回 (JPEG)

DefineBitsJPEG (JPEG画像) (length) bytes Tag (DefineBitsJPEG3) Charater ID (zlib compressed) BitmapAlphaData Tag & Length OffsetToAlpha JPEG Data 6 bytes 2 bytes 4 bytes (OffsetToAlpha) bytes type:35 (width) bytes width BitmapAlphaData height (height) bytes 参考) http://labs.gree.jp/blog/2010/09/782/ SWFバイナリ編集のススメ第三回 (JPEG)

DefineBitsLossless (パレット形式) DefineBitsLossless2 (透明度付き PNG/GIF 画像) Format:3 (パレット形式) (length) bytes Tag (DefineBitsLossless2) (zlib compressed) ColorTable & ColormapPixelData Tag & Length Charater ID Color TableSize Format Width Height 6 bytes 2 bytes 1 byte 2 bytes 2 bytes 1 byte zlib infrate type:36 3 ColorTable & ColormapPixelData ColorTable ColormapPixelData 4 bytes (4 x ColorTableSize) bytes ColorTable (Width) bytes Alpha Red Green Blue ColormapPixelData (Color TableSize) bytes Alpha Red Green Blue (Height) bytes Alpha Red Green Blue …

DefineBitsLossless (RGBA) DefineBitsLossless2 (透明度付き PNG/GIF 画像) Format: 5 (RGBA, DirectColor) (length) bytes Tag (DefineBitsLossless2) Tag & Length Charater ID Color TableSize (zlib compressed) BitmapPixelData Format Width Height 6 bytes 2 bytes 1 byte 2 bytes 2 bytes 1 byte type:36 5 zlib infrate 4x(Width) bytes BitmapPixelData Red Green Blue Alpha … Red Green Blue Alpha … (Height) bytes … 参考) http://labs.gree.jp/blog/2010/12/1902/ SWFバイナリ編集のススメ第五回 (PNG)

DefineShape (シェイプ:ベクター画像) SWFバイナリ編集のススメ第七回 (Shape基本構造) http://labs.gree.jp/blog/2011/04/2328/ ← こちらで説明

PlaceObject (シェイプorシンボルの貼り付け) PlaceFlag HasClipActions HasClipDepth HasName Tag (PlaceObject2) PlaceFlag Depth HasRatio Tag & Length 1 byte HasColorTransform 2 bytes 1 byte 2 bytes HasMatrix Type:26 0000 000X HasCharactor Move Tag (PlaceObject2) Place Flag Depth Character ID Matrix Color Transform Ratio Name Clip Depth Clip Actions Tag & Length 2 bytes 1 byte 2 bytes 2 bytes 2 bytes 2 bytes 1111 111X MATRIX, ColorTransform (アフィン変換行列、カラー効果) ↓ (次ページ以降で説明) ClipActions ↓ SWF5 以降の情報要素なので略

MATRIX (アフィン変換行列) MATRIX (最小構成) MATRIX (全乗せ) アフィン変換の詳細は、LT で! MATRIX Ntranslate Bits Has Scale Has Rotate 1 0 0 0 1 0 Scale Rotate Translate X Skew0 X Rorate Scale Translate Skew1 Y Y 1 bit (= 0) 1 bit (= 0) 5 bit (= 0) 単位行列 MATRIX Scale X Scale Y Rotate Skew0 Rotate Skew1 Translate X Translate X Ntranslate Bits NScale Bits NRotate Bits Has Scale Has Rotate 1 bit (= 1) 1 bit (= 1) 5 bits (Nscale Bits)bits (Nscale Bits) bits 5 bits (NRotate Bits)bits (NRotate Bits) bits 5 bits (NTranslate Bits)bits (NTranslate Bits)bits 2 0 0 0 1 0 アフィン変換の詳細は、LT で!

CXFORM (カラー効果) CXFORM (最小構成) CXFORM (全乗せ) MATRIX 1 bit (= 0) 1 bit 00XX XXXX MATRIX 何もしない (色味を弄らない) Has AddTerm Has MultiTerm 1 bit (= 0) 1 bit (= 0) RedMultiTerm > 256 or RedAddTerm > 0 MATRIX NBits Red MultiTerm Green MultiTerm Blue MultiTerm Red AddTerm Green AddTerm Blue AddTerm Has AddTerm Has MultiTerm 1 bit (= 1) 1 bit (= 1) 4 bits (Nbits) bits (Nbits) bits (Nbits) bits (Nbits) bits (Nbits) bits (Nbits) bits 11XX XXXX …

バイナリの切り出し方のコツは殆ど出尽くしたので、 後の資料は適当です m(_ _)m バイナリの切り出し方のコツは殆ど出尽くしたので、 後は最低限の説明で。

DoAction (ActionScript実行コード) Tag (DoAction) Actions Action EndFlag Tag & Length Type:12 2 or 6 bytes 1 byte = 0 Action 0x7F以下 ActionCode Action 0x80 以上 ActionCode Length Payload (operand) 1 byte 2 bytes (Length) byte 参考) http://labs.gree.jp/blog/2011/07/3259/ SWFバイナリ編集のススメ第八回 (Action – AS2 Bytecode編) 1 byte = 0

DefineButton (ボタンの振る舞い) Tag (DefineButton) Button Id Characters Character EndFlag Actions Action EndFlag Tag & Length 2 or 6 bytes 2 bytes 1 byte = 0 1 byte = 0 Type:7 Character (BUTTONRECORD) ↑ この辺は DoAction 相当 Chacater Chacater … Character (BUTTONRECORD) ButtonState… CharacterID PlaceDepth PlaceMatrix … … ButtonState ↑ この辺は PlaceObject 相当の機能 HitTest StateDown ボタンを押してる時の表示/アクションか、 ボタンを離してる時か StateOver StateUp

DefineSprite (ムービークリップ) ※ Definition Tags は中に含められない。 (length) bytes Tag (DefineSprite) Sprite ID Frame Count ControlTags Tag & Length 2 or 6 bytes 2 bytes 2 bytes type:39 ControlTags Tag (PlaceObject2) Tag (ShowFrame) … Tag (End)

まとめ 16bits, 32bits値は LittleEndian で埋まっている 基本、bit は先頭から切り出せば OK (いわゆる MSB) tag_and_lenght だけ 16bits の一塊なので LittleEndian との併せ技 可変長フィールドは、数ビットの長さフィールドと、それで指定した分の長さが後ろに続くのがお約束 フィールドがオプション扱いの場合は、その存在フラグ(1 bit)があるか、Tag の長さ的に余っているなら存在する。といった形で判断 長さフィールドがない可変長の場合は、Tag の長さから判断できる。 省略されたフィールドはデフォルト値が適用。(Matrixなら単位行列) Byte Alignment (byte境界に合わないbitの読み捨て)に注意。 Matrix 等、情報要素に応じて(その先頭で) alignment を取るか決まる 8 bits 単位でフラグが並ぶ場合は仕様書になくても alignment を取る

最後に少しだけ実装の話 (1/3) Flash Lite 1.1 の SWF を一通り解釈出来るコードを C と PHP で公開してます                      (メイン機能は編集) SWFEditor for PHP http://sourceforge.jp/projects/swfed/ IO_SWF http://openpear.org/package/IO_SWF

参考) http://www.slideshare.net/yoyayoya1/php-10133775 PHPでバイナリ変換プログラミング 最後に少しだけ実装の話 (2/3) Bitstream クラスを作って、フィールドの長さに応じたメソッドを呼ぶのがコツ http://openpear.org/package/IO_Bit IO_Bit class IO_SWF_Type_RECT extends IO_SWF_Type { static function parse(&$reader, $opts = array()) { $frameSize = array(); $reader->byteAlign(); $nBits = $reader->getUIBits(5); $frameSize['Xmin'] = $reader->getSIBits($nBits); $frameSize['Xmax'] = $reader->getSIBits($nBits); $frameSize['Ymin'] = $reader->getSIBits($nBits); $frameSize['Ymax'] = $reader->getSIBits($nBits) ; return $frameSize; } 参考) http://www.slideshare.net/yoyayoya1/php-10133775 PHPでバイナリ変換プログラミング

最後に少しだけ実装の話 (3/3) 実際に IO_SWF で dump したコンソールログ

以上です ありがとうございました。