画像を読み込んで配置して動かす

smart.js では、複数の画像を読み込んで、ページへ配置し、動かしたり、
インタラクションを与える作業を効率的に行えます。
このサンプルは、２つの画像を読み込んだ後、ページへ配置し、
２種類の方法(トゥイーンとタイムライン)を利用し動かしています。

var loader = new smart.Loader();
loader.load({
	a:"img/charA.png",                      // 画像パスを連想配列で指定
	b:"img/charB.png"
},function(imgs)
{
	var stage = new smart.Stage("sample");      // ステージを作る(エレメントのidを指定)

	var charA = new smart.Canvas(60,60,imgs.a); // 画像Aを描画したキャンバスを作成
	stage.addChild(charA);                  // ステージに配置
	charA.alpha =   0;
	charA.x     = -50;
	charA.y     =  50;

	var charB = new smart.Canvas(60,60,imgs.b); // 画像Bを描画したキャンバスを作成
	stage.addChild(charB);                  // ステージに配置
	charB.x    = 210;
	charB.y    =  80;
	charB.regX =  30;
	charB.regY =  30;
	
	smart.tween.start(charA,{alpha:1,x:50},"easeOutQuad",1); // 画像Aをトゥイーンアニメ
	
	smart.ticker.on("tick",function(e)       // 画像Bを毎フレーム5度回す
	{
		charB.rotation += 5;
	});
});

TOP