ETERNITY DESIGN BLOG

PreloadJSで画像をロード その2 [CreateJS]

今回は、PreloadJSで複数画像をロードします。

デモはこちら

複数の画像をロードし、Shadowをつけて、ランダムな位置に配置し、アルファでのトゥイーンで表示という流れです。

用意するだけして公開するの忘れてた。

function Main() {
	this.canvas;
	this.stage;
	this._width = 500;
	this._height = 500;

	this.init();
}

Main.prototype.init = function() {
	this.canvas = document.getElementById('ed_ver5');
	this.resizeEvent();

	this.stage = new createjs.Stage(this.canvas);

	// Tweenさせるには必要なようだ
	createjs.Ticker.setFPS(20);
	createjs.Ticker.addEventListener("tick", this.stage);

	var queue = new createjs.LoadQueue(false);
	queue.addEventListener("fileload", delegate(this.handleFileLoad, this));
	queue.addEventListener("complete", delegate(this.handleComplete, this));

	var manifest = [
		"http://pics.campl.us/iphone/2/27137.b7824921f0f1cb29f82a15b96555b02e.jpg",
		"http://pics.campl.us/iphone/1/11762.a1adeb9f22b5cc8474a407105e3f4e64.jpg",
		"http://pics.campl.us/iphone/2/26480.8c92e7da3001efb3bba290e7de1e958b.jpg",
		"http://pics.campl.us/iphone/2/28167.d76b8ba24c91f3cd4326966142df00fe.jpg",
		"http://pics.campl.us/iphone/c/cb4c28c51271b8de10c4c54fd7dd82be-2135055019.jpg",
		"http://pics.campl.us/iphone/1/1ec1210e63679e99136e40c7ab8b4cce-662209336.jpg"
	];

	// まとめてロード。第2パラメータをfalseにすると、この時点ではロード開始しない
	queue.loadManifest(manifest, false);

	// ここでロードを開始する
	queue.load();
}

Main.prototype.setBitmap = function(img) {
	var w = img.naturalWidth;
	var h = img.naturalHeight;

	var bitmap = new createjs.Bitmap(img);
	bitmap.alpha = 0;

	bitmap.x = (this._width - 450) * Math.random();
	bitmap.y = (this._height - 450) * Math.random();
	bitmap.rotation = 40 * Math.random() - 40 * Math.random();

	// Shadowを適用
	bitmap.shadow = new createjs.Shadow("rgba(0, 0, 0, 0.5)", 0, 0, 5);
	this.stage.addChild(bitmap);

	this.stage.update();

	//TweenJS でトゥイーンさせる
	createjs.Tween.get(bitmap).to({alpha: 1}, 1000);
}

Main.prototype.handleFileLoad = function(e) {
	// console.log("handleFileLoad");
	this.setBitmap(e.result);
}

Main.prototype.handleComplete = function(e) {
	// console.log("handleComplete");
}

Main.prototype.resizeEvent = function() {
	this._width = $('body').innerWidth();
	this._height = $('body').innerHeight();

	this.canvas.width = this._width;
	this.canvas.height = this._height;
}

Main.prototype.finalize = function() {

}

function delegate(func, scp) {
	var dlgt = function() {
		return func.apply(scp, arguments);
	}

	dlgt.func = func;
	dlgt.scp = scp;

	return dlgt; 
}

ABOUT ME

名古屋を中心に、フリーランスでホームページ制作してます。 デザイン・サイト制作・WordPress案件・Flash制作、JavaScript(jQuery)と幅広く対応可能です。 案件のご依頼・ご相談はCONTACTよりご連絡ください。

CATEGORIES

ARCHIVES

TAGS