レポート

これからのFlash開発者への道しるべ─SWF研究会#2@東京 実施レポート

この記事を読むのに必要な時間:およそ 4.5 分

Shapeの基礎の基礎

続きまして,カヤックの荒賀氏より「Shapeの基礎の基礎」についてお話がありました。

カヤック 荒賀氏

カヤック 荒賀氏

Shapeの基礎の基礎
http://ken39arg.github.com/swfstudy/#1

「簡単な1フレームのSWFをベクターデータとして再現できるようになる」事を目標とし,初~中級者を対象に非常にわかりやすく説明いただきました。

SWFのベクター表現

ベクター描画を実現するのは以下の3点のみといいます。

  • moveTo() ポイントの移動
  • lineTo() 直線を引く
  • curveTo() 二次ベジェ曲線

これらを実際に利用して正方形,円を記述する方法についてソースコードと共に説明し,この3点があればどんな言語にも必ずコンバートできると断言。デモでは実際に円と三角形を組み合わせた(トイレのシンボル)を用いて実際に(swfdump,ActionScript3.0,JavaScriptへ)コンバートする過程が紹介されました。

Shapeの詳解

次にShapeタグの種類,DefineShape*タグの構造 ,FillStyle(塗り⁠⁠,LineStyle(線,太さ,色⁠⁠,ShapeRecordの説明があり,実際に正方形のタグを例にとって「パスは相対値,座標は1px=20で表す整数値」⁠fillスタイルのインデックスは0ではなく1から始まる」⁠curveToでは少々複雑なので注意が必要」などといった経験も交えた解説が行われました。

SWF8以降はさらに項目が増えていますがモバイルでは適用外なので割愛しました。

また図形の再現として,異なる色の2つの画像の重なる部分の色が混ざっている図の作例で,swfDumpでは奇麗に2つの図形,2つの色+図形が重なる部分の色も重なり3色となるのに,ActionScriptでは同じように記載しても重なった部分が消えてしまう事例がありました。

画像

この場合はfillStyle0とfillStyle1の両方にStyleが設定されている事を再認識し,それらを踏まえて再度書き直し,問題なく表現できたとのことです。

しかしながら,実際には1レイヤだけのswfなどほとんど存在せず,複数のShapeを組み合わせて利用することがほとんどであり,これらのShapeを配置するためにSpriteとルートオブジェクトが持っているのがPlaceObjectであると解説しました。またこれに関連して,基本的な配置,ベクターをActionScriptにする例などの説明がありました。詳細はスライド資料にまとまっておりますので,ご参照いただければと思います。

簡単なSWFをSVGにコンバートしてみよう

最後に簡単なSWFをSVGにコンバートする説明として,⁠SVGのタグ(スライド)さえ知っておけば最低限の事は簡単にできる」と対象SVGのタグの説明と実際にコンバートした結果を説明して締めくくりました。

アクションスクリプト実行処理系

続いて,株式会社サイバーエージェントの森野浩平氏より,アクションスクリプト実行処理系と題した,SWFにおけるアクション,アクションのデータ構造,アクションモデル,実装にあたってのハマりどころについてのお話がありました。

森野氏

森野氏

最初にアニメーション基本要素として,各タグの説明がありました。パラパラ漫画+アクションとして,以下のようなものがあります。

DoAction
syowフレーム時に実行されるもので,ヘッダの後にアクションが並び,最後にアクションエンドがある。
DefineButton
ボタンの定義タグ,ボタンへのイベントにより実行されるアクションを持つ。
DefineButton2
拡張版,コンディション(発動条件)それに結ばれるアクションで構成される。
ACTIONRECORD
ActionCodeによる命令とパラメータ。ActionCodeごとにpayloadの読み方が決められている。パラメータを必要とする命令は0x80以上でpayloadのレングスがあり,その後可変長のデータが入ってくる。

また,アクションモデルの説明として,データを読み取った後にどのようにアクションをするかがアクションモデルであり,アクションは幾つか存在し,それが混在していると説明します。たとえばSWF3アクションはムービーをはじめたり,止めたり,URL取得したりできますが,これだけでは複雑なプログラムは組めないため,SWF4アクションを利用することにより,式の評価,条件分岐,ループができるようになります。なお,これらは仮想スタックマシンによって実現されていると説明がありました。

実際に体験したこと

Flashプレーヤーを実装して経験したこととして,仕様書にない「謎のアクション0x2D」に遭遇し,調査したところ,fscommand2()(デバイスの情報取得をするもの)だったという経験談が披露されました。

こうしたFlashプレーヤーを実装して仕様がよくわからなくハマりどころとして「実行順序」⁠実行タイミング」⁠プロパティ変更後のレンダリング」などが挙げられ,これらに対しては,⁠本家Adobeの挙動をよく見てテストケースSWFを作成」したり「フレームレートを下げてみて実行」するなど,いかに仮説をたてて,実装,検証を繰り返すかがキーとなると説明がありました。

著者プロフィール

高岡将(たかおかすすむ)

大手金融,独立系SIerにて気がつけば計18年以上のキャリアを重ねる。バランス感覚に長け,インフラ/アプリ,プレイヤ/マネージャなど関係なくこなし,「いそうだけどいないタイプ」と評価される。

仕事以外では,自転車,ジョギング,サックス等を趣味にし,密かに「エンジニアと健康」についてダイエット成功論の連載を企む。