ActionScriptを使わないFlash勉強会 #1（前日版）

クライアントサイドにおける
できることやったこと
動的swf生成の可能性と使用例

よろしくー

2011. 4. 23(Sat)
ActionScriptを使わないFlash勉強会 #1
speaker: @niwauu

2
お前、だれよ？
にわうう/王子南
twitter: @niwauu
web: “王子南交差点” http://libpanda.s18.xrea.com
動的swf生成ネタで主に携帯用のこまごましたものを
作っています。
非プログラマ・非デザイナただの人です。
うっかり契約してスピーカーになったよ！
こんなの絶対（ry

3
FLASH-jpフォーラムに動的swfネタで1回だけ投稿したよ
▪ パラメータ埋め込みサンプルと原理の紹介
▪ もう5年前です（でもまだここ経由で一番人が来ます
“ iモード用のFLASHにパラメータを送りたい ”

4

人気順

【462】FLASH-jpトップページ

【53】

☺
【21】

☺ はてブでFLASH-jp内一番人気のスレッドに！
やっぱり動的SWF生成だよね

5
きょうのおはなし

• テーマについて（「クライアントサイドにおける~」）
• FlashLite1.1についてと動的swf生成のモチベーション
• swfバイナリのフォーマットと編集の基本
• 動的swf生成の実例
1. パラメタ渡し・Script Bytecodeの挿入
2. 画像の入れ替え・サイズ変更
3. 画像とアニメーション、サウンドの挿入
4. AS3での戦略とEmbedded Binaryの置換
• まとめ
主に「まめフラスコ」という
自作ソフトウェアでやってることの話です。

6
登場タグ

DefineBitsLossless2 DoAction
DefineBitsJPEG2 FrameLabel
DefineBitsJPEG3 StartSound
DefineShape PlaceObject2
DefineSprite RemoveObject2
DefineSound ShowFrame
End

7
タイトルについて

クライアントサイドにおける動的swf生成の可能性と使用例
広義

クライアント側⇔サーバ側
ローカル側⇔ネットワーク側
ユーザ側⇔コンテンツプロバイダ側
生成・素材・再生がクライアント側
▪ サービスに依らずに生成
▪ ネットワークにつながない自由
▪ 自分の素材でカスタムswf

8

動的SWF生成ことはじめ

9
なんで動的にやるの？
▪ FlashLite1.1の制限
1. サイズ(100kB)制限
2. 機能制限
(1) 通信時ボタン押下必須制限
(2) URL値渡し制限
(3) SharedObjectないよ
• 必要なものを必要な分だけ埋め込む
• “swfにアクセスする”通信1回で必要な読込をまとめて
• ローカルでのデータ設定・保持できないなら
ネットワーク側で面倒見る
「FlashLite1.1でやらなきゃいけない」が一番の制限(シェアのせい）

10
まだまだFlashLite1.1
最近目についたものだけでも…
• Tomato swfバイナリ加工pythonライブラリ
https://github.com/buhii/tomato

• Flamixer 携帯向けFlash動的生成エンジン
http://www.klab.jp/flamixer/

• 日本FlashLite1.1ユーザー会
http://groups.google.com/group/FlashLite11_ja

• ソーシャルゲームに生かすFlash Lite制作テク
http://www.atmarkit.co.jp/fsmart/index/flashlite.html
@ITの連載

11
なんで動的にやるの？（そのほかの理由）
• Lite1.1のSWF内で使いやすいデータ形式への
シームレスな変換ができる。
• 単一ファイル化（外部に読み込むファイルを置かない）
によって取り回しを簡単にする

12
SWFバイナリの基本
ShowFrame ShowFrame ShowFrame
Header Tag Tag Tag Tag Tag Tag Tag Tag

1フレーム目 2フレーム目 Nフレーム目 End

SWFファイルはヘッダとそれに続く複数のタグからなる

ヘッダ：バージョン, ファイルサイズ, ステージサイズ,
フレームレート, 総フレーム数,
タグ: Definitionタグ ShapeやMCなどのキャラクタを定義
Controlタグ定義したキャラクタの取り扱い
SWF全体の流れのコントロール

13

DictionaryとDisplayList
Dictionary DisplayList
定義 IDで管理配置 Depthで管理
DefineShape PlaceObject2
CharacterID=1 Depth=3
Depth= 3
CharacterID=1
CharacterID=1 PlaceObject2 Depth=2
CharacterID=2
DefineShape
Depth= 2 Depth=1
PlaceObject2
CharacterID=2 CharacterID=1
CharacterID=2 ShowFrame
Depth= 1
管理用番号にはCharacerIDとDepthがある
ステージ上に表示
• 定義したシェイプなどにはIDを振って管理
• ステージに表示するものにはDepthを振って管理

14
開発のための環境とヒント

0. バイナリエディタ
1. swf_file_format_v10.pdf
Adobeによるファイルフォーマット解説。必須
2. Adobe Flash CS*
どんなバイナリが生成されるべきかの確認。お手本
3. $ swfmill swf2xml hoge.swf
SWFバイナリ内のタグ・パラメータの確認
自前のパーサ・バイナリが正しく作れているか

(4. Sothink Flash Decompiler)
3.の確認ができるグラフィカル版。

15

パラメタ埋め込みとその実例

16
代入文バイトコード埋め込みによる変数渡し

http://.../hoge.swf?name=niwauu

1フレーム目のフレームアクションで
name = “niwauu”; を実行するswfと
同等のものを生成する

DoActionタグの生成とベースSWFへのタグ挿入

17
パラメタ埋め込み動的SWFの例（１）
ShowFrame End
Header Tag Tag Tag Tag Tag Tag Tag

18
ShowFrame End

0x96 0x06 … タグヘッダ
バイト DoAction
＝ Tag
name =
0x96 0x08 …
“niwauu”;
0x1d 0x00 コード
スクリプトバイトコードタグ

New
Tag

19
ShowFrame End

1フレーム目

バイト DoAction
＝ Tag
name =
0x96 0x08 …
“niwauu”;
0x1d 0x00 コード

New

• １フレーム目へのDoActionタグの挿入

20
ShowFrame End

1フレーム目

バイト DoAction
＝ Tag
name =
0x96 0x08 …
“niwauu”;
0x1d 0x00 コード
Modified New

• １フレーム目へのDoActionタグの挿入
• 全体のサイズ変更によるSWFヘッダの更新

21
スクリプトのActionシーケンスへの変換

name = “niwauu”;

1.「nameに」
2.「niwauuを」
3.「代入しろ」

ActionPush “name”
ActionPush “niwauu”
ActionSetVariable

22
DoActionタグ (TagType=12)
▋ 実行するActionScriptをバイトコードで表現
Tag • ActionScript 1, 2のみ
Header
• ActionSctipt3はDoABCタグで表現
Actions (DoActionタグは無視される)
ACTION
ACTIONRECORD
RECORD
ACTION ACTION RECORD payload
RECORD HEADER （Stringなど）
ActionCode Length （ない場合も）

Action
EndFlag (ない場合も)
UI8 (0x00)

23
ActionScriptのバイトコードのバイナリ表現(1)

ActionPush “name” 3f 03 16 00 00 00 96
06 00 6e 61 6d 65 00
ActionPush “niwauu” 96 08 00 6e 69 77 61
ActionSetVariable 75 75 00 1d 00

3f 03 = 0011 1111 0000 0011
Tag
0000 0011 0011 1111 Tag Type = 12
Header
16 00 00 00 Tag Length = 22 bytes
ActionCode 96 ActionPush
Length 06 payload長
00 Pushするものは文字列
payload
6e 61 6d 65 00 ‘n’ ‘a’ ‘m’ ‘e’ ‘¥0’
（→つづく）

24
ActionScriptのバイトコードのバイナリ表現(2)
（→つづき）

ActionCode 96 ActionPush
Length 08 payload長
00 Pushするものは文字列
payload
6e 69 77 61 75 75 00 ‘n’ ‘i’ ‘w’ ‘a’ ‘u’ ‘u’ ‘¥0’
ActionCode 1d ActionSetVariable
Length （なし）

payload （なし）

Action
00 ActionEnd タグ終わり
EndFlag

25
パラメタ埋め込み動的SWFの例（1）
カウントダウン
• ある期日までの日数を表示
• 待受画面に表示

センターとか国立2次試験
⇒共通の需要があるので誰かが作る
私大・他の資格試験・記念日
⇒個人的・自分で作らないとない
テンプレートSWF + 外部ファイルからパラメタ読み込みでやる？
待受画面⇒ネットワークとSharedObjectの制限
動的SWF生成で制限を超える

26
tbl2swf: リアルタイム時刻表アプリ
NextTrain時刻表形式のテキストファ
イルをSWFファイルに変換
txt

Lite1.1内で扱いやすくするために
独自データ形式へ変換して埋め込み

待受画面に設定すると最速NextTrain環境(スマホより上)
『旅ココ』(http://tabikoko.net) さま
tbl2swfを使ったマッシュアップwebサービス

27
NextTrain時刻表形式:
a:岡山;岡
b:広島;島
c:三島;三
…

$品川: j6 k6 l6
$新横浜: j17 k15 l16
$小田原: j33 l32 k=
$熱海: j42 l36 k=
…

[MON][TUE][WED][THU][FRI]
# 東京卙多方面(平日のダイヤ)
6: ke00 k05 kb20 jh23 ke26 la36 ke50 k53 j56 Bn=“000100030004000600
7: l06 ke13 jh23 k26 kb33 la36 ke50 j56
Bj=“0240024502600263026
…

22: lh00 jd10 jc47 Bt=“kekkbjhkkelakejlk…
…

28
kif2swf:将棋盤再生アプリ
将棋の棋譜「☗ ７六歩☖３四歩☗２六歩…」
などをグラフィカルに表示
kif形式ファイル(テキストファイル)を読み込み
txt

1ファイル化⇒ブログに挙げるのが楽

HTMLのobjectタグでうまく埋め込まれなくてもSWFへの
リンクさえあればブラウザ全画面表示になるけど
とりあえずは閲覧できる読み込みも早い
森信雄七段（日本将棋連盟プロ棋士）詰将棋ブログでも！

29

画像もいじってみよう

30
画像置換の例
さめがめクローン
• コマの画像をカスタマイズ
• FlashLite製のドット絵描きアプリと連携
⇒携帯だけで自分専用のものが作れる

画像のサイズ（縦横）は丌変
透過つき可逆圧縮画像(透過PNG)

DefineBitsLossless2タグを入れ替え

31
画像置換の例
DefineBitsLossless2タグ内のCharacterのIDから置換すべき
タグを識別、IDを保持したまま画像データ部置換する
BitmapID=5の
DefineBitsLossless2タグ


DefineBitsLossless2 DefineBitsLossless2
タグ編集
BitmapID=5 BitmapID=5

32
DefineBitsLossless2(Tag type=36)
▮画像を定義(可逆なもの。PNG, GIF用) Header
• キャラクターIDでSWF内での識別
• 画像データ部は、 CharacterID
BitmapFormat
Width
Height

画像データ

33
• 画像データ部は CharacterID
BitmapFormat = 3のとき BitmapFormat = 3
パレット色情報＋パレット番号 Width
Height

の羅列をzlib圧縮(□)したもの ColorTableSize
パレット色数
BitmapFormat=3 ⇒ 1pixelあたり1Byte
ColorTableRGB
パレット色情報
Colormap
PixelData
パレット番号の羅列
(8bit)

34
BitmapFormat = 3のとき BitmapFormat = 5
BitmapFormat = 5のとき Height
ARGBデータ
の羅列をzlib圧縮(□)したもの
BitmapFormat=3 ⇒ 1pixelあたり1Byte Bitmap
BitmapFormat=5 ⇒ 1pixelあたり4Byte PixelData
ARGBの羅列
(32bit)

35
BitmapFormat = 3のとき BitmapFormat
BitmapFormat = 5のとき Height
ARGBデータ
の羅列をzlib圧縮(□)したもの
BitmapFormat=3 ⇒ 1pixelあたり1Byte
BitmapFormat=5 ⇒ 1pixelあたり4Byte 画像データ
⇒ 256色以下の場合容量削減のため
BitmapFormat=3(パレット形式)を使う
透過色ない場合はDefineBitsLossless(Tag type=20)
を使って透過情報を含めないことで容量削減

36
SWF内のBitmap画像の扱い
・画像データの置換⇒DefineBitsLossless2の変更

DefineBitsLossless2

BitmapID

37
・画像の配置⇒「画像で塗りつぶした矩形」の配置
・DefineShapeがコンテナ役、描画領域を決めている
・異なる画像サイズに置換⇒DefineShapeも変更が必要

DefineBitsLossless2 DefineShape
ShapeID

BitmapID BitmapID

38
・画像の配置⇒「画像で塗りつぶした矩形」の配置
・DefineShapeがコンテナ役、描画領域を決めている
・異なる画像サイズに置換⇒DefineShapeも変更が必要
・ステージに配置するのはPlaceObject2
・ステージ上でのオブジェクトの一意性はDepthで管理

DefineBitsLossless2 DefineShape PlaceObject2 Stage
ShapeID ShapeID

BitmapID BitmapID Depth Depth

39
ほかいろいろ作ったもの

• テキスト埋め込み csv
単語帳
時間割問題

単語帳Flash生成アプリ『flowermaker』の例
• 画像入替
15パズル
ランダム画像表示
ドット絵作成（⇒作業中の絵のサムネイル表示
用）

40

もっといろいろのタグをいじる
～『まめフラスコ』のはなし

41
『まめフラスコ』のはなし
まめフラスコ：待受Flash生成アプリ
「まちうけメーカーforフラッシュマスコット」
の略から来ています。

ユーザの入力からこういうのをつくります
・時間・電波・バッテリ残量などで内容が変わる
携帯待受けとしてはよくあるもの
・画像、台詞、音声、などユーザの用意したものを
埋め込んでオリジナルキャラクターを作成
・「伺か」的なものを目指して台詞を表すスクリプトや
アニメーション定義で似たファイル形式を使用

42
『まめフラスコ』のはなし
まめフラスコ：待受Flash生成アプリ

¥0¥s[0] まめふら
こんにち
は世界!!

SWFファイル
素材を生成
・画像
FlashPlayer
Java VM
・テキスト搭載端末

実は
powered

PythonのJava実装

「伺か」ってなに？
43

デスクトップ常駐型マスコットアプリケーション
今でいえばウィジェット（ガジェット）に近い
読み：「うかがか」
デスクトップの隅にキャラクターを立たせて
「なんか言うのを眺める」から
「OSの機能やネットワーク通信と連携させたいろいろ」
(例：メール着信確認、簡単なゲーム、サーバ監視)
好感度システム⇒ラブプラス的なインターフェース層の擬人化
特徴：
• DLLと簡易言語による非常に自由度の高い機能拡張
• ユーザによる盛んな追加キャラクター作成
約10年で1000体以上、現在でも盛ん、14 体/月 @2011

「伺か」ってなに？
44

こういうのです。

45
まめフラスコでやっていること

• テキスト情報の挿入
• 画像の置換
• 画像の挿入
• ムービークリップの生成・挿入
• サウンドの挿入
• テキストボックスのサイズ変更
• シェイプの色の変更
• SWF背景色の変更

46
基本キャラクターの変更
• キャラクターはMovieClipで表現
• MovieClipの中のダミー画像を置換したい。
• DefineBitsLossless2, DefineShapeを変更する
• PlaceObject2は変更なし
a
置換前

置換後

47
基本キャラクターの変更
• あらかじめ埋め込まれたダミー画像の置換
• サイズが変わるので一致するIDのDefineShapeも要置換
• サイズ削減のためJPEG形式に変換しての置換もする
• （DefineBitsLossless2⇒DefineBitsJPEG2/3）
ARGB JPG
PNG

BitmapID=N BitmapID=N BitmapID=N
DefineBits 入力 DefineBits DefineBits
Lossless2 Lossless2 or JPEG3
DefineShape DefineShape
BitmapID=N BitmapID=N
ShapeID=M ShapeID=M

48
DefineBitsJPEGタグ
DefineBits ⇒encodingを記したJPEGTablesタグとセットで使う
DefineBitsJPEG2⇒ふつうのJPEG
DefineBitsJPEG3⇒JPEGデータ+透過情報
DefineBitsJPEG4⇒JPEG3タグの内容+deblockingパラメタ
正確には「JPEGそのまま」でなく【DefineBitsJPEG2】【DefineBitsJPEG3】
JPEGデータ先頭にEOI, SOIをタグヘッダタグヘッダ
つけないと画像が赤四角になる
キャラクターID キャラクターID
“Before version 8 of the SWF file format, 画像データサイズ
SWF files could contain an erroneous AlphaDataOffset
header of 0xFF, 0xD9, 0xFF, 0xD8 before
the JPEG SOI marker.” 画像データ画像データ
flash_file_format_v10.pdf(p.148) (JPEGそのまま） (JPEGそのまま）

width x height個の
DefineBits+JPEGTables時代(Future Splash)の名残り
α値の羅列を
圧縮テーブルと圧縮データを分けていたので
zlib圧縮したもの
SOI/EOIが2回含まれていた

49
DefineShapeタグ(Tag type=26)
Header
▮シェイプの定義
- 使う塗りのスタイル ShapeID
- 使う線のスタイル ShapeBounds
- シェイプを構成する線や塗りの集合 Shapes
・画像の配置⇒ FillStyles
「画像で塗りつぶした矩形」の配置 LineStyles
・DefineShapeがコンテナ役、 NumFillBits
描画領域を決めている NumLineBits

ShapeRecord

50
DefineShapeタグ(Tag type=26)
• 変更と確認が必要な部分は3つ（▮印） Header
ShapeID
：定義するシェイプの境界
ShapeBoundsフィールドで矩形で定義
ShapeBounds
Shapes
：シェイプで表示させたい画像
「領域を画像で塗りつぶす。 FillStyles
その画像は（BitmapID）」 LineStyles
FillStylesの中のBitmapIDで指定 NumFillBits
NumLineBits
：矩形を構成する直線 × 4
ShapeRecordsの中のStraightEdgeReocrdで指定
垂直線：VertLineFlag=0, DeltaX= (移動twips) ShapeRecord
水平線：VertLineFlag=1, DeltaY= (移動twips)

51
DefineShape内の画像扱いの注意
ひとつのDefineShapeタグ内には複数の塗りが定義できる
DefineShape⇄DefineBitsLosslessは必ずしも1対1対応でない
• Flashがパブリッシュしたswfをベースとする場合注意
⇒シンボル化
DefineShape ShapeID=3

DefineBits DefineBits
Lossless2 Lossless2

BitmapID=1 BitmapID=2 fillStyle: fillStyle:
BitmapID=1 BitmapID=2

52
任意の位置への画像を置くには
1. 名前付きMCにして変数埋め込み、スクリプトで位置指定
2. PlaceObject2タグの描画位置を設定
3. DefineShape内の矩形描画位置を指定する
( Shape自身の配置位置は(0, 0) )

1 2 3
“mc1”
(200, 150)

PlaceObject2タグの DefineShapeタグの
こういうMCを置換で作る MATRIX内の FillStyle内の
tellTarget(“mc1”) TranslateX, BitmapMatrix内の
{ _x = 200;_y = 150; } TranslateY で指定 TranslateX, …で指定

53
PlaceObject2タグ(Tag type=26)
Header ▮ DefineShapeなどで定義した
これらがあるかキャラクターをID指定して配置
PlaceFlagMove
・Depthは表示順を表すとともに
Depth SWF内のオブジェクトを一意に管理
CharacterID
Transform Matrix ・表示位置は TransformMatrix 内の
translateX, translateYで指定
Color Transform
Ratio
・NameをつけることでMovieClipに
Name tellTargetでアクセス可能
ClipDepth
ClipActions

54
PlaceFlagMove
CharacterID
Color Transform
Ratio
ClipDepth
ClipActions

55
PlaceFlagMove
CharacterID
Color Transform
Ratio
ClipDepth
ClipActions

56
PlaceFlagMove
CharacterID
Color Transform
Ratio
ClipDepth
ClipActions

57
RemoveObject2タグ(Tag type=28)
▮指定したDepthのObjectをステージ上から消去する
Header
Depth CharacterIDでなくDepthで管理

SWFバイナリにはキーフレームという概念がないので
それまでPlaceしたObjectを表示しなくするためには
明示的にRemoveObject2タグで消去する必要がある
この次のフレームでそれまで置いた
ObjectをRemoveする

58
Header Depthで管理してるので
これらがあるかタグはCharacterIDを知らなくても良い
PlaceFlagMove
Depth CharacterIDない場合このタグは何をするか？
• 指定したDepthにある既にplace済の
CharacterID
Objectの属性変更
Transform Matrix • CharacterIDあると同じDepthに二重place
Color Transform になってしまうので
Ratio
そのためのPlaceFlagMoveフラグ；
Name
placeFlagMove = 1 のときは
ClipDepth そのdepthのObjectを一旦Removeして
ClipActions 同じDepthに二重Placeしない

59
どういうこと？
DisplayList
PlaceObject2
Depth= 1
PlaceFlagMove=0 Depth=2
(x,y)=(0,0)

Depth=1

60
DisplayList
PlaceObject2
Depth= 1
(x,y)=(0,0)

PlaceObject2 Depth=1
CharacterID=1
Depth= 1
PlaceFlagMove=0
(x,y)=(50, 50)

Depthで一意にオブジェクトが決まらない

61
DisplayList
PlaceObject2
Depth= 1
(x,y)=(0,0)

Depth=1

62
DisplayList
PlaceObject2
Depth= 1
(x,y)=(0,0)

CharacterID=1
Depth= 1
PlaceFlagMove=1
(x,y)=(50, 50)

PlaceFlagMove=1にして設置済みのObjectの修正をする

63
DisplayList
PlaceObject2
Depth= 1
(x,y)=(0,0)

CharacterID=3
Depth= 1
PlaceFlagMove=1
(x,y)=(50, 50)
CharacterIDを持たせることで違うObjectへの入れ替えも
RemoveObject2をタグ使わないでもできる

64
エレメントの対応

エレメント: ベース画像の上に乗せる画像パーツ
・差分だけトリミングした画像を重ねて別画像を表現
・表情の変化や小規模な装飾を最小の画像容量で実現

顔の部分以外は共通差分だけトリミング

パーツの重ね合わせで表現

65
・画像の挿入(置換でない)
⇒ ▪ DefineBitsLossless2, DefineShape,PlaceObejct2タグを
新規に作ってSWF内にタグ挿入する必要がある
▪ Depthを表示順に合わせて決める
重複しないように注意

Tag Tag Tag Tag Tag Tag

DefintBitsLossless2 DefintBitsLossless2
DefineShape DefineShape
PlaceObject PlaceObject

66

Tag Tag
DefineBitsLossless2 Header … Tag Tag Tag Tag
DefineShape

キャラクターMCの
Tag Tag Tag Tag
DefineSpriteタグ RemoveObject2 RemoveObject2
PlaceObject2 PlaceObject2
▮キャラクターMCのDefineSpriteより前に画像定義を挿入
▮表示順に注意してDepthの設定をしたPlaceObject2を
キャラクターMCの適当なフレームに挿入
（必要に応じてRemoveObject2タグも）

67
DefineSpriteタグ(Tag type=39)
▮ムービークリップを定義する
・タグの塊を内部に持つ
Header ⇒置換の際にこのタグ内タグを見る必要もある
・Control系のタグのみ（Definition系は丌可）
SpriteID ⇒配置するキャラクタはこのタグより前で定義
FrameCount 1 2 3 4 5 6 7 8

ControlTags a a
tag
tag １ 2 3 4 5 6 7 8
タグＥ
tag Ｎ
Ｄ
…

: DoAction : PlaceObject2
tag : ShowFrame : RemoveObject2

68
アニメーションの対応

1 5 10
a a

こういうＭＣをつくって埋め込む
（つくるMCの数は任意個）
・必要な画像のDefineBitsLossless2, DefineShapeタグを登録
・DefineSpriteタグでMC定義、その中に
1. 表示する画像のDefineShapeタグを設置するPlaceObject2タグ
2. 各画像表示時間の調整用にフレーム稼ぎのShowFrameタグ
3. くりかえ(す|さない)などの制御用スクリプトのDoActionタグ
・DefineSpriteで定義したMCを名前付きでPlaceObject2タグで設置

69
アニメーションの対応

Tag Tag Tag
DefineBitsLossless2 Header … Tag Tag Tag Tag
DefineShape
DefineSprite
キャラクターMCの Tag Tag Tag Tag
DefineSpriteタグ
RemoveObject2 RemoveObject2
PlaceObject2 PlaceObject2
▮キャラクターMCのDefineSpriteより前に画像定義を挿入
▮表示順に注意してDepthの設定をしたPlaceObject2を
キャラクターMCの適当なフレームに挿入して
アニメーションをDefineしたSpriteをPlaceする

70
DefineSpriteについて
1. DefinSprite内におけるタグはControlTagだけなので
入れ子になったムービークリップでもDefineSprite
タグは入れ子にはなりません（子は親よりも前に定義する）
MC2 Header Tag Tag Tag Tag Tag
MC1 DefineSprite(MC2) DefineSprite(MC1)

2. それぞれ独立したDepth空間を持っています
Display List Display List
(Main) (Sprite)
Depth: 8 Shape Depth:4 Text
3 Sprite 3 Shape
2 Text 2 Shape
1 Shape 1 Text

71
サウンドの対応
台詞を声付きでしゃべるキャラクターもいる
⇒音声ファイル（MP3, MMF(SMAF))の埋め込み
携帯用の音声ファイル
⇒動的生成だと直接挿入可能
1 5 10
a
・こういうムービークリップをつくる
- いきなり再生されないようにstop();
- 音声データの定義と配置(DefineSound, StartSound)
- 再生時間に応じてフレーム数を伸ばす
・PlaceObject2で名前付き(例. “se0”)で配置
・tellTarget(“se0”){gotoAndPlay(2);}で再生開始

72
StartSoundタグ(Tag type=15)
▋ DefineSoundした音声をSoundIDで識別して再生
音声の定義と再生：[DefineSound]-[StartSound]の組
【StartSound】
タグヘッダ・普通に再生する分にはSoundInfo情報必要ない
SoundID ⇒SoundInfoフィールドは”0x00” でOK
SoundInfo (PC向けで多重再生回避の場合は”0x10”でもいいかも）
以下あるか等以下あるかの他、SyncStop, SyncNoMultipleの設定
InPoint 開始ポイント指定
OutPoint 停止ポイント指定
LoopCount 繰り返し回数
EnvPoints エンベロープ点と
Envelope
Records その内容

73
DefineSoundタグ(Tag type=14)
▋ 音声の定義
• MP3の場合はサンプル数算出などに要MP3バイナリの構造解析
• 携帯用フォーマットは仕様書外？置換には計算いらないので楽
【DefineSound】
タグヘッダ
SoundID SWF内での識別用ID
SoundFormat フォーマット(0~6, 11) MP3: 2, MMF(SMAF): 15
サンプリングレート
SoundRate (0=5.5kHz, 1=11kHz, 2=22kHz, 3=44KHz) MMF(SMAF): 0
SoundSize 8bitか16bitか MMF(SMAF): 0
SoundType ステレオかモノラルか MMF(SMAF): 0
SoundSampleCount サンプル数 MMF(SMAF): 0
1グラニュール＝576サンプル
SoundData MMF(SMAF):
バイナリデータ
ファイルバイナリ

74
と、まあ

『まめフラスコ』ではこんな感じのことをやっています

75

FlashLite以外での動的SWF生成

76
ActionScript3でやりたいんだけど…

• VirtualMachineが一新(AVM2)
• DoActionタグからDoABCタグになった
• これまでの素朴な埋め込み難しい

⇒変数まとめてバイナリで渡そう
DefineBinaryDataタグを使うよ

77
DefineBinaryDataタグ(tag type=87)
▋ 任意のバイナリの埋め込みができる
[Embed(source=“hoge.zip”, mimeType=“application/octet-stream”)]
static private var HogeZip: Class;

var ba:ByteArray = new HogeZip as ByteArray;
【DefineBinary】
このように埋め込んだバイナリを使う場合タグヘッダ
あらかじめ埋め込んだダミーのバイナリを
キャラクターID
もつDefineBinaryDataタグ内のバイナリ
部分の置換だけで済む
バイナリデータ
【DoABC】【SymbolClass】（ここだけ置換）

キャラクターID
“Main_HogeZip” Name:“Main_HogeZip”

78
ActionScript3なので…
ActionScript3 ⇒ まともな文法、まともな速度
前処理なしの設定ファイルをそのまま埋め込んで
ASでパースも可

バイナリ ⇒ 何でもあり
• (SWFバイナリ処理をAirでやる場合は特に)
データバイナリとしてAMF形式も可
• Zipで複数ファイル埋め込むのもありです
• MessagePackとか？

79
ActionScript3なので…

lite制限ないのにわざわざ単一ファイル化？
• 外部ファイル読み込みの簡略化（非同期は面倒）
• SWF⇒Air化 Android/iPhone用への展開

「プレイヤー同梱型のデータ」
ユーザ主導での配布・更新・課金
• 電子書籍（＋α）
• ゲームツクール
• ビジュアルノベルランタイム

80
動的SWF生成のほかのかたの例
▮text to flash(txt2swf)
テキストファイルをFlashに変換
青空文庫を携帯で読む「携帯Flashリーディングス」さんでも
使われています
http://www.kaseijin.biz/pc.htm
▮Fiora
au用ケータイメニュー画面を作成
GUIで楽々作成携帯電話のユーザによるカスタマイズ
http://auicon.freeownhost.com/pc/tools/fiora/
▮VNC2SWF
画面録画ユーティリティ
VNCの画面を録画、音声や編集も対応、オープンソース(GPL)
http://www.unixuser.org/~euske/vnc2swf/index-j.html

81
おわりに

動的にSWFファイルを作ると
• FlashLiteの制限を超えていろいろできるよ
• 1バイトでも削りたいとき試せることが増えるよ
• ちょっと変わったサービスも作れるかも
• いろいろ勉強になるね (compiler, MP3/Zip format, …)
• Flashに詳しくない人でもFlashPlayerの普及性を享受
していろいろ作れるね
• 楽しいね！

82

ご清聴ありがとうございました

おしまい

83
参考・引用文献など
• “SWF File Format Specification Version 10”（Adobe Systems Inc.さま）
http://www.adobe.com/devnet/swf.html 『SWF Technology Center』内

• “「．さくら」”（駅長さま）
http://www.nanican.net/dot-sakura/ 『．さくらステーション』内

• “from ”BaMHA” ”（サトウＭさま）
http://sgmh.sakura.ne.jp/tcg/ 『TCG-檻の少女』内

• “SWFバイナリ編集のススメ（よやさま）
http://labs.gree.jp/blog/2010/08/631/ 他『GREE Engineers’ Blog』内

• “ming/JPEG”（939 さま）
http://auicon.freeownhost.com/pc/index.php 『auicon by 939』内

• “ばぐとら研究所”（Chameleon Ponapalt さま）
http://ssp.shillest.net/

ActionScriptを使わないFlash勉強会 #1（前日版）

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to ActionScriptを使わないFlash勉強会 #1（前日版）

Similar to ActionScriptを使わないFlash勉強会 #1（前日版） (20)

Recently uploaded

Recently uploaded (9)

ActionScriptを使わないFlash勉強会 #1（前日版）