POPSブログ

CreateJS アコーディオンMENUと画像クロスフェード、ステージ1つのOverlayタイプ

302

  Category:  javascript2014/06/01 pops 

同一のステージ内に配置した、ホリゾンタル アコーディオン 応用のサムネール「MENU」です。簡単な画像クロスフェードと組み合わせてみました。ステージ1つのOverlayタイプでステージにマウスが入れば表示します。
easeljs-0.7.1 でのテストです。

 

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

小さなサムネール画像を使用したアコーディオンMENUです。全てを1つのステージ内に収容しました。色々と機能などを付加すると、結構複雑で面倒になりますが、何とか動作します。
下記、前ページ掲載のアコーディオン(2ステージタイプ)を改造して作りました。


【参照】当方の記事: CreateJS アコーディオンMENUと画像クロスフェード


 

DEMO


CreateJS アコーディオンMENU、overLayタイプと画像クロスフェードのデモ、(createJS086.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>
<br>

JS

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


//日本語
//createJS086.js
//アコーディオンMNUE形式2
//ステージ1つのoverLayタイプ

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

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

//アコーディオンoverLayの大きさ
var overLayWidth=640;
var overLayHeight=70;
var overLay_posY=230;//Y位置
var overLay_color='rgba(0,0,0,0.5)';//黒透過色

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

//テキスト表示の使用 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;

//コンテナ
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;

//アコーディオンoverLay
var overLay;
//サムネール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");
	}

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

	//アコーディオンLayを作る
	overLay=new createjs.Shape();
	overLay.graphics.beginFill(overLay_color).drawRect(0,overLay_posY,overLayWidth,overLayHeight);
	stage.addChild(overLay);
	overLay.visible=false;
	//ボタンコンテナ
	btncontainer=new createjs.Container();
	//ステージにaddChild
	stage.addChild(btncontainer);
	btncontainer.visible=false;

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

	//ステージアクション
	stage.addEventListener('stagemousemove',accordionlay_open);//over
	stage.addEventListener('rollout',accordionlay_close);//out

	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

	/*
	//アコーディオン配置間隔/誤差の出ない計算マスク幅の補正はいらない
	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
	*/

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

	//ActiveThumbラインを作る
	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) {
		//透明度
		thumb.alpha=1;//全て
		//開く
		accordion_open(no);
	});
	//ラップコンテナrollout
	ac.addEventListener("rollout",function (e) {
		//透明度
		if(no != image_no){thumb.alpha=0.5;}//active以外
		//現在の画像番号に移動
		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);

}

//アコーディオンMNUE/Lay表示アクション
//Lay-OPEN
function accordionlay_open(){
	//Lay表示
	overLay.visible=true;
	//アコーディオンMNUE表示
	btncontainer.visible=true;
}
//Lay-CLOSE
function accordionlay_close(){
	//Lay非表示
	overLay.visible=false;
	//アコーディオンMNUE非表示
	btncontainer.visible=false;
}

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

//次ぎの開く要素を計算
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

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


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

.radius {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-box-border-radius:10px;
-ms-border-radius:10px;
}

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


 

簡単な説明


[説明図]

 

前ページのものを改造したものですが、アコーディオンボタン類をステージ1つに配置しましたので、イベントの設定など違いがあります。
個人的には同じステージに配置したくないのが本音です。(「イベント処理」が旨く行かない場合が多い)


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

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


1. アコーディオンボタン類(サムネール)をステージ1つに配置しました。(stage)
2. アコーディオン直下にレーヤーを配置し、ステージにマウスが入れば表示します。
3. HOVER(rollover)で開き、CLICKで該当画像を表示します。
4. 自動の場合、該当サムネールを開き、其の上にラインを表示します。
5. Active状態のライン、画像透明度などは設定変更が可能です。
6. サムネールの間隔などは自由に調整可能です。
7. 表示枚数は正確に、何枚と断言できませんので、全体の幅およびサムネールの大きさで調整ください。
8. 詳細は、JS上部を参照ください。


簡単に変更点のみ説明します。


ステージに、enableMouseOver()を設定

前ページのものはボタンが「ステージ2」にあったために、enableMouseOver()を設定はステージ2にしていました。
今回は「ステージ」にアコーディオンボタン類を配置していますので、次の設定を忘れない事です。



//MouseOver重要
stage.enableMouseOver(20);

ステージアクション

「アコーディオンMENU」「Overlay」の表示非表示の切り替えを「ステージアクション」で行っています。
下記の様に、stagemousemove を利用しているのが特徴です
現在は単に「表示非表示」の切り替えですが、スライドアニメーションなども可能です。



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

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

	//ステージアクション
	stage.addEventListener('stagemousemove',accordionlay_open);//over
	stage.addEventListener('rollout',accordionlay_close);//out

	draw();//画像表示

}

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

//アコーディオンMNUE/Lay表示アクション
//Lay-OPEN
function accordionlay_open(){
	//Lay表示
	overLay.visible=true;
	//アコーディオンMNUE表示
	btncontainer.visible=true;
}
//Lay-CLOSE
function accordionlay_close(){
	//Lay非表示
	overLay.visible=false;
	//アコーディオンMNUE非表示
	btncontainer.visible=false;
}

アコーディオンHOVER時に明るくする

前ページのアコーディオンはHOVER時に色変化がないために、サムネールが少々見づらいです。このJSでは、
サムネールHOVER時、明るくなるように修正しました。(サムネール画像透明度変化設定の場合)
前ページの場合も修正が可能です。


● 前ページの設定の記述


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

	略す

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

	return ac;
}

● 新しい設定の記述


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

	略す

	//ラップコンテナrollover
	ac.addEventListener("rollover",function (e) {
		//透明度
		thumb.alpha=1;//全て
		//開く
		accordion_open(no);
	});
	//ラップコンテナrollout
	ac.addEventListener("rollout",function (e) {
		//透明度
		if(no != image_no){thumb.alpha=0.5;}//active以外
		//現在の画像番号に移動
		accordion_open(image_no);
	});

	return ac;
}

サムネール画像透明度変化設定をしていない場合は


//透明度
thumb.alpha=0.5;//全て

改造などの注意

改造などを行うのは自由ですから、クロスフェードを他のエフェクトに変えたりが可能です。但しコンテンツ、イベントなどを追加した場合は注意が必要です。

デザイン変更、機能の追加などは簡単ですが、伴う「イベント」の設定が結構自由に行かないのが実情です。


1. アコーディオンの上に何らかの要素を重ねて配置すると、ボタンが機能しなくなる。
2. アコーディオンの下にイベントなどを追加した場合はアコーディオンが邪魔をする。


これらの事象が発生した場合は、自己解決ください。


使用画像

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


参照

【参照】当方の記事: CreateJS アコーディオンMENUと画像クロスフェード



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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]