Upload
ken39arg
View
1.608
Download
1
Embed Size (px)
Citation preview
♥ SWF LOVE ♥@ken39arg
自己紹介
荒賀 謙作
ガラケーサービスを5年超
現在、
鎌倉 の PHPer
今年も、古都鎌倉で
ガラケーサービス
最近の悩み
プログラマ35(30) 歳
定年説
齢29.5 才
定 年 ?
あせってます
プログラマ定年説を目前にして、そのプログラマ人生
の9割をガラケーと
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 に変換した話をこれからします
SWFと 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)
3次ベジェやら 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 を起動するサーバーとか要らない) アニメーションさせると嬉しい
ご清聴ありがとうございました