POPSブログ

CreateJS Gradient 角丸RoundRectマウスオーバーボタンを考える

215

  Category:  javascript2013/04/25 pops 

CreateJS Gradient 角丸RoundRectマウスオーバーボタン。角丸RoundRectマウスオーバーボタンの続きですが、グラデーションボタンを作り、それに「shadowフィルター」を設定してみます。勿論、Operaでは角丸RoundRectが壊れます。問題箇所の修正方法など考えます。
easeljs-0.7 でテストして見ました。

 

CreateJS Gradient角丸RoundRectマウスオーバーボタン


2013/09/25/EaselJSなどバージョンUPされました(easeljs-0.7)。動作など確認してeaseljs-0.7用に更新しています。(2013/10/13)
Operaのブラウザエンジンが、Chrome用に変わっていますので、角丸の不具合がなくなっています。ほとんど考慮しなくとも良くなっています。(2014/09/05 追記)

修正などが多くなり読み難いのですが、次のバージョンで Graphicsクラス の変更が予定されていますので、其の時に読みやすくします。(今年末までには、次のバージョンに変わると予想しています)


SA3同様、Gradient角丸RoundRectマウスオーバーボタンをスクリプトで書くのは面倒です。作る気にもなれないナ!。イヤイヤ作ってみました。1つ作ればコピペでイケルがそれでも面倒だ!
BOTTUNクラスは比較的簡単に作れるがラベル位置が微妙に狂う。BOTTUNライブラリなどほしい所だ。


[ 目次 ]



[ 説明図 ] DEMOのキャプチャー

 

グラデーション角丸RoundRectマウスオーバーボタン

▲[ 目次 ]

ボタンの共通設定。下記は、グラデーション角丸RoundRect、ラベルテキスト中央、Safariで文字の食み出し防止、などの処理をしている。問題点などの詳細は「前ページ」を参照下さい。

グラデーションボタンはグラフィックの塗りの部分だけを変更したものです。グラデーション塗りは自由に変更可能です。


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


 

 

● リスナー及びマウスオーバー設定、EaselJSバージョン0.7での変更

▲[ 目次 ]

EaselJSバージョン0.7 よりEVENT関連が大きく変更になりました。修正しなければ機能しない場合があります。今後の事を考えての変更と言う事ですが、、、

 

● 「クリックアクション」のリスナー変更

バージョン0.7での「クリック」の際のイベント処理が変わりました。「デモ」の「クリックアクション」はバージョン0.7用に変更済みです。


CreateJSのコンテナ収容、標準のボタン構造の場合。「親」要素を目指すように処理すれば良い。

リスナー、handleclick関数の内部処理をバージョン0.7用に変更した。


//handleclick関数
function handleclick (event) {

	//クリックされた親を取得
	var instance=event.target.parent;
	//ボタン収容コンテナ階層の中の何番目か
	var hit_no=instance.parent.getChildIndex(instance);
	//idで判定v0.7
	//var hit_no=event.target.parent.id;

	略す

}
----------------------------------------------------------

以前バージョン0.6は
instance=event.target;

● 新らたに加わった、on() メソッドを使用する

バージョンUPされた EaselJS(easeljs-0.7.0) の、on()メソッドで「クリック」時に「引数」を渡せますので、上記の様に「クリック」された位置番号などを調べる必要がなくなります。


//onで処理するクリックアクション
myBtn[i].on("click",handleclick2,null,false,i);

//onで処理するhandleclick関数
function handleclick (event,no) {

	//クリックされたインスタンスは this で参照できる
	//ボタン番号は
	var hit_no=no;
	//登録idの値から求める
	//var hit_no=this.id;

	略す

}

非常に簡単に処理できるので、良く理解してから使用ください。off() メソッドはここで使用しません。


● 「マウスオーバー」の変更

ここでのボタンは単純に背景色を替えているだけの「ロールオーバー」ですから、rollover rollout 形式に変更しました。(この例は、EVENTなしですから、mouseover mouseout でも機能します)


複雑な EVENT処理 をするなら、mouseover mouseout を使用し、(注意 EVENT.ターゲットの取得方法が変更された)
EVENT処理 を伴わない、単純な「ロールオーバー」ならば、rollover rollout を使いなさいという事でしょう。
EVENT処理 を伴なっても、単純な「ロールオーバー」のほうが処理し易い。


変更前 (mouseover mouseout を使用、イベントの処理なし)


//mouseover
btn.addEventListener("mouseover",function () {
	//
});
//mouseout
btn.addEventListener("mouseout",function () {
	//
});

この例ではイベントの判定は行っていませんから、rollover rollout に変更した方良い。


mouseover mouseout のイベントは、新しいクリックの取得方法と同じだ。parentで「親」を指定する事。


試しに、eventを付けてみる

//mouseover
btn.addEventListener("mouseover",function (event) {

	//「親」ターゲットの取得 v0.7
	var instance=event.target.parent;
});

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

これはだめ、中の「子」のインスタンスを取得シタリ安定しない
var target=event.target;

エライ面倒だ!、「子」を個別に判定する時など利用する目的か?、rollover rolloutの方が良い。


rollover rollout に変更後


//rollover
btn.addEventListener("rollover",function () {
	//
});
//rollout
btn.addEventListener("rollout",function () {
	//
});

rollover rollout 変更後 のイベントは、以前の取得方法と同じだ。


試しに、eventを付けてみる

//rollover
btn.addEventListener("rollover",function (event) {

	//ターゲットの取得
	var target=event.target;

});

特別な事情がない限りボタンは「ロールオーバー」で作るべきだ!

昔の mouseover は、rollover である。今後「仕様」が変わらねば良いが!

 

 

● グラデーションボタン用、createGradientbtn()

▲[ 目次 ]

AS3等で使用される、createXxxxx() 形式にしました。角丸処理はquadraticCurveTo形式に統一しました。
stage配置(DEMOではstage2配置)、ベタ塗りと同じ形式にしている、グラデーションで使う色を追加、但しベタ塗りの背景色 c は未使用(他の用途に使用も可能)。rollover rollout で変わるようにしているが。activeなどは考慮していない。DEMOでは文字の色を変えた。activeを入れたら大変だな。


ボタンの作りよりも、如何に中のラベルを読み易くするかが問題だ!
以前はOperaで角丸が壊れるので分離して修正していましたが、繁雑なので現在は「角丸」のみ全てのブラウザでquadraticCurveTo形式で処理しています。他の円形、楕円形ボタンは関係ない。


overc, overc2, outc, outc2、は Overの時の2色、Outの時の2色で有る。quadraticCurveTo形式で補正

stageに配置の場合です。「デモ」ではstage2に配置していますので注意ください。


Operaのブラウザエンジンが、Chrome用に変わっていますので、角丸の不具合がなくなっています。ほとんど考慮しなくとも良くなっています。(2014/09/05 追記)

Operaの角丸RoundRectマウスオーバーボタンの不具合がなくなりました、[ こちら参照ください ]



var myBtn=[];
var image_max=画像数;

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

	//ラベル文字生成
	var label="PHOTO"+(i+1);
	//Gradient
	myBtn[i]=createGradientbtn (0,0,60,20,5,"#FFFFFF",label,"#FFFFFF","#FFFFFF","#48D1CC","#FFFFFF","#AAAAAA");

	略す
}
stage.update();

//create-グラデーションボタンcは未使用
function createGradientbtn (x,y,w,h,r,c,label,lc,overc,overc2,outc,outc2) {

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	var s=new createjs.Shape();
	//角丸
	s.graphics.s(0).beginLinearGradientFill([outc,outc2],[0,1],0,0,0,h*1.5);
	operaRoundRect(s,x,y,w,h,r);

	btn.addChild(s);
	btn.shadow=shadow;//注意onMouseOverでupdateすると濃くなる
	var tx=new createjs.Text(label,"12px Arial",lc);
	tx.x=w/2;
	tx.y=3;
	tx.maxWidth=w;
	//tx.lineWidth=w;
	tx.textAlign="center";
	tx.shadow=shadow;//テキストは濃くなら無い
	tx.name="btntext";//name挿入
	btn.addChild(tx);
	//文字の食み出し防止mask
	tx.mask=s;

	//Gradient rollover
	btn.addEventListener("rollover",function () {
		s.graphics.clear();
		//角丸
		s.graphics.s(0).beginLinearGradientFill([overc,overc2],[0,1],0,0,0,h*1.5);
		operaRoundRect(s,x,y,w,h,r);
		stage.update();
	});
	//Gradient rollout
	btn.addEventListener("rollout",function () {
		s.graphics.clear();
		//角丸
		s.graphics.s(0).beginLinearGradientFill([outc,outc2],[0,1],0,0,0,h*1.5);
		operaRoundRect(s,x,y,w,h,r);
		stage.update();
	});
	return btn;
}

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

nameを挿入しておくと、イベントなどでテキストにアクセスする場合便利です(挿入文字は自由)。
h*1.5は、ボタンの上側、白部分を増やすための調整です(Gradient詳細設定が自由)。

ラベルのY方向の位置はブラウザにより、1-2ピクセル違う。ボタン高さが狭いと気になるが治せないので適当な数値でゴマカス。(将来直るか不明?)


常にラベルを中央(中心)に配置するボタン

ボタンの中に文字を配置する場合は中央配置の方がキレイに仕上がります。regX regYを使用せず textAlign、textBaseline で中央に配置なるように設計すれば良いが(ブラウザにより多少ズレあり)、グラフイックの原点が違ってグラデーションの塗りが面倒になるのでこのページのボタンを残す。別のボタンは下記ページにある。

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


Operaのみ修正する場合 (arcTo形式)

Operaのみ、arcTo形式で修正する場合、一応記載しておくが、面倒になるだけなので止めたほうが良い。現在は上の説明の「quadraticCurveTo形式」に統一しているので「arcTo形式」での修正はしていない。

OperaでarcToの解釈の違いで角丸が壊れるのでarcToの描き方を違えて修正。


Operaのブラウザエンジンが、Chrome用に変わっていますので、角丸の不具合がなくなっています。ほとんど考慮しなくとも良くなっています。(2014/09/05 追記)

[ こちら参照ください ]




//create-グラデーションボタンcは未使用
function createGradientbtn (x,y,w,h,r,c,label,lc,overc,overc2,outc,outc2) {

	途中略す

	//Gradient rollover
	btn.addEventListener("rollover",function () {
		s.graphics.clear();
		//Opera
		if (window["opera"]) {
			s.graphics.s(0).beginLinearGradientFill([overc,overc2],[0,1],0,0,0,h*1.5);
			operaRoundRect(s,x,y,w,h,r);
		} else {
			s.graphics.s(0).beginLinearGradientFill([overc,overc2],[0,1],0,0,0,h*1.5).drawRoundRect(x,y,w,h,r);
		}
		stage.update();
	});
	//Gradient rollout
	btn.addEventListener("rollout",function () {
		s.graphics.clear();
		//Opera
		if (window["opera"]) {
			s.graphics.s(0).beginLinearGradientFill([outc,outc2],[0,1],0,0,0,h*1.5);
			operaRoundRect(s,x,y,w,h,r);
		} else {
			s.graphics.s(0).beginLinearGradientFill([outc,outc2],[0,1],0,0,0,h*1.5).drawRoundRect(x,y,w,h,r);
		}
		stage.update();
	});
	return btn;
}

//Opera RoundRec修正用 arcTo形式
function operaRoundRect(s,x,y,w,h,r) {
	s.graphics.moveTo(x+r,y)
	.arcTo(x+r,y,x,y+r,r)
	.lineTo(x,y+h-r)
	.arcTo(x,y+h-r,x+r,y+h,r)
	.lineTo(x+w-r,y+h)
	.arcTo(x+w-r,y+h,x+w,y+h-r,r)
	.lineTo(x+w,y+r)
	.arcTo(x+w,y+r,x+w-r,y,r);
}

nameを挿入しておくと、イベントなどでテキストにアクセスする場合便利です(挿入文字は自由)。
h*1.5は、ボタンの上側、白部分を増やすための調整です(Gradient詳細設定が自由)。


修正なしの記述の例

現在、Operaのブラウザエンジンが、Chrome用に変わっていますので、Chromeと同じ振る舞いのために不具合を考慮しなくとも良くなっています。(2014/09/05 追記)

CreateJS Graphicsクラスの「drawRoundRect()」が使用できます。

修正前


s.graphics.s(0).beginLinearGradientFill([overc,overc2],[0,1],0,0,0,h*1.5);
operaRoundRect(s,x,y,w,h,r);

修正後


s.graphics.s(0).beginLinearGradientFill([overc,overc2],[0,1],0,0,0,h*1.5).drawRoundRect(x,y,w,h,r);

上記の例は次のように成ります。区別しなくとも良いので簡単です。(2014/09/05 修正)



//create-グラデーションボタンcは未使用
function createGradientbtn (x,y,w,h,r,c,label,lc,overc,overc2,outc,outc2) {

	途中略す

	//Gradient rollover
	btn.addEventListener("rollover",function () {
		s.graphics.clear();
		s.graphics.s(0).beginLinearGradientFill([overc,overc2],[0,1],0,0,0,h*1.5).drawRoundRect(x,y,w,h,r);
		stage.update();
	});
	//Gradient rollout
	btn.addEventListener("rollout",function () {
		s.graphics.clear();
		s.graphics.s(0).beginLinearGradientFill([outc,outc2],[0,1],0,0,0,h*1.5).drawRoundRect(x,y,w,h,r);
		stage.update();
	});
	return btn;
}

ロールオーバーで陰影が濃く成るので注意が必要、ロールオーバー毎に「shadowフィルター」が濃く成る。 防止するにはグラフィックを塗り替える際にグラフィックをクリアすれば治る。(MouseOver、ロールオーバー、同じ意味)


中のShapeインスタンス.graphics.clear();

s.graphics.clear();

 

● マウスオーバー(ロールオーバー)、addEventListener部分

▲[ 目次 ]

グラデーション描画、beginLinearGradientFill(設定条件)、など替えればよい、drawRoundRect()は同じ。引数は自由。また共通のアクションなどあれば記載する。
最後に、stage.update() を書いておけば、Ticker設定はいらない。ここでのグラデーションはLinear形式にしている。


単純なボタンで「マウスオーバー」の設定するようなところではないので「マウスオーバー」から「ロールオーバー」に変更した。イベント処理はしていないので「マウスオーバー」でも振る舞いは同じ。


//create-Gradient-bottun
function createGradientbtn (x,y,w,h,r,c,label,lc,overc,overc2,outc,outc2) {

	//BTNコンテナ
	var btn=new createjs.Container();

	略す

	//rollover
	btn.addEventListener("rollover",function () {
		s.graphics.clear();
		s.graphics.s(0).beginLinearGradientFill(設定条件).drawRoundRect(x,y,w,h,r);
		stage.update();
	});
	//rollout
	btn.addEventListener("rollout",function () {
		s.graphics.clear();
		s.graphics.s(0).beginLinearGradientFill(設定条件).drawRoundRect(x,y,w,h,r);
		stage.update();
	});
	return btn;
}

-----------------------------------------------
ここでは中のグラフィックの書き換えが簡単なため
btn.addEventListener("mouseover",function () {..........})
の形式にしている

「デモ」ではボタンを stage2 に配置していますので stage2.update() となっている。


 

● ベタ塗り、グラデーション、背景画像使用の違い

▲[ 目次 ]

背景色の描画部分を替えれば良いだけだ。グラフィック部分は全て共通である。

CreateJS 角丸処理、drawRoundRect()を使用した場合の例。


ベタ塗り
s.graphics.s(0).beginFill(背景色).drawRoundRect(x,y,w,h,r);

グラデーション
s.graphics.s(0).beginLinearGradientFill(設定条件).drawRoundRect(x,y,w,h,r);

背景画像
s.graphics.s(0).beginBitmapFill(背景画像は保存result値).drawRoundRect(x,y,w,h,r);
背景画像は画像読み込み完了completeの保存値
event.result値で無ければエラーになるので注意

背景画像埋め込みの同じ大きさのボタンは次ぎのページにある。小さいと余り効果がよくない。

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


ボタン毎に背景画像の違う「大型ボタン」は、以下のページにある。大きければキレイだ!

【参照】当方の記事: CreateJS MouseOverで背景を変化 ラベルを中心に配置した drawImage() で画像分割したボタン

【参照】当方の記事: CreateJS MouseOverで背景を変化 ラベルを中心に配置した SpriteSheet 利用の画像ボタン

 

 

quadraticCurveTo形式で角丸を処理する場合

▲[ 目次 ]

CreateJS、quadraticCurveToを使用すれば、ブラウザに関係なく角丸処理出来るので、Operaの判定は要らない。但しCreateJS標準の角丸処理 drawRoundRect() は使用しない。現在「角丸描画」はこれに統一している。

OperaでarcToは異常だが、quadraticCurveToの解釈は正常なため、quadraticCurveToで角丸を描く理由である。


Operaのブラウザエンジンが、Chrome用に変わっていますので、角丸の不具合がなくなっています。ほとんど考慮しなくとも良くなっています。(2014/09/05 追記)

[ こちら参照ください ]




//create-グラデーションボタンcは未使用
function createGradientbtn (x,y,w,h,r,c,label,lc,overc,overc2,outc,outc2) {
	//BTNコンテナ
	var btn=new createjs.Container();

	略す

	//ブラウザ共通 rollover
	s.graphics.s(0).beginLinearGradientFill([outc,outc2],[0,1],0,0,0,h*1.5);
	operaRoundRect(s,x,y,w,h,r);

	略す

	//Gradient
	btn.addEventListener("rollover",function () {
		s.graphics.clear();
		//ブラウザ共通
		s.graphics.s(0).beginLinearGradientFill([overc,overc2],[0,1],0,0,0,h*1.5);
		operaRoundRect(s,x,y,w,h,r);
		stage.update();
	});
	//Gradient rollout
	btn.addEventListener("rollout",function () {
		s.graphics.clear();
		//ブラウザ共通
		s.graphics.s(0).beginLinearGradientFill([outc,outc2],[0,1],0,0,0,h*1.5);
		operaRoundRect(s,x,y,w,h,r);
		stage.update();
	});
	return btn;
}


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

 

Operaの角丸RoundRectマウスオーバーボタンの不具合がなくなりました

▲[ 目次 ]

現在、Operaのブラウザエンジンが、Chrome用に変わっていますので、Chromeと同じ振る舞いのために不具合を考慮しなくとも良くなっています。(他の記事などではこのことに言及していますが、このページでも訂正します)
古いバージョンのOperaでは問題が出ますが、問題の出るバージョンは現在は使用されていないと思います。(2014/09/05 追記)


CreateJS Graphicsクラスの「drawRoundRect()」が使用できます。

修正前


s.graphics.s(0).beginLinearGradientFill([overc,overc2],[0,1],0,0,0,h*1.5);
operaRoundRect(s,x,y,w,h,r);

修正後


s.graphics.s(0).beginLinearGradientFill([overc,overc2],[0,1],0,0,0,h*1.5).drawRoundRect(x,y,w,h,r);

上の、「グラデーションボタン用」は以下の様になります。訂正箇所は皆同じ所です。「文字の食み出し防止mask」はなくとも良い。本来のマスクの手法ではありませんが一応文字のはみ出しが防げます。



var myBtn=[];
var image_max=画像数;

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

	//ラベル文字生成
	var label="PHOTO"+(i+1);
	//Gradient
	myBtn[i]=createGradientbtn (0,0,60,20,5,"#FFFFFF",label,"#FFFFFF","#FFFFFF","#48D1CC","#FFFFFF","#AAAAAA");

	略す
}
stage.update();

//create-グラデーションボタンcは未使用
function createGradientbtn (x,y,w,h,r,c,label,lc,overc,overc2,outc,outc2) {

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	var s=new createjs.Shape();
	//角丸
	s.graphics.s(0).beginLinearGradientFill([outc,outc2],[0,1],0,0,0,h*1.5).drawRoundRect(x,y,w,h,r);

	btn.addChild(s);
	btn.shadow=shadow;//注意onMouseOverでupdateすると濃くなる
	var tx=new createjs.Text(label,"12px Arial",lc);
	tx.x=w/2;
	tx.y=3;
	tx.maxWidth=w;
	//tx.lineWidth=w;
	tx.textAlign="center";
	tx.shadow=shadow;//テキストは濃くなら無い
	tx.name="btntext";//name挿入
	btn.addChild(tx);
	//文字の食み出し防止mask
	tx.mask=s;

	//Gradient rollover
	btn.addEventListener("rollover",function () {
		s.graphics.clear();
		//角丸
		s.graphics.s(0).beginLinearGradientFill([overc,overc2],[0,1],0,0,0,h*1.5).drawRoundRect(x,y,w,h,r);
		
		stage.update();
	});
	//Gradient rollout
	btn.addEventListener("rollout",function () {
		s.graphics.clear();
		//角丸
		s.graphics.s(0).beginLinearGradientFill([outc,outc2],[0,1],0,0,0,h*1.5).drawRoundRect(x,y,w,h,r);
		
		stage.update();
	});
	return btn;
}


 

DEMO等

▲[ 目次 ]

DEMO


上記、グラデーションボタンを作成して、rollover rollout を設定した簡単なデモ。

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


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


簡単な説明


DEMOの HTML CSS JS はデモページに記載しています。但し、ボタン部分は「別Canvas」で描画していますので注意。ボタン部分は、stage2 に成っています。

1.画像はAUTOで進みます、ボタンを押せば機能します。ボタンを押さなければAUTOに戻ります。
2.アニメ中、又は表示中の画像ボタンを押した場合は機能しません。
3.IE9で、stage2設定が少々反応しない時期がありましたが、現在は安定しています。(2014/09/05 追記)


● createGradientbtn は少し修正しています

最後の引数を追加しているのは、openThumbBox(no)、closeThumbBox(no)のためです。イベントで判定するより速くする。状況に応じては書き換えて使う。


//Create-Bottunボタンを作る
for (var i=0; i < image_max; i++) {
	//ラベル文字生成
	var label="PHOTO"+(i+1);
	//Gradient
	myBtn[i]=createGradientbtn (0,0,60,20,5,........,"#FFFFFF","#AAAAAA",i);

	略す
}

//create-グラデーションボタンcは未使用
function createGradientbtn (x,y,w,h,r,c,label,lc,overc,overc2,outc,outc2,no) {

	//BTNコンテナ
	var btn=new createjs.Container();

	略す

	//Gradient rollover
	btn.addEventListener("rollover",function () {
		s.graphics.clear();

		略す

		stage2.update();
		//サムネールopen
		openThumbBox(no);
	});
	//Gradient rollout
	btn.addEventListener("rollout",function () {
		s.graphics.clear();

		略す

		stage2.update();
		//サムネールclose
		closeThumbBox(no);
	});
	return btn;
}

CSSのボタンでもイケルんですがネ。候も面倒だと、グレちゃうゼ。


● サムネールBOXフェード用Ticker設定

フェードさせないで、簡単に thumbBox.visible を true false だけで制御するならいらない。


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

● ボタンのactave処理

ボタンへの本格的な actave 処理はしていない、簡単に「ラベル文字色」のみを変化させた。表示する画像番号とボタン番号は同じになる様に作って有る。

ここでは、登録 name の'btntext'で判定。登録してなければ getChildAt() で判定すれば良い。


ラベルの name で判定

//activeボタン色変更
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";
}
stage2.update();

ボタンの重ね順でも判定可能
var target=myBtn[i].getChildAt(1);

その他

DEMO専用です。使用は自由ですが、画像などは各自ご用意ください。JSの先頭部分をお読み下さい。


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

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



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

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


修正などが多くなり読み難いのですが、次のバージョンで Graphicsクラス の変更が予定されていますので、其の時に読みやすくします。
以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]