Flasher Style
- これまでFlashでガリガリ開発されていた方
- 既存のswfを再利用したい方
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>
headerに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>
動作サンプル
Frontend Style
- CreateJSやPixi.jsを利用したコンテンツ制作経験のある方
- 複数人での開発をしたい方(アニメーションはSWFで、各種ページの動作はJS実装)
- とにかくJavaScriptで作りたい方
既存の技術とこれからの技術を組み合わせ
- CreateJSやPixi.jsのノウハウを持った人はJSライクに
- Flashのノウハウを持った人はFlashライクに (2系,3系どちらの書き方でもOK！)
sample.html
<script type="text/javascript">
// root作成 (width, height, fps)
var _root = swf2js.createRootMovieClip(240, 240, 30);
// ***********************
// Flashライクな書き方
// ***********************
// 空のMovieClipを作成 (MovieClip名, depth)
var model = _root.createEmptyMovieClip("model", 10);
// 外部swfを読み込み
model.loadMovie("model.swf");
// 読み込み完了したら初期値設定
model.addEventListener("data", function()
{
// 座標をセット
this.x = 50; // 2系 this._x = 50;
this.y = 10; // 2系 this._y = 50;
// 画面に合わせてサイズ調整
this.scaleX = 65; // 2系 this._xscale = 65;
this.scaleY = 65; // 2系 this._yscale = 65;
});
// タッチした時のイベントを登録
model.addEventListener("press", function()
{
// 透明度を変更
this.alpha = 0.5; // 2系 model._alpha = 50;
// 指の位置に合わせて移動
this.startDrag();
});
// タッチ終了した時のイベントを登録
model.addEventListener("release", function()
{
// 透明度をもとに戻す
this.alpha = 1; // 2系 model._alpha = 100;
// 移動終了
this.stopDrag();
});
// ***********************
// CreateJSライクな書き方
// ***********************
// 空のMovieClipを作成
var shapes = _root.createEmptyMovieClip("shapes", 1);
/**
* ランダム座標値
* @returns {number}
*/
var random = function()
{
return Math.floor(Math.random() * 240);
};
// 親のMovieClipの毎フレーム処理を登録
shapes.addEventListener("enterFrame", function()
{
// Shapeを作成
var shape = this.createShape();
var hue = 360 * Math.random();
var color = "hsl(" + hue + ", 100%, 50%)";
// ランダムに円を描画
shape.graphics
.beginFill(color)
.drawCircle(0, 0, Math.floor(20 * Math.random()));
// 表示回数をセット
shape.life = 10;
// ランダムに座標をセット
shape.x = random();
shape.y = random();
// Shapeの毎フレーム処理を登録
shape.addEventListener("enterFrame", function ()
{
// 表示回数を減算
this.life--;
if (this.life <= 0) {
// 表示回数が切れたら削除
shapes.removeChild(this);
} else {
// マウスの動きに合わせる
var mouseX = shapes.mouseX;
var mouseY = shapes.mouseY;
this.x = (mouseX) ? mouseX + 100 * (Math.random() - 0.5) : random();
this.y = (mouseY) ? mouseY + 100 * (Math.random() - 0.5) : random();
}
});
});
</script>
PCならマウスに合わせて演出が集まってきます。
スマホならタッチした座標に演出が集まってきます。
歌っているアーティスをマウスorタッチで好きば場所に移動できます。
その他の機能はこちらに随時追加投稿してます。
APIリファレンス
完成品
終わりに
いろいろな方に使っていただき、また、沢山の助言いただき本当に感謝です！！
まだまだ発展途中ですのでこれからも叱咤激励よろしくお願い致します。