POPSブログ

CreateJS Circleボタンクラスactive表示(easeljs-0.8)

352

  Category:  javascript2015/04/03 pops 

スイッチ風Circleボタンを「コンテナ継承クラス」にしてactiveに対応させます。画像読み込みの際のProgressBar、Loadingもコンテナ継承クラスにしてJSで読み込み使用しています。
小さなボタンですから画像の上に重ねる事が可能ですのでこのデモでは画像の上にボタンを配置しています。
機能を標準化させることにより効率的に設計できると思います。

 

CreateJS Circleボタンクラスactive表示(easeljs-0.8)テスト


デザインなどは従来のものと同じですが、機能を標準化させることにより効率的に設計できると思います。
easeljs-0.8の新たな「コンテナ継承クラス」の作り方が簡単なので今までより一層活用した方が便利になりそうだ。


zu

 

DEMO (easeljs-0.8)


CreateJS Circleボタンクラスactive表示(easeljs-0.8)テストデモ、(createJS134.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>
<script type="text/javascript" src="js/loading-pack.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

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



//日本語
//createJS134.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;

//タイマーの使用/use使用
var timer_use="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;
//Loading
var partsContainer;
//サムネールベース
var btnBase;
//バルーン
var balloonContainer;

//画像
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();

	//インスタンス配置
	//分割数、半径、正転逆転、速度、虹色、色、BAR設定true、BAR色、BAR透明度
	partsContainer=new LoadingPackClass(12,10,1,5,false,"#CCCCCC",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;

			//バルーン横、高さ、角丸半径、ライン幅、陰影
			balloonContainer=new BalloonBoxClass(128,60,5,2,true);
			balloonContainer.x=canvasWidth/2;
			balloonContainer.y=canvasHeight-80;
			stage.addChild(balloonContainer);

			//スイッチ風ボタン
			//外半径、内半径、ライン描画、ライン幅、ベース色、スペース、over色、out色、active色、陰影、ボタン数、中央、balloon
			btnBase=new CircleBtnClass(6,3,false,1,"#FFFFFF",10,"#FFD700","#888888","#FF0000",true,image_max,true,true);
			btnBase.x=canvasWidth/2;//中央そろえの場合
			//btnBase.x=100;//70-100 中央そろえでない場合
			btnBase.y=canvasHeight-20;
			stage.addChild(btnBase);

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

		},1000);
	}
}

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

	globalflag=false;

	//Activeライン変更
	btnBase.active(image_no);

	//画像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() {
		//タイマー
 		if(timer_use == 'use'){
			set_timer();
		}

	},500);

}

//on-click
function handleclick(event,no){

	//表示画像、アニメ中は実行しない
	if(no == image_no) {return}
	if(!globalflag) {return}

	//一旦切ってからセット
	if(timer_use == 'use'){
		clearTimeout(timerID);
	}
	image_no=no;
	draw();

};

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

//Balloon中継
function balloon_open(no,px){
	var no=no;
	var px=px-canvasWidth/2;//補正
	balloonContainer.open(no,assets[no],px);
}
function balloon_close(){
	balloonContainer.close();
}

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

//arcToフキダシBOX拡張arcToEx形式
//x,y,幅,高さ,半径,矢幅,矢高さ
createjs.Graphics.prototype.arcToBalloonEx=function(x,y,w,h,r,tw,th){
	this.moveTo(x+w/2,y)
	.arcTo(x+w,y,x+w,y+h,r)
	.arcTo(x+w,y+h,w/2+tw/2,y+h,r)
	.lineTo(x+w/2+tw/2,y+h)
	.lineTo(x+w/2,y+h+th)
	.lineTo(x+w/2-tw/2,y+h)
	.arcTo(x,y+h,x,y,r)
	.arcTo(x,y,x+w/2,y,r)
	.lineTo(x+w/2,y)
}

//画像挿入矢印つき背景
//色付きcanvasを作る2
function createArrowBack(w,h,h2,c,img) {
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h+h2;
	var ctx=canvas.getContext("2d");
	ctx.fillStyle=c;
	ctx.fillRect(0,0,w,h+h2);
	ctx.drawImage(img,0,0,w,h);
	return canvas;
}

//----------------------------------------------------------------------------------
//BalloonBoxClass
(function(){

//バルーン横、高さ、角丸半径、ライン幅、陰影、
function BalloonBoxClass (_width,_height,_round,_linewidth,_shadow) {
	this.Container_constructor();

	this.width=_width;
	this.height=_height;
	this.round=_round;
	this.linewidth=_linewidth;
	this.shadow=_shadow;

	//SET-UP
	this.setup();
}

var p=createjs.extend(BalloonBoxClass,createjs.Container);
var thumbBox=new createjs.Shape();

//make-balloon
p.setup=function(){

	//仮のサムネールBOX
	thumbBox.graphics.ss(2).s("#FFFFFF").beginFill("#FFFFFF").arcToBalloonEx(0,0,this.width,this.height,this.round,6,8);
	//中心補正
	thumbBox.regX=this.width/2;
	thumbBox.regY=this.height/2;
	//陰影
	if(this.shadow){thumbBox.shadow=new createjs.Shadow("#000000",0,0,4);}
	thumbBox.visible=false;//非表示
	this.addChild(thumbBox);
};

//OPEN-CLOSE
p.open=function(no,img,px){
	//ThumbBox表示
	thumbBox.graphics.clear();
	//arcToBalloonEx(x,y,幅,高さ,半径,矢幅,矢高さ)、矢幅は偶数値
	//縮小画像挿入矢印つき背景/矢印部分の色を延長
	//色付きcanvasを作る2
	var thumbImage=createArrowBack(this.width,this.height,8,"#FFFFFF",img);
	//外側ラインなしEx
	//thumbBox.graphics.beginBitmapFill(thumbImage).arcToBalloonEx(0,0,this.width,this.height,this.round,6,8);
	//外側ライン有りEx
	thumbBox.graphics.ss(this.linewidth).s("#FFFFFF").beginBitmapFill(thumbImage).arcToBalloonEx(0,0,this.width,this.height,this.round,6,8);
	thumbBox.x=px;//位置補正
	thumbBox.visible=true;
};
p.close=function(){
	thumbBox.visible=false;
};

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

}());
//-----------------------------------------------------------------------------

(function(){

//スイッチ風ボタンCircleBtnClass
//外半径、内半径、ライン描画、ライン幅、ベース色、スペース、over色、out色、active色、陰影、ボタン数、中央、balloon
function CircleBtnClass (_radius,_radius2,_line,_linew,_color,_space,_overc,_outc,_activec,_shadow,_max_no,_center,_balloon) {

	this.Container_constructor();

	this.count=_max_no;
	this.radius=_radius;//外半径
	this.radius2=_radius2;//内半径
	this.line=_line;//ライン使用
	this.linew=_linew;//ライン幅
	this.color=_color;//ベース色
	this.space=_space;
	this.overc=_overc;
	this.outc=_outc;
	this.activec=_activec;
	this.shadow=_shadow;
	this.max_no=_max_no;
	this.center=_center;
	this.balloon=_balloon || false;

	this.line_color="#FFFFFF";//ライン色固定

	//SET-UP
	this.setup();
}

var p=createjs.extend(CircleBtnClass,createjs.Container);

var imgArr=[];
var textBtn=[];
var btncontainer;

//make-btn
p.setup=function(){

	btncontainer=new createjs.Container();

	for (var i=0; i < this.count; i++) {

		//番号受け渡し
		var no=i;
		//create-textボタン
		//X、Y、半径、半径2、ベース色、over色、out色、active色、番号
		textBtn[i]=this.createCircleCenterbtn(0,0,this.radius,this.radius2,this.color,this.overc,this.outc,this.activec,no);

		textBtn[i].cursor="pointer";
		//ボタン間隔ステージ用
		//ステージ2用
		textBtn[i].x=i*(this.radius*2+this.space);
		//ボタン判別用のidを書き込む、未使用
		textBtn[i].id=i;

		//クリックアクション
		textBtn[i].on("click",handleclick,null,false,i);

		//textBtn addChild
		btncontainer.addChild(textBtn[i]);

	}

	//ボタンコンテナを中央に修正
	if(this.center){
		var btncont_x=((this.radius*2+this.space)*(this.count-1)-this.space)/2;
		btncontainer.x=-btncont_x;
	}
	this.addChild(btncontainer);

};

//幅、高さ、画像
p.createImgCanvas=function(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;
}

//X、Y、半径、半径2、ライン幅、ベース色、over色、out色、active色、番号
p.createCircleCenterbtn=function(x,y,r,r2,basec,overc,outc,activec,no){

	var no=no;
	var balloon=this.balloon;

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	btn.active=false;//active判定
	//スイッチ風ボタンベース
	var base=new createjs.Shape();
	if(this.line){base.graphics.ss(this.linew).s(this.line_color);}//ライン描画、色固定
	base.graphics.beginFill(basec).drawCircle(x,y,r);//Fill描画、ベース色
	base.name="base";//name挿入
	//陰影
	if(this.shadow){base.shadow=new createjs.Shadow("#000000",0,0,3);}
	//スイッチグラフイック
	var s=new createjs.Shape();
	s.graphics.beginFill(outc).drawCircle(x,y,r2);
	s.name="graphic";//name挿入
	btn.addChild(base,s);

	//rollover
	btn.addEventListener("rollover",function (e) {
		//Point計算、btncontainer基準localToGlobal
		var point=btncontainer.localToGlobal(e.target.x,e.target.y);
		//Point受け渡し
		var thumb_x=point.x;
		//暫定
		if(!btn.active){
			s.graphics.clear();
			//スイッチ風ボタン
			s.graphics=new createjs.Graphics().beginFill(overc).drawCircle(x,y,r2);
		}
		if(balloon){balloon_open(no,thumb_x);}
	});
	//rollout
	btn.addEventListener("rollout",function (e) {
		//暫定
		if(!btn.active){
			s.graphics=new createjs.Graphics().beginFill(outc).drawCircle(x,y,r2);
		}
		if(balloon){balloon_close();}
	});

	return btn;
}

//Active-Graphics変更
p.active=function(no){

	for (var i=0; i < this.count; i++) {
		//Active背景処理
		textBtn[i].active=false;//active
		var target=textBtn[i].getChildByName("graphic");
		target.graphics.clear();
		target.graphics=new createjs.Graphics().beginFill(this.outc).drawCircle(0,0,this.radius2);
		if(i == no) {
			textBtn[i].active=true;//active
			//スイッチ風ボタン
			target.graphics=new createjs.Graphics().beginFill(this.activec).drawCircle(0,0,this.radius2);
		}
	}
};

p.remove=function(){
	this.removeAllEventListeners();//リスナー削除できる
	//this.visible=false;//非表示出来る
};

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

}());

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

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

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


CSS

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


/*日本語 createJS134.css*/

#demo-wrap {
position:relative;
width:auto;
height:320px;
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;
}

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

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


 

簡単な説明


コンテナ継承クラスのLoading表示を読み込み、コンテナ継承クラスのボタンを表示

 

1. 外部JS読み込み形式のProgressBar組み込みLoadingにします。
2. Circleボタンクラスを追加します。必要に応じて制御できるように制作します。
(このデモではボタンを画像の上に表示しています)
3. 必要があれば、HOVERサムネールの表示を行います。(事前に画像読み込み済みの事)
このデモでは「HOVERサムネール」を表示しています。
4. easeljs-0.8用、改造などは自由です。


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

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



//分割数、半径、正転逆転、速度、虹色、色、BAR設定true、BAR色、BAR透明度
partsContainer=new LoadingPackClass(12,10,1,5,false,"#CCCCCC",true,"#FF69B4",1);

設定は簡単にしました、その他の詳細設定、改造などは自由です。
「前々ページ」のものと同一ですから、操作なども同じになります。詳細は下記参照ください。


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


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

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



var loadingcontainer;
var partsContainer;

---------------------------------------------------
//loadingProgressコンテナを作る
loadingcontainer=new createjs.Container();
//インスタンス配置
//分割数、半径、正転逆転、速度、虹色、色、BAR設定true、BAR色、BAR透明度
partsContainer=new LoadingPackClass(12,10,1,5,false,"#CCCCCC",true,"#FF69B4",1);
partsContainer.x=canvasWidth/2;
partsContainer.y=canvasHeight/2;
loadingcontainer.addChild(partsContainer);
stage.addChild(loadingcontainer);

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

外部JSファイルとして保存しておき、随時読み込みます。(JSはデモページに記載)



<script type="text/javascript" src="js/loading-pack.js"></script>

コンテナ継承クラスのボタンを表示


zu

 

新しいeaseljs-0.8用「コンテナ継承クラス」ですが、以前の「継承クラス」と比較して新しい方が処理し易い。
書式は次の通りであるが、改造などは自由である。
他のボタン比較して引数が少ない、ほとんどは色設定です。最後のballoonは「HOVERサムネール」の使用設定です。
変化があるのは、内側ボタンのみです。このJSの設定では小さいのでデザインを変えても余り良いものは出来ない。



//スイッチ風ボタン
//外半径、内半径、ライン描画、ライン幅、ベース色、スペース、over色、out色、active色、陰影、ボタン数、中央、balloon
btnBase=new CircleBtnClass(6,3,false,1,"#FFFFFF",10,"#FFD700","#888888","#FF0000",true,image_max,true,true);

1. 外側ボタン半径(外側ベース)
2. 内側ボタン半径
3. 外側ボタンのライン描画。初期値 false
4. 外側ベース色
5. スペース、ボタン間の余白スペース
6. over色、out色、active色。
7. そのほか、陰影などは自由です。
8. 全体を中央そろえの場合は true
9. balloon使用(HOVERサムネール)は true


ボタンの配置調整は、中央そろえが綺麗です。違う場合はステージに合わせてください。


btnBase.x=canvasWidth/2;//中央そろえの場合
//btnBase.x=100;//70-100 中央そろえでない場合
btnBase.y=20;

Activeボタンの変更

クラスのメソッドにアクセスすれば簡単に変更できます。
番号に対応するボタンを「Active」にしてそれ以外は「非Active」にします。
このデモでは、ボタン番号、画像番号は同じに設計していますので......



btnBase.active(画像番号);

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

//Activeライン変更
btnBase.active(image_no);

rollover rollout アクション設定

削除の必要がないので、addEventListener("rollover",function(){.........}の形で書いている。



	//グラフイック
	var s=new createjs.Shape();

	略す

	//rollover
	btn.addEventListener("rollover",function (e) {
		//Shapeインスタンス.graphics.の形で書けるので便利
		s.graphics=......
	});
	//rollout
	btn.addEventListener("rollout",function (e) {
		//略す
	});

クリックアクション設定

クリックアクションの「リスナー」は「handleclick」で、クラス外に設定してありますので「リスナー名」は固定です。



//クリックアクション
textBtnBtn[i].on("click",handleclick,null,false,i);

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

//on-click
function handleclick(event,no){

	//表示画像、アニメ中は実行しない
	if(no == image_no) {return}
	if(!globalflag) {return}

	//一旦切ってからセット
	if(timer_use == 'use'){
		clearTimeout(timerID);
	}
	image_no=no;
	draw();

};

「コンテナ継承クラス」内で処理する場合

以下の様にしても処理可能のようですが、デモでは上記の処理をしています。



//クリックアクション
textBtn[i].on("click",this.handleclick,null,false,i);

p.handleclick=function(event,no){

	//処理を書く
}

コンテナ継承クラスのボタンの改造

改造は自由ですから、別の形式にも構造違いでも作れます。これもアイデア次第になります。
詳細は略します。


HOVERサムネールの表示

画像ボタンではないため、画像が判り難いのでHOVERタイプのサムネールの表示を追加しました。
easeljs-0.8に於いても、createjs.Graphics.prototype....形式の関数も問題なく処理できます。


1. Graphicsクラスにメソッド追加の形で画像塗りこみ(Graphics.prototype)
2. 外枠はラインで表現、色は白固定です。
3. 矢印内部にリピート画像が入らないように画像を修正。
4. ボタンに対応した画像をその都度塗り替えて表示。


ボタン設定の最後のバルーン設定 balloon を true にして下さい(フキダシを使用する)。


//幅、高さ、角丸半径、色、..........、balloon
btnBase=new RoundTextBtnClass(64,20,5,"#FFFFFF",.........,true);

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

//バルーン横、高さ、角丸半径、ライン幅、陰影
balloonContainer=new BalloonBoxClass(128,60,5,2,true);

この場合には、下記の処理関数が必要に成ります。

createArrowBack()は矢印の内部にリピート画像が入らなくするための補正処理です。
これ以上綺麗に処理するには構造を変えねばなりませんので、簡単にしています。



//Balloon中継
function balloon_open(no,px){
	var no=no;
	var px=px-canvasWidth/2;//補正
	balloonContainer.open(no,assets[no],px);
}
function balloon_close(){
	balloonContainer.close();
}

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

//arcToフキダシBOX拡張arcToEx形式
//x,y,幅,高さ,半径,矢幅,矢高さ
createjs.Graphics.prototype.arcToBalloonEx=function(x,y,w,h,r,tw,th){
	this.moveTo(x+w/2,y)
	.arcTo(x+w,y,x+w,y+h,r)
	.arcTo(x+w,y+h,w/2+tw/2,y+h,r)
	.lineTo(x+w/2+tw/2,y+h)
	.lineTo(x+w/2,y+h+th)
	.lineTo(x+w/2-tw/2,y+h)
	.arcTo(x,y+h,x,y,r)
	.arcTo(x,y,x+w/2,y,r)
	.lineTo(x+w/2,y)
}

//画像挿入矢印つき背景
//色付きcanvasを作る2
function createArrowBack(w,h,h2,c,img) {
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h+h2;
	var ctx=canvas.getContext("2d");
	ctx.fillStyle=c;
	ctx.fillRect(0,0,w,h+h2);
	ctx.drawImage(img,0,0,w,h);
	return canvas;
}

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

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


画像ボタン、TEXTボタンを配置して、active時のボタン背景色などを変えます。

【参照】当方の記事: CreateJS 角丸画像埋め込みボタンクラスactive表示(easeljs-0.8)

【参照】当方の記事: CreateJS 角丸TEXTボタンクラスactive表示(easeljs-0.8)



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

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


連動させる処理が煩雑ですけれど、結構効率的になりました。以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]