Recommended
More Related Content
What's hot
Similar to SWF LOVE (ASを使わないFlash勉強会)
Similar to SWF LOVE (ASを使わないFlash勉強会) (12)
Recently uploaded
Recently uploaded (14)
SWF LOVE (ASを使わないFlash勉強会)
- 1. ♥ SWF LOVE ♥ @ken39arg
- 2. 自己紹介
- 3. 荒賀謙作
- 4. ガラケーサービスを５年超
- 5. 現在、鎌倉のPHPer
- 7. 最近の悩み
- 9. 齢29.5才
- 10. 定年？
- 11. あせってます
- 13. ところで
- 14. PHP以外ですきな技術
- 16. Red5@Java
- 18. 要するにPHP以外はSWF!
- 19. ガラケー＋SWF
- 20. 気がつけば
- 21. FlashLite動的生成担当
- 23. I Love SWF Binary Format!!
- 26. /:$X3
- 27. Do you know “/:$X3”?
- 28. _root.AS: if (++i%2==1) { $X3=“すき”;}else{ $X3=“きらい”;} DefineEditText @VariableName=“$X3”
- 30. flower.AS: switch (random(5)) { case 1: gotoAndPlay(‘window’); break; case 2: gotoAndPlay(‘double’); break; default:gotoAndPlay(‘nomal’); break; }
- 35. ちなみに
- 37. 話は戻りますが、、
- 39. ガラケーの将来
- 40. 想像してごらん
- 41. 時代はスマホ
- 42. スマホ
- 43. ガラケー？
- 44. 「あったねーw」
- 45. ガラケー終了のお知らせ
- 46. (￣Д￣;)
- 47. じゃあ
- 48. Flashの将来
- 49. 想像してごらん
- 50. 時代はスマホ
- 51. スマホ
- 52. スマートフォン
- 53. iPhone
- 54. HTML5
- 55. 。。。
- 56. Flash?
- 57. 「あったっけ?ww」
- 58. Flash終了のお知らせ
- 59. Orz
- 60. ということは？
- 61. 俺の将来
- 62. 想像してごらん
- 63. 時代はスマホ
- 64. スマホ
- 65. スマートフォン
- 66. iPhone
- 67. HTML5
- 69. 「興味ない」
- 70. …
- 71. 俺、終了のお知らせ
- 72. なんとかしたい
- 74. というわけで
- 75. SWF延命計画 ここからが本題
- 77. 前提条件 mova,FOMA,cdmaOne,win,c型,p型,W型,3gc ガラケー制作で1actionに大量にHTMLを作るなんて普通 クロスプラットフォームにあこがれ1action,1htmlになったよね web屋である ブラウザでよくね?
- 80. swfをiPhoneで動かすツール wallaby gordon smokescreen
- 81. wallaby Adobe純正のCS5プラグイン SVG,JPEG,PNG,HTML,js,cssのセットを書き出す いろいろと不完全 cssアニメーションを多用しているため、アニメーションが同期していない サイズがでかい CS5 Flashが必要というのが痛い = (動的生成はできない)
- 82. gordon jsでswfのバイナリを解析してsvgを作り出す githubで公開 Movieクリップに対応していない 不完全 開発止まってる
- 83. smokescreen 基本gordonと同じもうちょっと進んでいる 2010/10にosscomming soon!となってから音沙汰無し 2011/02にひっそりとgithub上に登場したリポジトリは別物(svg -> canvasへ) githubで公開されているものはネストもアニメーションも出来ない
- 84. まだ良いのが無いので、 自作することにしましたが、 まだ出来ていません。 とりあえずSVGがイケてる気がしたので SWFをSVGに変換した話をこれからします
- 85. ＳＷＦとSVGのマッピング
- 86. DefineBits* Flashに埋め込まれたラスターデータ JPEGはそのまま PNGとGIFは少し違うフォーマットにロスレス圧縮されている
- 87. DefineBits* LosslessはピクセルをPNGに戻す Bits,BitsJPEG*はdataをそのまま取り出す <image xlink:href=“…”> 画像データを保存してURLを”xlink:href”にセットしても良い base64した文字列を”xlink:href”にセットしても良い
- 88. DefineShape SWFの持つベクターデータ SWFのデータ種類は非常にシンプル 直線(LineTo) 曲線(CurveTo) 塗り(fill) 線 (stroke) ３次ベジェやらcircleとかrectangleとかない。何でも直線と曲線だけで表す男らしさがウリ
- 89. DefineShape 全体を<g>でまとめる ClipedBitmapは<use> Gradientは<linearGradient|radialGradient> style毎に<path d=“…” fill=“…” stroke=“…”>に変換->LineTo|CurveToが最大で fillStyle0,fillStyle1,lineStyleの 3つのpathに作用
- 90. DefineShape DeltaX,DeltaY 絶対値に計算し直す LineTo(ShapeRecord@Type=2) L toXtoY CurveTo(ShapeRecord@Type=3) QcontrolXcontrolYtoXtoY toの絶対値は”start+control+to”
- 91. DefineShape StyleChange (ShapeRecord@type=1) StateNewStyles pathの書き出し Styleレジストリの更新 StateFillStyle0,StateFillStyle1,StateLineStyle 次にのLineTo | CurveToの対象のスタイルを変更 全てが(>0)なら次のエッジは<path>3ノード分に作用 StateMoveTo moveToは絶対値
- 92. DefineShape fillStyle0 lineStyle fillStyle1 moveTo(x, y) lineTo(x, y)
- 93. DefineSprite ベクターやラスター等のイメージデータやテキスト、またSpriteなど表示オブジェクトを配置したり、アニメーションさせたりする FlashLiteではタイムラインを持つMovieClipのみ ActionScriptも内包 Stage全体も仲間
- 94. DefineSprite PlaceObject毎に,<use>に変換 全体を<g>でグループ化 アニメーションはまずは考えないので、その他のタグは無視します SVGに変えるだけならPlaceObject2,3の情報は要らない
- 95. DefineSprite CharacterId xlink:href=“#<ここ>”; Depth 表示順 Matrix transform=“matrix(<ここ>)” ColorTransform opacity=“<ここにAlphaMultTerm>” feColorMatrixフィルタが理想だが実際はブラウザが対応してない
- 96. Stage Define定義は<defs>で登録する StageのPlaceObject(<use>)を<g>の中に記述 SWF Formatでは1px=20で表現しているのでroot直下のgにはtransform=“scale(0.05)”
- 97. 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>
- 98. SWFをSVGにすると iPhone/Androidで見るサムネイルはクリア ガラケーのサムネイルもSVG > ImageすればSWF > Imageよりも楽に動的に生成できる（変換用にFlashを起動するサーバーとか要らない） アニメーションさせると嬉しい
- 99. ご清聴ありがとうございました