Your SlideShare is downloading. ×
0
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
ActionScriptを使わないFlash勉強会 #1(前日版)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

ActionScriptを使わないFlash勉強会 #1(前日版)

5,332

Published on

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

No Downloads
Views
Total Views
5,332
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
27
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. クライアントサイドにおける できること やったこと動的swf生成の可能性と使用例 よろしくー 2011. 4. 23(Sat) ActionScriptを使わないFlash勉強会 #1 speaker: @niwauu
  • 2. 1はじめに
  • 3. 2お前、だれよ?にわうう/王子南twitter: @niwauuweb: “王子南交差点” http://libpanda.s18.xrea.com動的swf生成ネタで主に携帯用のこまごましたものを作っています。非プログラマ・非デザイナ ただの人です。うっかり契約してスピーカーになったよ!こんなの絶対(ry
  • 4. 3お前、だれよ?FLASH-jpフォーラムに動的swfネタで1回だけ投稿したよ▪ パラメータ埋め込みサンプルと原理の紹介▪ もう5年前です(でもまだここ経由で一番人が来ます “ iモード用のFLASHにパラメータを送りたい ”
  • 5. 4 お前、だれよ? 人気順【462】FLASH-jpトップページ【53】☺【21】☺ はてブでFLASH-jp内 一番人気のスレッドに! やっぱり動的SWF生成だよね
  • 6. 5きょうのおはなし• テーマについて(「クライアントサイドにおける~」)• FlashLite1.1についてと動的swf生成のモチベーション• swfバイナリのフォーマットと編集の基本• 動的swf生成の実例 1. パラメタ渡し・Script Bytecodeの挿入 2. 画像の入れ替え・サイズ変更 3. 画像とアニメーション、サウンドの挿入 4. AS3での戦略とEmbedded Binaryの置換• まとめ 主に「まめフラスコ」という 自作ソフトウェアでやってることの話です。
  • 7. 6登場タグDefineBitsLossless2 DoActionDefineBitsJPEG2 FrameLabelDefineBitsJPEG3 StartSoundDefineShape PlaceObject2DefineSprite RemoveObject2DefineSound ShowFrame End
  • 8. 7タイトルについてクライアントサイドにおける動的swf生成の可能性と使用例 広義クライアント側⇔サーバ側 ローカル側⇔ネットワーク側 ユーザ側⇔コンテンツプロバイダ側 生成・素材・再生がクライアント側 ▪ サービスに依らずに生成 ▪ ネットワークにつながない自由 ▪ 自分の素材でカスタムswf
  • 9. 8動的SWF生成ことはじめ
  • 10. 9なんで動的にやるの?▪ FlashLite1.1の制限 1. サイズ(100kB)制限 2. 機能制限 (1) 通信時ボタン押下必須制限 (2) URL値渡し制限 (3) SharedObjectないよ• 必要なものを必要な分だけ埋め込む• “swfにアクセスする”通信1回で必要な読込をまとめて• ローカルでのデータ設定・保持できないなら ネットワーク側で面倒見る「FlashLite1.1でやらなきゃいけない」が一番の制限(シェアのせい)
  • 11. 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の連載
  • 12. 11なんで動的にやるの?(そのほかの理由)• Lite1.1のSWF内で使いやすいデータ形式への シームレスな変換ができる。• 単一ファイル化(外部に読み込むファイルを置かない) によって取り回しを簡単にする
  • 13. 12SWFバイナリの基本 ShowFrame ShowFrame ShowFrameHeader Tag Tag Tag Tag Tag Tag Tag Tag 1フレーム目 2フレーム目 Nフレーム目 EndSWFファイルはヘッダとそれに続く複数のタグからなるヘッダ:バージョン, ファイルサイズ, ステージサイズ, フレームレート, 総フレーム数,タグ: Definitionタグ ShapeやMCなどのキャラクタを定義 Controlタグ 定義したキャラクタの取り扱い SWF全体の流れのコントロール
  • 14. 13DictionaryとDisplayList Dictionary DisplayList 定義 IDで管理 配置 Depthで管理DefineShape PlaceObject2 CharacterID=1 Depth=3 Depth= 3 CharacterID=1 CharacterID=1 PlaceObject2 Depth=2 CharacterID=2DefineShape Depth= 2 Depth=1 PlaceObject2 CharacterID=2 CharacterID=1 CharacterID=2 ShowFrame Depth= 1管理用番号にはCharacerIDとDepthがある ステージ上に表示• 定義したシェイプなどにはIDを振って管理• ステージに表示するものにはDepthを振って管理
  • 15. 14開発のための環境とヒント 0. バイナリエディタ 1. swf_file_format_v10.pdf Adobeによるファイルフォーマット解説。必須 2. Adobe Flash CS* どんなバイナリが生成されるべきかの確認。お手本 3. $ swfmill swf2xml hoge.swf SWFバイナリ内のタグ・パラメータの確認 自前のパーサ・バイナリが正しく作れているか (4. Sothink Flash Decompiler) 3.の確認ができるグラフィカル版。
  • 16. 15パラメタ埋め込みとその実例
  • 17. 16代入文バイトコード埋め込みによる変数渡し http://.../hoge.swf?name=niwauu 1フレーム目のフレームアクションで name = “niwauu”; を実行するswfと 同等のものを生成するDoActionタグの生成とベースSWFへのタグ挿入
  • 18. 17パラメタ埋め込み動的SWFの例(1) ShowFrame End Header Tag Tag Tag Tag Tag Tag Tag
  • 19. 18パラメタ埋め込み動的SWFの例(1) ShowFrame End Header Tag Tag Tag Tag Tag Tag Tag 0x96 0x06 … タグヘッダ バイト DoAction = Tag name = 0x96 0x08 …“niwauu”; 0x1d 0x00 コードスクリプト バイトコード タグ New Tag
  • 20. 19パラメタ埋め込み動的SWFの例(1) ShowFrame End Header Tag Tag Tag Tag Tag Tag Tag 1フレーム目 0x96 0x06 … タグヘッダ バイト DoAction = Tag name = 0x96 0x08 … “niwauu”; 0x1d 0x00 コード スクリプト バイトコード タグ NewHeader Tag Tag Tag Tag Tag Tag Tag Tag • 1フレーム目へのDoActionタグの挿入
  • 21. 20パラメタ埋め込み動的SWFの例(1) ShowFrame End Header Tag Tag Tag Tag Tag Tag Tag 1フレーム目 0x96 0x06 … タグヘッダ バイト DoAction = Tag name = 0x96 0x08 … “niwauu”; 0x1d 0x00 コード スクリプト バイトコード タグModified NewHeader Tag Tag Tag Tag Tag Tag Tag Tag • 1フレーム目へのDoActionタグの挿入 • 全体のサイズ変更によるSWFヘッダの更新
  • 22. 21スクリプトのActionシーケンスへの変換 name = “niwauu”; 1.「nameに」 2.「niwauuを」 3.「代入しろ」 ActionPush “name” ActionPush “niwauu” ActionSetVariable
  • 23. 22DoActionタグ (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)
  • 24. 23ActionScriptのバイトコードのバイナリ表現(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 bytesActionCode 96 ActionPush Length 06 payload長 00 Pushするものは文字列 payload 6e 61 6d 65 00 ‘n’ ‘a’ ‘m’ ‘e’ ‘¥0’ (→つづく)
  • 25. 24ActionScriptのバイトコードのバイナリ表現(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
  • 26. 25パラメタ埋め込み動的SWFの例(1)カウントダウン• ある期日までの日数を表示• 待受画面に表示センターとか国立2次試験⇒共通の需要があるので誰かが作る私大・他の資格試験・記念日⇒個人的・自分で作らないとないテンプレートSWF + 外部ファイルからパラメタ読み込みでやる? 待受画面⇒ネットワークとSharedObjectの制限 動的SWF生成で制限を超える
  • 27. 26パラメタ埋め込み動的SWFの例(2)tbl2swf: リアルタイム時刻表アプリNextTrain時刻表形式のテキストファイルをSWFファイルに変換 txtLite1.1内で扱いやすくするために独自データ形式へ変換して埋め込み待受画面に設定すると最速NextTrain環境(スマホより上)『旅ココ』(http://tabikoko.net) さまtbl2swfを使ったマッシュアップwebサービス
  • 28. 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… …
  • 29. 28パラメタ埋め込み動的SWFの例(3)kif2swf:将棋盤再生アプリ将棋の棋譜「☗ 7六歩☖3四歩☗2六歩…」などをグラフィカルに表示kif形式ファイル(テキストファイル)を読み込み txt1ファイル化⇒ブログに挙げるのが楽HTMLのobjectタグでうまく埋め込まれなくてもSWFへのリンクさえあればブラウザ全画面表示になるけどとりあえずは閲覧できる 読み込みも早い森信雄七段(日本将棋連盟 プロ棋士)詰将棋ブログでも!
  • 30. 29画像もいじってみよう
  • 31. 30画像置換の例さめがめクローン• コマの画像をカスタマイズ• FlashLite製のドット絵描きアプリと連携 ⇒携帯だけで自分専用のものが作れる画像のサイズ(縦横)は丌変透過つき可逆圧縮画像(透過PNG)DefineBitsLossless2タグを入れ替え
  • 32. 31画像置換の例DefineBitsLossless2タグ内のCharacterのIDから置換すべきタグを識別、IDを保持したまま画像データ部置換する BitmapID=5の DefineBitsLossless2タグHeader Tag Tag Tag Tag Tag Tag Tag TagDefineBitsLossless2 DefineBitsLossless2 タグ編集 BitmapID=5 BitmapID=5
  • 33. 32DefineBitsLossless2(Tag type=36)▮画像を定義(可逆なもの。PNG, GIF用) Header• キャラクターIDでSWF内での識別• 画像データ部は、 CharacterID BitmapFormat Width Height 画像データ
  • 34. 33DefineBitsLossless2(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)
  • 35. 34DefineBitsLossless2(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)
  • 36. 35DefineBitsLossless2(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)を使って透過情報を含めないことで容量削減
  • 37. 36SWF内のBitmap画像の扱い・画像データの置換⇒DefineBitsLossless2の変更 DefineBitsLossless2 BitmapID
  • 38. 37SWF内のBitmap画像の扱い・画像データの置換⇒DefineBitsLossless2の変更・画像の配置⇒「画像で塗りつぶした矩形」の配置・DefineShapeがコンテナ役、描画領域を決めている・異なる画像サイズに置換⇒DefineShapeも変更が必要 DefineBitsLossless2 DefineShape ShapeID BitmapID BitmapID
  • 39. 38SWF内のBitmap画像の扱い・画像データの置換⇒DefineBitsLossless2の変更・画像の配置⇒「画像で塗りつぶした矩形」の配置・DefineShapeがコンテナ役、描画領域を決めている・異なる画像サイズに置換⇒DefineShapeも変更が必要・ステージに配置するのはPlaceObject2・ステージ上でのオブジェクトの一意性はDepthで管理 DefineBitsLossless2 DefineShape PlaceObject2 Stage ShapeID ShapeID BitmapID BitmapID Depth Depth
  • 40. 39ほかいろいろ作ったもの• テキスト埋め込み csv 単語帳 時間割 問題 単語帳Flash生成アプリ『flowermaker』の例• 画像入替 15パズル ランダム画像表示 ドット絵作成(⇒作業中の絵のサムネイル表示 用)
  • 41. 40もっといろいろのタグをいじる ~『まめフラスコ』のはなし
  • 42. 41『まめフラスコ』のはなしまめフラスコ:待受Flash生成アプリ「まちうけメーカーforフラッシュマスコット」 の略から来ています。ユーザの入力からこういうのをつくります・時間・電波・バッテリ残量などで内容が変わる 携帯待受けとしてはよくあるもの・画像、台詞、音声、などユーザの用意したものを 埋め込んでオリジナルキャラクターを作成・「伺か」的なものを目指して台詞を表すスクリプトや アニメーション定義で似たファイル形式を使用
  • 43. 42『まめフラスコ』のはなしまめフラスコ:待受Flash生成アプリ ¥0¥s[0] まめふら こんにち は世界!! SWFファイル 素材 を生成 ・画像 FlashPlayer Java VM ・テキスト 搭載端末 実は powered PythonのJava実装
  • 44. 「伺か」ってなに? 43デスクトップ常駐型マスコットアプリケーション今でいえばウィジェット(ガジェット)に近い読み:「うかがか」デスクトップの隅にキャラクターを立たせて「なんか言うのを眺める」から「OSの機能やネットワーク通信と連携させたいろいろ」(例:メール着信確認、簡単なゲーム、サーバ監視) 好感度システム⇒ラブプラス的な インターフェース層の擬人化特徴:• DLLと簡易言語による非常に自由度の高い機能拡張• ユーザによる盛んな追加キャラクター作成 約10年で1000体以上、現在でも盛ん、14 体/月 @2011
  • 45. 「伺か」ってなに? 44こういうのです。
  • 46. 45まめフラスコでやっていること• テキスト情報の挿入• 画像の置換• 画像の挿入• ムービークリップの生成・挿入• サウンドの挿入• テキストボックスのサイズ変更• シェイプの色の変更• SWF背景色の変更
  • 47. 46基本キャラクターの変更• キャラクターはMovieClipで表現• MovieClipの中のダミー画像を置換したい。• DefineBitsLossless2, DefineShapeを変更する• PlaceObject2は変更なし a 置換前 置換後
  • 48. 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
  • 49. 48DefineBitsJPEGタグDefineBits ⇒encodingを記したJPEGTablesタグとセットで使うDefineBitsJPEG2⇒ふつうのJPEGDefineBitsJPEG3⇒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回含まれていた
  • 50. 49DefineShapeタグ(Tag type=26) Header▮シェイプの定義- 使う塗りのスタイル ShapeID- 使う線のスタイル ShapeBounds- シェイプを構成する線や塗りの集合 Shapes・画像の配置⇒ FillStyles 「画像で塗りつぶした矩形」の配置 LineStyles・DefineShapeがコンテナ役、 NumFillBits 描画領域を決めている NumLineBits ShapeRecord
  • 51. 50DefineShapeタグ(Tag type=26)• 変更と確認が必要な部分は3つ(▮印) Header ShapeID :定義するシェイプの境界 ShapeBoundsフィールドで矩形で定義 ShapeBounds Shapes :シェイプで表示させたい画像 「領域を画像で塗りつぶす。 FillStyles その画像は(BitmapID)」 LineStyles FillStylesの中のBitmapIDで指定 NumFillBits NumLineBits :矩形を構成する直線 × 4ShapeRecordsの中のStraightEdgeReocrdで指定垂直線:VertLineFlag=0, DeltaX= (移動twips) ShapeRecord水平線:VertLineFlag=1, DeltaY= (移動twips)
  • 52. 51DefineShape内の画像扱いの注意ひとつのDefineShapeタグ内には複数の塗りが定義できるDefineShape⇄DefineBitsLosslessは必ずしも1対1対応でない• Flashがパブリッシュしたswfをベースとする場合注意 ⇒シンボル化 DefineShape ShapeID=3 DefineBits DefineBits Lossless2 Lossless2 BitmapID=1 BitmapID=2 fillStyle: fillStyle: BitmapID=1 BitmapID=2
  • 53. 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, …で指定
  • 54. 53PlaceObject2タグ(Tag type=26) Header ▮ DefineShapeなどで定義したこれらがあるか キャラクターをID指定して配置PlaceFlagMove ・Depthは表示順を表すとともに Depth SWF内のオブジェクトを一意に管理 CharacterIDTransform Matrix ・ 表 示 位 置 は TransformMatrix 内 の translateX, translateYで指定Color Transform Ratio ・NameをつけることでMovieClipに Name tellTargetでアクセス可能 ClipDepth ClipActions
  • 55. 54PlaceObject2タグ(Tag type=26) Header ▮ DefineShapeなどで定義したこれらがあるか キャラクターをID指定して配置PlaceFlagMove ・Depthは表示順を表すとともに Depth SWF内のオブジェクトを一意に管理 CharacterIDTransform Matrix ・ 表 示 位 置 は TransformMatrix 内 の translateX, translateYで指定Color Transform Ratio ・NameをつけることでMovieClipに Name tellTargetでアクセス可能 ClipDepth ClipActions
  • 56. 55PlaceObject2タグ(Tag type=26) Header ▮ DefineShapeなどで定義したこれらがあるか キャラクターをID指定して配置PlaceFlagMove ・Depthは表示順を表すとともに Depth SWF内のオブジェクトを一意に管理 CharacterIDTransform Matrix ・ 表 示 位 置 は TransformMatrix 内 の translateX, translateYで指定Color Transform Ratio ・NameをつけることでMovieClipに Name tellTargetでアクセス可能 ClipDepth ClipActions
  • 57. 56PlaceObject2タグ(Tag type=26) Header ▮ DefineShapeなどで定義したこれらがあるか キャラクターをID指定して配置PlaceFlagMove ・Depthは表示順を表すとともに Depth SWF内のオブジェクトを一意に管理 CharacterIDTransform Matrix ・ 表 示 位 置 は TransformMatrix 内 の translateX, translateYで指定Color Transform Ratio ・NameをつけることでMovieClipに Name tellTargetでアクセス可能 ClipDepth ClipActions
  • 58. 57RemoveObject2タグ(Tag type=28)▮指定したDepthのObjectをステージ上から消去する Header Depth CharacterIDでなくDepthで管理SWFバイナリにはキーフレームという概念がないのでそれまでPlaceしたObjectを表示しなくするためには明示的にRemoveObject2タグで消去する必要がある この次のフレームでそれまで置いた ObjectをRemoveする
  • 59. 58PlaceObject2タグ(Tag type=26) Header Depthで管理してるのでこれらがあるか タグはCharacterIDを知らなくても良いPlaceFlagMove Depth CharacterIDない場合このタグは何をするか? • 指定したDepthにある既にplace済の CharacterID Objectの属性変更Transform Matrix • CharacterIDあると同じDepthに二重placeColor Transform になってしまうので Ratio そのためのPlaceFlagMoveフラグ; Name placeFlagMove = 1 のときは ClipDepth そのdepthのObjectを一旦Removeして ClipActions 同じDepthに二重Placeしない
  • 60. 59どういうこと? DisplayListPlaceObject2 CharacterID=1 Depth=3 Depth= 1PlaceFlagMove=0 Depth=2 (x,y)=(0,0) Depth=1
  • 61. 60どういうこと? DisplayListPlaceObject2 CharacterID=1 Depth=3 Depth= 1PlaceFlagMove=0 Depth=2 (x,y)=(0,0)PlaceObject2 Depth=1 CharacterID=1 Depth= 1PlaceFlagMove=0(x,y)=(50, 50) Depthで一意にオブジェクトが決まらない
  • 62. 61どういうこと? DisplayListPlaceObject2 CharacterID=1 Depth=3 Depth= 1PlaceFlagMove=0 Depth=2 (x,y)=(0,0) Depth=1
  • 63. 62どういうこと? DisplayListPlaceObject2 CharacterID=1 Depth=3 Depth= 1PlaceFlagMove=0 Depth=2 (x,y)=(0,0)PlaceObject2 Depth=1 CharacterID=1 Depth= 1PlaceFlagMove=1(x,y)=(50, 50)PlaceFlagMove=1にして設置済みのObjectの修正をする
  • 64. 63どういうこと? DisplayListPlaceObject2 CharacterID=1 Depth=3 Depth= 1PlaceFlagMove=0 Depth=2 (x,y)=(0,0)PlaceObject2 Depth=1 CharacterID=3 Depth= 1PlaceFlagMove=1(x,y)=(50, 50)CharacterIDを持たせることで違うObjectへの入れ替えもRemoveObject2をタグ使わないでもできる
  • 65. 64エレメントの対応エレメント: ベース画像の上に乗せる画像パーツ・差分だけトリミングした画像を重ねて別画像を表現・表情の変化や小規模な装飾を最小の画像容量で実現顔の部分以外は共通 差分だけトリミング パーツの重ね合わせで表現
  • 66. 65エレメントの対応・画像の挿入(置換でない) ⇒ ▪ DefineBitsLossless2, DefineShape,PlaceObejct2タグを 新規に作ってSWF内にタグ挿入する必要がある ▪ Depthを表示順に合わせて決める 重複しないように注意 Tag Tag Tag Tag Tag Tag DefintBitsLossless2 DefintBitsLossless2 DefineShape DefineShape PlaceObject PlaceObject
  • 67. 66エレメントの対応Header Tag Tag Tag Tag Tag Tag Tag Tag Tag TagDefineBitsLossless2 Header … Tag Tag Tag TagDefineShape キャラクターMCの Tag Tag Tag Tag DefineSpriteタグ RemoveObject2 RemoveObject2 PlaceObject2 PlaceObject2▮キャラクターMCのDefineSpriteより前に画像定義を挿入▮表示順に注意してDepthの設定をしたPlaceObject2を キャラクターMCの適当なフレームに挿入 (必要に応じてRemoveObject2タグも)
  • 68. 67DefineSpriteタグ(Tag type=39)▮ムービークリップを定義する ・タグの塊を内部に持つ Header ⇒置換の際にこのタグ内タグを見る必要もある ・Control系のタグのみ(Definition系は丌可) SpriteID ⇒配置するキャラクタはこのタグより前で定義FrameCount 1 2 3 4 5 6 7 8ControlTags a a tag tag 1 2 3 4 5 6 7 8 タグ E tag N D … : DoAction : PlaceObject2 tag : ShowFrame : RemoveObject2
  • 69. 68アニメーションの対応 1 5 10 a a こういうMCをつくって埋め込む (つくるMCの数は任意個)・必要な画像のDefineBitsLossless2, DefineShapeタグを登録・DefineSpriteタグでMC定義、その中に 1. 表示する画像のDefineShapeタグを設置するPlaceObject2タグ 2. 各画像表示時間の調整用にフレーム稼ぎのShowFrameタグ 3. くりかえ(す|さない)などの制御用スクリプトのDoActionタグ・DefineSpriteで定義したMCを名前付きでPlaceObject2タグで設置
  • 70. 69アニメーションの対応Header Tag Tag Tag Tag Tag Tag Tag Tag Tag Tag TagDefineBitsLossless2 Header … Tag Tag Tag TagDefineShapeDefineSprite キャラクターMCの Tag Tag Tag Tag DefineSpriteタグ RemoveObject2 RemoveObject2 PlaceObject2 PlaceObject2▮キャラクターMCのDefineSpriteより前に画像定義を挿入▮表示順に注意してDepthの設定をしたPlaceObject2を キャラクターMCの適当なフレームに挿入して アニメーションをDefineしたSpriteをPlaceする
  • 71. 70DefineSpriteについて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
  • 72. 71サウンドの対応台詞を声付きでしゃべるキャラクターもいる ⇒音声ファイル(MP3, MMF(SMAF))の埋め込み携帯用の音声ファイル ⇒動的生成だと直接挿入可能 1 5 10 a・こういうムービークリップをつくる - いきなり再生されないようにstop(); - 音声データの定義と配置(DefineSound, StartSound) - 再生時間に応じてフレーム数を伸ばす・PlaceObject2で名前付き(例. “se0”)で配置・tellTarget(“se0”){gotoAndPlay(2);}で再生開始
  • 73. 72StartSoundタグ(Tag type=15)▋ DefineSoundした音声をSoundIDで識別して再生音声の定義と再生:[DefineSound]-[StartSound]の組【StartSound】 タグヘッダ ・普通に再生する分にはSoundInfo情報必要ない SoundID ⇒SoundInfoフィールドは”0x00” でOK SoundInfo (PC向けで多重再生回避の場合は”0x10”でもいいかも) 以下あるか等 以下あるかの他、SyncStop, SyncNoMultipleの設定 InPoint 開始ポイント指定 OutPoint 停止ポイント指定 LoopCount 繰り返し回数 EnvPoints エンベロープ点と Envelope Records その内容
  • 74. 73DefineSoundタグ(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): 0SoundSampleCount サンプル数 MMF(SMAF): 0 1グラニュール=576サンプル SoundData MMF(SMAF): バイナリデータ ファイルバイナリ
  • 75. 74と、まあ『まめフラスコ』ではこんな感じのことをやっています
  • 76. 75FlashLite以外での動的SWF生成
  • 77. 76ActionScript3でやりたいんだけど…• VirtualMachineが一新(AVM2)• DoActionタグからDoABCタグになった• これまでの素朴な埋め込み難しい ⇒変数まとめてバイナリで渡そう DefineBinaryDataタグを使うよ
  • 78. 77DefineBinaryDataタグ(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”
  • 79. 78ActionScript3なので…ActionScript3 ⇒ まともな文法、まともな速度 前処理なしの設定ファイルをそのまま埋め込んで ASでパースも可バイナリ ⇒ 何でもあり • (SWFバイナリ処理をAirでやる場合は特に) データバイナリとしてAMF形式も可 • Zipで複数ファイル埋め込むのもありです • MessagePackとか?
  • 80. 79ActionScript3なので… lite制限ないのにわざわざ単一ファイル化? • 外部ファイル読み込みの簡略化(非同期は面倒) • SWF⇒Air化 Android/iPhone用への展開 「プレイヤー同梱型のデータ」 ユーザ主導での配布・更新・課金 • 電子書籍(+α) • ゲームツクール • ビジュアルノベルランタイム
  • 81. 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
  • 82. 81おわりに動的にSWFファイルを作ると• FlashLiteの制限を超えていろいろできるよ• 1バイトでも削りたいとき試せることが増えるよ• ちょっと変わったサービスも作れるかも• いろいろ勉強になるね (compiler, MP3/Zip format, …)• Flashに詳しくない人でもFlashPlayerの普及性を享受 していろいろ作れるね• 楽しいね!
  • 83. 82ご清聴ありがとうございました おしまい
  • 84. 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” ”(サトウ M さま) 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/

×