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

1. ♥ SWF LOVE ♥ @ken39arg

2. 自己紹介

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

4. 現在、鎌倉のPHPer

5. 今年も、古都鎌倉でガラケーサービス

6. 最近の悩み

7. プログラマ35(30)歳定年説

8. 齢29.5才

9. 定年？

10. あせってます

11. プログラマ定年説を目前にして、そのプログラマ人生の９割をガラケーとPHPと共に過ごしてきたと、いうことに危機感

12. ところで

13. PHP以外ですきな技術

14. Flash@ActionScript

15. Red5@Java

16. Red5Flash MediaServerのクローン

17. 要するにPHP以外はSWF!

18. ガラケー＋SWF

19. 気がつけば

20. FlashLite動的生成担当

21. swfmill↓flasm/ming/swftools↓Binary!!

22. I Love SWF Binary Format!!

23. 自称鎌倉のNo.1FlashLiteBinarian

24. FlashLiteバイナリの小ネタ

25. /:$X3

26. Do you know “/:$X3”?

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

28. これだけなら問題無い「すき」->「きらい」->「すき」->「きらい」->

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

30. 「すき」->「1」->「きらい」->「3」->「すき」->「3」->「きらい」->「0」->

31. SWF4(FlashLite1.x)では

32. switchで使われる一時変数名が“/:$X3”になってる確率が高い（というかそれしか見たこと無い)

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

34. ちなみに

35. SWF5以降ActionStoreRegister(0x87)の登場により解決してます

36. 話は戻りますが、、

37. 30歳を目前にガラケーとSWFな俺の将来を考えてみた

38. ガラケーの将来

39. 想像してごらん

40. 時代はスマホ

41. スマホ

42. ガラケー？

43. 「あったねーw」

44. ガラケー終了のお知らせ

45. (￣Д￣;)

46. じゃあ

47. Flashの将来

48. 想像してごらん

49. 時代はスマホ

50. スマホ

51. スマートフォン

52. iPhone

53. HTML5

54. 。。。

55. Flash?

56. 「あったっけ?ww」

57. Flash終了のお知らせ

58. Orz

59. ということは？

60. 俺の将来

61. 想像してごらん

62. 時代はスマホ

63. スマホ

64. スマートフォン

65. iPhone

66. HTML5

67. 鎌倉No.1のFlashLite…?

68. 「興味ない」

69. …

70. 俺、終了のお知らせ

71. なんとかしたい

72. スマホ時代に、Flashの技術やガラケーの知識今まで作ってきたSWF素材等等を活かして、延命したい!

73. というわけで

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

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

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

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

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

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

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

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

84. ＳＷＦとSVGのマッピング

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

86. DefineBits* LosslessはピクセルをPNGに戻す Bits,BitsJPEG*はdataをそのまま取り出す <image xlink:href=“…”> 画像データを保存してURLを”xlink:href”にセットしても良い base64した文字列を”xlink:href”にセットしても良い

87. DefineShape SWFの持つベクターデータ SWFのデータ種類は非常にシンプル 直線(LineTo) 曲線(CurveTo) 塗り(fill) 線 (stroke) ３次ベジェやらcircleとかrectangleとかない。何でも直線と曲線だけで表す男らしさがウリ

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

89. DefineShape DeltaX,DeltaY 絶対値に計算し直す LineTo(ShapeRecord@Type=2) L toXtoY CurveTo(ShapeRecord@Type=3) Q controlXcontrolYtoXtoY toの絶対値は”start+control+to”

90. DefineShape StyleChange (ShapeRecord@type=1) StateNewStyles pathの書き出し Styleレジストリの更新 StateFillStyle0,StateFillStyle1,StateLineStyle 次にのLineTo | CurveToの対象のスタイルを変更 全てが(>0)なら次のエッジは<path>3ノード分に作用 StateMoveTo moveToは絶対値

91. DefineShape fillStyle0 lineStyle fillStyle1 moveTo(x, y) lineTo(x, y)

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

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

94. DefineSprite CharacterId xlink:href=“#<ここ>”; Depth 表示順 Matrix transform=“matrix(<ここ>)” ColorTransform opacity=“<ここにAlphaMultTerm>” feColorMatrixフィルタが理想だが実際はブラウザが対応してない

95. Stage Define定義は<defs>で登録する StageのPlaceObject(<use>)を<g>の中に記述 SWF Formatでは1px=20で表現しているのでroot直下のgにはtransform=“scale(0.05)”

96. 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>

97. SWFをSVGにすると iPhone/Androidで見るサムネイルはクリア ガラケーのサムネイルもSVG > ImageすればSWF > Imageよりも楽に動的に生成できる（変換用にFlashを起動するサーバーとか要らない） アニメーションさせると嬉しい

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