Jsアニメーションライブラリ

flashからスプライトシートを書き出せるので、jsの勉強がてら簡単なjsライブラリを作りました。

MoviePngライブラリのDEMO
ライブラリ：MoviePng.js

さっそく簡単なライブラリの使い方をメモしておきます。

1.Flashからスプライトシートを作成する

Flashでアニメーションを作ったら、スプライトシートとして書き出します。
スプライトシート作成の重要なポイントとして、縦に一列の画像データになるように幅と高さを調整する必要があります。
※画像を複数列に並べると正しく動作しません。

スプライトシートの出力設定

アルゴリズム	基本
データ形式	JSON
画像サイズ	カスタム (幅と高さをムービークリップに合わせる)

pngとjsonが書き出されるたら、jsonをテキストエディタで開いて幅と高さ、アニメーションの枚数を確認する。

2.アニメーション用Jsonデータを作成する

js用に設定データを作成する。

var animationData={
	"fps":30,
	"image":["common/image/fire.png"],
	"size":[89,115],
	"anime":{
		"normal": [0, 48], // ショートコード
		"wave": [0,2,4,6,8,10,12,11,9,7,5,3,1],
	}
}

var animationData={

"fps":30,

"image":["common/image/fire.png"],

"size":[89,115],

"anime":{

"normal": [0, 48], // ショートコード

"wave": [0,2,4,6,8,10,12,11,9,7,5,3,1],

}

アニメーションパラメータ

fps	フレームレート
image	画像パス
size	一コマ分の画像サイズ（先ほどjsonで確認した幅と高さを指定）
anime	アニメーションパターンアニメーションのパターンにタグ付けして管理

3.MoviePngクラスで実装する

メソッド

初期化	qa.MoviePng	qa.MoviePng( クラス名,アニメーションJSON )
再生	play	play( アニメーションタグ , 開始フレーム , ループ )
停止	stop	stop()

html

<body>
	<div class="mov"></div>;
</body>

<body>

<div class="mov"></div>;

</body>

javascript

// アニメーションデータ設定
var animationData={
	"fps":30,
	"image":["common/image/fire.png"],
	"size":[89,115],
	"anime":{
		"normal": [0, 48],
		"wave": [0, 2,4,6,8,10,12,11,9,7,5,3,1],
		}
}

// インスタンの作成
var mp= new qa.MoviePng(".mov",animationData);

// アニメーションの再生
mp.play("normal");

// アニメーションデータ設定

var animationData={

"fps":30,

"image":["common/image/fire.png"],

"size":[89,115],

"anime":{

"normal": [0, 48],

"wave": [0, 2,4,6,8,10,12,11,9,7,5,3,1],

}

// インスタンの作成

var mp= new qa.MoviePng(".mov",animationData);

// アニメーションの再生

mp.play("normal");

シンプルなアニメーションライブラリを完了出来ました。
DEMO

lg

おぼえがき