How to read SWF

15,850 views
15,762 views

Published on

SWF の読み方

Published in: Technology
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
15,850
On SlideShare
0
From Embeds
0
Number of Embeds
8,300
Actions
Shares
0
Downloads
47
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

How to read SWF

  1. 1. 2012年9月25日(火) “よや“ <yoya@awm.jp>
  2. 2. 自己紹介• 六本木の方から来ました • 会社は着ているTシャツでお察し下さい • アウェイで発表頑張ります!• SWF バイナリ編集が趣味 (主に Flash Lite) • PHP の SWFバイナリ編集ライブラリを作ってます (動的生成が下火でそろそろ過去形 ;ω;) • http://sourceforge.jp/projects/swfed/ • http://openpear.org/package/IO_SWF
  3. 3. 伝えたい事• 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.
  4. 4. SWF を触る目的• ガラケー時代 > Flash Lite の制限に力づくで対応 • 最大100KB ⇒ 最小限のデータを SWF に載せる • 実行引数渡せない ⇒ SWF にパラメータ値を埋め込もう • 画像を動的に入れ替えし辛い ⇒ SWF の画像も入れ替えちゃえ \まさかの実行ファイル(SWF)動的生成/• スマートフォン時代 > Flash Player 代わりの処理 • iOS に Flash Player が無い ⇒ JavaScript で SWF を解釈して何か表示 • Android も 4.1 から Flash Player が無い ⇒ じゃぁ、こっちも! \まさかの Flash Player 実装/
  5. 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 というと、 互換性の問題で 大体コレがターゲット こっちもたまに見る 引用元) http://www.adobe.com/jp/devnet/devices/articles/develop_in_japan.html
  6. 6. SWFの仕様• 公式仕様書 • http://www.adobe.com/devnet/swf.html• データ形式は(正確さはさておき) 詳細に書かれているが、 意味の記述が全然足りない• 自力で調べる必要あり • Flash Player のブラックボックス解析 • 2000年初頭の書籍を漁る (だって Flash 4 だし…) お勧め → オーム社の Macromedia Flash ActionScript バイブル
  7. 7. SWF 解説• ここまで前置き ここから本題
  8. 8. 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 Frame [CharacterID:1, Rate Ymin ImageData: ] Frame Count Tag (type:22 DefineShape2) [CharacterID:2,BitmapID:1, Ymax … ,ShapeRecords: ] Tag (type:26 PlaceObject2) [CharatorID:2, 1 0 60 …, Matrix: 0 1 800 ] …
  9. 9. SWF Header (仕様書)• SWF Header (仕様書)
  10. 10. SWF Header• Header 詳細 Little Endian Header Xmin Xmax FrameRate Ymin Signature: FWS → 無圧縮 Version: 0x04 → Flash 4 FrameCount FileLength: 0x00000a90 → 2,704byte FrameSize: (次ページで説明) Ymax FrameRate: 0x08.00 → 8 frames/sec FrameSize: 0x0028 → 40 frames Header (Rectangle) Signature Version FileLength FrameSize FrameRate FrameCount 3 bytes 1 byte 4 bytes 2 bytes 2 bytes FrameSize は 次ページで説明
  11. 11. SWF Header FrameSize• Header 詳細 bit packingHeader ↓ 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 00000000Ymin 5 bits 14 bits 14 bits 14 bits 14 bits 勿体ないけど Nbits: 01110 → 14bits 3bits 捨てるYmax Xmin: 000 00000000 000 → 0 twips → 0 pixel ↑ byte Xmax: 01001 01100000 0 → 4800 twips → 240 pixel Ymin: 0000000 0000000 → 0 twips → 0 pixel alignment (Rectangle) FrameSize Ymax: 0 10010110 00000 → 4800 twips → 240 pixel ※ 20 twips = 1 pixel FrameSize (Rectangle) Nbits Xmin Xmax Ymin Ymax 5 bits Nbits bits Nbits bits Nbits bits Nbits bits
  12. 12. 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, [CharatorID: 2, 1 0 60 … ,ShapeRecords: ] Depth:1, Matrix: 0 1 800 , … ]
  13. 13. SWF Tag type• SWF Tag type (仕様書の appendix B) Tag type
  14. 14. SWF Tag Categories• SWF Tag type Categories Definition tags Control tags Tag (type:21) Tag (type:0) DefineBitsJPEG2 End Tag (type:22) Tag (type:1) DefineShape2 ShowFrame Tag (type:33) Tag (type:9) DefineButton2 SetBackgroundColor Tag (type:10) インスタンス化 Tag (type:26) DefineFont PlaceObject2 Tag (type:39) Tag (type:12) DefineSprite DoAction … …
  15. 15. SWF Tag format (仕様書)• SWF Tag format (仕様書)
  16. 16. SWF Tag format (short) “ len≦0x3e ”• SWF Tag 共通 format (short) Tag Tag and Length Payload 2 bytes Length bytes TagCodeAndLength 1st byte 2nd byte 4 3 0 2Little Endian RECORDHEADER 0100 0011 0000 0100 0~0x3e (short) 2nd byte 1st byte 0 2 4 3 10 bits 6 bits 0000 0010 0100 0011 Length:3 tag code type:9 length 0000001001 000011 ※ DefineBits 系は 00 00 00 Tag type 0x3f long形式を使う決まり → #000000 RECORDHEADER Tag (type:9) (black) (long) SetBackgroundColor → (次ページで説明)
  17. 17. SWF Tag format (long) “ len≧ 0x3f ”• SWF Tag 共通 format (long) Tag Tag and Length Payload 6 bytes Length bytes b f 0 0 1011 1111 0000 0000 TagCodeAndLength 0~0xffffffff 0 0 b f 1st byte 2nd byte Length 0000 0000 101 11111 0x3f Type:2Little Endian 4 bytes 0000000010 111111 2nd byte 1st byte 更に4bytes読む RECORDHEADER 33 00 00 00 10 bits 6 bits Tag (type:2) (long) Little Endian tag code length DefineShape 00 00 00 33 111111 = 0x3f Tag type Length:0x33(=51)
  18. 18. ShowFrame, End• ShowFrame, End ( payload 無し) Tag (ShowFrame) Tag & Length 4 0 0 0 0 0 0 0 2 bytes 0100 0000 0000 0000 0000 0000 0000 0000 type:1 0 0 0 4 0 0000 0000 0100 0000 0 0 0 0 0000000001 000000 0000 0000 0000 0000 Tag (End) Tag & Length 0000000000 000000 2 bytes type:0 0
  19. 19. SetBackgroundColor (背景色設定)• SetBackgroundColor (簡単な例) Tag (SetBackgroundColor) Tag & Length BackgroundColor 2 bytes 3 bytes 3 type:9 4 3 0 2 BackgroundColor 0100 0011 0000 0100 Red Green Blue 1 byte 1 byte 1 byte 0 2 4 3 0000 0010 0100 0011 type:9 0000001001 000011 Length:3 00 00 00 → #000000 (black)
  20. 20. DefineBitsJPEG (JPEG画像)• DefineBitsJPEG2 (殆どJPEG) (length) bytes Tag (DefineBitsJPEG3) Charater Tag & Length JPEG Data ID 6 bytes 2 bytestype:35• JPEG 画像が( chunk の並びが違うだけで、)ほぼそのまま 格納されている。 • 詳しくは以下のサイトを参考 http://labs.gree.jp/blog/2010/09/782/ SWFバイナリ編集のススメ第三回 (JPEG)
  21. 21. DefineBitsJPEG (JPEG画像)• DefineBitsJPEG3 (透明度を付加した JPEG) (length) bytes Tag (DefineBitsJPEG3) Charater (zlib compressed) Tag & Length ID OffsetToAlpha JPEG Data BitmapAlphaData 6 bytes 2 bytes 4 bytes (OffsetToAlpha) bytestype:35 (width) bytes width BitmapAlphaData height (height) bytes 参考) http://labs.gree.jp/blog/2010/09/782/ SWFバイナリ編集のススメ第三回 (JPEG)
  22. 22. DefineBitsLossless (パレット形式) • DefineBitsLossless2 (透明度付き PNG/GIF 画像) • Format:3 (パレット形式) (length) bytes Tag (DefineBitsLossless2) (zlib compressed) Tag & Charater Color ColorTable & Length ID Format Width Height TableSize ColormapPixelData 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 (Color Alpha Red Green Blue ColormapPixelDataTableSize) bytes Alpha Red Green Blue (Height) Alpha Red Green Blue bytes …
  23. 23. DefineBitsLossless (RGBA)• DefineBitsLossless2 (透明度付き PNG/GIF 画像) • Format: 5 (RGBA, DirectColor) (length) bytes Tag (DefineBitsLossless2) Tag & Charater Color (zlib compressed) Length ID Format Width Height TableSize BitmapPixelData 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 … (Height) Red Green Blue Alpha … bytes … 参考) http://labs.gree.jp/blog/2010/12/1902/ SWFバイナリ編集のススメ第五回 (PNG)
  24. 24. DefineShape (シェイプ:ベクター画像)• DefineShape• SWFバイナリ編集のススメ第七回 (Shape基本構造) • http://labs.gree.jp/blog/2011/04/2328/ ← こちらで説明
  25. 25. PlaceObject (シェイプorシンボルの貼り付け) PlaceFlag• PlaceObject2 HasClipActions HasClipDepth HasName Tag (PlaceObject2) HasRatio 1 byte Tag & Length PlaceFlag Depth HasColorTransform 2 bytes 1 byte 2 bytes HasMatrix Type:26 0000 000X HasCharactor Move• PlaceObject2 (全乗せ)Tag (PlaceObject2) Place Character Color Clip Clip Tag & Length Depth ID Matrix Transform Ratio Name Depth Actions Flag 2 bytes 1 byte 2 bytes 2 bytes 2 bytes 2 bytes 1111 111X MATRIX, ColorTransform ClipActions (アフィン変換行列、カラー効果) ↓ ↓ SWF5 以降の情報要素なので略 (次ページ以降で説明)
  26. 26. MATRIX (アフィン変換行列)• MATRIX (最小構成) 0000 000X MATRIX Has Has Ntranslate Scale Rotate Bits Scale Rotate Translate 1 0 0 X Skew0 X 1 bit 1 bit 5 bit 0 1 0 (= 0) (= 0) (= 0) 単位行列 Rorate Scale Translate Skew1 Y Y• MATRIX (全乗せ)MATRIX Scale Scale Rotate Rotate Ntranslate Translate Translate Has NScale Has NRotate X Y Rotate Bits Skew0 Skew1 Bits X XScale Bits1 bit 1 bit 5 bits (Nscale (Nscale 5 bits (NRotate (NRotate 5 bits (NTranslate (NTranslate(= 1) Bits)bits Bits) bits (= 1) Bits)bits Bits) bits Bits)bits Bits)bits 2 0 0 アフィン変換の詳細は、LT で! 0 1 0
  27. 27. CXFORM (カラー効果)• CXFORM (最小構成) 00XX XXXX MATRIX Has Has AddTerm MultiTerm 何もしない 1 bit 1 bit (色味を弄らない) (= 0) (= 0) RedMultiTerm > 256 or• CXFORM (全乗せ) RedAddTerm > 0 MATRIX Has Has Red Green Blue Red Green Blue NBits AddTerm MultiTerm MultiTerm MultiTerm MultiTerm AddTerm AddTerm AddTerm 1 bit 1 bit 4 bits (Nbits) (Nbits) (Nbits) (Nbits) (Nbits) (Nbits) (= 1) (= 1) bits bits bits bits bits bits 11XX XXXX …
  28. 28. 後の資料は適当です m(_ _)mバイナリの切り出し方のコツは殆ど出尽くしたので、 後は最低限の説明で。
  29. 29. DoAction (ActionScript実行コード) • DoAction Tag (DoAction) Action Tag & Length Actions EndFlag 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
  30. 30. DefineButton (ボタンの振る舞い)• DefineButton Tag (DefineButton) Button Character Action Tag & Length Characters Actions EndFlag Id EndFlag 2 or 6 bytes 2 bytes 1 byte 1 byte =0 =0 Type:7 Character (BUTTONRECORD) ↑ Chacater Chacater … この辺は DoAction 相当 Character (BUTTONRECORD) … ButtonState… CharacterID PlaceDepth PlaceMatrix … ↑ ButtonState この辺は PlaceObject 相当の機能 HitTest StateDown ボタンを押してる時の表示/アクションか、 StateOver StateUp ボタンを離してる時か
  31. 31. DefineSprite (ムービークリップ)• DefineSprite (length) bytes Tag (DefineSprite) Sprite Frame Tag & Length Count ControlTags ID 2 or 6 bytes 2 bytes 2 bytes type:39 ControlTags Tag (PlaceObject2) Tag (ShowFrame) … Tag (End)• ※ Definition Tags は中に含められない。
  32. 32. まとめ• 16bits, 32bits値は LittleEndian で埋まっている• 基本、bit は先頭から切り出せば OK (いわゆる MSB) • tag_and_lenght だけ 16bits の一塊なので LittleEndian との併せ技• 可変長フィールドは、数ビットの長さフィールドと、それで指 定した分の長さが後ろに続くのがお約束• フィールドがオプション扱いの場合は、その存在フラグ(1 bit) があるか、Tag の長さ的に余っているなら存在する。といった 形で判断• 長さフィールドがない可変長の場合は、Tag の長さから判断で きる。• 省略されたフィールドはデフォルト値が適用。(Matrixなら単位 行列)• Byte Alignment (byte境界に合わないbitの読み捨て)に注意。 • Matrix 等、情報要素に応じて(その先頭で) alignment を取るか決まる
  33. 33. 最後に少しだけ実装の話 (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
  34. 34. 最後に少しだけ実装の話 (2/3)• Bitstream クラスを作って、フィールドの長さに応じたメソッドを呼ぶのがコツ • http://openpear.org/package/IO_Bit IO_Bit 参考) http://www.slideshare.net/yoyayoya1/php-10133775 PHPでバイナリ変換プログラミング
  35. 35. 最後に少しだけ実装の話 (3/3)• 実際に IO_SWF で dump したコンソールログ
  36. 36. 以上です• ありがとうございました。

×