JavaScript製FlashPlayer「swf2js」って？
ある日、ある会社(Apple)の偉い人が言いました。
「僕たちFlashサポートしないよ。」
そして、世はスマホ時代へ突入。
本当にFlashがサポートされないまま突入。。。
困る！！
っということでJavaScript製FlashPlayerを作ってみました。
完成品
サンプル提供
GAMEDESIGNさんのサイトからご提供していただきました。
ありがとうございます！
対応バージョン
- FlashLite 1.x, 2.x, 3.x, 4.x
- ActionScript 1.0, 2.0, 3.0
「swf2js」の使い方
- ベーシックな使い方
- 応用的な使い方
ベーシックな使い方
<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の本体を読み込む。
<head>
<script type="text/javascript" src="swf2js.js"></script>
</head>
次にHTMLのBODY内にscriptを書き、再生したいswfのURLを
swf2js.loadの第一引数にセットする。
<body>
<script type="text/javascript">
swf2js.load("./sample.swf");
</script>
</body>
これでOK！
動作サンプル
iPhone、Androidで見れます
ん？複数のswfを設置したい？
できますよー
複数のswfを設置したい場合
<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を入れます。
<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>
複数設置した動作サンプル
このように複数設置したい場合は、タグのIDで指定すれば複数のswfの設置が可能です。
応用的な使い方
- ちょっとだけJSでswfをコントロールしたい
- がっつりJSで作りこみたい
swf2jsではFlashのmethodをできるだけoverrideしたAPIを用意してます。
ちょっとだけJSでswfをコントロールしたい
例）flaファイルがなくなったけど、ちょっとだけJSでswfをコントロールしたい
<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から読み込んで動的につくり込む
<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)から対応開始しました
端末テストが少ない。
それは僕が持ってる端末が少ないからです。
Androidのメジャーなバグは回避してますが
端末固有のバグは網羅できてません。
終わりに
Flash PRO CCがAnimte CCとなっても
swfファイルはこれからも使用されていきます。
swf2jsはこれまで作ってきたswf資産と
これから制作するswfを活用できる便利なツールになるよう
今後も開発を行っていくので是非ご注目ください。
swf2jsでは再現できなかったswfを大募集しています。
もちろんgithubでissuesやPull Requestも大歓迎です！！
追記(2019/04/23)
「swf2js」は株式会社ソニックムーブにて
製品としてお問い合わせを受け付けております。
https://www.sonicmoov.com/
伴い、GitHub版に関しては、一切のご返答を行なっておりません。
悪しからず、ご了承くださいませ