POPSブログ

CreateJS マウスオーバーRoundRectサムネールボタン表示 active対応

219

  Category:  javascript2013/05/12 pops 

CreateJS マウスオーバーRoundRectサムネールボタン表示の変化、active対応。大きい画像をスケールで縮小してサムネール画像を作りリンクを組みます。幾らでもその辺に転がっているアリキタリのボタンです。easeljs-0.7 でのテストです。

 

CreateJS マウスオーバーRoundRectサムネールボタン表示active対応


2013/09/25/EaselJSなどバージョンUPされました(easeljs-0.7)。動作など確認してeaseljs-0.7用に更新しています。(2013/10/18)


ここでは、大きな画像を縮小して、サムネールボタンを作り、それに「shadowフィルター」かける事を前提にします。

作るのは簡単ですが、角丸RoundRectにして「shadowフィルター」で処理をすると、Chromeの場合陰影との相性が悪く一手間かかります。(ボタンstage2配置)
下層にグラフィックのShape()を作り「shadowフィルター」処理すれば解決するのですが、ワタシとしては面倒だ!。


[ 目次 ]


 

 

CreateJS マウスオーバーRoundRectサムネールボタン概要

▲[ 目次 ]

[ 説明図 ]

 

1. 原則として、扱い易いBitmap()形式で作る事にして角丸をマスクで処理します。スケールで縮小します。
2. マウスオーバーするとサムネールが明るくなります。マウスアウトすると暗くなります。サムネール直下に黒の背景(Shape)を配置しコンテナでラップする2層構造である。(サムネール画像透明度を変化させている)。
図の通りですが、マスクだとChromeでボタンの四隅に黒い点が出るのが気になる。
3. activeなボタンも明るくする。気分によってはactive用ボタン(Shape)を重ねて変化を付けるのも良い。
4. BitmapFill()形式でグラフィックに画像を流し込む方法もあります。Matrixで縮小します。
5. 少し問題が有りますが簡単な(複合的で無い)、軽量のShapeタイプのモノも最後に説明します。
6. 変化はアイデア次第です。凝れば面倒になるだけです。(こったらトクホン、サロンパス)
無けりゃ「収入印紙」でもハッとけ!

 

DEMO等

▲[ 目次 ]


DEMO


上記、CreateJS マウスオーバーRoundRectサムネールボタン表示、簡単なデモ。

このページはHTML5では有りませんので、デモページでご覧下さい。「IE7.8」ではご覧戴けません。


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




マウスオーバーRoundRectサムネールボタン表示 active時の変化を簡単に行う

▲[ 目次 ]


1個のactive時のボタンを作り、activeなボタンに重ねて行く方法が一番簡単。多少「activeボタン」に変化を付けるのも随意です。サムネール画像の場合は「目印」などが合いそうです。


// 以下説明などは、DEMOのJS記載のものが殆んどです。DEMOのJSは「デモページ」にあります //


「ボタン」収納の「ボタンコンテナ」は事前に作ってあるとします。(ステージ stage2)

stage2.enableMouseOver(20)は重要です。enableMouseOver()で
addEventListener("mouseover",...)
addEventListener("rollover",...)
を機能させます。今回「ボタン」はstage2に配置している事に注意。

「ボタンコンテナ」のY位置は、変数 interval_H で設定。X位置はボタン位置になります。

ステージを設定



function init() {

	//STAGE
	stage=new createjs.Stage('mainCanvas');
	//STAGE2
	stage2=new createjs.Stage('subCanvas');
	//MouseOver重要
	stage2.enableMouseOver(20);

	略す

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

	略す
}

 

Bitmap()形式で作る

▲[ 目次 ]

ボタンは画像読み込みに成功した分の個数を作るために complete() に記載しています。
このDEMOでの「ボタン」の原点は中央に設定していますので、計算が「角丸ボタン」と少し違います。(ボタンの原点は中央に設定しておいた方が何かと便利かも知れません、AS3の時はそうでした)

画像はBitmap()で取り込んだ方が問題が無く作れます。ただし四角形であるのでRoundRectにするにはマスクをしなければ成らないのが欠点だ。

createBitmapThumbBtn()形式にしていますので、初期に設定されたサイズにして、グラフィックの背景でマスク及び陰影処理をしてコンテナを返します。マウスオーバーでサムネール画像の透明度が変化するようにアクション設定。


1.画像Bitmap()をRoundRectにするためのマスク層(Shape)を配置、「shadowフィルター」は下のマスクに処理。(画像Bitmap()にshadow処理してもマスクでカットされることを考慮の事)
2.RoundRectにしないならば、マスク層は要らないが、ここではボタンの透明度変化のために黒の背景(Shape)を配置している。(BitmapFill()形式に切り替えても問題ないようにの配慮もある)


● サムネールボタンを作る

▲[ 目次 ]

easeljs-0.7より mouseover mouseout が rollover rollout になりましたので変更します。
新しい、rollover rollout、が古い、mouseover mouseout、と同様です。


Activeボタンは、activeなボタン位置の上に移動します。サムネール画像のため簡単な目印などをグラフィックで作ります。サムネール画像の場合は必ず必要とは限りません。
operaRoundRect関数はOperaでも角丸を正常に描くものです。


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

	//画像数
	image_max=assets.length;

	略す

	//ActiveThumbボタンを作る/#6A5ACD
	activeBtn=createActiveThumb(0,0,thumbW,thumbH,btnRadius,"#FF0000");

	//全ボタン幅
	var btnW_all=0;
	//ボタンを作る
	if (clickbtn_use == 'use') {

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

			//番号受け渡し
			var no=i;

			//Bitmapサムネールボタンを作る
			myBtn[i]=createBitmapThumbBtn(assets[no],0,0,thumbW,thumbH,btnRadius,imageW,imageH,no);


			myBtn[i].cursor="pointer";
			//ボタン間隔
			myBtn[i].x=i*interval_W;
			//ボタン判別用のproperty:idを書き込む、未使用
			myBtn[i].id=i;
			//クリックアクション
			myBtn[i].addEventListener("click",handleclick);
			//myBtn addChild
			btncontainer.addChild(myBtn[i]);

		}

		//activeBtnを乗っける
		btncontainer.addChild(activeBtn);
		//ボタン収容幅
		btnW_all=interval_W*(image_max-1);
		//ボタンコンテナを中央に修正1
		var btncont_x=(canvasWidth-btnW_all)/2;
		btncontainer.x=btncont_x;
		btncontainer.y=interval_H;
		btncontainer.visible=true;

		stage2.update();
		stage.update();
	}
}

//create-Bitmapボタン
function createBitmapThumbBtn (image,x,y,w,h,r,imgw,imgh,no) {

	//BTNコンテナ、黒back付き
	var btn=new createjs.Container();
	var back=new createjs.Shape();
	back.graphics.s(0).beginFill("#000000");
	operaRoundRect(back,0,0,w,h,r);
	back.shadow=shadow;
	btn.name="thumbbtn";//name挿入
	//Bitmap縮小
	var bmp=new createjs.Bitmap(image);
	bmp.scaleX=w/imgw;//scaleX
	bmp.scaleY=h/imgh;//scaleY
	bmp.alpha=0.7;
	bmp.mask=back;
	btn.regX=w/2;
	btn.regY=h/2;

	btn.addChild(back,bmp);

	//BitmapThumb rollover
	btn.addEventListener("rollover",function (e) {
		bmp.alpha=1;
		stage2.update();
	});
	//BitmapThumb rollout
	btn.addEventListener("rollout",function (e) {
		if(image_no == no) {return}//rolloutを無効にする
		bmp.alpha=0.7;
		stage2.update();
	});
	return btn;
}

ボタンの「クリックアクション」の変更 [easeljs-0.7より]

easeljs-0.7バージョンUPに伴い「クリックアクション」の「イベント処理」が変更になりましたので訂正します。
「親」を目指す書き方になります。ボタン構造の違いにより処理も変わりますので注意が必要です。
他にも方法は有りますがここでは省略します。


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

	略す

}

● ボタン rollover、rollout、でのアクション設定

▲[ 目次 ]

mouseover、mouseout、イベントでそれぞれのサムネール画像に変化をつけます。改造の際は適当につくる。
addEventListener()で stage2.update を行っていますので、現時点ではstage2のTickerは要りません。



	btn.addEventListener("rollover",function (e) {
		//必要な処理
		stage2.update();
	});
	btn.addEventListener("rollout",function (e) {
		//必要な処理
		stage2.update();
	});
	return btn;
}

以下はこのDEMOのためのものです。


if(image_no == no) {return}//mouseoutを無効にする

● Activeボタンを作る

▲[ 目次 ]

Activeボタンを作る。自動的に1番目の上に重なります。変更したい場合は自由に。赤い点、ボーダー枠の2種類用意しています(3角も使用可能)。この辺はアイデア次第です。


//注意、Activebtn Thumb、赤い点
function createActiveThumb (x,y,w,h,r,activec) {

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	btn.name="btntext";
	var s=new createjs.Shape();
	//共通
	s.graphics.s().beginFill(activec).drawCircle(x,y-h/2,3);//円
	//s.graphics.s().beginFill("#FF0000").drawPolyStar(x,y-h/2,5,3,0.0,90);//3角
	btn.addChild(s);
	return btn;
}

//注意、Activebtn Thumb、赤い枠
function createActiveThumb2 (x,y,w,h,r,activec) {

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	btn.name="btntext";
	var s=new createjs.Shape();
	//共通
	s.graphics.s(activec).ss(2).beginFill();
	operaRoundRect(s,0,0,w,h,r);
	btn.regX=w/2;
	btn.regY=h/2;
	btn.addChild(s);
	return btn;
}

drawCircle() はCreateJSの円を描く関数です。四角でも三角でも宜しい。好みだ。


● Activeボタンの位置の移動

▲[ 目次 ]

変更の設定をする(手書きで設定変更)

変更の設定をする場所は、スクリプトの構成で違うと思いますが、DEMOでは画像を表示する draw() で行います。
ラベル文字は入れていませんので位置の移動は簡単です。表示画像番号がimage_noですので、対応するボタン番号のX位置に、activeボタン位置を合わせるだけ。
ここでは透明度を変えていますので、その修正も行います。

ボタン(BTNコンテナ)には事前に、name 'thumbbtn' を書き込んでいるので、getChildByName()利用で判別出来ますが、現在は、getChildAt(1)で判定しています。



	//activeボタン変更
	if (clickbtn_use == 'use') {
		//active透明修正/activeBtn使用
		for (var i=0; i < image_max; i++) {
			var target=myBtn[i].getChildAt(1);
			//var target=myBtn[i].getChildByName("thumbbtn");
			target.alpha=(i == image_no) ? 1:0.7;
		}
		//activeBtn移動
		activeBtn.x=myBtn[image_no].x;
		stage2.update();
	}

btncontainer.tick=function (){...}で行う方法も有りますが。上記方法が簡単です。


Bitmapの縮小ををMatrixで処理してみる

Bitmapの縮小ををMatrixで処理してみる(ここでは使用しないが、一応テスト)


//create-Bitmapボタン
function createBitmapThumbBtn (image,x,y,w,h,r,imgw,imgh,no) {

	略す

	//Bitmap縮小
	var bmp=new createjs.Bitmap(image);
	var scale_x=w/imgw;//scaleX
	var scale_y=h/imgh;//scaleY
	var mtx=new createjs.Matrix2D();
	mtx.scale(scale_x,scale_y);
	mtx.decompose(bmp);

	略す
}

現時点で、BitmapのMatrix処理でバグがある情報がありますが、この処理ではOKのようだ。


 

BitmapFill()形式で作る

▲[ 目次 ]

beginBitmapFill(atrix)形式でグラフィックに画像を流し込みます。グラフィックはRoundRectになります。上の、Bitmap()形式と違いマスクは不要です。
注意しなければならない事は、画像を流し込んだShapeに「shadowフィルター」処理をすると、Chromeの場合陰影と画像が一致しないでずれ込みます。回避策として、ここでは下の背景Shapeに「shadowフィルター」を掛けています。このボタンはタマタマ下に背景(マスク用Shape)があったので利用するが、設計如何によっては新たに背景を作るなどの修正が必要になります。(画像グラフィックの処理の種類により違い有り)

[ 説明図 ]

 

Chromeの場合 BitmapFill(matrix) と「shadowフィルター」同時処理で、陰影がズレる


1. 出来れば、下方に「背景グラフィック」を配置してそれに「shadowフィルター」する。(ここでは偶々黒の背景があったので利用する、無ければ作る)
2. グラフィックに画像を流し込みますが縮小するには、Matrix処理します。(Chromeは、Matrix処理と「shadowフィルター」を組み合わせると陰影が狂う)
3. ここでも画像の下の「背景グラフィック」に「shadowフィルター」をしています。よって問題なし。
4. デザイン、エフェクトなど変え別の問題が出た場合は自分で解決する他有りません。
5. グラフィック位置を変更して画像を流し込みの修正方法は「下の説明参照ください」。


Bitmap()形式からBitmapFill()形式への変更


同じ構造で、中のサムネールの画像処理が違うだけです。BitmapFill()形式はマスクを利用しないで、RoundRectグラフィックの中に画像を流し込みます。Chromeで少し見た目が良くなる。次ぎの1箇所を変更するだけ。


初期では、Bitmapになっていますので、BitmapFill()処理に変更します。引数は同じです。


//Bitmap
//myBtn[i]=createBitmapThumbBtn(assets[no],0,0,thumbW,thumbH,btnRadius,imageW,imageH,no);

//createThumbBtn、背景付きコンテナ入り陰影は背景
myBtn[i]=createThumbBtn(assets[no],0,0,thumbW,thumbH,btnRadius,imageW,imageH,no);

createXxxx()形式の、画像入りコンテナを返すcreate関数です。addEventListenerで透明度を変えています。stage2.updateをしていますので、特別にstage2用のTickerは不要です。
Activeボタンの位置の移動も、上のBitmap()形式と共通です。


//create-Thumbボタン
function createThumbBtn (image,x,y,w,h,r,imgw,imgh,no) {

	//BTNコンテナ、黒back付き
	var btn=new createjs.Container();
	var back=new createjs.Shape();
	back.graphics.s(0).beginFill("#000000");//#6A5ACD
	operaRoundRect(back,0,0,w,h,r);
	back.shadow=shadow;
	//縮小
	var scale_x=w/imgw;//scaleX
	var scale_y=h/imgh;//scaleY
	var mtx=new createjs.Matrix2D();
	mtx.scale(scale_x,scale_y);
	//Shape
	var s=new createjs.Shape();
	s.graphics.s(0).beginBitmapFill(image,"no-repeat",mtx);
	operaRoundRect(s,0,0,w,h,r);
	s.name="thumbbtn";//name挿入
	s.alpha=0.7;
	btn.regX=w/2;
	btn.regY=h/2;
	btn.addChild(back,s);

	//Thumb rollover
	btn.addEventListener("rollover",function (e) {
		s.alpha=1;
		stage2.update();
	});
	//Thumb rollout
	btn.addEventListener("rollout",function (e) {
		if(image_no == no) {return}//mouseoutを無効にする
		s.alpha=0.7;
		stage2.update();
	});
	return btn;
}




以下、面倒なChrome補正処理です。興味のある方のみお読みください。説明は繁雑です。


 

Shape単体構造にBitmapFill()形式で作る「shadowフィルター」処理の概要

▲[ 目次 ]

DEMO-B

Shape単体構造にBitmapFill()形式、DEMO


[ 説明図 ]

 

ボタンの動作など

Shape単体構造に BitmapFill()形式で画像を流し込み、余計なものを省き単純軽量化したものです。activeなボタンは 1.2 倍に拡大するだけ。但し「Matrix流し込み」「shadowフィルター」2つの複合処理で、Chromeの場合バグが有る様です。サムネールを作るにはMatrix処理が必要ですから困ります。

CreateJSの「shadowフィルター」はChromeで相性が余りよくないようだ。他にも何らか起こる可能性はある。


陰影のChromeでの修正

Chromeの場合 BitmapFill(matrix) と「shadowフィルター」同時処理で、陰影がズレるのでそれを、下に背景グラフィックを配置しないで、Shape単体で修正する試みです。
完全では有りませんが、サムネールが大きいとほぼわかりません。何らかの役に達かも知れません?


1. 出来れば、下方に「背景グラフィック」を配置してそれに「shadowフィルター」する、「前の説明、BitmapFill()形式で作る」参照。面倒なChrome修正は行わないのが一番利口な方法です!。またはバグの原因である「shadowフィルター」をしない。「shadowフィルターなし」参照
2. 小さなサムネール用画像を用意すれば、Matrix処理は不要だが、そんな人はいない。

3. グラフィック描画の際に X.Y を -2 ずらすと陰影は修正できる。但し中の画像はズレる(2ドット)が気になるものでは無い。(極端にサムネールを小さくしないで下さい、中の画像のズレが目立つ)、[ 説明図 ]参照

4. 色々試みたが、現在これ以上の修正は無理かも?。(大きさの計算が旨く出来ないか、Chromeで画像がすでにズレていると思うしかない)
5. 単純軽量だから数多く並べるときに重宝なのだが、いずれ直る時が来るでしょう。
6. 一応、緊急のChrome修正対策(ゴマカシ)であり、完全では無い事を認識ください。
エライ面倒クセイ!簡単にカカンかい!「休憩」ビール持ってコイ!


グラフィックの位置をずらしたら偶然に陰影が直った。でも画像はズレテいる。そんな状況です。OperaでRoundRectが壊れるのでその回避を行っているので面倒にみえます。


 

Shape単体構造にBitmapFill()形式で作る「shadowフィルター」処理

▲[ 目次 ]

下の例では修正するようにしています。図の様にほぼ修正できます。一応応急の処置ですので出来れば構造を変えてください。(ボタン原点がが中央のため、regX、regY、も -2 修正しています)

下の例では、activeボタンを作るを削除しています。activeボタンを使用したい場合は、それなりに工夫してください。


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

	//画像数
	image_max=assets.length;

	略す

	//ActiveThumbボタンを作るを削除
	//activeBtn=createActiveThumb(0,0,thumbW,thumbH,btnRadius,"#FF0000");

	//全ボタン幅
	var btnW_all=0;
	//ボタンを作る
	if (clickbtn_use == 'use') {

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

			//番号受け渡し
			var no=i;

			//直接Shape背景なし面倒だ/原点がクルうので修正
			myBtn[i]=createRoundMatrix(assets[no],0,0,thumbW,thumbH,margin*2,imageW,imageH);
			if (window["chrome"]) {
				myBtn[i].regX=thumbW/2-2;//shadowなしは補正しないこと
				myBtn[i].regY=thumbH/2-2;
			} else {
				myBtn[i].regX=thumbW/2;
				myBtn[i].regY=thumbH/2;
			}
			myBtn[i].shadow=shadow;

			同じ

		}

		//activeBtnを乗っけるを削除
		//btncontainer.addChild(activeBtn);

		同じ

		stage2.update();
		stage.update();
	}
}

//Matrix処理用1 Chrome陰影修正用画像は少しずれる
function createRoundMatrix(image,x,y,w,h,r,imgw,imgh) {
	//縮小
	var scale_x=w/imgw;//scaleX
	var scale_y=h/imgh;//scaleY
	var mtx=new createjs.Matrix2D();
	mtx.scale(scale_x,scale_y);
	//Shape
	var s=new createjs.Shape();
	s.graphics.s(0).beginBitmapFill(image,"no-repeat",mtx);
	if (window["chrome"]){
		operaRoundRect(s,x-2,y-2,w,h,r);
	} else {
		operaRoundRect(s,x,y,w,h,r);
	}
	return s;
}

● Activeボタンの位置の移動とボタンの拡大

現在、activeなボタンを1.2倍にする。



	//activeボタン変更
	if (clickbtn_use == 'use') {
		//Shape単体の場合にscale変更/activeBtn使用しない
		for (var i=0; i < image_max; i++) {
			var target=myBtn[i];
			var scale=(i == image_no) ? 1.2:1;
			target.scaleX=target.scaleY=scale;
		}
		stage2.update();
	}

Activeボタンの位置の移動


if (clickbtn_use == 'use') {
	activeBtn.x=myBtn[image_no].x;
}


ボタンの「クリックアクション」の変更 [easeljs-0.7より]

easeljs-0.7バージョンUPに伴い「クリックアクション」の「イベント処理」が変更になりましたがこの構造の場合は訂正し無くとも機能します。
かなり混乱しますナ。新しい「クリックアクション」を使用した方がスッキリするかも知れません。


従来のリスナー処理は構造が違うと面倒


//BtnClick/ボタン構造が違うのでv0.7注意
function handleclick (event) {

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

	//v0.7でも変わりなし
	var target=event.target;
	var hit_no=target.parent.getChildIndex(target);

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

	略す

}

新しい方式のリスナー処理は簡単になります。


新しいクリックアクション
myBtn[i].on("click",handleclick,null,false,i);

//処理が簡単になる
function handleclick (event,no) {

	//押されたボタンは何番目か、引数を得る
	var hit_no=no;

	略す

}

 

Shape単体構造にBitmapFill()形式で作る「shadowフィルター」なし

▲[ 目次 ]

[ 説明図 ]

 

「shadowフィルター」処理なしの場合はChromeでバグが出ませんから、位置の -2 調整の必要はなし。
createRoundMatrix2()を使用します

上の図は、実際のChromeでの表示です。画像のズレは有りません。背景色によっても見え方は違いますが、、


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

	//画像数
	image_max=assets.length;

	略す

	//ActiveThumbボタンを作るを削除
	//activeBtn=createActiveThumb(0,0,thumbW,thumbH,btnRadius,"#FF0000");

	//全ボタン幅
	var btnW_all=0;
	//ボタンを作る
	if (clickbtn_use == 'use') {

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

			//番号受け渡し
			var no=i;

			//直接 Shape背景なしshadowなし
			myBtn[i]=createRoundMatrix2(assets[no],0,0,thumbW,thumbH,margin*2,imageW,imageH);
			//reg -2 補正はしない
			myBtn[i].regX=thumbW/2;
			myBtn[i].regY=thumbH/2;
			//shadowは削除
			//myBtn[i].shadow=shadow;

			同じ

		}

		//activeBtnを乗っけるを削除
		//btncontainer.addChild(activeBtn);

		同じ

		stage2.update();
		stage.update();
	}
}

//Matrix2
function createRoundMatrix2(image,x,y,w,h,r,imgw,imgh) {
	//縮小
	var scale_x=w/imgw;//scaleX
	var scale_y=h/imgh;//scaleY
	var mtx=new createjs.Matrix2D();
	mtx.scale(scale_x,scale_y);
	//Shape
	var s=new createjs.Shape();
	s.graphics.s(0).beginBitmapFill(image,"no-repeat",mtx);
	operaRoundRect(s,x,y,w,h,r);
	return s;
}

Lineを陰影の代用にしても一時シノギになるかも知れない。


s.graphics.ss(2).s("#888888").beginBitmapFill(image,"no-repeat",mtx);//LINE

 

小さなサムネール画像を使用する場合

▲[ 目次 ]

上記の説明は全て、大きな画像をスケールを変更してサムネール画像として利用する場合でした。
最初から「小さなサムネール画像」を利用する場合は、縮小又はMatrix処理をしませんので。Chromeでの不具合も発生しません。手間隙かけて「小さなサムネール画像」を作る人はいないと思いますが、、、


例えば次ぎの様になるでしょう。beginBitmapFill()で角丸処理する場合の例、(サムネール寸法、thumbW thumbH)
「shadowフィルター」処理をしても問題は起きません。

operaRoundRect() は Opera でも角丸を描く当方の処理関数です。


var s=new createjs.Shape();
s.graphics.s(0).beginBitmapFill(サムネール画像result値);
operaRoundRect(s,0,0,thumbW,thumbH,5);
myBtn[i]=s;
myBtn[i].regX=thumbW/2;
myBtn[i].regY=thumbH/2;

注意、beginBitmapFill()は「result値」が無いと「エラー」になる、最悪JSが停止します。


Bitmap()でそのまま表示


var bmp=new createjs.Bitmap(サムネール画像result値);
myBtn[i]=bmp;
myBtn[i].regX=thumbW/2;
myBtn[i].regY=thumbH/2;

Bitmap()は「result値」が無くとも「エラー」にはなら無い表示しないだけ、安心だ!


 

その他

DEMO専用です。使用は自由ですが、画像などは各自ご用意ください。JSの先頭部分をお読み下さい。
テストですので、予告無くスクリプトなど修正する場合があります、ご了承ください。


「角丸RoundRectボタン」「shadowフィルター」などの問題点などは、下記記事を参照下さい。

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

「グラデーション、画像埋め込み 角丸RoundRectマウスオーバーボタン」は、前ページを参照下さい。

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

【参照】当方の記事: CreateJS 画像埋め込み、角丸RoundRectマウスオーバーボタンを考える

【参照】当方の記事: CreateJS RoundRectマウスオーバーボタンのactive時の変化を考える


簡単ですが以上です。

お前はアホか、ゴタク並べて何が簡単ジャ!、パチンコは世界遺産ダ!

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]