POPSブログ

CreateJS 角丸RoundRect rolloverボタンのactive時背景色を変える(最新)

325

  Category:  javascript2014/10/27 pops 

複数のrollover rolloutボタンを配置して、rollover時の色を変えます。activeの場合にもボタン背景色を変えます。easeljs-0.7.1 でのテストです。

 

CreateJS 角丸RoundRect rolloverボタンのactive時背景色を変えるテスト

以前にも同じものを掲載していますが、activeの場合にボタン背景色を変更はしていませんでした。今回は背景色を変更して見ます。余り判らないと思いますが以前と比較して内部的には処理し易いよう進化はあります。
「フキダシ」形式のサムネール画像も表示します。比較のためボタンをコンテナ継承クラスで作ったデモも掲載します。


 

DEMO


CreateJS 角丸RoundRect rolloverボタンのactive時背景色を変える(最新)デモ

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


1、通常ボタンのデモ (createJS108.js)


2、ボタンをコンテナ継承クラスで作ったデモ (createJS108b.js)


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


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

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


<script type="text/javascript" src="js/easeljs-0.7.1.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.4.1.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.5.1.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 id="btn-box">
		<canvas id="subCanvas" width="640" height="50"></canvas>
	</div>
</div>

JS

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


//日本語
//createJS108.js
//新、角丸ボタンと画像スライドのテスト
//easeljs-0.7.1 デモ用

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

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

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の使用 useのこと
var clickbtn_use="use";
//Loading AUTOの文字を表示するかuse
var text_use="use";

//ボタンの大きさ
var btnW=60;//幅
var btnH=20;//高さ
var btnR=5;//角丸半径
//ボタン間の間隔
var btnSpace=10;

//サムネールの大きさR
var thumbW=128;
var thumbH=60;
var thumbR=10;
var margin=2;//余白未使用
//サムネールの表示Y位置
var thumbPos_y=250;

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

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

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

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

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

//角丸サムネールBOX
var thumbBox;//container
var thumbImage;//画像Bitmap
var thumb=false;//サムネール動作判定

//矢印サムネールBOX
var hoverthumb;

//ボタンが押された/有効
var btnValidity=false;

//読み込み画像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 myBtn=[];
var labels=["BOTTUN1","BOTTUN2","BOTTUN3"];//未使用
var pos_dx=[0,0,0,1,-1,0,0];
var pos_dy=[0,0,0,0,0,1,-1];

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

	//ステージ
	stage=new createjs.Stage('mainCanvas');
	//ステージ2
	stage2=new createjs.Stage('subCanvas');
	//MouseOver重要
	stage2.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);

	//loadingコンテナを作る
	loadingcontainer=new createjs.Container();
	stage.addChild(loadingcontainer);
	//LOADINGを作る
	loadingShape=loadingIndicator();
	loadingShape.x=canvasWidth/2;
	loadingShape.y=canvasHeight/2;
	//tickを設定
	loadingShape.tick=function (){
		if(loading) {
			loadingShape.rotation +=5;
		}
	}
	//loading addEventListenerを設定
	createjs.Ticker.addEventListener('tick',loadingShape.tick);
	//コンテナに貼り付け
	loadingcontainer.addChild(loadingShape);
	loading=true;//loading表示判定

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

	//bar_v判定tickを設定(butt round)
	//90度是正-Math.PI/2
	progressbar.tick=function (){
		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();
		}
	}
	//Ticker.Listener設定
	createjs.Ticker.addEventListener('tick',progressbar.tick);
	//addChild
	progresscontainer.x=canvasWidth/2;
	progresscontainer.y=canvasHeight/2;
	progresscontainer.addChild(progressbar,progtext);
	stage.addChild(progresscontainer);

	//ステージ2ボタンコンテナ、ボタンはあとで作る
	btncontainer=new createjs.Container();
	btncontainer.x=0;
	btncontainer.y=20;
	//ボタンコンテナをステージ2にaddChild
	stage2.addChild(btncontainer);
	createjs.Ticker.addEventListener('tick',tick2);
	stage2.update();

	//簡易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);
	set_text("Loading Now!");

	//FadeサムネールBOX/Shape
	thumbBox=new createjs.Shape();
	//仮のサムネールBOX
	thumbBox.graphics.ss(2).s("#FFFFFF").beginFill("#FFFFFF").arcToBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);
	//中心補正
	thumbBox.regX=thumbW/2;
	thumbBox.regY=thumbH/2;
	stage.addChild(thumbBox);
	thumbBox.y=thumbPos_y;//Y位置
	//thumbBox.shadow=shadow;//陰影していない
	thumbBox.visible=false;
	//フエード用tick設定
	thumbBox.tick=function (){

		if(thumbBox.alpha < 1 && thumb) {
			thumbBox.alpha+=0.05;
		}
	}
	//Ticker.Listener設定
	createjs.Ticker.addEventListener('tick',thumbBox.tick);

	stage.update();

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

	//調整
	setTimeout(function() {

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

}

//progressBar
function progress(event) {

	//loadedのみ効く
	bar_v=event.loaded;
}

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

	//Loaderを作る
	loader=new createjs.LoadQueue(false);
	//全体、progressがあれば先に設定
	loader.addEventListener("progress",progress);

	//loader EventListener設定
	loader.addEventListener("fileload",fileload);
	loader.addEventListener("complete",complete);
	//Manifestを使用、manifest読み込み開始
	loader.loadManifest(manifest);

}

//各画像読み込み完了
function fileload (event) {

	var id=event.item.id;
	//画像選別
	if (id == 'PHOTO') {
		//エラー無しの画像をassets容器に保存
		assets.push(event.result);
	}
}
//全ての画像読み込み完了
function complete (event) {

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

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

	//Create-Bottunボタンを作る
	if (clickbtn_use == 'use') {
		for (var i=0; i < image_max; i++) {

			//ラベル文字生成
			var label="PHOTO"+(i+1);
			//番号受け渡し
			var no=i;

			//Gradient中央補正ボタン/XYは0のこと
			//X、Y、幅、高さ、角丸半径、色、ラベル、ラベル色、over色、over色2、out色、out色2、番号
			myBtn[i]=createGradientCenterbtn (0,0,btnW,btnH,btnR,"#FFFFFF",label,"#FFFFFF","#FFFFFF","#20B2AA","#FFFFFF","#888888",no);

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

			//クリックアクション
			myBtn[i].addEventListener("click",handleclick);
			//myBtn addChild
			btncontainer.addChild(myBtn[i]);


		}

		//ボタンコンテナを中央に修正
		var btncont_x=(canvasWidth-((btnW+btnSpace)*(image_max-1)-btnSpace))/2;
		btncontainer.x=btncont_x;
		stage2.update();
	}


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

		//早すぎるので調整
		setTimeout(function() {

			//遅延progressbar最後の前にcompleteが反応する
			event.target.removeEventListener("progress",progress);
			//progressTicker削除
			createjs.Ticker.removeEventListener('tick',progressbar.tick);
			//progress非表示
			progresscontainer.visible=false;

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

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

		},delay_speed);
	}
}

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

	globalflag=false;

	//AUTO文字表示/ボタン有効判定
	if (!btnValidity) {
		set_text("AUTO");
	};

	//サムネール表示中ならクリア
	if (thumb) {
		thumbBox.visible=false;
		thumb=false;
	}

	//activeボタン色変更
	if (clickbtn_use == 'use') {
		for (var i=0; i < image_max; i++) {

			//ラベル色変更
			//var target=myBtn[i].getChildAt(1);
			var target=myBtn[i].getChildByName("btntext");
			target.color=(i == image_no) ? "#FF0000":"#FFFFFF";

			//Active背景処理
			myBtn[i].active=false;
			if(i==image_no) {myBtn[image_no].active=true;}
			var target2=myBtn[i].getChildByName("graphic");
			//X、Y、幅、高さ、角丸半径、インスタンス、グラフイック、out色、out色2、active色、active色2
			set_active(0,0,btnW,btnH,btnR,myBtn[i],target2,i,"#FFFFFF","#888888","#E3CFCF","#A36767");//#BC8F8F

		}
		stage2.update();
	}

	//MODE
	var mode=1;
	//位置データ
	var rno=Math.floor(Math.random()*pos_dx.length);
	//移動
	var px = pos_dx[rno];
	var py = pos_dy[rno];
	if (px+py == 0) {mode=0;}//移動なし

	//最初は強制FADE
	if(once) {
		mode=0;
		once=false;
	}

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

	//上画像更新画像Bitmap挿入、中央補正なし回転は出来ない
	topImage.image=new createjs.Bitmap(mainImage).image;
	if (mode == 0) {
		//FADE透明度0
		topImage.alpha=0;
		topImage.x=0;
		topImage.y=0;
	} else {
		//SLIDE
		topImage.alpha=1;
		topImage.x=canvasWidth*px;
		topImage.y=canvasHeight*py;
	}

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

}

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

	//ボタン有効解除
	btnValidity=false;

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

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

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

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

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

	},500);

}

//tickステージ
function tick() {
	stage.update();
}
//tick2ステージ2
//アニメなどなければ特別いらないようだ、ボタンでupdateしているから
function tick2() {
	//stage2.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;
	}
}

//BtnClick
function handleclick (event) {
	//アニメ中は機能しない
	if (!globalflag) {return;}

	//v0.7
	var instance=event.target.parent;
	var hit_no=instance.parent.getChildIndex(instance);

	//idで判定v0.7未使用
	//var hit_no=event.target.parent.id;

	//表示中番号なら戻る
	if (hit_no == image_no) {

		return;

	} else {

		//ボタン有効/AUTO文字書き換え
		btnValidity=true;
		viewtext.text="";
		//タイマー強制停止
		clearTimeout(timerID);
		//指定番号の画像表示
		image_no=hit_no;
		draw();

	}
}

//ThumbBox表示
//arcToフキダシBOX
//arcToBalloonEx(x,y,幅,高さ,半径,矢幅,矢高さ)、矢幅は偶数値
function openThumbBox(no,thumb_x) {

	//縮小画像挿入矢印つき背景/矢印部分の色を延長
	//色付きcanvasを作る2
	thumbImage=createArrowBack(thumbW,thumbH,8,"#FFFFFF",assets[no]);

	thumbBox.graphics.clear();

	//外側ラインなしEx
	//thumbBox.graphics.beginBitmapFill(thumbImage).arcToBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);
	//外側ライン有りEx
	thumbBox.graphics.ss(2).s("#FFFFFF").beginBitmapFill(thumbImage).arcToBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);

	thumbBox.x=thumb_x;//X位置
	thumbBox.alpha=0;
	thumbBox.visible=true;
	thumb=true;

}

//ThumbBox非表示
function closeThumbBox(no) {

	//サムネール非表示
	thumbBox.visible=false;
	thumb=false;

}

//create-グラデーションボタン/cは未使用
//X、Y、幅、高さ、角丸半径、色、ラベル、ラベル色、over色、over色2、out色、out色2、番号
function createGradientCenterbtn (x,y,w,h,r,c,label,lc,overc,overc2,outc,outc2,no) {

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.active=false;//ACTIVE判定
	btn.x=x;
	btn.y=y;
	var s=new createjs.Shape();
	//角丸ライン無し
	s.graphics.beginLinearGradientFill([outc,outc2],[0,1],0,0,0,h).drawRoundRect(x,y,w,h,r);
	s.name="graphic";//name挿入
	//原点移動、グラフイックを容易にするため
	s.regX=w/2;
	s.regY=h/2;
	btn.addChild(s);
	btn.shadow=shadow;
	var tx=new createjs.Text(label,"12px Arial",lc);
	tx.x=0;
	tx.y=0;
	tx.maxWidth=w;
	tx.textAlign="center";
	tx.textBaseline="middle";
	tx.shadow=shadow;//テキストは濃くなら無い
	tx.name="btntext";//name挿入
	btn.addChild(tx);
	//firefox補正
	if (firefox) {tx.y +=1;}

	//Gradient rollover
	btn.addEventListener("rollover",function (e) {
		if(!btn.active) {
			s.graphics.clear();
			//角丸
			s.graphics.beginLinearGradientFill([overc,overc2],[0,1],0,0,0,h).drawRoundRect(x,y,w,h,r);
			stage2.update();
		}
		//サムネールopen
		//Point計算、btncontainer基準localToGlobal
		var point=btncontainer.localToGlobal(e.target.x,e.target.y);
		//Point受け渡し
		var thumb_x=point.x;
		openThumbBox(no,thumb_x);
	});
	//Gradient rollout
	btn.addEventListener("rollout",function (e) {
		if(!btn.active) {
			s.graphics.clear();
			//角丸
			s.graphics.beginLinearGradientFill([outc,outc2],[0,1],0,0,0,h).drawRoundRect(x,y,w,h,r);
			stage2.update();
		}
		//サムネールclose
		closeThumbBox(no);
	});

	return btn;
}

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

//Active背景処理
function set_active(x,y,w,h,r,btn,s,no,outc,outc2,activec,activec2) {
	if(btn.active) {
		s.graphics.clear();
		//角丸
		//s.graphics.ss(1).s("#FF0000");//Line
		s.graphics.beginLinearGradientFill([activec,activec2],[0,1],0,0,0,h).drawRoundRect(x,y,w,h,r);//Fill
		stage2.update();
	}
	if(!btn.active) {
		s.graphics.clear();
		//角丸
		s.graphics.beginLinearGradientFill([outc,outc2],[0,1],0,0,0,h).drawRoundRect(x,y,w,h,r);
		stage2.update();
	}
};


//幅、高さ、画像
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;
}

//画像挿入矢印つき背景
//色付き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;
}

//簡単な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();

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


JS (コンテナ継承クラス)

createJS108b.js、ボタンはコンテナ継承クラスです。JS名は任意に変更可。注意、easeljs-0.7.1用です。


//日本語
//createJS108b.js
//ボタンをクラス化
//新、角丸ボタンと画像スライドのテスト
//easeljs-0.7.1 デモ用

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

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

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の使用 useのこと
var clickbtn_use="use";
//Loading AUTOの文字を表示するかuse
var text_use="use";

//ボタンの大きさ
var btnW=60;//幅
var btnH=20;//高さ
var btnR=5;//角丸半径
//ボタン間の間隔
var btnSpace=10;

//サムネールの大きさR
var thumbW=128;
var thumbH=60;
var thumbR=10;
var margin=2;//余白未使用
//サムネールの表示Y位置
var thumbPos_y=250;

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

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

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

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

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

//角丸サムネールBOX
var thumbBox;//container
var thumbImage;//画像Bitmap
var thumb=false;//サムネール動作判定

//矢印サムネールBOX
var hoverthumb;

//ボタンが押された/有効
var btnValidity=false;

//読み込み画像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 myBtn=[];
var labels=["BOTTUN1","BOTTUN2","BOTTUN3"];//未使用
var pos_dx=[0,0,0,1,-1,0,0];
var pos_dy=[0,0,0,0,0,1,-1];


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

	//ステージ
	stage=new createjs.Stage('mainCanvas');
	//ステージ2
	stage2=new createjs.Stage('subCanvas');
	//MouseOver重要
	stage2.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);

	//loadingコンテナを作る
	loadingcontainer=new createjs.Container();
	stage.addChild(loadingcontainer);
	//LOADINGを作る
	loadingShape=loadingIndicator();
	loadingShape.x=canvasWidth/2;
	loadingShape.y=canvasHeight/2;
	//tickを設定
	loadingShape.tick=function (){
		if(loading) {
			loadingShape.rotation +=5;
		}
	}
	//loading addEventListenerを設定
	createjs.Ticker.addEventListener('tick',loadingShape.tick);
	//コンテナに貼り付け
	loadingcontainer.addChild(loadingShape);
	loading=true;//loading表示判定

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

	//bar_v判定tickを設定(butt round)
	//90度是正-Math.PI/2
	progressbar.tick=function (){
		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();
		}
	}
	//Ticker.Listener設定
	createjs.Ticker.addEventListener('tick',progressbar.tick);
	//addChild
	progresscontainer.x=canvasWidth/2;
	progresscontainer.y=canvasHeight/2;
	progresscontainer.addChild(progressbar,progtext);
	stage.addChild(progresscontainer);

	//ステージ2ボタンコンテナ、ボタンはあとで作る
	btncontainer=new createjs.Container();
	btncontainer.x=0;
	btncontainer.y=20;
	//ボタンコンテナをステージ2にaddChild
	stage2.addChild(btncontainer);
	stage2.update();

	//簡易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);
	set_text("Loading Now!");

	//FadeサムネールBOX/Shape
	thumbBox=new createjs.Shape();
	//仮のサムネールBOX
	thumbBox.graphics.ss(2).s("#FFFFFF").beginFill("#FFFFFF").arcToBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);
	//中心補正
	thumbBox.regX=thumbW/2;
	thumbBox.regY=thumbH/2;
	stage.addChild(thumbBox);
	thumbBox.y=thumbPos_y;//Y位置
	thumbBox.visible=false;
	//フエード用tick設定
	thumbBox.tick=function (){

		if(thumbBox.alpha < 1 && thumb) {
			thumbBox.alpha+=0.05;
		}
	}
	//Ticker.Listener設定
	createjs.Ticker.addEventListener('tick',thumbBox.tick);

	stage.update();

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

	//調整
	setTimeout(function() {

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

}

//progressBar
function progress(event) {

	//loadedのみ効く
	bar_v=event.loaded;
}

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

	//Loaderを作る
	loader=new createjs.LoadQueue(false);
	//全体、progressがあれば先に設定
	loader.addEventListener("progress",progress);

	//loader EventListener設定
	loader.addEventListener("fileload",fileload);
	loader.addEventListener("complete",complete);
	//Manifestを使用、manifest読み込み開始
	loader.loadManifest(manifest);

}

//各画像読み込み完了
function fileload (event) {

	var id=event.item.id;
	//画像選別
	if (id == 'PHOTO') {
		//エラー無しの画像をassets容器に保存
		assets.push(event.result);
	}
}
//全ての画像読み込み完了
function complete (event) {

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

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

	//Create-Bottunボタンを作る
	if (clickbtn_use == 'use') {
		for (var i=0; i < image_max; i++) {

			//ラベル文字生成
			var label="PHOTO"+(i+1);
			//番号受け渡し
			var no=i;

			//RoundRectBtnClass RolloverButtonクラス
			//X、Y、幅、高さ、角丸半径、色、ラベル、サイズ、ラベル色、over色、over色2、out色、out色2、陰影、陰影色、番号、画像max、ステージインスタンス、サムネール使用、サムネールインスタンス
			//x,y,w,h,r,c,label,size,lc,overc,overc2,outc,outc2,shadow,scolor,no,max_no,stagetype,thumbUse,thumbItem
			myBtn[i]=new RoundRectBtnClass (0,0,btnW,btnH,btnR,"#FFFFFF",label,"12px","#FFFFFF","#FFFFFF","#20B2AA","#FFFFFF","#888888",true,"#000000",no,image_max,stage2,true,btncontainer);

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

			//クリックアクション
			myBtn[i].addEventListener("click",handleclick);
			//myBtn addChild
			btncontainer.addChild(myBtn[i]);


		}

		//ボタンコンテナを中央に修正
		var btncont_x=(canvasWidth-((btnW+btnSpace)*(image_max-1)-btnSpace))/2;
		btncontainer.x=btncont_x;

	}


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

		//早すぎるので調整
		setTimeout(function() {

			//遅延progressbar最後の前にcompleteが反応する
			event.target.removeEventListener("progress",progress);
			//progressTicker削除
			createjs.Ticker.removeEventListener('tick',progressbar.tick);
			//progress非表示
			progresscontainer.visible=false;

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

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

		},delay_speed);
	}
}

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

	globalflag=false;

	//AUTO文字表示/ボタン有効判定
	if (!btnValidity) {
		set_text("AUTO");
	};

	//サムネール表示中ならクリア
	if (thumb) {
		thumbBox.visible=false;
		thumb=false;
	}

	//activeボタン色変更
	if (clickbtn_use == 'use') {
		for (var i=0; i < image_max; i++) {

			//ラベル色変更
			//var target=myBtn[i].getChildAt(1);
			var target=myBtn[i].getChildByName("btntext");
			target.color=(i == image_no) ? "#FF0000":"#FFFFFF";

			//Active背景処理
			myBtn[i].active=false;
			if(i==image_no) {myBtn[image_no].active=true;}
			var active_v=false;
			if(i==image_no) {active_v=true;}
			myBtn[i].activeChg(active_v);

			var target2=myBtn[i].getChildByName("graphic");
			//X、Y、幅、高さ、角丸半径、インスタンス、グラフイック、out色、out色2、active色、active色2
			set_active(0,0,btnW,btnH,btnR,myBtn[i],target2,i,"#FFFFFF","#888888","#E3CFCF","#A36767");//#BC8F8F

		}
		stage2.update();
	}

	//MODE
	var mode=1;
	//位置データ
	var rno=Math.floor(Math.random()*pos_dx.length);
	//移動
	var px = pos_dx[rno];
	var py = pos_dy[rno];
	if (px+py == 0) {mode=0;}//移動なし

	//最初は強制FADE
	if(once) {
		mode=0;
		once=false;
	}

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

	//上画像更新画像Bitmap挿入、中央補正なし回転は出来ない
	topImage.image=new createjs.Bitmap(mainImage).image;
	if (mode == 0) {
		//FADE透明度0
		topImage.alpha=0;
		topImage.x=0;
		topImage.y=0;
	} else {
		//SLIDE
		topImage.alpha=1;
		topImage.x=canvasWidth*px;
		topImage.y=canvasHeight*py;
	}

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

}

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

	//ボタン有効解除
	btnValidity=false;

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

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

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

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

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

	},500);

}

//tickステージ
function tick() {
	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;
	}
}

//BtnClick
function handleclick (event) {
	//アニメ中は機能しない
	if (!globalflag) {return;}

	//v0.7
	var instance=event.target.parent;
	var hit_no=instance.parent.getChildIndex(instance);

	//idで判定v0.7未使用
	//var hit_no=event.target.parent.id;

	//表示中番号なら戻る
	if (hit_no == image_no) {

		return;

	} else {

		//ボタン有効/AUTO文字書き換え
		btnValidity=true;
		viewtext.text="";
		//タイマー強制停止
		clearTimeout(timerID);
		//指定番号の画像表示
		image_no=hit_no;
		draw();

	}
}

//ThumbBox表示
//arcToフキダシBOX
//arcToBalloonEx(x,y,幅,高さ,半径,矢幅,矢高さ)、矢幅は偶数値
function openThumbBox(no,thumb_x) {

	//縮小画像挿入矢印つき背景/矢印部分の色を延長
	//色付きcanvasを作る2
	thumbImage=createArrowBack(thumbW,thumbH,8,"#FFFFFF",assets[no]);

	thumbBox.graphics.clear();

	//外側ラインなしEx
	//thumbBox.graphics.beginBitmapFill(thumbImage).arcToBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);
	//外側ライン有りEx
	thumbBox.graphics.ss(2).s("#FFFFFF").beginBitmapFill(thumbImage).arcToBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);

	thumbBox.x=thumb_x;//X位置
	thumbBox.alpha=0;
	thumbBox.visible=true;
	thumb=true;

}
//ThumbBox非表示
function closeThumbBox(no) {

	//サムネール非表示
	thumbBox.visible=false;
	thumb=false;

}

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

//Active背景処理
function set_active(x,y,w,h,r,btn,s,no,outc,outc2,activec,activec2) {
	if(btn.active) {
		s.graphics.clear();
		//角丸
		//s.graphics.ss(1).s("#FF0000");//Line
		s.graphics.beginLinearGradientFill([activec,activec2],[0,1],0,0,0,h).drawRoundRect(x,y,w,h,r);//Fill
		stage2.update();
	}
	if(!btn.active) {
		s.graphics.clear();
		//角丸
		s.graphics.beginLinearGradientFill([outc,outc2],[0,1],0,0,0,h).drawRoundRect(x,y,w,h,r);
		stage2.update();
	}
};


//幅、高さ、画像
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;
}

//画像挿入矢印つき背景
//色付き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;
}

//簡単な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
}

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

//RoundRectBtnClass/RolloverButtonクラス
(function(window){

	//Container継承クラス
	//X、Y、幅、高さ、角丸半径、色、ラベル、サイズ、ラベル色、over色、over色2、out色、out色2、陰影、陰影色、番号、画像max、ステージ、サムネール使用、サムネールインスタンス
	function RoundRectBtnClass (x,y,w,h,r,c,label,size,lc,overc,overc2,outc,outc2,shadow,scolor,no,max_no,stagetype,thumbUse,thumbItem) {

		this.initialize(x,y,w,h,r,c,label,size,lc,overc,overc2,outc,outc2,shadow,scolor,no,max_no,stagetype,thumbUse,thumbItem);

	}

	//Containerクラス
	RoundRectBtnClass.prototype=new createjs.Container();
	//親クラスのinitializeを取得
	RoundRectBtnClass.prototype.Container_init=RoundRectBtnClass.prototype.initialize;
	//
	RoundRectBtnClass.prototype.initialize=function(x,y,w,h,r,c,label,size,lc,overc,overc2,outc,outc2,shadow,scolor,no,max_no,stagetype,thumbUse,thumbItem){

		this.Container_init(x,y,w,h,r,c,label,size,lc,overc,overc2,outc,outc2,shadow,scolor,no,max_no,stagetype,thumbUse,thumbItem);

		var x=x || 0;
		var y=y || 0;
		var w=w || 20;
		var h=h || 20;
		var r=r || 5;
		var c=c || "#FFFFFF";
		var label=label || no;
		var size=size || "12px";
		var lc=lc || "#FFFFFF";
		var overc=overc || "#FFFFFF";
		var overc2=overc2 || "#0000FF";
		var outc=outc || "#FFFFFF";
		var outc2=outc2 || "#CCCCCC";
		var shadow=shadow || false;
		var scolor=scolor || "#000000";

		var no=no || 0;
		var max_no=max_no || 0;
		var stagetype=stagetype || stage;

		var active=false;//ACTIVE
		var thumbUse=thumbUse || false;//サムネール使用
		var thumbItem=thumbItem || null;//サムネールコンテナ
		if(!thumbItem) {thumbUse=false;}//コンテナ指定無し補正

		var font_v=size+" "+"Arial";
		//Shape
		var back=new createjs.Shape();
		back.graphics.beginLinearGradientFill([outc,outc2],[0,1],0,0,0,h).drawRoundRect(x,y,w,h,r);
		back.name="graphic";//name挿入
		//原点移動、グラフイックを容易にするため
		back.regX=w/2;
		back.regY=h/2;
		//Text
		var text=new createjs.Text(label,font_v,lc);
		text.maxWidth=w;
		text.textAlign="center";
		text.textBaseline="middle";
		text.name="btntext";//判定用

//firefox補正/未使用
//if (firefox) {text.y +=1;}

		this.id=no;
		this.addChild(back,text);
		this.shadow=new createjs.Shadow(scolor,0,0,4);

		//rollover/thisに注意
		this.addEventListener("rollover",function (e) {
			if(!active) {
				back.graphics.clear();
				back.graphics.beginLinearGradientFill([overc,overc2],[0,1],0,0,0,h).drawRoundRect(x,y,w,h,r);
				stagetype.update();
			}
			//サムネールopen
			if(thumbUse) {
				//Point計算、btncontainer基準localToGlobal
				var point=thumbItem.localToGlobal(e.target.x,e.target.y);
				//Point受け渡し
				var thumb_x=point.x;
				openThumbBox(no,thumb_x);
			}
		});
		//rollout/thisに注意
		this.addEventListener("rollout",function (e) {
			if(!active) {
				back.graphics.clear();
				back.graphics.beginLinearGradientFill([outc,outc2],[0,1],0,0,0,h).drawRoundRect(x,y,w,h,r);
				stagetype.update();
			}
			//サムネールclose
			if(thumbUse) {
				closeThumbBox(no);
			}
		});

		//active変更メソッド
		this.activeChg=function (active_v){
			active=active_v;
		}

	}

	window.RoundRectBtnClass=RoundRectBtnClass;

}(window));

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

//START
init();


CSS

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


/*日本語 createJS108.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;
}
#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;
}

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


 

簡単な説明


[説明図]

「activeボタンの色を替える」ですが、以前のものは簡単にする為「ACTIVEなボタン」の上にグラフイックインスタンスを移動して重ねていましたが、今回は直接ボタン背景色を塗り替えますので処理が幾分増えます。
「デモ」ではあわせて、テキスト色も変化させています。(注意、ここでは rollover rollout を使用しています)


1. 画像はスライドまたはフエードします。原則、自動で順次表示します。
2. ボタンでの操作も可能です。ACTIVEなボタン背景を塗り替えます。
3. ボタンRollOverでサムネールを表示します。
4. コンテナ継承クラスのボタンをもテストしてみました。
5. Chrome表示の場合不具合がありますので修正しています。
6. ボタンを並べて、グループで中央に配置する場合に計算しやすい。
7. ボタンは下に別ステージ(stage2)を作り配置しています。


 

rolloverボタンの色を替える(通常処理)


ボタンの原点を中央に補正していますが、グラフイックを描き易いようにしています。ボタンを画像で塗る場合も都合の良いようにしました。


1. ラベルテキストは、textAlign center、textBaseline middle、で作成しています。
2. 下層のグラフイックは、regXY、で中央に補正しています。
3. ボタンは「角丸陰影」処理したほうが綺麗である。
4. テキストのY位置がブラウザにより微妙に違います。


 

rolloverすると陰影が濃くなる

ボタンに、陰影をつけた場合は、rolloverするとグラフイック部分の陰影が濃くなる現象が起こります。Displayによっては図の様にギザギザになります。
グラフイック塗り替え前に、graphics.clear() を実行すると、正常になります。



//Gradient rollover
btn.addEventListener("rollover",function (e) {
	s.graphics.clear();
	//角丸
	s.graphics.beginLinearGradientFill([overc,overc2],[0,1],0,0,0,h).drawRoundRect(x,y,w,h,r);
	stage2.update();
});

beginBitmapFill()で画像を入れた場合に、Chromeで「陰影」が壊れる

グラフイックにサムネールなどを塗りこむ処理の場合であるが、角丸drawRoundRect() 処理をするとChromeで「陰影」が壊れます(グラフイックの形状は多いので処理してみないとわからない)。
図の様に、右と下方の「陰影」が切れてしまいます(Chromeエンジンの場合のみ、他は正常)。

画像をエレメントで縮小処理してbeginBitmapFill()に入れれば正常に「陰影」処理されます。


beginBitmapFill()のmatrixで画像を縮小すると位置がずれる

グラフイック部分に画像を描画する場合、Chromeで「matrix処理」により画像を縮小すると、グラフイックの形状によっては原点位置よりXY方向とも2ピクセルずれる。


角丸 drawRoundRect()、の場合に多く起きる。グラフイックの形状によってはどうなるか不明である。
ちなみに、角形drawRect()では不具合は無いが、近年ボタンは「角丸陰影」処理されたものが多い。


「matrix処理」では無く、画像をエレメントで drawImage() 処理(縮小)するとずれない。


● beginBitmapFill()の書式
サムネールを加工表示する場合、以下のような書式である故にマトリックス処理するのが当然である。




beginBitmapFill(画像,リピート,マトリックス)

● beginBitmapFill()に画像をエレメントを入れる
Chromeで問題があれば、以下の様に「画像エレメント」を入れて描画すると良い。




beginBitmapFill(画像エレメント)

● drawImage()で画像を縮小の実際処理
ここで、assets[no]、は大きな画像である。以下の処理でサムネールの大きさで、「画像エレメント」を得る。




//サムネール画像書き換え/画像result取得/縮小
thumbImage=createImgCanvas(thumbW,thumbH,assets[no]);

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

//幅、高さ、画像
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;
}

不具合が出ても、この辺の手法で回避できそうである。Chromeの不具合と思いますが修正されるかは不明です。


ACTIVEなボタンの処理

ACTIVE時にボタンの文字および背景色を変化させるために、それぞれ識別するために、name属性を記載していますので、それを判定して、適正な処理をすることになります。

「デモ」では、テキスト(ラベル)色、背景(ボタングラフイック)色、共にも変化させていますが、この辺は自由です。
ACTIVE時には、active属性を切り替えて、rollover rollout の色変化をしないようにしました。


name属性を記載



//create-グラデーションボタン
function createGradientCenterbtn (x,y,w,h.........) {

	略す

	btn.active=false;//ACTIVE判定
	s.name="graphic";//name挿入
	tx.name="btntext";//name挿入

	略す

}

色変更




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

	略す

	//activeボタン色変更
	if (clickbtn_use == 'use') {
		for (var i=0; i < image_max; i++) {

			//ラベル色変更
			//var target=myBtn[i].getChildAt(1);
			var target=myBtn[i].getChildByName("btntext");
			target.color=(i == image_no) ? "#FF0000":"#FFFFFF";

			//Active背景処理
			myBtn[i].active=false;
			if(i == image_no) {myBtn[image_no].active = true;}
			var target2=myBtn[i].getChildByName("graphic");
			//X、Y、幅、高さ、角丸半径、インスタンス、グラフイック、out色、out色2、active色、active色2
			set_active(0,0,btnW,btnH,btnR,myBtn[i],target2,i,"#FFFFFF","#888888","#E3CFCF","#A36767");//#BC8F8F

		}
		stage2.update();
	}

	略す

}

テキストのY位置

ブラウザの「Canvasテキスト策定基準」の解釈違いで発生していますが、textBaseline middle、で作成すると誤差が少なくなるようです。英文字、日本語、でも微妙な差が出ます。
Firefoxの場合の誤差が気になるので、デモでは下記の様に修正しています。但し文字が小さい、ボタンの高さが大きければほとんど気にならないでしょう。修正は個人的に判断ください。

時間の経過と共にブラウザ側で修正されているようですが、ブラウザ全てが同じになるのかは不明です。




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

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

//create-グラデーションボタン
function createGradientCenterbtn (x,y,w,h.........) {

	略す

	//firefox補正
	if (firefox) {tx.y +=1;}

	略す

}

フキダシでサムネールを表示

角丸のボックスではなく、フキダシでサムネールを表示する場合に、矢印部分にも画像が塗りこまれます。
そのために、矢印部分をも考慮したエレメント処理をしてみました。




//縮小画像挿入矢印つき背景/矢印部分の色を延長
//色付きcanvasを作る2
thumbImage=createArrowBack(thumbW,thumbH,8,"#FFFFFF",assets[no]);

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

//画像挿入矢印つき背景
//色付き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;
}

矢印無しの場合
「フキダシ」形式ではなく、通常の角丸RoundRectで良い場合は下記の様に通常のRoundRectで描画すればよい。



//RoundRect
function openThumbBox(no,thumb_x) {

	//縮小画像/RoundRect
	thumbImage=createImgCanvas(thumbW,thumbH,assets[no]);

	thumbBox.graphics.clear();

	//外側ライン有り
	thumbBox.graphics.ss(2).s("#FFFFFF").beginBitmapFill(thumbImage).drawRoundRect(0,0,thumbW,thumbH,thumbR);

	thumbBox.x=thumb_x;//X位置
	thumbBox.alpha=0;
	thumbBox.visible=true;
	thumb=true;

}

 

ボタンをコンテナ継承クラスで作る


上記の通常の方式とあまり変わりは有りませんが、どちらが良いかは判定し難い所です。これは好みの問題です。
クラスの場合メソッドを作れますので、設計次第では処理が簡単に出来る面もあります。


1. テスト的にコンテナ継承クラスで作ってみました。(RoundRectBtnClass)
2. グラフイックの更新はTicerを設定せず、直接ステージ2をupdate()しています。
3. 多くの機能を持たせると複雑になりますので、簡略にしています。
4. イベントリスナーの中の this に注意ください。


詳細は createJS108b.js を参照ください。


クラス、メソッドの活用

クラスの場合メソッドを作れますので、下記の様にすれば、外部よりアクセスできます。
テスト的な一例です。この辺の設計は自由です。



//メソッドの実行
myBtn[1].backcolorChg("#FFD700");
myBtn[1].textcolorChg("#FF0000");



	略す

	RoundRectBtnClass.prototype.initialize=function(x,y,w,h............){

		this.Container_init(x,y,w,h............);

		略す

		//rollover/thisに注意
		this.addEventListener("rollover",function (e) {
			略す
		});
		//rollout/thisに注意
		this.addEventListener("rollout",function (e) {
			略す
		});

		//------------------------------
		//背景変更メソッド
		this.backcolorChg=function (color){
			active=true;
			back.graphics.clear();
			back.graphics.beginFill(color).drawRoundRect(x,y,w,h,r);
			stagetype.update();
		}
		//TEXT変更メソッド
		this.textcolorChg=function (txcolor){
			text.color=txcolor;
			stagetype.update();
		}
		//------------------------------
	}

	略す

ボタン類を作るには結構時間がかかるし面倒かつ不具合もあるが、1形式を作っておけば、コピーで使いまわしが出来るので結構便利である。


画像

原則、使用者が用意ください。640x300画像、デモ使用の画像は「デモページ」にあります。


下記は、角丸RoundRectボタンなどに関する記事です。少々微妙な違いがあります。

【参照】当方の記事: CreateJS Gradient 角丸RoundRectマウスオーバーボタンを考える

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



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

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


 

以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]