SWF の読み方

1. 2012年9月25日(火) “よや“ <yoya@awm.jp>

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

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. SWF を触る目的
• ガラケー時代 ＞ Flash Lite の制限に力づくで対応
• 最大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 というと、 互換性の問題で
大体コレがターゲット こっちもたまに見る
引用元) http://www.adobe.com/jp/devnet/devices/articles/develop_in_japan.html

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

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

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. SWF Header (仕様書)
• SWF Header (仕様書)

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. SWF Header FrameSize
• Header 詳細
bit packing
Header
↓
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 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. 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. SWF Tag type
• SWF Tag type (仕様書の appendix B)
Tag type

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. SWF Tag format (仕様書)
• SWF Tag format (仕様書)

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

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) bytes
type:35
(width) bytes
width
BitmapAlphaData
height (height)
bytes
参考) http://labs.gree.jp/blog/2010/09/782/ SWFバイナリ編集のススメ第三回 (JPEG)

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
４ bytes (4 x ColorTableSize) bytes
ColorTable (Width) bytes
(Color Alpha Red Green Blue ColormapPixelData
TableSize)
bytes Alpha Red Green Blue
(Height)
Alpha Red Green Blue bytes
…

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
４x(Width) bytes
BitmapPixelData
Red Green Blue Alpha …
(Height) Red Green Blue Alpha …
bytes
…
参考) http://labs.gree.jp/blog/2010/12/1902/ SWFバイナリ編集のススメ第五回 (PNG)

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

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. 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 X
Scale Bits
1 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. 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. 後の資料は適当です m(_ _)m
バイナリの切り出し方のコツは殆ど出尽くしたので、
後は最低限の説明で。

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

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

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

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