Resurrection Flasher swf2js

Resurrection Flasher swf2js

「swf2js」でswfをリアルタイムでcanvasに出力
第19回 HTML5+JS 勉強会
https://atnd.org/events/70739
Demo Code: https://github.com/ienaga/swf2js
API: https://swf2js.wordpress.com/api/

D3882ef3b2c3a2d9b766c9998b18f106?s=128

Toshiyuki Ienaga

November 12, 2015
Tweet

Transcript

  1. 甦れFlasher! 「swf2js」でswfをリアルタイムでcanvasに出力 2015/11/19 github.com/ienaga

  2. 自己紹介 • 家永 稔之 Ienaga Toshiyuki • GitHub: ienaga •

    所属: 株式会社ソニックムーブ システムエンジニア
  3. swf2jsって? •swfを直接バイナリ分解し てcanvasに出力するJS 対応バージョン Flash Lite 1.x, 2.x ActionScript 1.0,

    2.0
  4. Github ienaga/swf2js Demo Download

  5. 利点

  6. swfが使える

  7. Flashのノウハウが生かせる

  8. iPhone Android

  9. OK

  10. Chrome FireFox IE

  11. OK

  12. 利用方法の紹介 • swfをそのままcanvasに出力 • flaファイルがなくなったswfをコント ロールしたい • swfを合成してJavaScriptでコンテンツ 作成

  13. swfをそのまま canvasに出力

  14. htmlにscriptタグを追加 <html> ~中略~ <body> <script type="text/javascript" src="swf2js.js"></script> <script type="text/javascript"> swf2js.load("SWF

    PATH"); </script> </body> </html>
  15. <html> ~中略~ <body> <script type="text/javascript" src="swf2js.js"></script> <script type="text/javascript"> swf2js.load("./swf/demo.swf"); </script>

    </body> </html> swfのURLを入れる ここにswfのURLをいれる
  16. これだけでOK

  17. DEMO①

  18. <html> ~中略~ <body> <script type="text/javascript" src="swf2js.js"></script> <script type="text/javascript"> swf2js.load("./swf/demo1.swf", {

    tagId: "player1" }); swf2js.load("./swf/demo2.swf", { tagId: "player2" }); </script> <div id="player1"style="width:200px; height:200px"></div> <div id="player2"style="width:200px; height:200px"></div> </body> </html> 複数のswfを同時に表示したい 第二引数に{tagId: ID}を追加 指定したいタグにidをセット
  19. DEMO②

  20. flaファイルがなくなった swfをコントロールしたい

  21. 第二引数に{}をセット <script type="text/javascript" src="swf2js.js"></script> <script type="text/javascript"> swf2js.load("lost. swf", { callback:

    function(_root) { var mc = _root.getMovieClip("MC_NAME"); mc.gotoAndStop(2); }}); </script>
  22. callbackを設置 <script type="text/javascript" src="swf2js.js"></script> <script type="text/javascript"> swf2js.load("lost. swf", { callback:

    function(_root) { var mc = _root.getMovieClip("MC_NAME"); mc.gotoAndStop(2); }}); </script> 第二引数にObjectをセット propertyにcallbackを設置してfunctionを追加
  23. _rootから指定のMovieClipを取得 <script type="text/javascript" src="swf2js.js"></script> <script type="text/javascript"> swf2js.load("lost. swf", { callback:

    function(_root) { var mc = _root.getMovieClip("MC_NAME"); mc.gotoAndStop(2); }}); </script> _rootから指定のMovieClipを取得 第一引数はインスタンス名(String) String 例1) _root.mc1.target String 例2) /mc1/target String 例3) ../../target
  24. 取得したMovieClipをコントロール <script type="text/javascript" src="swf2js.js"></script> <script type="text/javascript"> swf2js.load("lost. swf", { callback:

    function(_root) { var mc = _root.getMovieClip("MC_NAME"); mc.gotoAndStop(2); }}); </script> 取得したMovieClipをコントロール ※APIリファレンス参照
  25. API リファレンス swf2js.wordpress.com/api

  26. DEMO③

  27. swfを合成して JavaScriptでコンテンツ作成

  28. <script type="text/javascript" src="swf2js.js"></script> <script type=“text/javascript”> var _root = swf2js.createRootMovieClip(240, 240,

    12); var mc1 = _root.createEmptyMovieClip(“MC1”, 1); mc1.loadMovie("monster.swf"); </script> 基本的にはFlashのmethodと同名
  29. <script type="text/javascript" src="swf2js.js"></script> <script type="text/javascript"> var _root = swf2js.createRootMovieClip(240, 240,

    12); var mc1 = _root.createEmptyMovieClip(“MC1”, 1); mc1.loadMovie("monster.swf"); </script> _rootを生成 _rootを生成 第一引数はwidth 第二引数はheight 第三引数はフレームレート 第四引数はloadの第二引数と同じくObjectが使えます。
  30. <script type="text/javascript" src="swf2js.js"></script> <script type="text/javascript"> var _root = swf2js.createRootMovieClip(240, 240,

    12); var mc1 = _root.createEmptyMovieClip("MC1", 1); mc1.loadMovie("monster.swf"); </script> _rootの中に空のMovieClipを生成 _rootの中に空のMovieClipを生成 第一引数はインスタンス名 第二引数は深度
  31. <script type="text/javascript" src="swf2js.js"></script> <script type="text/javascript"> var _root = swf2js.createRootMovieClip(240, 240,

    12); var mc1 = _root.createEmptyMovieClip("MC1", 1); mc1.loadMovie("monster.swf"); </script> 外部swfを読み込む mc1に外部swfを読み込む 第一引数はswfのURL
  32. DEMO④

  33. ご質問などあれば

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