POPS WEB KOUBOU

CreateJS 「Tickerクラス」addEventListener のテスト

HTML5-DEMO-006


DEMO: CreateJS 「Tickerクラス」addEventListener のテスト(スライドショウ、タイマー形式、createJS008.js)


ページ表示後、画像を全て読み込み最初の画像を表示します。以後8秒間隔で6枚の画像が表示されます。easeljs-0.8.0 デモ用

 

 

 

CreateJSを利用して、HTML5のCanvasで画像をフエードさせます。createjs.Ticker.addEventListener()使用のサンプルです。

easeljs-0.8.0.jsを使用しています。動作は、HTML5、Canvas対応ブラウザに限定されます。


以下にDEMOの HTML JS CSS を掲載する。但し、あくまでもテスト的なもので、JSは予告無しに修正する場合があります。


ライブラリの読み込み

ダウンロードしたJSを使用する場合。記述は一例です。(バージョン 0.8 使用)


<script type="text/javascript" src="js/easeljs-0.8.0.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.6.0.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.6.0.min.js"></script>

重要、バージョン違いでは動かない場合が有りますので必ず合わせて下さい。


HTML


<div id="image-box" class="radius">
	<canvas id="mainCanvas" width="640" height="300"></canvas>
</div>


JS

createJS008.js 名前は自由に変更できます。画像などのパスは当方の例ですから変更下さい。(easeljs-0.8.0 デモ用)



//日本語
//createJS008.js
//easeljs-0.8画像クロスフェード表示スライドショウ
//easeljs-0.8.0 デモ用/createJS120.js改造

//------------------------------------------------------
//初期設定

var speed=1000;//拡大移動、アニメ速度
var delay_speed=2000;//1000-5000最初の遅延用に使用
var slide_time;//未使用

//canvasの大きさ/全てこの値を使用
var canvasWidth=640;
var canvasHeight=300;

//タイマーの使用/常時使用、判定なし
var timer_use;
//タイマー値 5000-10000
var time=8000;

//clickbtnの使用
var clickbtn_use="use";//未使用
//Loading AUTOの文字を表示するかuse
var text_use="use";

//画像manifestリスト
var manifest=[
	{id:0,src:"/main/images/flower01.jpg",id:"PHOTO"},
	{id:1,src:"/main/images/flower02.jpg",id:"PHOTO"},
	{id:2,src:"/main/images/flower03.jpg",id:"PHOTO"},
	{id:3,src:"/main/images/flower04.jpg",id:"PHOTO"},
	{id:4,src:"/main/images/flower05.jpg",id:"PHOTO"},
	{id:5,src:"/main/images/flower06.jpg",id:"PHOTO"}
];

//最初の画像0のこと
var image_no=0;
//画像数
var image_max;

//------------------------------------------------------

//ステージ
var stage;
//Loader
var loader;
//コンテナ
var container,backcontainer,loadingcontainer,progresscontainer;
//画像
var welcomeImage,mainImage,backImage,topImage;
var logoImage;
//Loading関連
var loadingShape,progressbar,progtext,bar_v;
//TEXT
var viewtext;

//読み込み画像の大きさcanvasと同じ
var imageW=canvasWidth;
var imageH=canvasHeight;

//読み込み画像result保存容器
var assets=[];

//変数
var globalflag=false,timerID=null;
//loading変数未使用
var loading=false;

//shadowフィルター
var shadow=new createjs.Shadow("#000000",0,0,4);
var once=true;

//画像ロード完了フラグ
var imgloadflg01=false;
var imgloadflg02=false;

//ステージ周りセット
function init() {

	//ステージ
	stage=new createjs.Stage('mainCanvas');
	//MouseOver重要
	//stage.enableMouseOver(20);

	//バックRect/最下位色背景層、無くとも良い
	var backrect=new createjs.Shape();
	backrect.graphics.beginFill("#EEEEEE").drawRect(0,0,canvasWidth,canvasHeight);
	stage.addChild(backrect);

	//welcome画像層画像表示後にロード
	welcomeImage=new createjs.Bitmap();
	stage.addChild(welcomeImage);

	//LOGO-Image
	logoImage=new createjs.Bitmap();
	logoImage.x=50;
	logoImage.y=15;
	stage.addChild(logoImage);
	logoImage.visible=false;//非表示

	//POPS-Image
	popsImage=new createjs.Bitmap();
	popsImage.x=50;
	popsImage.y=55;
	stage.addChild(popsImage);
	popsImage.visible=false;//非表示

	//1
	var bkloader=new createjs.ImageLoader("/main/images/lady_back2.png",false);//640x300
	bkloader.addEventListener("complete",function(event) {
		welcomeImage.image=new createjs.Bitmap(event.result).image;
		stage.update();
	});
	bkloader.load();
	//2
	var bkloader2=new createjs.ImageLoader("/main/images/textimg02.png",false);//240x40
	bkloader2.addEventListener("complete",function(event) {
		//画像ロード完了フラグ
		imgloadflg01=true;
		logoImage.image=new createjs.Bitmap(event.result).image;
		stage.update();
	});
	bkloader2.load();
	//3
	var bkloader3=new createjs.ImageLoader("/main/images/textimg01.png",false);//340x50
	bkloader3.addEventListener("complete",function(event) {
		//画像ロード完了フラグ
		imgloadflg02=true;
		popsImage.image=new createjs.Bitmap(event.result).image;
		stage.update();
	});
	bkloader3.load();

	//下画像層、空画像コンテナを作る
	backcontainer=new createjs.Container();
	backImage=new createjs.Bitmap();
	backcontainer.addChild(backImage);
	stage.addChild(backcontainer);

	//上画像層、空コンテナを作る
	container=new createjs.Container();
	topImage=new createjs.Bitmap();
	container.addChild(topImage);
	stage.addChild(container);

	//loadingコンテナを作る
	loadingcontainer=new createjs.Container();
	stage.addChild(loadingcontainer);
	//LOADINGを作る
	loadingShape=loadingIndicator3();
	loadingShape.x=canvasWidth/2;
	loadingShape.y=canvasHeight/2;
	//コンテナに貼り付け
	loadingcontainer.addChild(loadingShape);
	loadingcontainer.visible=false;//非表示

	//ProgressBar
	progresscontainer=new createjs.Container();
	progressbar=new createjs.Shape();
	progtext=new createjs.Text("0","12px Arial","#FFFFFF");
	progtext.x=0;
	progtext.y=15;
	progtext.maxWidth=80;
	progtext.textAlign="center";
	progtext.shadow=shadow;//shadow
	//alpha
	progressbar.alpha=0.5;
	//addChild
	progresscontainer.x=canvasWidth/2;
	progresscontainer.y=canvasHeight/2;
	progresscontainer.addChild(progressbar,progtext);
	stage.addChild(progresscontainer);
	progresscontainer.visible=false;//非表示

	//簡易TEXT
	viewtext=new createjs.Text("","12px Arial","#FFFFFF");
	viewtext.x=20;
	viewtext.y=15;
	viewtext.maxWidth=canvasWidth-40;
	viewtext.lineHeight=20;
	viewtext.textBaseline="bottom";
	viewtext.shadow=shadow;//SHADOW処理
	stage.addChild(viewtext);
	//一旦ステージ表示
	stage.update();

	//MAIN-Ticker設定
	createjs.Ticker.setFPS(30);
	createjs.Ticker.addEventListener('tick',tick);

	//delay_speed調整
	setTimeout(function() {

		//画像ロードに進む
		bulkload();
	},delay_speed);

}

//bulk-load、画像一括ロード
function bulkload() {

	set_text("Loading Now!");

	//Loading-Listener設定
	createjs.Ticker.addEventListener('tick',loadingShape_tick);
	//ProgressBar-Listener設定
	createjs.Ticker.addEventListener('tick',progressBar_tick);
	//ProgressBar
	bar_v=0;
	progresscontainer.visible=true;//表示
	loadingcontainer.visible=true;//表示

	//Loaderを作る/エラー対処ならtrue設定Anonymous
	loader=new createjs.LoadQueue(true,"","");//falseはエラー対処が出来ない
	//progress
	loader.on("progress",progress);
	//loader EventListener設定
	loader.on("fileload",fileload);
	loader.on("error",error);
	loader.on("complete",complete);
	//Manifestを使用、manifest読み込み開始
	loader.loadManifest(manifest);

}

//各画像読み込み完了
function fileload (event) {
	var id=event.item.id;
	assets.push(event.result);
}
//エラーerror
function error (event) {
	//var id=event.item.id;
	//エラー画像をassets容器に保存
	//assets.push(createColorCanvas(canvasWidth,canvasHeight,"#333333"));
}

//全ての画像読み込み完了
function complete (event) {

	//画像数確認、再計算
	image_max=assets.length;
	//簡易TEXT
	set_text("Loading End!")
	//loader Listener停止
	loader.off("fileload",fileload);
	//loader.off("error",error);
	loader.off("complete",complete);

	//loading EventListener削除
	createjs.Ticker.removeEventListener('tick',loadingShape_tick);
	//非表示でも良い
	loadingcontainer.visible=false;

	//画像があれば、最初の画像表示
	if (image_max) {

		//調整
		setTimeout(function() {

			//遅延progressbar最後の前にcompleteが反応する
			loader.off("progress",progress);
			//progressTicker停止
			createjs.Ticker.removeEventListener('tick',progressBar_tick);
			//progress非表示
			progresscontainer.visible=false;

			//簡易TEXTクリア
			set_text("");
			//viewtext.visible=false;

			//LOGO表示に進む
			show_logo();
			//画像表示に進む
			//draw();

		},1000);
	}
}

//LOGO表示
function show_logo() {

	//LOGO-ANIME
	//POPS-FadeIn
	if(imgloadflg02) {
		popsImage.alpha=0;
		popsImage.visible=true;
		//TWEENの実行
		var tw2=createjs.Tween.get(popsImage)
		.to({alpha:1},1000);
	}
	//LOGO-Slide
	if(imgloadflg01) {
		logoImage.x=640;
		logoImage.visible=true;
		//TWEENの実行
		var tw1=createjs.Tween.get(logoImage)
		.to({x:50},2000);
	}

	//調整
	setTimeout(function() {

		logoImage.visible=false;//非表示
		popsImage.visible=false;//非表示

		//画像表示に進む
		draw();

	},5000);
}

//DRAW、アニメ
function draw() {

	globalflag=false;

	//画像result取得/Tween後も使用する
	mainImage=assets[image_no];

	//上画像更新画像Bitmap挿入
	topImage.visible=false;
	topImage.image=new createjs.Bitmap(mainImage).image;
	//FADE透明度0
	topImage.alpha=0;
	topImage.visible=true;

	//TWEENの実行
	var tw=createjs.Tween.get(topImage)
	.to({alpha:1},speed)
	.wait(200)
	.call(finshtween);

}

//フェードアニメ完了
function finshtween () {

	//Tween全てが完了してから下画像表示
	backImage.image=new createjs.Bitmap(mainImage).image;
	//上画像非表示
	topImage.visible=false;

	//アニメ作業中である、現在は未使用
	globalflag=true;

	//画像処理に時間がかかるので、少し遅延させる、あったほうが良い
	setTimeout(function() {

		//タイマー常時使用
		set_timer();

	},500);

}

//progressBar
function progress(event) {
	//loadedのみ効く
	bar_v=event.loaded;
}
//progressbar-tick
//bar_v判定tickを設定(butt round)/90度是正-Math.PI/2
function progressBar_tick(){
	if(bar_v > 0) {
		progressbar.graphics.clear();
		progressbar.graphics.setStrokeStyle(8,"butt").beginStroke("#FF69B4");
		progressbar.graphics.arc(0,0,40,-Math.PI/2,Math.PI*2*bar_v-Math.PI/2);
		progtext.text=Math.floor(bar_v*100);
		stage.update();
	}
}

//loadingShape-tick
function loadingShape_tick(){
	loadingShape.rotation +=5;
}

//tickステージ
function tick(event) {
	stage.update();
}

//次ぎの開く要素を計算
function next_set() {

	//次ぎの番号
	image_no +=1;
	if (image_no > (image_max-1)) {image_no=0;}
	draw();

}

//タイマー
function set_timer() {

	//一旦切ってからセット
	clearTimeout(timerID);
	timerID=setTimeout(next_set,time);
}

//VIEWTEXT
function set_text(t) {
	if (text_use=='use') {
		viewtext.text=t;
	}
}

//幅、高さ、画像
function createImgCanvas(w,h,patternimg) {
	//Box
	var canvas=document.createElement("canvas");
	//指定の大きさになる
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.drawImage(patternimg,0,0,w,h);

	return canvas;
}

//色付きcanvasを作る
function createColorCanvas (w,h,c) {
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.fillStyle=c;
	ctx.fillRect(0,0,w,h);
	return canvas;
}

//簡単なLOADING3
function loadingIndicator3 () {

	//graphicのスタイル
	var graphics=new createjs.Graphics();
	graphics.setStrokeStyle(2,"round");//round

	//描画データ
	var alpha_v=1;//透明度
	var alphaback;

	var cx,cy;
	var numNeedles=12;
	var innerR=15;
	var outerR=10;
	var cAngle=-Math.PI/2;
	var nAngle;

	//ライン描画
	nAngle=Math.PI*2/numNeedles;
	for (var i=0; i < numNeedles; i++){

		//回転補正
		rotateflag=cAngle -=nAngle;
		//透明度を描画毎に変更
		if (i > 0) {alpha_v -=0.05;}

		//#CCCCCC
		alphaback=createjs.Graphics.getRGB(204,204,204,alpha_v);
		cx=Math.cos(cAngle)*innerR;
		cy=Math.sin(cAngle)*innerR;
		graphics.beginStroke(alphaback).moveTo(cx,cy);
		cx=Math.cos(cAngle)*outerR;
		cy=Math.sin(cAngle)*outerR;
		graphics.lineTo(cx,cy);

	}
	//Shapeに格納
	var s=new createjs.Shape(graphics);
	return s;
}

//--------------------------------------------------------------------------------------

//START
window.onload=function() {
	init();
}


CSS

createJS008.css 名前は自由に変更できます。


/*日本語 createJS008.css*/

#image-box {
position:relative;
top:0;left:0;
width:640px;
height:300px;
margin:0 auto;
padding:0;
box-shadow:0 0 10px #000;
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
-o-box-shadow:0 0 10px #000;
-ms-box-shadow:0 0 10px #000;
background-color:#000000;
}

#image-box #mainCanvas {
border-radius:10px;
}
canvas {
border-style:none;
background-color:transparent;
}

.radius {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-box-border-radius:10px;
-ms-border-radius:10px;
}


画像など

原則使用する画像などは使用者がご用意クダサイ。


[ サンプル使用画像の表示 ]

 

 

 

詳細は記事のページを参照ください。