♥ SWF LOVE ♥@ken39arg

自己紹介

ガラケーサービスを５年超

現在、

鎌倉 の PHPer

今年も、古都鎌倉で

ガラケーサービス

最近の悩み

プログラマ35(30) 歳

定年説

齢29.5 才

定 年 ？

あせってます

プログラマ定年説を目前にして、そのプログラマ人生

の９割をガラケーと

PHP と共に過ごしてきたと、いうことに危機感

ところで

PHP 以外ですきな技術

Flash@ActionScript

Red5@Java

Red5

Flash Media Server のクローン

要するに PHP 以外は

SWF!

ガラケー ＋ SWF

気がつけば

FlashLite動的生成担当

swfmill↓

flasm/ming/swftools↓

Binary!!

I Love SWF Binary Format!!

自称鎌倉の

No.1 FlashLite Binarian

FlashLite バイナリの

小ネタ

/:$X3

Do you know “/:$X3”?

_root.AS:if (++i%2==1) { $X3=“すき” ;}else{ $X3=“きらい” ;}

DefineEditText @VariableName=“$X3”

これだけなら問題無い

「すき」→「きらい」→「すき」→「きらい」→

flower.AS:switch (random(5)) {case 1: gotoAndPlay(‘window’); break;case 2: gotoAndPlay(‘double’); break;default: gotoAndPlay(‘nomal’); break;}

「すき」→「 1 」→「きらい」→「 3 」→「すき」→「 3 」→「きら

い」→「 0 」→

SWF4(FlashLite1.x) では

switch で使われる一時変数名が

“ /:$X3”になってる確率が高い

（というかそれしか見たこと無い )

絶対そんな変数名使わないと思いますが

ちなみに

SWF5 以降ActionStoreRegister(0x87)

の登場により解決してます

話は戻りますが、、

30 歳を目前に

ガラケーと SWF な俺の将来を考えてみた

ガラケーの将来

想像してごらん

時代はスマホ

スマホ

ガラケー？

「あったねーw 」

ガラケー終了のお知らせ

( ￣ Д ￣ ;)

じゃあ

Flash の将来

想像してごらん

時代はスマホ

スマホ

スマートフォン

iPhone

HTML5

。。。

Flash?

「あったっけ ?ww 」

Flash 終了のお知らせ

Orz

ということは？

俺の将来

想像してごらん

時代はスマホ

スマホ

スマートフォン

iPhone

HTML5

鎌倉 No.1 の FlashLite…?

「興味ない」

…

俺、終了のお知らせ

なんとかしたい

スマホ時代に、

Flash の技術や

ガラケーの知識今まで作ってきた SWF 素材

等等を活かして、

延命したい!

というわけで

SWF延命計画ここからが本題

全てのモバイル端末で楽にサービスを対応する方法を考えてます

前提条件 mova,FOMA,cdmaOne,win,c 型 ,p 型 ,W 型 ,3gc ガラケー制作で 1action に大量に HTML を作るなんて普通 クロスプラットフォームにあこがれ 1action,1html になったよね web 屋である

ブラウザでよくね ?

提案プラットフォーム　

HTML Movie Image

ガラケー XHTML Mobile FlashLite1.1 JPEG,GIF

Android HTML5 FlashLite1.1 JPEG,GIF,PNG

iPhone HTML5 HTML5 JPEG,GIF,PNG

• HTML = 2 パターンなんて楽な方• Flash をなんとかする

swf を iPhone で動かす

swf を iPhone で動かすツール wallaby gordon smokescreen

wallaby Adobe 純正の CS5 プラグイン SVG,JPEG,PNG,HTML,js,css のセットを書き出す いろいろと不完全 css アニメーションを多用しているため、アニメーションが同期していない サイズがでかい CS5 Flash が必要というのが痛い = ( 動的生成はできない )

gordon js で swf のバイナリを解析して svg を作り出す github で公開 Movie クリップに対応していない 不完全 開発止まってる

smokescreen 基本 gordon と同じもうちょっと進んでいる 2010/10 に oss comming soon! となってから音沙汰無し 2011/02 にひっそりと github 上に登場したリポジトリは別物 (svg -> canvas へ ) github で公開されているものはネストもアニメーションも出来ない

まだ良いのが無いので、自作することにしましたが、まだ出来ていません。とりあえず SVG がイケてる気がしたのでSWF を SVG に変換した話をこれからします

ＳＷＦと SVG のマッピングSWF 　 SVGDefineShape* <g> <path> <use>DefineSprite <g> <use>DefineBits* <image>Text <text>Font m(_ _)m

DefineBits* Flash に埋め込まれたラスターデータ JPEG はそのまま PNG と GIF は少し違うフォーマットにロスレス圧縮されている

DefineBits* Lossless はピクセルを PNG に戻す Bits,BitsJPEG* は data をそのまま取り出す

<image xlink:href=“…”> 画像データを保存して URL を” xlink:href” にセットしても良い base64 した文字列を” xlink:href” にセットしても良い

DefineShape SWF の持つベクターデータ SWF のデータ種類は非常にシンプル

直線 (LineTo) 曲線 (CurveTo) 塗り (fill) 線 (stroke)

３次ベジェやら circle とか rectangle とかない。何でも直線と曲線だけで表す男らしさがウリ

DefineShape 全体を <g> でまとめる ClipedBitmap は <use> Gradient は <linearGradient|radialGradient> style毎に <path d=“…” fill=“…” stroke=“…”> に変換→ LineTo|CurveTo が最大で 　 fillStyle0,fillStyle1,lineStyle の　 3 つの path に作用

DefineShape DeltaX,DeltaY

絶対値に計算し直す LineTo(ShapeRecord@Type=2)

L toX toY

CurveTo(ShapeRecord@Type=3) Q controlX controlY toX toY to の絶対値は” start+control+to”

DefineShape StyleChange (ShapeRecord@type=1)

StateNewStyles path の書き出し Style レジストリの更新

StateFillStyle0, StateFillStyle1, StateLineStyle 次にの LineTo | CurveTo の対象のスタイルを変更 全てが (>0) なら次のエッジは <path>3 ノード分に作用

StateMoveTo moveTo は絶対値

DefineShape

fillStyle0

fillStyle1

moveTo(x, y) lineTo(x, y)

lineStyle

DefineSprite ベクターやラスター等のイメージデータやテキスト、また

Sprite など表示オブジェクトを配置したり、アニメーションさせたりする FlashLite ではタイムラインを持つ MovieClip のみ ActionScript も内包 Stage 全体も仲間

DefineSprite PlaceObject 毎に ,<use> に変換 全体を <g> でグループ化 アニメーションはまずは考えないので、その他のタグは無視します SVG に変えるだけなら PlaceObject2,3 の情報は要らない

DefineSprite CharacterId

xlink:href=“#< ここ >”;

Depth 表示順

Matrix transform=“matrix(< ここ >)”

ColorTransform opacity=“< ここに AlphaMultTerm>” feColorMatrix フィルタが理想だが実際はブラウザが対応してない

Stage Define 定義は <defs> で登録する Stage の PlaceObject(<use>) を <g> の中に記述 SWF Format では 1px=20 で表現しているので

root 直下の g には transform=“scale(0.05)”

Stage<svg> <defs> <image id=“c1” xlink:href=“foo.jpg” width=“100” height=“10” /> <g id=“c2”> <path d=“…”> </g> </defs> <g transform=“scale(0.05)”> <use> <use> </g></svg>

SWF を SVG にすると iPhone/Android で見るサムネイルはクリア ガラケーのサムネイルも SVG 　 > 　 Image すれば

SWF > Image よりも楽に動的に生成できる（変換用に Flash を起動するサーバーとか要らない） アニメーションさせると嬉しい

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