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

Presentation on theme: "SWF研究会#2 発表#1 SWF の情報要素と バイナリの読み方"— Presentation transcript:

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

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

3 伝えたい事 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.

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

5 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 というと、 大体コレがターゲット 互換性の問題で こっちもたまに見る 引用元)

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

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

8 [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,　 　 …, Matrix: ] …

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

10 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 は 次ページで説明

11 SWF Header FrameSize Header 詳細 Header bit packing ↓ ↑ byte alignment
Xmin Xmax Ymin Ymax 5 bits 14 bits 14 bits 14 bits 14 bits Nbits: → 14bits Xmin: → twips → 0 pixel Xmax: → 4800 twips → 240 pixel Ymin: → twips → 0 pixel Ymax: → 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

12 [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,　 　 Depth:1, Matrix: , … ]

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

14 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 … …

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

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

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

18 ShowFrame, End ShowFrame, End ( payload 無し) Tag (ShowFrame) Tag (End)
Tag & Length 2 bytes type:1 Tag (End) Tag & Length 2 bytes type:0

19 SetBackgroundColor (背景色設定)
Tag (SetBackgroundColor) Tag & Length BackgroundColor 2 bytes 3 bytes 3 type:9 BackgroundColor Red Green Blue 1 byte 1 byte 1 byte type:9 Length:3 → #000000 (black)

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

21 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 参考) SWFバイナリ編集のススメ第三回 (JPEG)

22 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 ４ 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 …

23 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 ４x(Width) bytes BitmapPixelData Red Green Blue Alpha … Red Green Blue Alpha … (Height) bytes … 参考) SWFバイナリ編集のススメ第五回 (PNG)

24 DefineShape (シェイプ:ベクター画像)
SWFバイナリ編集のススメ第七回 (Shape基本構造) ← こちらで説明

25 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 X 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 X MATRIX, ColorTransform (アフィン変換行列、カラー効果) ↓ (次ページ以降で説明) ClipActions ↓ SWF5 以降の情報要素なので略

26 MATRIX (アフィン変換行列) MATRIX (最小構成) MATRIX (全乗せ) アフィン変換の詳細は、LT で！ MATRIX
Ntranslate Bits Has Scale Has Rotate Scale Rotate Translate X Skew X Rorate Scale Translate Skew 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 アフィン変換の詳細は、LT で！

27 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 …

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

29 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 参考) SWFバイナリ編集のススメ第八回 (Action – AS2 Bytecode編) 1 byte = 0

30 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

31 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)

32 まとめ 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 を取る

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

34 参考) http://www.slideshare.net/yoyayoya1/php-10133775 PHPでバイナリ変換プログラミング
最後に少しだけ実装の話 (2/3) Bitstream クラスを作って、フィールドの長さに応じたメソッドを呼ぶのがコツ 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; } 参考) PHPでバイナリ変換プログラミング

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

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