Your SlideShare is downloading. ×
0
2012年9月25日(火) “よや“ <yoya@awm.jp>
自己紹介• 六本木の方から来ました • 会社は着ているTシャツでお察し下さい • アウェイで発表頑張ります!• SWF バイナリ編集が趣味 (主に Flash Lite)  • PHP の SWFバイナリ編集ライブラリを作ってます (動的生成が...
伝えたい事• SWF フォーマットの読み方 • SWF に含まれる情報要素とその意味 • それらを SWF バイナリからどう切り出すか• SWF バイナリの切り出しのコツ  • 幾つかのパターンが分かれば簡単      Little Endia...
SWF を触る目的• ガラケー時代 > Flash Lite の制限に力づくで対応  • 最大100KB ⇒ 最小限のデータを SWF に載せる  • 実行引数渡せない ⇒ SWF にパラメータ値を埋め込もう  • 画像を動的に入れ替えし辛い ...
Flash Lite と SWF version• Flash と Flash Lite の SWF version                                                 Macromedia     ...
SWFの仕様• 公式仕様書  • http://www.adobe.com/devnet/swf.html• データ形式は(正確さはさておき)  詳細に書かれているが、  意味の記述が全然足りない• 自力で調べる必要あり  • Flash Pl...
SWF 解説• ここまで前置き     ここから本題
SWF 全体構造• Header と Tag のイメージ                            \概念/           SWF            Header      Tag      Tag   Tag      ...
SWF Header (仕様書)• SWF Header (仕様書)
SWF Header• Header 詳細                                                                 Little Endian  Header      Xmin     ...
SWF Header FrameSize• Header 詳細                             bit packingHeader                                      ↓   Xmi...
SWF Tag example• ビットマップ画像を表示するのに最低限必要な Tag           SWF            Header            Tag    Tag       Tag    Tag     Tag ...
SWF Tag type• SWF Tag type (仕様書の appendix B)     Tag type
SWF Tag Categories• SWF Tag type Categories  Definition tags                   Control tags        Tag (type:21)          ...
SWF Tag format (仕様書)• SWF Tag format (仕様書)
SWF Tag format (short) “ len≦0x3e ”• SWF Tag 共通 format (short)    Tag     Tag and Length                Payload          2...
SWF Tag format (long) “ len≧ 0x3f ”• SWF Tag 共通 format (long)  Tag    Tag and Length                   Payload          6 ...
ShowFrame, End• ShowFrame, End ( payload 無し)   Tag (ShowFrame)     Tag & Length                            4    0    0    ...
SetBackgroundColor (背景色設定)• SetBackgroundColor (簡単な例)  Tag (SetBackgroundColor)   Tag & Length         BackgroundColor    ...
DefineBitsJPEG (JPEG画像)• DefineBitsJPEG2 (殆どJPEG)                                 (length) bytes  Tag (DefineBitsJPEG3)   ...
DefineBitsJPEG (JPEG画像)• DefineBitsJPEG3 (透明度を付加した JPEG)                                                (length) bytes  Ta...
DefineBitsLossless (パレット形式) • DefineBitsLossless2 (透明度付き PNG/GIF 画像)   • Format:3 (パレット形式)                                ...
DefineBitsLossless (RGBA)• DefineBitsLossless2 (透明度付き PNG/GIF 画像)  • Format: 5 (RGBA, DirectColor)                        ...
DefineShape (シェイプ:ベクター画像)• DefineShape• SWFバイナリ編集のススメ第七回 (Shape基本構造)  • http://labs.gree.jp/blog/2011/04/2328/ ← こちらで説明
PlaceObject (シェイプorシンボルの貼り付け)                                                                   PlaceFlag• PlaceObject2   ...
MATRIX (アフィン変換行列)• MATRIX (最小構成)                                   0000 000X    MATRIX      Has   Has   Ntranslate     Sca...
CXFORM (カラー効果)• CXFORM (最小構成)                          00XX XXXX  MATRIX    Has     Has  AddTerm MultiTerm        何もしない   ...
後の資料は適当です m(_ _)mバイナリの切り出し方のコツは殆ど出尽くしたので、       後は最低限の説明で。
DoAction (ActionScript実行コード) • DoAction           Tag (DoAction)                                                 Action   ...
DefineButton (ボタンの振る舞い)• DefineButton  Tag (DefineButton)                         Button                   Character      ...
DefineSprite (ムービークリップ)• DefineSprite                                               (length) bytes   Tag (DefineSprite)   ...
まとめ• 16bits, 32bits値は LittleEndian で埋まっている• 基本、bit は先頭から切り出せば OK (いわゆる MSB)    • tag_and_lenght だけ 16bits の一塊なので LittleEnd...
最後に少しだけ実装の話 (1/3)• Flash Lite 1.1 の SWF を一通り解釈出来るコードを C と PHP で公開してます                                            (メイン機能は編集...
最後に少しだけ実装の話 (2/3)• Bitstream クラスを作って、フィールドの長さに応じたメソッドを呼ぶのがコツ • http://openpear.org/package/IO_Bit IO_Bit         参考) http:...
最後に少しだけ実装の話 (3/3)• 実際に IO_SWF で dump したコンソールログ
以上です• ありがとうございました。
Upcoming SlideShare
Loading in...5
×

How to read SWF

14,932

Published on

SWF の読み方

Published in: Technology

Transcript of "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. 以上です• ありがとうございました。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×