SWF LOVE (ASを使わないFlash勉強会 #1)

3,269 views

Published on

2011/04/23 ActionScriptを使わないFlash勉強会 #1
前半はネタ終盤がSWFをSVGに変換する話
http://partake.in/events/2f2588c4-6a00-465c-b50f-752138a58b70

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,269
On SlideShare
0
From Embeds
0
Number of Embeds
1,837
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

SWF LOVE (ASを使わないFlash勉強会 #1)

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

×