JavaScript製FlashPlayer「swf2js」swfをそのままHTML5に変換。

  • 245
    Like
  • 75
    Comment

JavaScript製FlashPlayer「swf2js」って?

ある日、ある会社(Apple)の偉い人が言いました。

「僕たちFlashサポートしないよ。」

そして、世はスマホ時代へ突入。

本当にFlashがサポートされないまま突入。。。

困る!!

っということでJavaScript製FlashPlayerを作ってみました。

完成品

ienaga/swf2js

サンプル提供

GAMEDESIGNさんのサイトからご提供していただきました。
ありがとうございます!

GAMEDESIGN

対応バージョン

  • FlashLite 1.x, 2.x, 3.x, 4.x
  • ActionScript 1.0, 2.0, 3.0

「swf2js」の使い方

  • ベーシックな使い方
  • 応用的な使い方

ベーシックな使い方

sample.html
<html>
    <head>
        <script type="text/javascript" src="swf2js.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            swf2js.load("./sample.swf");
        </script>
    </body>
</html>

最初にswf2js.jsの本体を読み込む。

sample.html
<head>
    <script type="text/javascript" src="swf2js.js"></script>
</head>

次にHTMLのBODY内にscriptを書き、再生したいswfのURLを
swf2js.loadの第一引数にセットする。

sample.html
<body>
    <script type="text/javascript">
        swf2js.load("./sample.swf");
    </script>
</body>

これでOK!

動作サンプル

サンプル

iPhone、Androidで見れます:smile:

ん?複数のswfを設置したい?

できますよー:grin:

複数のswfを設置したい場合

sample.html
<html>
    <head>
        <script type="text/javascript" src="swf2js.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            swf2js.load("./sample1.swf", {"tagId": "container1"});
            swf2js.load("./sample2.swf", {"tagId": "container2"});
        </script>
        <div id="container1" style="width:240px; height:240px;"></div>
        <div id="container2" style="width:240px; height:240px;"></div>
    </body>
</html>

swf2js.loadの第二引数はoptionとして使用できます。

{
    "tagId": string,
}

object内にtagIdを追加し、値は設置したいタグのIDを入れます。

sample.html
<script type="text/javascript">
    swf2js.load("./sample1.swf", {"tagId": "container1"});
    swf2js.load("./sample2.swf", {"tagId": "container2"});
</script>

タグを追加します。

sample.html
<div id="container1" style="width:240px; height:240px;"></div>
<div id="container2" style="width:240px; height:240px;"></div>

複数設置した動作サンプル

サンプル

このように複数設置したい場合は、タグのIDで指定すれば複数のswfの設置が可能です。

応用的な使い方

  • ちょっとだけJSでswfをコントロールしたい
  • がっつりJSで作りこみたい

swf2jsではFlashのmethodをできるだけoverrideしたAPIを用意してます。

APIリファレンス

ちょっとだけJSでswfをコントロールしたい

例)flaファイルがなくなったけど、ちょっとだけJSでswfをコントロールしたい

sample.html
<html>
    <head>
        <script type="text/javascript" src="swf2js.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            swf2js.load("./sample1.swf", {"callback": function(_root)
            {
                // @param MovieClip _root
                // 記入例(APIリファレンス参照)
                // _root.getDisplayObject("_root.TargetMc");
                // _root.getDisplayObject("/TargetMc");
                // _root.getDisplayObject("../TargetMc");
                var mc = _root.getDisplayObject("_root.TargetMc");
                mc.gotoAndStop(10);
            }});
        </script>
    </body>
</html>

がっつりJSで作りこみたい

例)サーバーにswfを設置してJSから読み込んで動的につくり込む

sample.html
<html>
    <head>
        <script type="text/javascript" src="swf2js.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            // 第一引数:stageのwidth
            // 第二引数:stageのheight
            // 第三引数:stageのfps
            var _root = swf2js.createRootMovieClip(240,240, 30);

            // 空のMovieClipを生成
            // 第一引数:MovieClip[インスタンス名]
            // 第二引数:depth[深度]
            var mc1 = _root.createMovieClip("mc1", 1);

            // 外部swfを読み込む
            mc1.loadMovie("URL/sample1.swf");

            // データが読み込み完了したらX,Yを指定120,120に設置[ベースのサイズはcreateRootMovieClipの値]
            mc1.addEventListener("data", function()
            {
                this.x = 120;
                this.y = 120;
            });

            // イベントをセット
            var x = 0;
            mc1.addEventListener("enterFrame", function()
            {
                // 毎フレームX座標を加算
                x++;
                this.x += x;

                // stageの右端で終了
                if (_root.getWidth() === this.getX()) {
                    this.addEventListener("enterFrame", undefined);
                }
            });

        </script>
    </body>
</html>

「swf2js」のメリット・デメリット

メリット

SWFファイルがそのまま使える

本来であれば、既存のflaファイルから
毎回HTML5Canvasで出力する必要があります。

swf2jsならswfをそのまま使用できるので
HTMLのタグを書き換えるだけで改修が完了できます。

今までと変わらずスマートフォンでもブラウザでも
swfが使えるのが一番のメリットです!!

既存ノウハウ、経験をそのまま活かせる

何十年と培った経験やノウハウやをそのままHTML5時代でも活かせます!

画面のリサイズ(マルチスクリーン対応)

swfは画面の大きさに合わせて自動的にリサイズしてくれます。
swf2jsはこのリサイズ機能も実装しているので画面の大きさを気にしなくてもいいんです。

テキスト入力

swfだとお問い合わせフォームやタイピングゲームなどではテキスト入力できました。
swf2jsもテキスト入力をHTMLのtextareaを利用してこれを再現してます。
以外とこの機能がついてるJS製のPlayerはないんです!

サンプル

デメリット

いろいろ、いい事を書きましたがデメリットもあります。

ActionScript3が使えない

現時点ではActionScript3は全くつかえません。
来年の春くらいからActionScript3に取り掛かろうと思ってます。
完成は未定です。。。

2016/8/19(version 0.7)から対応開始しました :smile:

端末テストが少ない。

それは僕が持ってる端末が少ないからです。
Androidのメジャーなバグは回避してますが
端末固有のバグは網羅できてません。

終わりに

Flash PRO CCがAnimte CCとなっても
swfファイルはこれからも使用されていきます。

swf2jsはこれまで作ってきたswf資産と
これから制作するswfを活用できる便利なツールになるよう
今後も開発を行っていくので是非ご注目ください。

swf2jsでは再現できなかったswfを大募集しています。
もちろんgithubでissuesやPull Requestも大歓迎です!!