Resurrection Flasher swf2js

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

自己紹介 • 家永稔之 Ienaga Toshiyuki • GitHub： ienaga •
所属：株式会社ソニックムーブシステムエンジニア

swf2jsって？ •swfを直接バイナリ分解してcanvasに出力するJS 対応バージョン Flash Lite 1.x, 2.x ActionScript 1.0,
2.0

Github ienaga/swf2js Demo Download

利点

swfが使える

Flashのノウハウが生かせる

iPhone Android

Chrome FireFox IE

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

swfをそのまま canvasに出力

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

<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をいれる

これだけでOK

DEMO①

<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をセット

DEMO②

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

第二引数に{}をセット <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>

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を追加

_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 例１） _root.mc1.target String 例２） /mc1/target String 例３） ../../target

取得した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リファレンス参照

API リファレンス swf2js.wordpress.com/api

DEMO③

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

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

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

DEMO④

ご質問などあれば

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

Resurrection Flasher swf2js

Resurrection Flasher swf2js

More Decks by Toshiyuki Ienaga

Other Decks in Programming

Featured

Transcript