POPSブログ

CreateJS コンテナ継承クラスProgressBar組み込みLoading表示2(easeljs-0.8)

349

  Category:  javascript2015/03/25 pops 

ProgressBarおよびLoading表示は何回か作れば多少効率の良い方法も見つかりますが、コンテナ継承クラスにProgressBar、Loading表示を組み込むのも1つの方法と思います。
以前のLoading表示(archives/347 Loadingクラス3 rotationで回転)を改造しました。

 

CreateJS コンテナ継承クラスProgressBar組み込みLoading表示2(easeljs-0.8)テスト


コンテナ継承クラスですから、クラス内にメソッドを追加すれば、クラス外からの制御などが可能ですから自由な形に設計できます。デザインなどは従来のものと同じですが、下図の様にLoadingを選ぶことが出来ます。


zu

 

DEMO (easeljs-0.8)


CreateJS コンテナ継承クラスProgressBar組み込みLoading表示2(easeljs-0.8)テストデモ、(createJS131.js)

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。
/// 注意、ブラウザ、マシン性能により描画品質などに大きな差が有ります事了承下さい ///


demo


Chrome Opera Firefox Safari(Win) IE9-11で動作確認済み。 Safari(Mac)、は未確認です。


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

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


<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 (HTML5)



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

JS

createJS131.js、JS名は任意に変更可。注意、easeljs-0.8用です。



//日本語
//createJS131.js
//画像FADE/MultiLoadingPackClass
//easeljs-0.8.0 デモ用

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

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

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

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

//TEXT
var text_use="use";

//画像manifestリスト
var manifest=[
	{id:0,src:"/main/images/flight01.jpg"},
	{id:1,src:"/main/images/flight02.jpg"},
	{id:2,src:"/main/images/flight03.jpg"},
	{id:3,src:"/main/images/flight04.jpg"},
	{id:4,src:"/main/images/flight05.jpg"},
	{id:5,src:"/main/images/flight06.jpg"}
];

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

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

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

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

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

//変数
var globalflag=false,timerID=null;

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

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

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

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

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

	//下画像層、空画像コンテナを作る
	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);

	//loadingProgressコンテナを作る
	loadingcontainer=new createjs.Container();
	//インスタンス配置
	//タイプrect.circle.line.arc、分割数、半径、幅、高さ、正転逆転、速度、角度、虹色true、色、色2、BAR設定true、BAR色、BAR透明度
	partsContainer=new MultiLoadingPackClass("circle",12,10,2,10,1,5,75,true,"#EEEEEE","#222222",true,"#FF69B4",1);
	partsContainer.x=canvasWidth/2;
	partsContainer.y=canvasHeight/2;
	loadingcontainer.addChild(partsContainer);
	stage.addChild(loadingcontainer);
	//partsContainer.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!");
	partsContainer.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);

}

//progress中継
function progress(event){
	//LoadingProgressClassの中継
	bar_v=event.loaded;
	partsContainer.draw_progressbar(bar_v);
}

//各画像読み込み完了
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) {

	//Progressbar完全描画
	partsContainer.draw_progressbar(1);

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

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

		//調整
		setTimeout(function() {

			//リスナー削除
			partsContainer.remove();
			//非表示
			partsContainer.visible=false;

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

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

		},1000);
	}
}

//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);

}

//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;
}

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

//タイプrect.circle.line.arc、分割数、半径、幅、高さ、正転逆転、速度、角度、虹色true、色、色2、BAR設定true、BAR色、BAR透明度
//("circle",12,10,2,10,1,5,75,true,"#EEEEEE","#222222",true,"#FF69B4",1);
(function(){

//shapetype,split,radius,width,height,rotateflag,angle,partsAngle,rainbowColor,color,color2,bar,barcolor,baralpha
function MultiLoadingPackClass(_shapetype,_split,_radius,_width,_height,_rotateflag,_angle,_partsAngle,_rainbowColor,_color,_color2,_bar,_barcolor,_baralpha) {

	this.Container_constructor();

	//LOADING
	this.shapetype=_shapetype;
	this.backc=_color;
	this.backc2=_color2;
	this.count=_split;
	this.radius=_radius;
	this.parts_w=_width;
	this.parts_h=_height;
	this.rotateflag=_rotateflag;
	this.angle=_angle;
	this.partsAngle=_partsAngle;
	this.rainbowColor=_rainbowColor;

	this.stopNo=1;//停止用
	this.alphaflag=false;//透明度変化
	this.back=false;//背景未使用
	this.arc_w=1;//1-3、arcの長さを倍にする、1

	this.plusAngle=0;//ラジアン
	//補正、0では困る
	if(this.rotateflag == 0){this.rotateflag=1;}

	//BAR
	this.bar=_bar;
	this.barcolor=_barcolor || "#FF0000";
	this.baralpha=_baralpha || 1;

	//SET-UP
	if(this.bar) {
		this.setup_progressbar();
	}
	this.setup();
}

var p=createjs.extend(MultiLoadingPackClass,createjs.Container);
var parts_chip=[];
var ring;
var progressbar;
var progtext;
var bar_v=0;

p.setup=function(){

ring=new createjs.Container();//loadingホルダー
this.addChild(ring);

	var alpha=1/this.count;//透明度変化用
	var arc_angle=Math.PI*2/this.count;

	//描画データ
	var cx,cy;
	var cAngle=0;//-Math.PI/2-(Math.PI*2/this.count);
	var nAngle=0;

	//描画位置、360度で配置
	nAngle=Math.PI*2/this.count;
	var chipflag=1;
	var parts_angle=0;

	//パーツ作成
	for (var i=0; i < this.count; i++){

		if (this.rainbowColor) {
			this.backc=createjs.Graphics.getHSL(i/this.count*360,100,50);//直接
			this.backc2=createjs.Graphics.getHSL(i/this.count*360,80,10);//直接
		}

		//2色交互に着色、Lineの場合有効、未使用
		//if (i%2!=0) {this.backc="#CCCCCC";}
		//else{this.backc="#FF0000";}

		//図形用インスタンス配置コンテナ
		//内部図形/角丸は無し
		var s=new createjs.Shape();
		s.id=i;
		if(this.shapetype=='rect'){
			//Rect/角
			s.graphics.beginLinearGradientFill([this.backc,this.backc2],[0,0.5],0,0,0,this.parts_h).drawRect(-this.parts_w/2,-this.parts_h/2,this.parts_w,this.parts_h);
		}
		if(this.shapetype=='circle'){
			//Ellipse/円も可能
			s.graphics.beginLinearGradientFill([this.backc,this.backc2],[0,0.5],0,0,0,this.parts_h).drawEllipse(-this.parts_w/2,-this.parts_h/2,this.parts_w,this.parts_h);
		}
		if(this.shapetype=='line'){
			//Line/色はbackcのみ使用グラデはなし
			s.graphics.ss(this.parts_w,"round").s(this.backc).moveTo(0,-this.parts_h/2);
			s.graphics.lineTo(0,this.parts_h/2);
		}
		if(this.shapetype=='arc'){
			//Arc
			s.graphics.ss(this.parts_w,"butt").s(this.backc);
			s.graphics.arc(-this.radius,0,this.radius,0,arc_angle*this.arc_w);//長さ可変
		}

		//alpha
		if(this.alphaflag){s.alpha=alpha*(i+1);}

		//外周配置/正逆補正
		cAngle +=nAngle*this.rotateflag;
		//XY
		cx=Math.cos(cAngle+this.plusAngle)*this.radius;
		cy=Math.sin(cAngle+this.plusAngle)*this.radius;

		//配置角度取得角度修正
		parts_angle=Math.atan2(cy,cx);
		s.rotation=(this.rotateflag*this.rotateflag*parts_angle*180/Math.PI+this.partsAngle);
		//外周配置実行
		s.x=cx;
		s.y=cy;
		//配列に保存
		parts_chip[i]=s;
		//パーツを纏める
		ring.addChild(parts_chip[i]);

	}

	//コンテナクラスにadd
	this.addChild(ring);
	//ON-Listener
	this.on("tick",this.rotate_item);

};

//bar
p.setup_progressbar=function(){

	//ProgressBar
	progressbar=new createjs.Shape();
	progtext=new createjs.Text("0","10px Arial","#FFFFFF");
	progtext.x=0;
	progtext.y=20;
	progtext.maxWidth=80;
	progtext.textAlign="center";
	progtext.shadow=shadow;//shadow
	//alpha
	progressbar.alpha=this.baralpha;
	//addChild
	this.addChild(progressbar,progtext);

	//ON-Listener
	this.on("tick",this.draw_progressbar);

};

//Progressbar-Listener
p.draw_progressbar=function(v){
	bar_v=v;
	if(bar_v > 0) {
		progressbar.graphics.clear();
		progressbar.graphics.setStrokeStyle(8,"butt").beginStroke(this.barcolor);
		progressbar.graphics.arc(0,0,40,-Math.PI/2,Math.PI*2*bar_v-Math.PI/2);
		progtext.text=Math.floor(bar_v*100);
	}
};

//Tick-Listener
p.rotate_item=function(event){

	//rotation加算/停止処理
	ring.rotation +=this.angle*this.stopNo;
};

//start
p.start=function(){
	this.setup();
}
//control
p.clear=function(){
	this.removeAllChildren();
};
p.loading_show=function(v_v){
	if(v_v){ring.visible=true;}
	if(!v_v){ring.visible=false;}
};
p.progressbar_show=function(v_v){
	if(v_v){progressbar.visible=true;}
	if(!v_v){progressbar.visible=false;}
};
p.remove=function(){
	this.removeAllEventListeners();//リスナー削除できる
	//this.visible=false;//非表示出来る
};

window.MultiLoadingPackClass=createjs.promote(MultiLoadingPackClass,"Container");

}());

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

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

注釈文を削除すれば、幾分早くなります。
画像使用の場合、登録画像パスは当方の例です。使用の際は環境に合わせて下さい。


CSS

createJS131.css、CSS名は任意に変更可


/*日本語 createJS131.css*/

#demo-wrap {
position:relative;
width:auto;
height:350px;
text-align:center;
}

#image-box {
/*position:absolute;*/
position:relative;
top:0;left:0;
width:640px;
height:300px;
padding:0;
margin:0 auto;
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;
}
#btn-box {
width:640px;
height:50px;
margin:10px auto;
padding:0;
}

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

当方のサンプルの例です。


 

簡単な説明


zu

 

コンテナ継承クラスのLoading表示を作る

 

1. ProgressBar組み込みLoadingにします。
2. 多くのデザインが使用できるようにします。
(Loading直下の背景は削除しました)
3. 必要に応じて制御できるように制作します。
4. 改造などは自由です。


以前のコンテナ継承クラスのLoading表示を改造

「前々ページ」の「コンテナ継承クラスのLoading」をソノママ利用して、ProgressBarを組み込んだものです。詳細は下記ページを参照ください。

rotationタイプのLoading表示。

【参照】当方の記事: CreateJS コンテナ継承クラスのLoading表示3(easeljs-0.8)


ProgressBar組み込みLoading一体形の書式

従来から利用してきたライン描画の簡単なLoadingであるが、コンテナ継承クラスにProgressBar組み込み、一体形として作って配置する。部材が配置されLoadingリスナー設定がなされます。
ここでは階層用コンテナloadingcontainerを配置して、この中に「コンテナ継承クラス」のインスタンスをaddする。



//タイプrect.circle.line.arc、分割数、半径、幅、高さ、正転逆転、速度、角度、虹色true、色、色2、BAR設定true、BAR色、BAR透明度
partsContainer=new MultiLoadingPackClass("circle",12,10,2,10,1,5,75,true,"#EEEEEE","#222222",true,"#FF69B4",1);

設定は簡単にしました、その他の詳細設定、改造などは自由です。
「前ページ」の改造ですから、操作なども同じになります。


loadingcontainerコンテナにpartsContainerを作って配置。名前はなんでも良いがあとで中のメソッドを操作するので、グローバルでインスタンスを作ったほうが良い。
これで、ProgressBarとLoadingが作られて、中にリスナーが設定され、Loadingが回転する。

「コンテナ継承クラス」のインスタンス名などの呼称は自由です。ここでは MultiLoadingPackClass とします。



var loadingcontainer;
var partsContainer;

---------------------------------------------------
//loadingProgressコンテナを作る
loadingcontainer=new createjs.Container();
//タイプrect.circle.line.arc、分割数、半径、幅、高さ、正転逆転、速度、角度、虹色true、色、色2、BAR設定true、BAR色、BAR透明度
partsContainer=new MultiLoadingPackClass("circle",12,10,2,10,1,5,75,true,"#EEEEEE","#222222",true,"#FF69B4",1);
partsContainer.x=canvasWidth/2;
partsContainer.y=canvasHeight/2;
loadingcontainer.addChild(partsContainer);
stage.addChild(loadingcontainer);

以下、「コンテナ継承クラス」のインスタンス名を「partsContainer」と呼称して説明します。


回転速度

rotation回転は一般に回転が滑らかでは有りませんし(マシン性能に左右されます)、グラフイック違いで回転速度に差が生じますので、確認の上適当に調整ください。


ProgressBarの設定と制御

ProgressBarの描画はソノママでは何もしないので、ローダーのprogress設定と連携させなければならない。
event.loadedの値は 0-1 の読み込みファイルの値(読み取り専用の値)であるので、その値を取得して「コンテナ継承クラス」のメソッドdraw_progressbar()にアクセスして描画させる。この辺の設計は自由である。


● ローダーのprogressリスナー設定


loader=new createjs.LoadQueue(true,"","");
//progress
loader.on("progress",progress);
略す
loader.loadManifest(manifest);

● progressリスナー値で「コンテナ継承クラス」のProgressBar描画


//progress中継
function progress(event){
	//LoadingProgressClassの中継
	bar_v=event.loaded;
	partsContainer.draw_progressbar(bar_v);
}

再度、同じローダーを利用する場合に、以前のloadedの値が残っていて一瞬その値でProgressBar描画が行われる場合がある。ローダー実行の途中で正しく描画はされますが...


ProgressBarを直接描画も出来ます。
直接修正したり、描画をクリアしたりする事が可能です。0-1の値の引数でアクセスします。

ローダーのprogressが読み取れない場合にもProgressBarを描画できます。


partsContainer.draw_progressbar(0);
partsContainer.draw_progressbar(1);

Loadingの操作

使用が終了したらリストから削除するのが懸命ですが、状況によってはLoadingのみ非表示にしたり、リスナーを削除したい場合も有ります。次の様にすれば個別に制御できます。

操作し易い様に、メソッドを事前に作っておく事が重要であり、設計は自由です。



Loading表示切替
partsContainer.loading_show(true);
partsContainer.loading_show(false);

ProgressBar表示切替
partsContainer.progressbar_show(true);
partsContainer.progressbar_show(false);

リスナー削除
partsContainer.remove();

-------------------------------------------

メソッドの記述例

p.loading_show=function(v_v){
	if(v_v){ring.visible=true;}
	if(!v_v){ring.visible=false;}
};
p.progressbar_show=function(v_v){
	if(v_v){progressbar.visible=true;}
	if(!v_v){progressbar.visible=false;}
};
p.remove=function(){
	this.removeAllEventListeners();//リスナー削除できる
	//this.visible=false;//非表示出来る
};

● Loading回転の停止も可能です。別段意味ありませんが。


//停止
partsContainer.stopNo=0;
//回転
partsContainer.stopNo=1;

● メソッド以外での表示非表示も可能です。


//partsContainerコンテナ非表示
partsContainer.visible=false;

階層配置コンテナ非表示
loadingcontainer.visible=false;

スタートの操作

標準では、インスタンスを作ればすぐにLoadingを作ります。スタートの操作で設定変更を行う事が出来る。


標準ではすぐにthis.setup()に進む。


//SET-UP
if(this.bar) {
	this.setup_progressbar();
}
this.setup();

設定を変更してsetup()に進む方法を取れば、外からクラス内の設定変更出来るので、その後外部操作でスタートさせるのも1つの方法です。
外部JSファイルとして読み込む場合は、引数以外の変更など出来るので、少し便利です。


//SET-UPを変更
if(this.bar) {
	this.setup_progressbar();
}
//this.setup();

----------------------------------------------

透明度変化設定を変更してthis.setup()に進む
partsContainer=new MultiLoadingPackClass(.......);
partsContainer.alphaflag=true;
partsContainer.start();

----------------------------------------------
//start
p.start=function(){
	this.setup();
}

直接「コンテナ継承クラス」を削除する

上記の例では「コンテナ継承クラス」のメソッドで操作してきましたが、配置した「コンテナ継承クラス」を直接削除しても構わない。削除に伴い、中のリスナー設定なども同時に削除される。

但し、グラフイックなどのオブジェクトは残っていますので、再度同じ「コンテナ継承クラス」を使用する」場合はグラフイックのクリアを実行しないと前のグラフイックに重ね描きされる恐れが有ります。(余り再度利用はないと思いますが)



階層用コンテナloadingcontainerの中を削除
loadingcontainer.removeAllChildren();

「コンテナ継承クラス」を直接削除
partsContainer.removeChild();

以上は、このデモJSの場合ですが、全て設計次第であり個人の好みに作り変えればより効率的に成ります。


画像ロード完了とリスナー削除のタイミング

画像ロード完了で通常completeリスナーを実行しますが、ProgressBar描画完了のタイミングでは有りませんので、
この時点ではまだ最後のProgressBar描画がなされていません。
よって、各種リスナーの削除などは、ProgressBar描画完了を確認してから行う必要があります。
色々な状況次第で条件が違ってきますので、臨機応変に対処します。


1. 処理を遅延させて調整するのも方法のひとつ。
2. 先に、強制的にProgressBar描画を実行する。
3. 使用が終了したリスナーは削除した方が良いが使用者の判断です。



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

	//Progressbar完全描画
	partsContainer.draw_progressbar(1);

	略す

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

		//調整
		setTimeout(function() {

			//リスナー削除
			partsContainer.remove();
			//非表示
			partsContainer.visible=false;

			略す

		},1000);
	}
}

ProgressBar、Loadingのアップデート

原則、「コンテナ継承クラス」で描画変更のアップデートはしません。(stage.update()のTickerは1つが理想)
ステージのstage.update()を利用しますので、下記の様に適当な位置でTickerを設定ください。



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

----------------------------------------------------

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

継承クラスファイルの読み込み

JSに付属させるか、または外部JSファイルとして保存しておき、随時読み込みます。
JSが長くて困るかたは、外部JSファイルとして読み込めば長さなど判らなくなります。とても不思議ですね。



適当な名前で保存して読み込む

<script type="text/javascript" src="js/chotto-hidarimaki.js"></script>

Loadingの改造

標準では多くの形の回転形態を得ることができます。好みの形にしぼればJSも短く簡素になります。
改造などは自由です。


原型となった、rotationタイプのLoading表示。(Loading表示のみです)

【参照】当方の記事: CreateJS コンテナ継承クラスのLoading表示3(easeljs-0.8)

Ladingデザイン(1種類)が簡単なProgressBar組み込みLoading表示。

【参照】当方の記事: CreateJS コンテナ継承クラスProgressBar組み込みLoading表示(easeljs-0.8)



一応、完動しますが全てテストです。効率化のため、予告無くJSなど修正する場合がありますので了承下さい。

CreateJSは結構「仕様」が変わりますので特に注意が必要です。


結構効率的になりました。以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]