POPSブログ

CreateJS マウスオーバーCircleボタン表示active対応

218

  Category:  javascript2013/05/07 pops 

CreateJS マウスオーバーCircleボタンの変化、active時への対応ですが、「ラジオスイッチ」風のボタンで簡単にグラフィックを変化させただけです、ラベルが無いので、「前ページ」の角丸ボタンより単純です。easeljs-0.7 でのテストです。

 

CreateJS マウスオーバーCircleボタン表示active対応


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


小さな「ラジオスイッチ」風の「Circleボタン」を作り簡単にグラフィックを変化させただけです。今回は小さなボタンですので画像の上に重ねました。(ボタンstage配置)

当方の原則として通常ボタン類を画像に重ねる事はしません。殆んど画像の外に配置しています。(stage2配置)


[ 説明図 ]

 

● RoundRectマウスオーバーボタンのactive時の変化を簡単に行う方法については下記ページ参照下さい。
「角丸RoundRectボタン」「サムネールの表示」等について詳しく書いています。


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



 

DEMO等


DEMO


上記、CreateJS マウスオーバーCircleボタン、簡単なデモ。

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


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




簡単な説明


JS、CSSは「デモ」ページに記載しています。


マウスオーバーCircleボタンactive時の変化を簡単に行う


1個のactive時のボタンを作り、activeなボタンに重ねて行く方法が一番効果があり、簡単な方法のようです。多少「activeボタン」に変化を付けるのも随意です。

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


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

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

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


function init() {

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

	略す

	//ボタンコンテナ、ボタンはあとで作る
	btncontainer=new createjs.Container();
	btncontainer.x=0;
	tncontainer.y=canvasHeight-interval_H;
	//ボタンコンテナをステージにaddChild
	stage.addChild(btncontainer);
	略す
}

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

ボタンが小さいのでグラフィックは「ベタ塗り」にしています。少し大きければGradientにすればキレイかと思います。


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

	//画像数
	image_max=assets.length;

	略す

	//Activeボタンを作る
	activeBtn=createActivebtn (0,0,btnRadius,"#FF0000");

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

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

			//番号受け渡し
			var no=i;
			//Circle
			myBtn[i]=createCirclebtn(0,0,btnRadius,"#FFFFFF","#FFD700",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.visible=true;
		stage.update();
	}

	略す

}

ボタンの「クリックアクション」の変更 [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;

	略す

}

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


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


rolloover、rollout、イベントでそれぞれの「ボタンのグラフィック」を変化させています。ここでは「サムネールを表示」していますので「ボタンのX位置」を取得して、ボタン位置でサムネールを「表示」「非表示」する関数に飛ぶ様に仕組んでいます。


//create-Circleボタンcは未使用
function createCirclebtn (x,y,r,outc,overc,no){

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	btn.name="btntext";//name挿入
	var s=new createjs.Shape();
	//共通
	s.graphics.s().beginFill(outc).drawCircle(x,y,r);
	btn.addChild(s);
	btn.shadow=shadow;

	//Circle rollover
	btn.addEventListener("rollover",function (e) {
		s.graphics.clear();
		//共通
		s.graphics.s().beginFill(overc).drawCircle(x,y,r);
		//Point計算、btncontainer基準localToGlobal
		var point=btncontainer.localToGlobal(e.target.x,e.target.y);
		//Point補正btnRadius
		thumb_x=point.x;
		stage.update();
		//サムネールopen
		openThumbBox(no);
	});
	//Circle rollout
	btn.addEventListener("rollout",function (e) {
		s.graphics.clear();
		//共通
		s.graphics.s().beginFill(outc).drawCircle(x,y,r);
		stage.update();
		//サムネールclose
		closeThumbBox(no);
	});
	return btn;
}

ボタン位置をボタンコンテナの位置に変換してをサムネール表示、「ボタン」「サムネール」どちらも原点中央なので補正はしていません。


var point=btncontainer.localToGlobal(e.target.x,e.target.y);

● Activeボタンを作る


Activeボタンを作る。自動的に1番目の上に重なります。変更したい場合は自由に。

Activeボタンの陰影はなし。マウスアクション addEventListener() は付けていませんが必要な場合は付けて下さい。

DEMO、JS参照。


//注意、Activebtn Circle
function createActivebtn (x,y,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,r)
	.beginFill("#000000").drawCircle(x,y,r/2);
	btn.addChild(s);
	return btn;
}

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


● Activeボタンの位置の移動


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

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


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

	略す

	//activeボタン色変更
	if (clickbtn_use == 'use') {
		activeBtn.x=myBtn[image_no].x;
		stage.update();
	}

	略す

}

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


● サムネール表示


サムネール表示は次ぎの様になります。サムネール、Bitmap()画像をスケールで縮小しています。Bitmap()画像を挿入した方が問題なく簡単です。(沢山のサムネールを角丸で並べる場合などは別)

thumbBoxはコンテナになります。外側バック背景の thumbback を入れ、その上にBitmap()画像を配置します。
サムネールtick設定 thumbBox.tick=function (){...}) で、フェードインします。

ボタンの、mouseover イベントで openThumbBox(no) に飛び、Bitmap()画像を交換し、フェードインの合図をします。

● サムネール表示用BOXは事前に作っておきます。非表示。


function init() {

	略す

	//FadeサムネールBOX
	thumbBox=new createjs.Container(0,0,thumbW+margin*2,thumbH+margin*2);
	thumbImage=new createjs.Bitmap();
	thumbImage.x=margin;
	thumbImage.y=margin;
	//縮小
	thumbImage.scaleX=thumbW/imageW;
	thumbImage.scaleY=thumbH/imageH;
	//back
	var thumbback=new createjs.Shape();
	//共通
	thumbback.graphics.s(0).beginFill("#FFFFFF");

	//RoundRectBOX
	//operaRoundRect2(thumbback,0,0,thumbW+margin*2,thumbH+margin*2,4);

	//RoundRectフキダシBOX(Shape,x,y,幅,高さ,半径,矢幅,矢高さ)、矢幅は偶数値
	roundRectBalloon(thumbback,0,0,thumbW+margin*2,thumbH+margin*2,4,6,8);

	thumbback.shadow=shadow;

	thumbBox.addChild(thumbback,thumbImage);
	thumbBox.regX=(thumbW+margin*2)/2;
	thumbBox.regY=(thumbH+margin*2)/2;
	thumbBox.x=canvasWidth/2;
	thumbBox.y=canvasHeight-(thumbH)-10;//サムネールY位置
	stage.addChild(thumbBox);
	thumbBox.visible=false;
	//フエード用tick設定
	thumbBox.tick=function (){
		if(thumbBox.alpha < 1 && thumb) {
			thumbBox.alpha+=0.05;
			stage.update();
		}
	}
	//Ticker.Listener設定
	createjs.Ticker.addEventListener('tick',thumbBox.tick);

	略す
}

● openThumbBox()でサムネールBitmap画像を交換。

インスタンス thumbImage は事前に縮小されていますので、loader情報の「result値」を入れれば Bitmap() が交換されます。非常に簡単!


//ThumbBox表示
function openThumbBox(no) {
	//サムネール画像書き換え/画像result取得
	thumbImage.image=new createjs.Bitmap(assets[no]).image;
	thumbBox.x=thumb_x;//X位置
	thumbBox.alpha=0;
	thumbBox.visible=true;
	thumb=true;
	//stage.update();
}

サムネールの外観変更


現在、「RoundRectフキダシBOX」が使用されています。普通の「RoundRectBOX」の場合は、operaRoundRect2()をセット下さい。(矢印が無くなるだけで、さほどの変わりは有りませんが)


普通のRoundRectBOX
	operaRoundRect2(thumbback,0,0,thumbW+margin*2,thumbH+margin*2,4);

フキダシBOX
	//RoundRectフキダシBOX(Shape,x,y,幅,高さ,半径,矢幅,矢高さ)、矢幅は偶数値
	//roundRectBalloon(thumbback,0,0,thumbW+margin*2,thumbH+margin*2,4,6,8);

数値 4 は角丸の半径です。JSによっては余白、margin*2 が設定されている場合もあります。


 

その他

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


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

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

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

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

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


簡単ですが以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]