POPSブログ

CreateJS ボタンでその都度、任意に画像を読み込みクロスフェード表示する

257

  Category:  javascript2013/10/28 pops 

今までは複数画像を、「一括で読み込み」していましたが、ボタンでその都度、「任意に画像を読み込み」表示する方式にして見ました。画像取得に失敗した場合は、代替キャンバス要素を表示します。
easeljs-0.7 でのテストです。

 

CreateJS 任意に画像を読み込みクロスフェード表示するテスト


代替画像を埋め込むのが面倒で有り、代替画像が無ければボタン周りの処理が複雑になるので作る気が無く、今までは全て「画像一括読み込み」方式でした。
キャンバス要素を代替画像にする事により処理が簡単になります。


[説明図]

 

1. 任意にボタンを押し、押された画像を1枚ロードして表示します。
2. 画像取得に失敗した場合は、代替画像(キャンバス要素)を表示します。
3. 一括読み込みでは無いので、画像数が多い場合に有効な方式です。

 

DEMO


CreateJS 画像フェード ボタンで任意に画像を読み込み表示するテストデモ、(createJS042.js)

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


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


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

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


<script type="text/javascript" src="js/easeljs-0.7.0.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.5.0.min.js"></script>

重要、バージョン違いでは動かない場合が有りますので必ず合わせて下さい。
このデモでは preloadjs を使用していません。
LoadQueue()利用の場合は preloadjs の読み込みが必要です。


HTML (HTML5)


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

JS

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


//日本語
//createJS042.js
//crossfade、Image()オブジェクトで読み込み
//easeljs-0.7用、任意画像ロード

//------------------------------------------------------
//firefox判定
var userAgent = window.navigator.userAgent.toLowerCase();
var firefox=false;
if (userAgent.indexOf("firefox") > -1) {firefox=true;}
//------------------------------------------------------

//初期設定

var speed=1200;//アニメ速度
//canvasの大きさ/全てこの値を使用
var canvasWidth=640;
var canvasHeight=300;
//最初の画像表示までの遅延時間
var wait_time=3000;//3000-8000
//TEXTの使用
var text_use="use";

//画像リスト/manifestでは無い
var imagelist=[
	"/main/images/toyota_car10.jpg",
	"/main/images/toyota_car11.jpg",
	"/main/images/toyota_car12x.jpg",
	"/main/images/toyota_car13.jpg",
	"/main/images/toyota_car15.jpg",
	"/main/images/toyota_car16.jpg"
];

//最初の画像0のこと
var image_no=0;
//画像登録数
var image_max=imagelist.length;

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

//ステージ
var stage;
//コンテナ
var container;
var backcontainer;
//welcome画像
var welcomeImage;
//画像result
var mainImage;
//下画像
var backImage;
//上画像
var topImage;
//エラー画像
var errorImage;
//Loading
var loadingShape;
//TEXT
var viewtext;
//ボタン
var btncontainer;
var myhitBtn=[];

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

//変数/未使用
var globalflag=false;
//loading変数削除
//クリック停止判定
var stopClick=true;

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

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

	//STAGE
	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);
	stage.update();

	//welcome画像層画像表示
	welcomeImage=new createjs.Bitmap();
	stage.addChild(welcomeImage);

	var img=new Image();
	img.src='/main/images/welcome_back4.jpg';
	img.onload=function () {
		welcomeImage.image=new createjs.Bitmap(img).image;
		stage.update();
	};

	//下画像層、空画像コンテナを作る/寸法設定なくともOK
	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を作る
	loadingShape=loadingIndicator();
	loadingShape.x=canvasWidth/2;
	loadingShape.y=canvasHeight/2;
	//ステージに貼り付けtickを分離
	stage.addChild(loadingShape);
	loadingShape.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);

	//角丸ボタンcontainer
	btncontainer=new createjs.Container();
	btncontainer.x=60;
	btncontainer.y=320;
	stage.addChild(btncontainer);
	btncontainer.visible=false;

	//ボタンを作る
	roundRectBtns(image_max);

	//上が白で下が、指定色のグラデーション代替画像を作る
	var gradient_data={x0:0,y0:canvasHeight/2,x1:0,y1:0};
	//幅、高さ、色、色2、DATA、フォント作る、文字種、サイズ、文字色、ストリング
	errorImage=createGradientCanvas2 (canvasWidth,canvasHeight,"#000000","#FFFFFF",gradient_data,true,"Arial","bold 30px","#FFFFFF","IMAGE NONE");
	
	//色付きcanvas
	//errorImage=createColorCanvas (canvasWidth,canvasHeight,"#000000");

	stage.update();
	set_text("START");

	//表示までの調整
	setTimeout(function() {

		btncontainer.visible=true;
		stage.update();
		//任意画像ロードに進む
		imageload();

	},wait_time);

}

//任意画像ロード
function imageload () {

	stopClick=true;

	set_text("Loading Now!");
	//Loading
	set_loading();
	//Loader
	var imgLoader=new Image();
	//画像URL-SET
	imgLoader.src=imagelist[image_no];
	//ONLOAD
	imgLoader.onload=function () {

		set_text("Loaded");
		//Loading
		reset_loading();

		mainImage=imgLoader;
		assets[image_no]=mainImage;//保存

		//画像表示
		draw_image();

	};
	//ERROR代替画像挿入
	imgLoader.onerror=function () {

		//Loading
		reset_loading();
		//ボタンラベルをNONEにする
		var target=myhitBtn[image_no].getChildByName("btntext");
		target.text="NONE";
		//target.text="×";
		//target.text="X";

		//エラー画像
		mainImage=assets[image_no]=errorImage;//保存

		//画像表示
		draw_image();

	};

}

//Loading/重いためsetFPS(5)に変更
function set_loading() {
	//tickを設定
	createjs.Ticker.setFPS(5);
	createjs.Ticker.addEventListener('tick',loadingtick);
	loadingShape.visible=true;
}
function reset_loading() {
	loadingShape.visible=false;
	//tickを削除
	createjs.Ticker.removeEventListener('tick',loadingtick);
}

//クリック処理
function handleclick (event,no) {

	//Loadingアニメ中stopClick
	if (stopClick) {return;}
	//同じ番号は機能しない
	if (image_no == no) {return;}

	//画像番号
	image_no=no;

	//画像保存値が有るか/ブラウザにより効率が悪いので
	if (assets[image_no]) {
		//保存値利用
		mainImage=assets[image_no];
		stopClick=true;
		draw_image();
	} else {
		//任意画像ロード
		imageload();
	}

}

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

	set_text("IMAGE "+(image_no+1));

	//activeボタン、ラベル色変更
	for (var i=0; i < image_max; i++) {
		var target=myhitBtn[i].getChildAt(1);
		//var target=myhitBtn[i].getChildByName("btntext");
		target.color=(i == image_no) ? "#FF0000":"#FFFFFF";
	}
	
	stage.update();

	//上画像更新、透明度0
	var newimage=new createjs.Bitmap(mainImage);
	topImage.alpha=0;
	topImage.image=newimage.image;

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

	//Ticker設定
	createjs.Ticker.setFPS(20);
	createjs.Ticker.addEventListener('tick',tick);

}

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

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

	//上画像に空Bitmap挿入
	var newimage=new createjs.Bitmap();
	topImage.image=newimage.image;
	stage.update();

	//welcome表示中なら削除、遅延して削除している
	if(welcomeImage.visible) {
		stage.removeChild(welcomeImage);
	}

	//アクション待ち
	stopClick=false;

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

		//Ticker削除
		createjs.Ticker.removeEventListener('tick',tick);
		//TEXT-CLEAR
		set_text("CLICK");

	},500);

}

//loading-Ticker
function loadingtick () {
	loadingShape.rotation +=5;
	stage.update();
}
//tick
function tick() {
	stage.update();
}

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

//DRAW-roundRectBtn
function roundRectBtns(len) {

	var btnLabel="PHOTO";//ラベル PHOTO

	var btn_width=60;//幅60
	var btn_height=20;//高さ20
	var c_radius=5;//コーナー半径5
	var btn_spc=10;//ボタン間隔スペース10
	var center=true;//全体の中央補正

	//var labels=[];//ラベル使用しない
	
	var num=len;//数

	for (var i=0; i < num; i++) {

		var label=btnLabel+(i+1);//ラベル
		//x,y,w,h,r,c,label,size,lc,overc,outc
		//RoundRect center補正ボタン
		myhitBtn[i]=createRoundRectBtn_center (-btn_width/2,-btn_height/2,btn_width,btn_height,c_radius,"#FFFFFF",label,"12px","#FFFFFF","#FFA500","#E6E6FA");
		//myhitBtn[i]=createRoundRectBtn_center (-btn_width/2,-btn_height/2,btn_width,btn_height,c_radius,"#FFFFFF",labels,"italic bold 12px","#FFFFFF","#48D1CC","#20B2AA");//italic bold
		myhitBtn[i].cursor="pointer";
		myhitBtn[i].x=(btn_width+btn_spc)*i;
		myhitBtn[i].y=0;
		myhitBtn[i].name="btntext";
		//addChild
		btncontainer.addChild(myhitBtn[i]);
		//クリックアクション
		myhitBtn[i].on("click",handleclick,null,false,i);

	}

	var btnbox_w=myhitBtn[num-1].x-myhitBtn[0].x;
	//中央配置補正
	if (center) {btncontainer.x=(canvasWidth-btnbox_w)/2;}
	stage.update();
}

//create-RoundRectベタ塗り/center補正
function createRoundRectBtn_center (x,y,w,h,r,c,label,size,lc,overc,outc) {

	var font_v=size+" "+"Arial";

	//BTNコンテナ
	var btn=new createjs.Container();
	var s=new createjs.Shape();
	s.graphics.s().beginFill(outc);//本来は色cを使用
	operaRoundRect(s,x,y,w,h,r);
	btn.addChild(s);
	//テキスト以外で使用は注意
	btn.shadow=shadow;
	var tx=new createjs.Text(label,font_v,lc);
	tx.maxWidth=w;
	tx.textAlign="center";
	tx.textBaseline="middle";

	//firefox補正
	if (firefox) {tx.y=1;}
	//opera漢字補正用
	//if (window["opera"]) {tx.y=-1;}

	tx.shadow=shadow;//テキストは濃くなら無い
	tx.name="btntext";//name挿入
	btn.addChild(tx);
	//文字の食み出し防止mask
	//tx.mask=s;

	//rollover
	btn.addEventListener("rollover",function () {
		s.graphics.clear();
		s.graphics.s().beginFill(overc);
		operaRoundRect(s,x,y,w,h,r);
		stage.update();
	});
	//rollout
	btn.addEventListener("rollout",function () {
		s.graphics.clear();
		s.graphics.s().beginFill(outc);
		operaRoundRect(s,x,y,w,h,r);
		stage.update();
	});
	return btn;
}

//代替Canvas
//幅、高さ、色、フォント作る、文字種、サイズ、文字色、ストリング
function createGradientCanvas2 (w,h,c,c2,data,make,font,fsize,fcolor,text) {

	//data
	var x0=data.x0;
	var y0=data.y0;
	var x1=data.x1;
	var y1=data.y1;
	//
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	var gradient=ctx.createLinearGradient(x0,y0,x1,y1);
	gradient.addColorStop(0,c);
	gradient.addColorStop(1,c2);
	ctx.fillStyle=gradient;
	ctx.rect(0,0,w,h);
	ctx.fill();

	if (make) {

		var font_v=fsize +" "+ font;

		ctx.fillStyle=fcolor;
		ctx.font=font_v;
		ctx.textAlign="center";
		ctx.textBaseline="middle";
		ctx.fillText(text,w/2,h/2);

	}

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

//quadraticCurveTo、こちら使用
function operaRoundRect(s,x,y,w,h,r) {
	s.graphics.moveTo(x+r,y)
	.lineTo(x+w-r,y)
	.quadraticCurveTo(x+w,y,x+w,y+r)
	.lineTo(x+w,y+h-r)
	.quadraticCurveTo(x+w,y+h,x+w-r,y+h)
	.lineTo(x+r,y+h)
	.quadraticCurveTo(x,y+h,x,y+h-r)
	.lineTo(x,y+r)
	.quadraticCurveTo(x,y,x+r,y);
}

//簡単なLOADING
function loadingIndicator () {

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

	//描画データ
	var cx,cy,
	numNeedles=12,
	innerR=10,
	outerR=5,
	cAngle= -Math.PI/2,
	nAngle;

	//ライン描画
	nAngle=Math.PI*2/numNeedles;
	for (var i=0; i < numNeedles; i++){
		cAngle +=nAngle;
		cx=Math.cos(cAngle)*innerR;
		cy=Math.sin(cAngle)*innerR;
		graphics.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
init();

注釈文を削除すれば、幾分早くなります。
登録画像パスは当方の場合です。使用の際は環境に合わせて下さい。
マチガイ画像パスにすれば、「ERROR」時の処理状況を確認出来ます。


CSS

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


/*日本語 createJS042.css*/

#demo-wrap {
position:relative;
top:0;left:0;
padding:0;
width:auto;
height:340px;
text-align:center;
}

#image-box {
position:relative;
top:0;left:0;
width:640px;
height:340px;
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:#FFFFFF;
}

#image-box #mainCanvas {
border-radius:10px;
}

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

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


簡単な説明


任意に画像を読み込み表示する

ボタンなどで、任意に画像を読み込み表示するのは簡単なのですが、代替画像を用意するのが面倒であったために作っていなかった。画像を読み込み失敗時の処理も面倒である、、


1. jQuery等では「Loading画像」をクリックで終了さすが、キャンバスの Loading はクリックし難い。
2. 代替画像を用意するのが面倒。(キャンバス要素を使用する方法が判らなかった、単なるアホウ現象)
3. 代替画像なしの場合の画像ロードERROR時、ボタン周りの処理が面倒で、今までは簡単な画像一括ロード方式にしていた。
4. preloadjs の LoadQueue() を使用せずに javascript Image()オブジェクトを利用しました。
5. ロードされた画像は一旦保存して、再度表示にはLoaderを介さないで直接表示処理する。
6. 画像ロード中、アニメ中は「ボタン操作」が出来ないようにしています。
7. ERROR処理はマシン環境などにより長い時間掛かる場合がありますから、多少修正した。
(LoadingのTicker、アニメ、の負荷の原因です、最近の高性能なマシン環境では起きない)
8. キャンバス要素は html5 html5 Canvas の規定で作りますので注意ください。


キャンバス要素を代替画像にする事により処理が簡単になりますので、今回は「任意に画像を読み込み表示する」方式にして見ました。キャンバス要素はグラデーション塗りなどすれば結構きれいですから応用出来る事が多い。


代替画像と取り替える

事前に作ってある「代替画像」をImage()オブジェクト読み込み失敗の時に参照させる。
「ボタンラベルをNONEにする」などの処理の時は、imgLoader処理が完全に終了してから「ボタン操作」をさせないと狂う場合あり、よって実行中は「ボタン」が機能しないようにした。
指定色のグラデーション代替画像などは色、グラデーション方向など操作できます。


ERROR処理はマシン環境などにより負荷が掛かるので、Ticker処理を少し軽くなるようにはしている。


キャンバス要素を CreateJS の Bitmap()化する事が出来る。キャンバス要素は LoadQueue() で得られる、event.result値と同じである。


new createjs.Bitmap(キャンバス要素)

● 指定色のグラデーション代替画像を作る
グラデーションの設定、gradient_data は html5 Canvas の規定によります。


[ 線形グラデーションオブジェクト ]
線形グラデーションオブジェクトを生成する
ctx.createLinearGradient (x0,y0,x1,y1)



上が白で下が、指定色のグラデーション代替画像を作る
var gradient_data={x0:0,y0:canvasHeight/2,x1:0,y1:0};
//幅、高さ、色、色2、DATA、フォント作る、文字種、サイズ、文字色、ストリング
canvasImage=createGradientCanvas2 (canvasWidth,canvasHeight,"#DB7093","#FFFFFF",gradient_data,true,"Arial","bold 30px","#FFFFFF","IMAGE NONE");

上が、指定色で下が黒のグラデーション
var gradient_data={x0:0,y0:canvasHeight,x1:0,y1:canvasHeight*0.6};
//幅、高さ、色、色2、DATA、フォント作る、文字種、サイズ、文字色、ストリング
canvasImage=createGradientCanvas2 (canvasWidth,canvasHeight,"#000000","#DB7093",gradient_data,true,"Arial","bold 30px","#FFFFFF","IMAGE NONE");

第5引数、gradient_dataは、始点と終点、(x0,y0,x1,y1)を {} で記載した
第6引数、フォント作る true 作らない false
第8引数、フォントの 斜体 太さ 大きさ を指定する、例、"italic bold 32px"

● エラー用代替画像を作り、エラー時に使用する
出来た、errorImage は画像と同様に扱える所が便利である。


上が白で下が、指定色のグラデーション代替画像を作る
var gradient_data={x0:0,y0:canvasHeight/2,x1:0,y1:0};
errorImage=createGradientCanvas2 (canvasWidth,canvasHeight,"#000000","#FFFFFF",gradient_data,true,"Arial","bold 30px","#FFFFFF","IMAGE NONE");

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

//任意画像ロード
function imageload () {

	stopClick=true;

	略す

	imgLoader.src=imagelist[image_no];
	//ONLOAD
	imgLoader.onload=function () {

		略す

	};
	//ERROR代替画像挿入
	imgLoader.onerror=function () {

		略す

		//ボタンラベルをNONEにする
		var target=myhitBtn[image_no].getChildByName("btntext");
		target.text="NONE";
		//target.text="X";

		//エラー画像
		mainImage=errorImage;
		assets[image_no]=errorImage;//保存

		//画像表示
		draw_image();
	}
}

詳細は、下記ページの「代替キャンバス要素の利用」を参照下さい。

【参照】当方の記事: CreateJS Graphicsクラスの beginBitmapFill() を考える


LoadingのTickerなどを変更

最近のマシン環境では処理能力があるので発生しないので判らない事ですが、、、
古いマシン環境では画像取得のエラー時に判定から、エラー処理移行するまでに時間がかかる
(errorの判定まで異常に時間がかかる、通常1-2秒が、状況にもよるが8-20秒に成るから事は重大だ!)


Loadingの回転のsetFPS負荷が大きいのが原因なので、修正した。
imgLoader.onerror と Loadingの回転の負荷 は相性がよくない様だ。マシン環境が良いと見過ごすので注意。


1. Loading をLoading階層コンテナに収納していたのを、直接ステージに配置。
2. Loading の EventListener() をLoadingを表示しない時は削除する。
3. Ticker の FPS を setFPS(5) に変更して負荷を抑えた。(通常はsetFPS(20)位で使用している)


Loadingが回転無しなら問題はないが、それでは何となく寂しい。
結果的に軽快な回転では無く「ヨレヨレ回転」になってしまったが、処理時間はほぼ正常になった。一件落着!。


上画像層と下画像層

当方の画像関連のエフェクトは、上画像層と下画像層を旨く操作して処理する事が多いので、この形態で1つ作れば「ボタンでその都度、任意に画像を読み込み表示」する方式の「テンプレート」に成ります。


ラベル中央配置のボタンを作る

ボタンは textAlign="center"、textBaseline="middle"、で文字を中央に配置しています。大きさ、間隔など変更可能です。画像数、ラベル等により適正に配置できます。適当に状況に合わせて修正します。
「唐獅子牡丹」「緋桜牡丹」は日本古来の「装飾ボタン」ですが、「ボタンの掛け違え」かも知れません。


● 角丸ボタンの例


function roundRectBtns(len) {

	var btnLabel="PHOTO";//ラベル

	var btn_width=60;//幅
	var btn_height=20;//高さ
	var c_radius=5;//コーナー半径
	var btn_spc=10;//ボタン間隔スペース
	var center=true;//全体の中央補正

	略す

	for (var i=0; i < num; i++) {

		var label=btnLabel+(i+1);//ラベル
		//x,y,w,h,r,c,label,size,lc,overc,outc
		//RoundRect center補正ボタン
		myhitBtn[i]=createRoundRectBtn_center (-btn_width/2,-btn_height/2,btn_width,btn_height,c_radius,"#FFFFFF",label,"12px","#FFFFFF","#FFA500","#E6E6FA");
		//myhitBtn[i]=createRoundRectBtn_center (-btn_width/2,-btn_height/2,btn_width,btn_height,c_radius,"#FFFFFF",labels,"italic bold 12px","#FFFFFF","#48D1CC","#20B2AA");//italic bold

		略す
	}

	略す

}

画像取得失敗の時のラベル変更

画像取得失敗は余りないと思いますが、外部画像は「取得失敗」が有り得ます。ボタンのラベルも変更しておけば閲覧者に親切です。代替画像を再度みて感動していても仕方が無い話です。
必要でなければコメントアウト、若しくは削除すれば良い。



//ERROR代替画像挿入
imgLoader.onerror=function () {

	略す

	//ボタンラベルをNONEにする
	var target=myhitBtn[image_no].getChildByName("btntext");
	target.text="NONE";
	//target.text="×";
	//target.text="X";

	略す
};

その他の方法として、「クリックアクション」を削除する、ボタンを非表示にするなど在るかと思います。


● 参考、バツ印「×」


日本語「ばつ」の変換で得られる数学の乗算記号
target.text="×";
英字のエックス
target.text="X";
その他
target.text="-";

ボタンの大きさの変更

60x20角丸ボタン


function roundRectBtns(len) {

	var btnLabel="PHOTO";//ラベル

	var btn_width=60;//幅
	var btn_height=20;//高さ
	var c_radius=5;//コーナー半径5
	var btn_spc=10;//ボタン間隔スペース10-20
	var center=true;//全体の中央補正

	略す
}
-------------------------------------------------------------------
function imageload () {

	略す

	imgLoader.onerror=function () {

		略す

		//ボタンラベルをNONEにする
		var target=myhitBtn[image_no].getChildByName("btntext");
		target.text="NONE";
		//target.text="X";

		略す

	};

}

● 20x20角丸ボタン

画像を取得出来ない場合、ボタンラベルをNONEにしていますが、ボタンが小さいので収まらないので X に変更します。
バツ印はここでは、英字のエックスを使用しています。


function roundRectBtns(len) {

	var btnLabel="";//ラベル

	var btn_width=20;//幅
	var btn_height=20;//高さ
	var c_radius=5;//コーナー半径
	var btn_spc=5;//ボタン間隔スペース10-20
	var center=true;//全体の中央補正

	略す
}
-------------------------------------------------------------------
function imageload () {

	略す

	imgLoader.onerror=function () {

		略す

		//ボタンラベルをNONEにする
		var target=myhitBtn[image_no].getChildByName("btntext");
		//target.text="NONE";
		target.text="X";

		略す

	};

}

● 20x20円形ボタン (正確な円にはならない)


	var btnLabel="";//ラベル

	var btn_width=20;//幅
	var btn_height=20;//高さ
	var c_radius=10;//コーナー半径
	var btn_spc=8;//ボタン間隔スペース
	var center=true;//全体の中央補正

● 20x20角ボタン (角丸無し)


	var btnLabel="";//ラベル

	var btn_width=20;//幅
	var btn_height=20;//高さ
	var c_radius=1;//コーナー半径
	var btn_spc=8;//ボタン間隔スペース
	var center=true;//全体の中央補正

activeボタンのラベル色変更

activeな場合に、ラベル色変更しています。

ボタン背景のグラフイックなどを変更するのは大変である。よって一番簡単なラベル色の変更でズルをしている。


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

	set_text("IMAGE "+(image_no+1));

	//activeボタン、ラベル色変更
	for (var i=0; i < image_max; i++) {
		//var target=myhitBtn[i].getChildAt(1);
		var target=myhitBtn[i].getChildByName("btntext");
		target.color=(i == image_no) ? "#FF0000":"#FFFFFF";
	}
	
	stage.update();

	略す

}

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

ボタン要素に name を付けておき判定する

var target=myhitBtn[i].getChildByName("btntext");

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

ラベルのText()の重ね位置より判定、このデモでは2番目にある

var target=myhitBtn[i].getChildAt(1);

軽い文字LOADING

 

アニメしない、表示非表示の切り替えのみの「軽量の文字LOADING」ですからTcker設定はしません。但しstage.update()が必要です。問題は起きないが貧弱である。

特別にLOADINGを用意しなくとも、画面上部にメッセージ用のテキスト表示があるので、そこを利用しても良い。


//LOADINGを作る
loadingShape=loadingIndicator();
loadingShape.x=canvasWidth/2;
loadingShape.y=canvasHeight/2;
//コンテナステージに貼り付け
stage.addChild(loadingShape);
loadingShape.visible=false;

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

//文字LOADING
function loadingIndicator(){
	//コンテナ
	var contna=new createjs.Container();
	var tx=new createjs.Text("LOADING!","bold 12px Arial","#CCCCCC");
	tx.textAlign="center";
	tx.textBaseline="middle";
	contna.addChild(tx);
	return contna;
}

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

//Loading表示切り替え
function set_loading() {
	loadingShape.visible=true;
	stage.update();
}
function reset_loading() {
	loadingShape.visible=false;
	stage.update();
}

● 円弧状のLoading

作りの単純な円弧状のLoadingで、弧が回転するだけです。ERROR時の対策としてアニメを軽くするため作りましたが、結果は同じで役立たづ。結局 setFPS() の変更で対処した。


//簡単な円弧状LOADING
function loadingIndicator(){
	//graphicのスタイル
	var graphics=new createjs.Graphics();
	graphics.setStrokeStyle(3,"round").beginStroke("#CCCCCC");//round
	graphics.arc(0,0,10,0,Math.PI*2*0.75);
	//Shapeに格納
	var s=new createjs.Shape(graphics);
	return s;
}


 

preloadjs の LoadQueue() を使用した場合


CreateJS preloadjsのLoadQueue()を使用した場合の デモ2、(createJS042b.js)


動作などは前の、javascript Image()オブジェクトを利用と同じです。

JS (createJS042b.js) は「デモ2」に掲載しています。

 

preloadjsのLoadQueue()を使用した場合は以下の様になります。imageload()、はローダーのセットのみで、fileload ()、complete ()、を加えます。

preloadjs


<script type="text/javascript" src="js/easeljs-0.7.0.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.4.0.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.5.0.min.js"></script>

preloadjsを使用します。


imageload()は同じ関数名ですから、前のものを削除して、下記の様に書き換えます。
LoadQueue()を設定、EventListener設定、Listener削除、などありますから物物しくなっています。処理内容は同じです。 マニフェストリストでは無く、単なる配列の画像リストを使用していますので、画像URLの指定が違います。
ドチラカといえば、上記のjavascript Image()オブジェクトを利用した方式の方が使い易いと思います。


loaderをグローバルに

//LoadQueue用Loader
var loader;

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

//任意画像ロード/LoadQueue
function imageload() {

	stopClick=true;

	set_text("Loading Now!");
	//Loading
	set_loading();

	//Loaderを作る
	loader=new createjs.LoadQueue(false);

	//loader EventListener設定
	loader.addEventListener("fileload",fileload);
	loader.addEventListener("complete",complete);
	loader.addEventListener("error",loaderror);

	//1枚読み込み
	var file={};
	file.src=imagelist[image_no];
	loader.loadFile(file);

}

//画像読み込み完了
function fileload (event) {
	mainImage=assets[image_no]=event.result;//保存
}
function loaderror (event) {
	//エラー画像
	mainImage=assets[image_no]=errorImage;//保存
	//ボタンラベルをNONEにする/Loading中はクリックできないようにしないとだめだ
	var target=myhitBtn[image_no].getChildByName("btntext");
	target.text="NONE";
	//target.text="X";
}
//完了
function complete (event) {

	set_text("Loading END");
	//Loading
	reset_loading();

	//loader Listener削除
	loader.removeEventListener("fileload",fileload);
	loader.removeEventListener("complete",complete);
	loader.removeEventListener("error",loaderror);

	//画像表示
	draw_image();
}

JS (createJS042b.js) は「デモ2」に掲載しています。



 

画像

画像は各自用意ください。Welcome画像 640x300サイズ、写真画像 640x300サイズ


 

textBaseline:middle ボタンの詳細は、下記ページを参照下さい。

【参照】当方の記事: CreateJS ラベルを中心に配置し、MouseOver で背景を変化させるボタンを考える

通常のボタンなどの詳細は、下記ページを参照下さい。

【参照】当方の記事: CreateJS 「角丸RoundRectボタン」「shadowフィルター」の振る舞いなどを考える


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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]