Resurrection Flasher swf2js

by Toshiyuki Ienaga

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Github ienaga/swf2js Demo Download

Slide 5

Slide 5 text

利点

Slide 6

Slide 6 text

swfが使える

Slide 7

Slide 7 text

Flashのノウハウが生かせる

Slide 8

Slide 8 text

iPhone Android

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Chrome FireFox IE

Slide 11

Slide 11 text

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

swfをそのまま canvasに出力

Slide 14

Slide 14 text

htmlにscriptタグを追加 ~中略~ swf2js.load("SWF PATH");

Slide 15

Slide 15 text

~中略~ swf2js.load("./swf/demo.swf"); swfのURLを入れるここにswfのURLをいれる

Slide 16

Slide 16 text

これだけでOK

Slide 17

Slide 17 text

DEMO①

Slide 18

Slide 18 text

~中略~ swf2js.load("./swf/demo1.swf", { tagId: "player1" }); swf2js.load("./swf/demo2.swf", { tagId: "player2" });

複数のswfを同時に表示したい第二引数に{tagId: ID}を追加指定したいタグにidをセット

Slide 19

Slide 19 text

DEMO②

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

第二引数に{}をセット swf2js.load("lost. swf", { callback: function(_root) { var mc = _root.getMovieClip("MC_NAME"); mc.gotoAndStop(2); }});

Slide 22

Slide 22 text

callbackを設置 swf2js.load("lost. swf", { callback: function(_root) { var mc = _root.getMovieClip("MC_NAME"); mc.gotoAndStop(2); }}); 第二引数にObjectをセット propertyにcallbackを設置してfunctionを追加

Slide 23

Slide 23 text

_rootから指定のMovieClipを取得 swf2js.load("lost. swf", { callback: function(_root) { var mc = _root.getMovieClip("MC_NAME"); mc.gotoAndStop(2); }}); _rootから指定のMovieClipを取得第一引数はインスタンス名(String) String 例１） _root.mc1.target String 例２） /mc1/target String 例３） ../../target

Slide 24

Slide 24 text

取得したMovieClipをコントロール swf2js.load("lost. swf", { callback: function(_root) { var mc = _root.getMovieClip("MC_NAME"); mc.gotoAndStop(2); }}); 取得したMovieClipをコントロール ※APIリファレンス参照

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

DEMO③

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

var _root = swf2js.createRootMovieClip(240, 240, 12); var mc1 = _root.createEmptyMovieClip(“MC1”, 1); mc1.loadMovie("monster.swf"); 基本的にはFlashのmethodと同名

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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