POPSブログ

CreateJS アコーディオンMENUと画像クロスフェード

301

  Category:  javascript2014/05/30 pops 

ホリゾンタル アコーディオン 応用のサムネール「MENU」です。通常の「サムネールボタン」と比較して、アコーディオン形式のため同じ範囲に多くのサムネールを配置できます。簡単な画像クロスフェードと組み合わせてみました。
easeljs-0.7.1 でのテストです。

 

CreateJS アコーディオンMENUと画像クロスフェード テスト

小さなサムネール画像を使用したアコーディオンMENUです。画像表示のステージの下に別ステージを配置してMENUを作りました。色々と機能などを付加すると、結構複雑で面倒になりますが、何とか動作します。
下記、アコーディオンを改造して作りました。


【参照】当方の記事: CreateJS アコーディオン 大型画像 HOVER(rollover) 形式


 

DEMO


CreateJS アコーディオンMENUと画像クロスフェードのデモ、(createJS085.js)

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



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

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


//日本語
//createJS085.js
//アコーディオンMNUE形式

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

//canvasの大きさ/全てこの値を使用
var canvasWidth=640;
var canvasHeight=300;

var speed=800;//画像Fade速度
var open_speed=400;//Menu速度

//タイマーの使用、useであること
var timer_use="use";
//タイマー値 5000-10000
var time=8000;

//サムネールの大きさ
var thumbW=64;
var thumbH=30;

//activeラインの使用 true
var activeUse=true;//true false
//activeライン高さ
var activeH=2;
//activeライン色
var active_color="#20B2AA";
//サムネール画像の透明度変化
var thumbalphaUse=true;//true false

//アコーディオンMenu全体の大きさ
var accordionWidth=250;
//activeライン高さを考慮する
var accordionHeight=34;
//Menu全体の背景色
var accordbox_color="#000000";
///Menu全体のY配置位置
var accordbox_Y=10;

//テキスト表示の使用 use=true
text_use=true;//true false

//画像manifestリスト
var manifest=[
{src:"/main/images/flight01.jpg",id:"PHOTO1"},
{src:"/main/images/flight02.jpg",id:"PHOTO2"},
{src:"/main/images/flight03.jpg",id:"PHOTO3"},
{src:"/main/images/flight04.jpg",id:"PHOTO4"},
{src:"/main/images/flight05.jpg",id:"PHOTO5"},
{src:"/main/images/flight06.jpg",id:"PHOTO6"}
]

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

//ステージ
var stage,stage2;

//コンテナ
var container;
var backcontainer;
var loadingcontainer;
var progresscontainer;
var textcontainer;
var btncontainer;

//ローダー
var loader;
//LoadingShape
var loadingShape;

//読み込み画像の大きさ、未使用
var imageH=0,imageW=0;
//読み込み画像URL保存容器
var assets=[];

//変数
var globalflag=false,topImage,backImage,mainImage,keep_mainImage,timerID=null;
var viewtext;

//サムネールBOX
var thumbBox;//container
var thumbImage;//画像Bitmap
var thumb=false;//サムネール動作判定
var thumb_x=0;//サムネール位置
//ライン
var activeBtn;

//Accordion変数
myAccordion=[];
//標準X位置保存
accordionStPointX=[];
accordionOpenPointX=[];
accordionClosePointX=[];

//ボタン保存
var myBtn=[];

//loading変数
var loading=false;
//ProgressBar
var progressbar;
var progtext;
var bar_v=0;

//最初の画像0のこと
var image_no=0;
//画像数
var image_max;
//陰影
var shadow=new createjs.Shadow("#000000",0,0,4);

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

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

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

	//下画像層、空画像コンテナを作る
	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);

	//TEXT text_useが有効なら作る
	if (text_use) {

		//TEXTコンテナ フィールド00なので中央表示にはならない
		textcontainer=new createjs.Container();
		//textbackShape
		var textback=new createjs.Shape();
		textback.graphics.beginFill("#000000").drawRect(0,0,canvasWidth,25);
		textback.alpha=0.3;
		textback.visible=false;//非表示

		//注意 大きさを設定しないと文字は表示しない
		viewtext=new createjs.Text("---","12px Arial","#FFFFFF");
		viewtext.x=20;
		viewtext.y=18;
		viewtext.lineWidth=canvasWidth-40;
		viewtext.lineHeight=20;
		viewtext.textBaseline="bottom";
		textcontainer.addChild(textback,viewtext);
		stage.addChild(textcontainer);
		//テキスト陰影
		viewtext.shadow=shadow;

		text_set("LOADING NOW");
	}

	//ボタン使用
	//STAGE2
	stage2=new createjs.Stage('subCanvas');
	//MouseOver重要
	stage2.enableMouseOver(20);
	//ボタンコンテナ
	btncontainer=new createjs.Container();
	//ステージ2にaddChild
	stage2.addChild(btncontainer);
	btncontainer.visible=false;

	//loading3コンテナをステージにaddChild
	loadingcontainer=new createjs.Container();
	stage.addChild(loadingcontainer);
	//ShapeのLOADINGを作る
	loadingShape=loadingIndicator3();
	loadingShape.x=canvasWidth/2;
	loadingShape.y=canvasHeight/2;
	//tickを設定
	loadingShape.tick=function (){
		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/Stroke
	//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);
		}
	}
	//Ticker.Listener設定
	createjs.Ticker.addEventListener('tick',progressbar.tick);
	//addChild
	progresscontainer.x=canvasWidth/2;
	progresscontainer.y=canvasHeight/2;
	progresscontainer.addChild(progressbar,progtext);
	stage.addChild(progresscontainer);

	//Main-Ticker設定
	createjs.Ticker.setFPS(30);
	//createjs.Ticker.timingMode=createjs.Ticker.RAF;
	createjs.Ticker.addEventListener('tick',tick);

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

}

//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 (eventObject) {

	//エラー無しの画像をassets容器に保存
	assets.push(eventObject.result);

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

	text_set("LOADING END!");
	//画像数確認、再計算
	image_max=assets.length;

	//loader Listener削除 こちら使用に修正
	loader.removeEventListener("fileload",fileload);
	loader.removeEventListener("complete",complete);

	//loading Listener削除
	createjs.Ticker.addEventListener('tick',loadingShape.tick);
	//loading container非表示
	loadingcontainer.visible=false;
	loading=false;//loading表示判定

	//画像があれば
	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("");
			//Mainに進む
			main();

		},2000);
	}

}

//アコーディオンMNUE他
function main () {

	//アコーディオンMNUEを作る
	set_accordMenu();
	btncontainer.visible=true;
	createjs.Ticker.addEventListener('tick',tick2);

	draw();//画像表示

}

//アコーディオンMNUEを作る
function set_accordMenu() {

	var accordBox=new createjs.Container();

	//アコーディオン配置間隔
	var move_w=Math.floor(accordionWidth/image_max);//ST
	var move_w2=Math.floor((accordionWidth-thumbW)/(image_max-1));//OPEN
	var move_w3=Math.floor((accordionWidth-thumbW)/(image_max-1));//CLOSE

	//Math.floorによる誤差ありマスク幅の補正
	//accordionWidth=move_w2*(image_max-1)+thumbW;

	//ActiveThumbラインを作る/#6A5ACD
	if(activeUse) {
		activeBtn=createActiveThumb3(0,0,thumbW,activeH,active_color);//ライン
	}

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

		//初期間隔決定保存
		accordionStPointX[i]=move_w*i;
		//OPEN CLOSE位置
		accordionOpenPointX[i]=move_w2*i;
		accordionClosePointX[i]=move_w3*(i-1)+thumbW;
		if(i == 0) {accordionClosePointX[i]=0;}
	}

	//アコーディオンHoverMenu clickタイプ
	for (var i=0; i < image_max; i++) {

		//番号受け渡し
		var no=i;
		//縮小画像使用/幅、高さ、画像
		var img=createImgCanvas(thumbW,thumbH,assets[no]);
		//アコーディオン要素を作る
		myBtn[i]=createAccordionThumb(img,thumbW,thumbH,no);
		//初期間隔
		myBtn[i].x=accordionStPointX[i];
		//判別用のproperty:idを書き込む、未使用
		myBtn[i].id=i;
		myBtn[i].cursor="pointer";

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

		//addChild
 		accordBox.addChild(myBtn[i]);
	}

	//activeBtnを乗っける
	if(activeUse) {
		activeBtn.y=-activeH;
		accordBox.addChild(activeBtn);
	}

	//アコーディオン背景/指定色
	var accordback=new createjs.Shape();
	accordback.graphics.beginFill(accordbox_color).drawRect(0,0,accordionWidth,accordionHeight);
	accordBox.y=activeH;
	btncontainer.addChild(accordback,accordBox);
	//マスク
	accordBox.mask=accordback;
	//中央補正
	btncontainer.x=(canvasWidth-accordionWidth)/2;
	btncontainer.y=accordbox_Y;
	//accordBox陰影/マスクに処理
	accordback.shadow=shadow;

	//初期0番号でOPEN
	accordion_open(image_no);

}

//アコーディオン要素作成
function createAccordionThumb(img,w,h,no) {

	//ラップコンテナ
	ac=new createjs.Container();

	var thumb=new createjs.Bitmap(img);//サムネール
	thumb.name="thumb";//名前
	var back=new createjs.Shape();//黒背景
	back.graphics.beginFill("#000000").drawRect(0,0,w,h);
	//2層
	ac.addChild(back,thumb);
	//active判定用
	var no=no;

	//ラップコンテナrollover
	ac.addEventListener("rollover",function (e) {
		//
		accordion_open(no);
	});
	//ラップコンテナrollout
	ac.addEventListener("rollout",function (e) {
		//現在の画像番号に移動
		accordion_open(image_no);
	});

	return ac;
}

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

	globalflag=false;
	text_set("");

	//activeボタン変更
	//MENU-OPEN
	accordion_open(image_no);
	//activeBtn移動
	if(activeUse) {
		activeBtn.x=accordionOpenPointX[image_no];
	}

	//Active要素の透明度を変える
	if(thumbalphaUse) {
		alpha_chg(image_no);//必要ならば
	}

	//result画像SET
	mainImage=assets[image_no];
	if(!keep_mainImage){keep_mainImage=mainImage;}

	//上層画像にSET
	topImage.visible=false;
	topImage.image=new createjs.Bitmap(mainImage).image;
	topImage.alpha=0;
	topImage.visible=true;

	//クロスFade実行
	var tw=createjs.Tween.get(topImage)
	.wait(500)
	.to({alpha:1},speed)
	.call(finshtween);

}

//アニメ全て完了
function finshtween () {

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

	//フラグを戻す
	globalflag=true;

	//画像処理に時間がかかるので、少し遅延させる
	setTimeout(function() {

		//タイマー次ぎ開く
		if (timer_use == 'use') {
			text_set("AUTO");
			set_timer();
		}

	},500);

}

//OPEN、removeTweensで対応
function accordion_open(no){

	//removeTweens
	for (var i=0; i < image_max; i++) {
		createjs.Tween.removeTweens(myBtn[i]);
	}
	//
	for (var i=0; i < image_max; i++) {

		var tw=createjs.Tween.get(myBtn[i]);
		if(no >= i) {tw.to({x:accordionOpenPointX[i]},open_speed);}
		if(no < i) {tw.to({x:accordionClosePointX[i]},open_speed);}
	}

}
//CLOSE、removeTweensで対応
function accordion_close(no){

	//removeTweens
	for (var i=0; i < image_max; i++) {
		createjs.Tween.removeTweens(myBtn[i]);
	}
	//
	for (var i=0; i < image_max; i++) {

		var tw=createjs.Tween.get(myBtn[i]);
		tw.to({x:accordionStPointX[i]},200);
	}

}

//Active要素の画像透明度を変える
function alpha_chg (no) {
	//クリア
	for (var i=0; i < image_max; i++) {
		myBtn[i].getChildByName("thumb").alpha=0.5;//名前判別
		//myBtn[i].getChildAt(1).alpha=0.5;//Index判別
	}
	//セット
	myBtn[no].getChildByName("thumb").alpha=1;//名前判別
	//myBtn[no].getChildAt(1).alpha=1;//Index判別
}

//tick
function tick() {
	stage.update();
}
//tick2
function tick2() {
	stage2.update();
}

//次ぎの開く要素を計算
function next_set() {

	//次ぎの番号
	image_no +=1;
	if (image_no > (image_max-1)) {image_no=0;}
	draw();

}

//タイマー
function set_timer() {

	//タイマー再セット
	if (timer_use == 'use') {

		//一旦切ってからセット
		clearTimeout(timerID);
		timerID=setTimeout(next_set,time);
	}

}

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

	var hit_no=no;

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

		viewtext.text="";
		//タイマー強制停止
		clearTimeout(timerID);
		//指定番号の画像表示
		image_no=hit_no;

		//少し遅延させるclickは重要だ
		setTimeout(function() {

			draw();

		},200);//200-500

	}
}
//TEXT表示
function text_set (t) {
	if (text_use) {
		viewtext.text=t;
		stage.update();
	}
}

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

//注意、Activebtn Thumb、赤いライン
function createActiveThumb3 (x,y,w,h,activec) {

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	btn.name="btntext";
	var s=new createjs.Shape();
	//共通
	s.graphics.beginFill(activec).drawRect(x,y,w,h);
	btn.addChild(s);

	return btn;
}

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

//変換は配列で返す、未使用
function toRgb(bc) {
	bc=bc.replace("#","");
	var rgbArr=[];
	rgbArr[0]=parseInt(bc.slice(0,2),16);
	rgbArr[1]=parseInt(bc.slice(2,4),16);
	rgbArr[2]=parseInt(bc.slice(4,6),16);
	return rgbArr;
}

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

//簡単なLOADING
function loadingIndicator3 () {

	//graphicのスタイル
	var graphics=new createjs.Graphics();
	graphics.setStrokeStyle(2,"round");//round

	//描画データ
	var alpha_v=1;//透明度
	var alphaback;

	var cx,cy;
	var numNeedles=12;
	var innerR=15;
	var outerR=10;
	var cAngle=-Math.PI/2;
	var nAngle;

	//ライン描画
	nAngle=Math.PI*2/numNeedles;
	for (var i=0; i < numNeedles; i++){

		//回転補正
		rotateflag=cAngle -=nAngle;
		//透明度を描画毎に変更
		if (i > 0) {alpha_v -=0.05;}

		//#CCCCCC
		alphaback=createjs.Graphics.getRGB(204,204,204,alpha_v);
		cx=Math.cos(cAngle)*innerR;
		cy=Math.sin(cAngle)*innerR;
		graphics.beginStroke(alphaback).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();

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


CSS

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


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

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


 

簡単な説明


[説明図]

 

2重構造のアコーディオンが、下のマスクと共にコンテナでラップされますから、3重構造となります。


サムネール「MENU」用、アコーディオン

サムネール「MENU」用で、HOVER(rollover)で開き、CLICKで該当画像を表示します。CLICKしない場合は自動で順繰り表示します。時間間隔はタイマーで変更可能です。


1. HOVER(rollover)で開き、CLICKで該当画像を表示します。
2. 自動の場合、該当サムネールを開き、其の上にラインを表示します。
3. Active状態のライン、画像透明度などは設定変更が可能です。
4. サムネールの間隔などは自由に調整可能です。
5. 表示枚数は正確に、何枚と断言できませんので、全体の幅およびサムネールの大きさで調整ください。
6. 詳細は、JS上部を参照ください。


アコーディオンの高さ

Active状態のラインの高さを加算した高さを設定します(サムネールの高さ + ラインの高さ)。
高さが足りないとサムネールがマスクで隠れますので注意ください。
ラインを表示しない場合は、ラインの使用を false にします。


activeラインの使用
var activeUse=false;

サムネールの大きさによりますが、収まらない時は、CSSの高さをも調整ください。


MENUをステージ2に配置している理由

別ステージにしている最大の理由は外側のCSSでの「角丸陰影」描画のためですが、
ステージ1 に配置が可能ですが、ステージ1 の「イベント設定」如何で「MENUイベント設定」が複雑になる場合が多いので影響のない ステージ2 に配置しています。
jQueryの hover の様に、要素が重なってもイベントが持続する仕組みが、CreateJS にもあれば「イベント設定」は楽になるのですが....


アコーディオンのTween削除

アコーディオンの開閉時、Tweenを削除して新たに設定実行するようにしていますが、通常画像のアコーディオンと違い、removeAllTweens()を使用しないでremoveTweens()で処理しました。
通常画像のTweenに影響が及ぶための変更です。


● 通常のアコーディオンの場合(大型画像)


//OPEN、removeAllTweensで対応
function accordion_open(no){

	//removeAllTweens
	createjs.Tween.removeAllTweens();

	略す

}

● サムネール アコーディオンの場合


//OPEN、removeTweensで対応
function accordion_open(no){

	//removeTweens
	for (var i=0; i < image_max; i++) {
		createjs.Tween.removeTweens(myBtn[i]);
	}

	略す

}

縮小サムネールを作る

縮小サムネールを作る場合、Matrix Scale などを使用せず、set_accordMenu()関数の処理内部で、drawImage()で縮小しました。
createImgCanvas()関数は画像を縮小します。「戻り値」は原則 Bitmap() で表示する。
(GraphicsクラスのbeginBitmapFill()でも使用できますので便利)



//縮小画像使用/幅、高さ、画像
var img=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;
}

サムネールActive状態の処理

透明度を変化させていますので、サムネール画像直下に、黒背景を配置しています。透明度を変化させない場合は黒背景の必要はありません。またActive要素の上にラインを描画(正確には移動)しています。
また、アコーディオンのため一部画像をマスクせねばなりませんから、マスク材を配置しています。通常画像のアコーディオンではCSSでマスクしました。


該当「サムネールのOPEN」と「透明度を変える」処理は以下の様にFADEの前に行っています。
1. ラインは該当サムネールの「X位置」と同じにする。
2. 透明度は要素の中の画像を指定して、alpha_chg()関数にて、一旦全て透明度を0.5にして、該当サムネール画像の透明度を1.0にする。(非効率だが面倒なので簡単に処理)



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

	略す

	//activeボタン変更
	//MENU-OPEN
	accordion_open(image_no);
	//activeBtn移動
	if(activeUse) {
		activeBtn.x=accordionOpenPointX[image_no];
	}

	//Active要素の透明度を変える
	if(thumbalphaUse) {
		alpha_chg(image_no);//必要ならば
	}

	略す

}

● コンテナに内包すれば、画像部分を捜し指定できる。

getChildByName()は名前を事前につけておいた場合に有効。

getChildAt()は重なり順を指定してさがしだすが、中を変更した場合は注意が必要です。



//Active要素の画像透明度を変える
function alpha_chg (no) {
	//クリア
	for (var i=0; i < image_max; i++) {
		myBtn[i].getChildByName("thumb").alpha=0.5;//名前判別
		//myBtn[i].getChildAt(1).alpha=0.5;//Index判別
	}
	//セット
	myBtn[no].getChildByName("thumb").alpha=1;//名前判別
	//myBtn[no].getChildAt(1).alpha=1;//Index判別
}

マスク幅の補正

アコーディオン配置間隔の計算をMath.floor()で行っているために、初期設定の全体の幅(accordionWidth)でマスクを実行すると、サムネールの幅次第で、右端に1-2ピクセルの誤差が出ます。

下記の修正を有効にするとピッタリにマスクされます。初期では補正を行っていません。



//アコーディオンMNUEを作る
function set_accordMenu() {

	var accordBox=new createjs.Container();

	//アコーディオン配置間隔
	var move_w=Math.floor(accordionWidth/image_max);//ST
	var move_w2=Math.floor((accordionWidth-thumbW)/(image_max-1));//OPEN
	var move_w3=Math.floor((accordionWidth-thumbW)/(image_max-1));//CLOSE

	//Math.floorによる誤差ありマスク幅の補正
	accordionWidth=move_w2*(image_max-1)+thumbW;

	略す

}

● 誤差の出ない計算

下記の様にMath.floor()を使用しない場合は、誤差は出ませんが画像位置が整数のDOT単位でないので、ブラウザによりますが、サムネール描画品質が悪くなる場合があります。
どちらが良いかの判別は難しいので、使用者が判定ください。


//アコーディオン配置間隔
var move_w=accordionWidth/image_max;//ST
var move_w2=(accordionWidth-thumbW)/(image_max-1);//OPEN
var move_w3=(accordionWidth-thumbW)/(image_max-1);//CLOSE

使用画像

原則、画像は使用者が用意します。640x300 使用画像はデモページにあります。


参照、関連記事

大型画像専用、装飾なしの基本的な、CreateJS アコーディオンです。HOVER(rollover)アクションです

【参照】当方の記事: CreateJS アコーディオン 大型画像 HOVER(rollover) 形式

別名称で呼んでいますが、ほぼ同じ「アコーディオンMENU」です。デザインが大きく違います。

【参照】当方の記事: CreateJS 画像分割アニメと、wicks方式サムネールの組み合わせ

【参照】当方の記事: CreateJS 画像分割アニメと、wicks方式サムネールの組み合わせ B



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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]