Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

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

•
•
L
libpanda
1 of 84
Downloaded 28 times
クライアントサイドにおける できること やったこと 動的swf生成の可能性と使用例 よろしくー 2011. 4. 23(Sat) ActionScriptを使わないFlash勉強会 #1 speaker: @niwauu
1 はじめに
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 パラメタ埋め込み動的SWFの例（１） ShowFrame End Header Tag Tag Tag Tag Tag Tag Tag 0x96 0x06 … タグヘッダ バイト DoAction ＝ Tag name = 0x96 0x08 … “niwauu”; 0x1d 0x00 コード スクリプト バイトコード タグ New Tag
19 パラメタ埋め込み動的SWFの例（１） ShowFrame End Header Tag Tag Tag Tag Tag Tag Tag 1フレーム目 0x96 0x06 … タグヘッダ バイト DoAction ＝ Tag name = 0x96 0x08 … “niwauu”; 0x1d 0x00 コード スクリプト バイトコード タグ New Header Tag Tag Tag Tag Tag Tag Tag Tag • １フレーム目へのDoActionタグの挿入
20 パラメタ埋め込み動的SWFの例（１） ShowFrame End Header Tag Tag Tag Tag Tag Tag Tag 1フレーム目 0x96 0x06 … タグヘッダ バイト DoAction ＝ Tag name = 0x96 0x08 … “niwauu”; 0x1d 0x00 コード スクリプト バイトコード タグ Modified New Header Tag Tag Tag Tag Tag Tag Tag Tag • １フレーム目への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 パラメタ埋め込み動的SWFの例（2） tbl2swf: リアルタイム時刻表アプリ NextTrain時刻表形式のテキストファ イルをSWFファイルに変換 txt Lite1.1内で扱いやすくするために 独自データ形式へ変換して埋め込み 待受画面に設定すると最速NextTrain環境(スマホより上) 『旅ココ』(http://tabikoko.net) さま tbl2swfを使ったマッシュアップwebサービス
27 パラメタ埋め込み動的SWFの例（2） 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 パラメタ埋め込み動的SWFの例（3） kif2swf:将棋盤再生アプリ 将棋の棋譜「☗ ７六歩☖３四歩☗２六歩…」 などをグラフィカルに表示 kif形式ファイル(テキストファイル)を読み込み txt 1ファイル化⇒ブログに挙げるのが楽 HTMLのobjectタグでうまく埋め込まれなくてもSWFへの リンクさえあればブラウザ全画面表示になるけど とりあえずは閲覧できる 読み込みも早い 森信雄七段（日本将棋連盟 プロ棋士）詰将棋ブログでも！
29 画像もいじってみよう
30 画像置換の例 さめがめクローン • コマの画像をカスタマイズ • FlashLite製のドット絵描きアプリと連携 ⇒携帯だけで自分専用のものが作れる 画像のサイズ（縦横）は丌変 透過つき可逆圧縮画像(透過PNG) DefineBitsLossless2タグを入れ替え
31 画像置換の例 DefineBitsLossless2タグ内のCharacterのIDから置換すべき タグを識別、IDを保持したまま画像データ部置換する BitmapID=5の DefineBitsLossless2タグ Header Tag Tag Tag Tag Tag Tag Tag Tag DefineBitsLossless2 DefineBitsLossless2 タグ編集 BitmapID=5 BitmapID=5
32 DefineBitsLossless2(Tag type=36) ▮画像を定義(可逆なもの。PNG, GIF用) Header • キャラクターIDでSWF内での識別 • 画像データ部は、 CharacterID BitmapFormat Width Height 画像データ
33 DefineBitsLossless2(Tag type=36) ▮画像を定義(可逆なもの。PNG, GIF用) Header • キャラクターIDでSWF内での識別 • 画像データ部は CharacterID BitmapFormat = 3のとき BitmapFormat = 3 パレット色情報＋パレット番号 Width Height の羅列をzlib圧縮(□)したもの ColorTableSize パレット色数 BitmapFormat=3 ⇒ 1pixelあたり1Byte ColorTableRGB パレット色情報 Colormap PixelData パレット番号の羅列 (8bit)
34 DefineBitsLossless2(Tag type=36) ▮画像を定義(可逆なもの。PNG, GIF用) Header • キャラクターIDでSWF内での識別 • 画像データ部は CharacterID BitmapFormat = 3のとき BitmapFormat = 5 パレット色情報＋パレット番号 Width BitmapFormat = 5のとき Height ARGBデータ の羅列をzlib圧縮(□)したもの BitmapFormat=3 ⇒ 1pixelあたり1Byte Bitmap BitmapFormat=5 ⇒ 1pixelあたり4Byte PixelData ARGBの羅列 (32bit)
35 DefineBitsLossless2(Tag type=36) ▮画像を定義(可逆なもの。PNG, GIF用) Header • キャラクターIDでSWF内での識別 • 画像データ部は CharacterID BitmapFormat = 3のとき BitmapFormat パレット色情報＋パレット番号 Width 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 SWF内のBitmap画像の扱い ・画像データの置換⇒DefineBitsLossless2の変更 ・画像の配置⇒「画像で塗りつぶした矩形」の配置 ・DefineShapeがコンテナ役、描画領域を決めている ・異なる画像サイズに置換⇒DefineShapeも変更が必要 DefineBitsLossless2 DefineShape ShapeID BitmapID BitmapID
38 SWF内のBitmap画像の扱い ・画像データの置換⇒DefineBitsLossless2の変更 ・画像の配置⇒「画像で塗りつぶした矩形」の配置 ・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 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
55 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
56 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
57 RemoveObject2タグ(Tag type=28) ▮指定したDepthのObjectをステージ上から消去する Header Depth CharacterIDでなくDepthで管理 SWFバイナリにはキーフレームという概念がないので それまでPlaceしたObjectを表示しなくするためには 明示的にRemoveObject2タグで消去する必要がある この次のフレームでそれまで置いた ObjectをRemoveする
58 PlaceObject2タグ(Tag type=26) 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 CharacterID=1 Depth=3 Depth= 1 PlaceFlagMove=0 Depth=2 (x,y)=(0,0) Depth=1
60 どういうこと？ DisplayList PlaceObject2 CharacterID=1 Depth=3 Depth= 1 PlaceFlagMove=0 Depth=2 (x,y)=(0,0) PlaceObject2 Depth=1 CharacterID=1 Depth= 1 PlaceFlagMove=0 (x,y)=(50, 50) Depthで一意にオブジェクトが決まらない
61 どういうこと？ DisplayList PlaceObject2 CharacterID=1 Depth=3 Depth= 1 PlaceFlagMove=0 Depth=2 (x,y)=(0,0) Depth=1
62 どういうこと？ DisplayList PlaceObject2 CharacterID=1 Depth=3 Depth= 1 PlaceFlagMove=0 Depth=2 (x,y)=(0,0) PlaceObject2 Depth=1 CharacterID=1 Depth= 1 PlaceFlagMove=1 (x,y)=(50, 50) PlaceFlagMove=1にして設置済みのObjectの修正をする
63 どういうこと？ DisplayList PlaceObject2 CharacterID=1 Depth=3 Depth= 1 PlaceFlagMove=0 Depth=2 (x,y)=(0,0) PlaceObject2 Depth=1 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 エレメントの対応 Header Tag Tag Tag Tag Tag Tag Tag Tag 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 アニメーションの対応 Header Tag Tag Tag Tag Tag Tag Tag Tag 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/

More Related Content

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