POPSブログ

CreateJS 大型画像スライド (MENU)

303

  Category:  javascript2014/06/07 pops 

大型画像スライド、クロスフェードと組み合わせてみました。「MENU」としての利用も可能です。同様なものは、以前 archives218 ページでも作っていますが少しはこちらが進化しています。ボタン、HOVERサムネールつきになります。
TOPページでの使用を想定した構造、構成となります。
easeljs-0.7.1 でのテストです。

 

CreateJS 大型画像スライド (MENU) テスト

ステージ内にマウスが入れば操作ボタンなどが表示されます。基本的にはタイマーで自動で画像コマ送りされますが、途中ボタンで任意の画像を表示できます。画像「クリック」で別ページにジャンプの設定可能です。


 

MENUを主目的としてリンクを設定する場合は、テキスト関連が貧弱ですから、それに応じて画像を意図的に加工(明示的にデザイン)しておけば効果的と思います。


DEMO


CreateJS 大型画像スライド (MENU) のデモ、(createJS087.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">
		<canvas id="mainCanvas" width="1000" height="250"></canvas>
	</div>
</div>

JS

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


//日本語
//createJS087.js
//スライドMENU形式エラー処理なし
//ステージ1つのoverlayタイプ

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

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

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

var fadeType="random";//random none
//fade=0,left=1,right=2,top=3,btm=4;
var slide_no=0;

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

//Hoverサムネールの大きさ
var thumbW=125;//125
var thumbH=50;//30
var thumbR=5;//角丸半径
var thumbposY=180;//Y位置

//overlayの大きさ
var overLayWidth=1000;
var overLayHeight=30;
var overLay_color='rgba(0,0,0,0.3)';//黒透過色

//Next-Btnの使用
var nextbtnUse=true;//true false

//ボタン半径
var btn_radius=7;
//ボタン間隔
var btnspace=20;
//Menu全体の大きさ
var btnboxWidth=0;//あとで再計算
//activeライン高さを考慮する
var btnboxHeight=10;
//Menu全体の背景色
///Menu全体のY配置位置
var btnbox_Y=235;

//下画像のリンクを有効にする
var imagelinkUse=false;//false true

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

//画像manifestリスト
var manifest=[
{src:"/main/images/city001b.jpg",id:"PHOTO1"},
{src:"/main/images/city002b.jpg",id:"PHOTO2"},
{src:"/main/images/city003b.jpg",id:"PHOTO3"},
{src:"/main/images/city004b.jpg",id:"PHOTO4"},
{src:"/main/images/city005b.jpg",id:"PHOTO5"},
{src:"/main/images/city006b.jpg",id:"PHOTO6"}
];

//リンクデータ/使用可能
var link_url=[
"blog.html",
"index.html",
"service.html",
"links.html",
"download.html",
"map.html"
];

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

//ステージ
var stage;

//コンテナ
var container;
var backcontainer;
var loadingcontainer;
var progresscontainer;
var textcontainer;
var btncontainer;
var nextcontainer;
var linkcontainer;//未使用

var hoverthumb;
//ローダー
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;
var thumb=false;//サムネール動作判定
var infortext;

//ボタン保存
var myBtn=[];//Circle-Btn
//Activebtn Circle
var activeBtn;
var linkBtn;//Go-Btn
var nextBtn,prevBtn;//Next Prev-Btn

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

//最初の画像0のこと
var image_no=0;
//画像数
var image_max;

//スライド移動位置データ
var posX=[0,canvasWidth,-canvasWidth,0,0,0,0];
var posY=[0,0,0,canvasHeight,-canvasHeight,0,0];

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

	//下画像クリックアクション/番号は仮
	if(imagelinkUse) {
		backImage.on("click",gobtn_handleclick,null,false,image_no);//有効
	}

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

	//Overlayを作る
	overLay=new createjs.Shape();
	overLay.graphics.beginFill(overLay_color).drawRect(0,0,overLayWidth,overLayHeight);
	//中央補正
	overLay.regX=overLayWidth/2;
	overLay.regY=overLayHeight/2;
	stage.addChild(overLay);
	overLay.visible=false;

	//NEXTボタンコンテナ
	nextcontainer=new createjs.Container();
	nextcontainer.x=0;
	nextcontainer.y=btnbox_Y;
	stage.addChild(nextcontainer);
	nextcontainer.visible=false;

	//ボタンコンテナ
	btncontainer=new createjs.Container();
	//ステージにaddChild
	stage.addChild(btncontainer);
	btncontainer.visible=false;

	//FadeサムネールBOX
	hoverthumb=new createjs.Shape();
	//仮のRoundRectで画像は入っていない
	hoverthumb.graphics.beginFill("#000000").drawRoundRect(0,0,thumbW,thumbH,thumbR);
	hoverthumb.regX=thumbW/2;
	hoverthumb.regY=thumbH/2;
	hoverthumb.x=0;//後で決定
	hoverthumb.y=thumbposY;//Y配置位置
	hoverthumb.shadow=shadow;//陰影
	stage.addChild(hoverthumb);
	hoverthumb.visible=false;
	//フエード用tick設定
	hoverthumb.tick=function (){
		if(hoverthumb.alpha < 1 && thumb) {
			hoverthumb.alpha+=0.05;
		}
	}
	//Ticker.Listener設定
	createjs.Ticker.addEventListener('tick',hoverthumb.tick);

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

}

//MENU他
function main () {

	//MENUボタンを作る
	set_btnMenu();

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

	draw();//画像表示

}

//MENUボタンを作る
function set_btnMenu() {

	var btnBox=new createjs.Container();

	//Activeサークルを作る
	activeBtn=createActiveBtn(btn_radius,"#00CED1");

	//HoverMenu clickタイプ
	for (var i=0; i < image_max; i++) {

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

		//BTN要素を作る
		myBtn[i]=createHoverbtn(btn_radius,"#ADD8E6","#FFD700",no);
		//初期間隔
		myBtn[i].x=btnspace*i;
		myBtn[i].y=0;
		//判別用のproperty:idを書き込む、未使用
		myBtn[i].id=i;
		myBtn[i].cursor="pointer";

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

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

	//activeBtnを乗っける
	activeBtn.y=0;
	btnBox.addChild(activeBtn);

	btnboxWidth=btnspace*(image_max-1);
	btncontainer.addChild(btnBox);

	//Next-Btn
	if(nextbtnUse) {

		//NEXT
		nextBtn=createNextBtn(16,16,5,"#FF0000");
		nextBtn.regX=8;
		nextBtn.regY=8;
		nextBtn.x=canvasWidth-15;
		nextBtn.shadow=shadow;
		//NEXTボタンコンテナ配置
		nextcontainer.addChild(nextBtn);
		nextBtn.on("click",nexthandleclick,null,false,image_no);

		//PREV
		prevBtn=createNextBtn(16,16,5,"#FF0000");
		prevBtn.regX=8;
		prevBtn.regY=8;
		prevBtn.rotation=180;
		prevBtn.x=15;
		prevBtn.shadow=shadow;
		//PREVボタンコンテナ配置
		nextcontainer.addChild(prevBtn);
		prevBtn.on("click",prevhandleclick,null,false,image_no);
	}

	//中央補正
	btncontainer.x=(canvasWidth-btnboxWidth)/2;
	btncontainer.y=btnbox_Y;
	//Overlay
	overLay.x=canvasWidth/2;
	overLay.y=btnbox_Y;

}

//BTN要素作成
function createHoverbtn(r,c,hc,no) {

	var btn=new createjs.Shape();//BTN
	btn.graphics.beginFill(c).drawCircle(0,0,r);
	//active判定用
	var no=no;

	//ラップコンテナrollover
	btn.addEventListener("rollover",function (e) {

		btn.graphics.clear();
		//
		btn.graphics.beginFill(hc).drawCircle(0,0,r);

		var point=btncontainer.localToGlobal(e.target.x,e.target.y);
		//Point補正btnRadius
		hoverthumb.x=point.x;

		//サムネールopen
		//openThumbBox(no);
		//Ex矢印つきサムネールopen
		openThumbBoxEx(no);

	});
	//ラップコンテナrollout
	btn.addEventListener("rollout",function (e) {

		btn.graphics.clear();
		//
		btn.graphics.beginFill(c).drawCircle(0,0,r);

		//サムネールclose
		closeThumbBox(no);
	});

	return btn;
}

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

	globalflag=false;
	text_set("");

	//サムネール表示中ならクリア
	if (thumb) {
		hoverthumb.visible=false;
		thumb=false;
	}

	//activeボタン変更
	//MENU-OPEN
	//activeBtn移動
	activeBtn.x=myBtn[image_no].x;

	//スライドNO
	var no=slide_no;
	//移動位置決定
	if(fadeType == 'random') {no=Math.floor(Math.random()*5);}
	if(no > 4) {no=0;}//error
	topImage.x=posX[no];
	topImage.y=posY[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({x:0,y:0,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);

}

//Lay表示アクション
//Lay-OPEN
function overlay_open(){
	//Lay表示
	overLay.visible=true;
	nextcontainer.visible=true;
	//MENU表示
	btncontainer.visible=true;
}
//Lay-CLOSE
function overlay_close(){
	//Lay非表示
	overLay.visible=false;
	nextcontainer.visible=false;
	//MENU非表示
	btncontainer.visible=false;
}

//RoundRectフキダシBOX-Ex(x,y,幅,高さ,半径,矢幅,矢高さ)、矢幅は偶数値/TEST OK
//現在こちら使用
function openThumbBoxEx(no) {

	//サムネール画像書き換え/画像result取得
	hoverthumb.graphics.clear();

	//外側ラインなしEx ok
	//hoverthumb.graphics.beginBitmapFill(createImgCanvas(thumbW,thumbH,assets[no])).roundRectBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);
	//外側白ラインつきEx ok
	hoverthumb.graphics.ss(2).s("#FFFFFF").beginBitmapFill(createImgCanvas(thumbW,thumbH,assets[no])).roundRectBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);

	hoverthumb.alpha=0;
	hoverthumb.visible=true;
	thumb=true;
}

//ThumbBox表示/未使用
function openThumbBox(no) {

	//サムネール画像書き換え/画像result取得
	hoverthumb.graphics.clear();

	//外側ラインなし
	//hoverthumb.graphics.beginBitmapFill(createImgCanvas(thumbW,thumbH,assets[no])).drawRoundRect(0,0,thumbW,thumbH,thumbR);
	//外側白ラインつき
	hoverthumb.graphics.ss(2).s("#FFFFFF").beginBitmapFill(createImgCanvas(thumbW,thumbH,assets[no])).drawRoundRect(0,0,thumbW,thumbH,thumbR);

	hoverthumb.alpha=0;
	hoverthumb.visible=true;
	thumb=true;

}

//ThumbBox非表示
function closeThumbBox(no) {
	//サムネール非表示
	hoverthumb.visible=false;
	thumb=false;
}

//NEXTボタン処理
function nexthandleclick(event,no) {
	//アニメ中は機能しない
	if (!globalflag) {return;}
	next_set();
}
//PREVボタン処理
function prevhandleclick(event,no) {
	//アニメ中は機能しない
	if (!globalflag) {return;}
	prev_set();
}

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

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

	//タイマー切
	if (timer_use == 'use') {clearTimeout(timerID);}
	//次ぎの番号
	image_no +=1;
	if (image_no > (image_max-1)) {image_no=0;}
	draw();

}
//前の開く要素を計算
function prev_set() {

	//タイマー切
	if (timer_use == 'use') {clearTimeout(timerID);}
	//前の番号
	image_no -=1;
	if (image_no < 0) {image_no=image_max-1;}
	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

	}
}

//Click-URLアクション/noは未使用
function gobtn_handleclick (event,no) {

	//登録リンクデータ
	//var url="/main/html/" + link_url[image_no];
	var url=link_url[image_no];

	//ウィンドウに出力
	location.href=url;
}

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

//------------------------------------------------------------------------
//注意、Activebtn Circle
function createActiveBtn(r,activec){
	//
	var s=new createjs.Shape();
	//共通
	s.graphics.beginFill(activec).drawCircle(0,0,r);
	return s;
}
//Next-Btn
function createNextBtn(w,h,r,c){
	//
	var s=new createjs.Shape();
	//共通
	s.graphics.beginFill("#888888").drawRoundRect(0,0,w,h,r);
	s.graphics.beginFill(c).drawCircle(w/2,h/2,(w-2)/2);
	s.graphics.beginFill("#FFFFFF").drawPolyStar(w/2,h/2,(w-4)/2,3,0,0);
	return s;
}

//RoundRectフキダシBOX拡張Ex形式
createjs.Graphics.prototype.roundRectBalloonEx=function(x,y,w,h,r,tw,th){
	this.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+w/2+tw/2,y+h)
	.lineTo(x+w/2,y+h+th)
	.lineTo(x+w/2-tw/2,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);
}

//arcToフキダシBOX拡arcTo張Ex形式
createjs.Graphics.prototype.arcToBalloonEx=function(x,y,w,h,r,tw,th){
	this.moveTo(x+w/2,y)
	.arcTo(x+w,y,x+w,y+h,r)
	.arcTo(x+w,y+h,w/2+tw/2,y+h,r)
	.lineTo(x+w/2+tw/2,y+h)
	.lineTo(x+w/2,y+h+th)
	.lineTo(x+w/2-tw/2,y+h)
	.arcTo(x,y+h,x,y,r)
	.arcTo(x,y,x+w/2,y,r)
	.lineTo(x+w/2,y)
}

//幅、高さ、画像
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 createColorImgCanvas(w,h,c,imgw,imgh,img) {
	//Box
	var canvas=document.createElement("canvas");
	//指定の大きさになる
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.fillStyle=c;
	ctx.fillRect(0,0,w,h);
	ctx.drawImage(img,0,0,imgw,imgh);

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

//色付きcanvasを作る
function createColorCanvas (w,h,c) {
	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.fillStyle=c;
	ctx.fillRect(0,0,w,h);
	return canvas;
}

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

//簡単な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

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


/*日本語 createJS087.css*/

#demo-wrap {
position:relative;
width:auto;
height:300px;
text-align:center;
}

#image-box {
/*position:absolute;*/
position:relative;
top:0;left:0px;
width:1000px;
height:250px;
padding:0;
margin:0 auto;
background-color:#000000;
}

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


 

簡単な説明


[説明図]

 

CreateJS 大型画像スライド (MENU)

ボタン操作で該当画像を表示します。CLICKしない場合は自動で順繰り表示します。時間間隔はタイマーで変更可能です。スライド、フェード処理中はボタンを押しても機能しません。


 

1. 大型画像用途で、MENU兼用になります。(MENUとして利用しない設定もOK)
2. MENU用のボタンを表示できます。また画像に直接アクションを設定可能です。
3. ボタンHOVERで、該当のサムネール画像を表示できます。(サムネールはShapeで単純化)
4. スライド、クロスフェードは指定も可能です。(デモではランダム表示)
5. 既存のTEXT表示がありますので、「説明案内文」など1行のみTEXT表示が可能です。
6. 画像読み込み失敗のエラー処理は行っていません。
7. 詳細は、JS上部を参照ください。


設定が多い訳ではありませんので、JS上部を参照ください。重要部分のみ説明します。
説明が長くなるが、別段問題はない。今までの方法と違う所があるための理由です。


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

「ステージ」にボタン類を配置していますので、次の設定を忘れない事です。



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

サムネールの縮尺

画像は大型で、横長になることが多いと予想されます。サムネールは画像の縮尺に正確でないほうが良いかも知れません。表示位置の指定が可能です。「デモ」では高さを大きくしています。



//Hoverサムネールの大きさ
var thumbW=125;//125
var thumbH=50;//30
var thumbR=5;//角丸半径
var thumbposY=180;//Y位置

リンクを有効にする

リンクを有効にすると画像に応じた所で、画像「クリック」操作により、他ページに「ジャンプ」することが可能になります。
但し、単なる画像の表示が主になっていますので、明示的に画像を加工してページに「ジャンプ」機能があることを知らせる事が重要です。



//下画像のリンクを有効にする
var imagelinkUse=true;//false true

------------------------------------------------------------------
リンクデータを記述する

//リンクデータ
var link_url=[
"blog.html",
"index.html",
"service.html",
"links.html",
"download.html",
"map.html"
];

------------------------------------------------------------------
必要であれば書き換える

//Click-URLアクション/noは未使用
function gobtn_handleclick (event,no) {

	//登録リンクデータ
	//var url="/main/html/" + link_url[image_no];
	var url=link_url[image_no];

	//ウィンドウに出力
	location.href=url;
}

画像読み込み失敗のエラー処理は行っていませんので、リンクデータと合わなくなる場合があります。(ほとんど無いと思いますが!、外部ドメインの画像は読み込まないようにしてください)


NEXT PREVボタン

最近は、NEXT PREVボタンがついているものが多くなっているが、大概、大型のボタンである。
ワタシは「大型のNEXT PREVボタン」は画像またはデザイン構成を壊してしまうので嫌いである。ゆえに「控えめの小さなボタン」にした。


サムネールの表示

ボタンの rollover rolloutでサムネールの表示がなされるように仕組まれています。デザイン設定可能です。
rollover毎に作りなおして表示していますが、画像が小さいため処理速度に問題はないようです。


1. ボタンHOVER動作でサムネールがフェードイン表示します。
2. 消える場合はフェードなしで瞬時に消えます。
3. 大型画像がスライドなどする場合は、一旦、サムネールは消去されます。
4. 表示中の画像のボタンは反応しないようにしていますので、サムネールも表示しません。


角丸サムネールの問題点

以前、角丸サムネールはBitmap()で作っていましたが、今回からはShape()で作ります。
通常の四角形なら問題はありませんが、角丸サムネールをShape()で作り、Matrix処理で縮小して陰影を付けた場合、Chromeで陰影が壊れます。Bitmap()で作る場合はマスクが必要になり面倒です。


1. 角丸サムネールゆえに、画像を入れるにはShape()を使用したほうが簡単。
2. Matrix処理で縮小ではなく、drawImage()で縮小するとChromeでの陰影は正常になる。
3. よって、beginBitmapFill() で rollover 毎に画像を入れ替える。


サムネール重ね順、表示位置の確定

表示重ね順確定のために、最初に空の器のみ設定し、あとで中身を替えてゆく。graphicsを省略してShapeだけでも良い。ここではまだ表示しません。



//FadeサムネールBOX
hoverthumb=new createjs.Shape();
//仮のRoundRectで画像は入っていない
hoverthumb.graphics.beginFill("#000000").drawRoundRect(0,0,thumbW,thumbH,thumbR);
略す
stage.addChild(hoverthumb);
以下略す

.beginFill()ではエラーになるので、何か色を入れておく。.beginBitmapFill()である必要はない。


画像の縮小

サムネールはMatrix処理をせず、下記の様に縮小処理した。



Shapeクラスインスタンス.graphics.beginBitmapFill(createImgCanvas(画像幅,画像高さ,画像)).drawRoundRect(.....);

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

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

サムネールの形態

サムネールは通常の角丸形、矢印つきの形、の2種類を指定できます。下記設定のどちらかをを有効にしてください。

最初は重ね順を確定するために、画像なしダミーのShapeを配置します。(表示はされませんが、.beginFill()で記載しています)


「矢印つき」の場合、矢の部分にリピート画像が描画されますが修正はしていません。(視覚的に問題にならない、少々の修正方法は後に記すがさほど綺麗にはならないので、気にしないほうが得策)
「矢印つき」は、Graphicsクラス拡張の独自関数 roundRectBalloonEx() で処理しています。


外側のラインなどを含む、graphics全体を画像共に書き換えています。

外側白ラインの矢印つきサムネールを処理してみます。


1. 通常の矢印なし角丸サムネール表示は、openThumbBox(no) を実行。
2. 矢印つきサムネールは、openThumbBoxEx(no) を実行。



//BTN要素作成
function createHoverbtn(r,c,hc,no) {

	略す

	//ラップコンテナrollover
	btn.addEventListener("rollover",function (e) {

		btn.graphics.clear();
		//
		btn.graphics.beginFill(hc).drawCircle(0,0,r);

		var point=btncontainer.localToGlobal(e.target.x,e.target.y);
		//Point補正btnRadius
		hoverthumb.x=point.x;

		//サムネールopen
		//openThumbBox(no);
		//Ex矢印つきサムネールopen
		openThumbBoxEx(no);

	});
	//ラップコンテナrollout
	btn.addEventListener("rollout",function (e) {

		略す

	});

	return btn;
}

1. 矢印つきの形

 

矢印つきの形は、Graphicsクラスの「拡張形」で処理しています。白のラインつきまたはラインなしが選定できます。
「外側ラインなし」または「外側白ラインつき」、どちらかを有効にしてください。


graphicsの書き方は、下記のような処理方法が問題が発生しにくいのでベターであると思いますが、処理方法は多数あるのでどれが一番良い方法であるかワタシには判らない。


「矢印つき」は、Graphicsクラス拡張の独自関数 roundRectBalloonEx() で処理しています。単に外形のパス形状を描画しているだけですが、通常のgraphicsの書き方が出来るのが利点です。


注意、スクリプトの書き方如何ではエラーで処理できない場合があります。



//RoundRectフキダシBOX-Ex(x,y,幅,高さ,半径,矢幅,矢高さ)、矢幅は偶数値/TEST OK
//現在こちら使用
function openThumbBoxEx(no) {

	//サムネール画像書き換え/画像result取得
	hoverthumb.graphics.clear();

	//外側ラインなしEx ok
	//hoverthumb.graphics.beginBitmapFill(createImgCanvas(thumbW,thumbH,assets[no])).roundRectBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);
	//外側白ラインつきEx ok
	hoverthumb.graphics.ss(2).s("#FFFFFF").beginBitmapFill(createImgCanvas(thumbW,thumbH,assets[no])).roundRectBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);

	hoverthumb.alpha=0;
	hoverthumb.visible=true;
	thumb=true;
}

roundRectBalloonEx関数、(CreateJS Graphicsで記述)



//RoundRectフキダシBOX拡張Ex形式
createjs.Graphics.prototype.roundRectBalloonEx=function(x,y,w,h,r,tw,th){
	this.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+w/2+tw/2,y+h)
	.lineTo(x+w/2,y+h+th)
	.lineTo(x+w/2-tw/2,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);
}

上記の処理が判り易く、間違いが少ない。
フキダシは quadraticCurveTo で作っていますが、現在 Opera が「Chromeエンジン」を使用しましたので、arcTo で作ることも可能です。


以上、概略の説明です。



 

// これ以降は興味のある方のみお読みください //

 

● new createjs.Shapeで処理

new createjs.Shapeで処理をはじめる、次の記述でも処理するが、効率的ではないかも?



//作り方が違うので注意、new createjs.Shapeで処理
var shape=new createjs.Shape();
//外側ラインなしok
//shape.graphics.beginBitmapFill(createImgCanvas(thumbW,thumbH,assets[no])).roundRectBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);
//外側白ラインつきok
shape.graphics.ss(2).s("#FFFFFF").beginBitmapFill(createImgCanvas(thumbW,thumbH,assets[no])).roundRectBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);
hoverthumb.graphics=shape.graphics;

● Exをnew createjs.Graphics()で処理する

以外と面倒でエラーになり易いので止めたほうが良い。一応処理するが面倒である。



var grph=new createjs.Graphics();
grph.ss(2).s("#FFFFFF").beginBitmapFill(createImgCanvas(thumbW,thumbH,assets[no])).roundRectBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);
hoverthumb.graphics=grph;

arcTo形式でのフキダシを作る

arcTo形式でフキダシを作った方が簡単である。quadraticCurveTo形式で処理したのはOpera対策のためである。
現在、Operaが「Chromeエンジン」に移行したため不具合は解消されているのでarcTo形式の使用はOKです。
以下に記載するが、関数名を arcToBalloonEx() とする。上辺の中間より書き出している。


設定の書式は同じである。



//arcToフキダシ白ラインつきEx ok

hoverthumb.graphics.ss(2).s("#FFFFFF").beginBitmapFill(createImgCanvas(thumbW,thumbH,assets[no])).arcToBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);

arcToBalloonEx関数、(CreateJS Graphicsで記述)



//arcToフキダシBOX拡arcTo張Ex形式
//x,y,幅,高さ,半径,矢幅,矢高さ
createjs.Graphics.prototype.arcToBalloonEx=function(x,y,w,h,r,tw,th){
	this.moveTo(x+w/2,y)
	.arcTo(x+w,y,x+w,y+h,r)
	.arcTo(x+w,y+h,w/2+tw/2,y+h,r)
	.lineTo(x+w/2+tw/2,y+h)
	.lineTo(x+w/2,y+h+th)
	.lineTo(x+w/2-tw/2,y+h)
	.arcTo(x,y+h,x,y,r)
	.arcTo(x,y,x+w/2,y,r)
	.lineTo(x+w/2,y)
}

角丸の連続記述が楽である故、今後はこちらを使用して行こうと思っている。


矢印つきフキダシの背景を染める

 

矢印の中を指定色にして、矢印つきフキダシの背景を染めるのは構造を変えねばならない為、容易ではないから、その場しのぎでサムネール画像を加工して使用してみた。
サムネールの下に色背景を付ける処理であるが、陰影処理で染めた背景部分にも影が出来、効果は半減する。



//色背景つき画像で処理
//全幅、全高さ、背景色、画像幅、画像高さ、画像
var img=createColorImgCanvas(thumbW,thumbH+8,"#FFFFFF",thumbW,thumbH,assets[no]);
//外側白ラインつきEx
hoverthumb.graphics.ss(2).s("#FFFFFF").beginBitmapFill(img).roundRectBalloonEx(0,0,thumbW,thumbH,thumbR,6,8);

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

//色背景つき画像
//全幅、全高さ、背景色、画像幅、画像高さ、画像
function createColorImgCanvas(w,h,c,imgw,imgh,img) {
	//Box
	var canvas=document.createElement("canvas");
	//指定の大きさになる
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");
	ctx.fillStyle=c;
	ctx.fillRect(0,0,w,h);
	ctx.drawImage(img,0,0,imgw,imgh);

	return canvas;
}

気晴らし、慰め程度である。他に方法はあるが止めとく......


2. 角丸形 (未使用)

矢印つきフキダシではない、CreateJS標準の、角丸形 drawRoundRect() を利用した場合です。間違い易いのでGraphics()は使わないほうが良いと思う。
下記のような処理方法が問題が発生しにくいのでベターである?。openThumbBox()を使用するが処理内容は同じ。



//ThumbBox表示/未使用
function openThumbBox(no) {

	//サムネール画像書き換え/画像result取得
	hoverthumb.graphics.clear();

	//こちらが良い
	//外側ラインなし
	//hoverthumb.graphics.beginBitmapFill(createImgCanvas(thumbW,thumbH,assets[no])).drawRoundRect(0,0,thumbW,thumbH,thumbR);
	//外側白ラインつき
	hoverthumb.graphics.ss(2).s("#FFFFFF").beginBitmapFill(createImgCanvas(thumbW,thumbH,assets[no])).drawRoundRect(0,0,thumbW,thumbH,thumbR);

	hoverthumb.alpha=0;
	hoverthumb.visible=true;
	thumb=true;

}

上記の処理が判り易く、間違いが少ないと思います。


● 下記のような、Graphics()で処理する方法は、間違い易いので使わないほうが良い。(Ex形式は処理できない)



//Graphics().は使わないほうが良い
//外側ラインなし
//hoverthumb.graphics=new createjs.Graphics().beginBitmapFill(createImgCanvas(thumbW,thumbH,assets[no])).drawRoundRect(0,0,thumbW,thumbH,thumbR);
//外側白ラインつき
//hoverthumb.graphics=new createjs.Graphics().ss(2).s("#FFFFFF").beginBitmapFill(createImgCanvas(thumbW,thumbH,assets[no])).drawRoundRect(0,0,thumbW,thumbH,thumbR);

 

Graphicsクラスに陰影と画像流し込みの注意点

以前、HOVERサムネールはBitmap()で作ってきたが、Chromeでの不具合に対処できますので、今回はShape()で作ります。よって構造が簡単になります。

 

Graphicsクラスでは少々注意しなければならない点があります。下記、3事項は特に重要です。
実際に陰影処理は親となるShapeに実行します...、そのほかに問題の出た場合は自己解決する他に方法はない。


1. 陰影つきのボタンなどで、rollover rollout でGraphicsを書き換える場合は先にclear()を実行します。
clear()を実行しないと陰影が濃くなりギザギザになる。(Chrome Safari 他にあるかも?)
2. 画像の取替えで「参照」の画像などはclear()で消滅する場合がある。(参照元まで影響するのが原因)
新たにnewでShapeクラスを作り、其のgraphicsを利用すれば防げる。またはクーロンなどを利用する。
3. Graphicsクラスで画像をMatrixで縮小して、角丸処理して陰影を付けるとChromeで陰影が壊れます?。
drawImage()で縮小するとChromeでの陰影は正常になる、但しdrawRect()は正常。
4. この、Chromeでの不具合は将来直るものかは不明です。

 

 

説明案内文の表示

このJSは簡略化しているため、意図的に「説明案内文」などを省いています。既存のTEXT表示がありますので、これを利用すれば1行のみTEXT表示が可能です。



説明文TEXTを用意する
var setumei=["説明文1","説明文2","説明文3","説明4","説明文5","説明文6",...............];

必要な場所で表示する
//アニメ全て完了
function finshtween () {

	//適当なところで表示
	text_set(setumei[image_no]);

}

参照

以前の、Bitmapタイプの「HOVERサムネール」に関しては、下記、記事などを参照ください。

【参照】当方の記事: CreateJS マウスオーバーCircleボタン表示active対応


使用画像

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



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

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


次回はエラー処理などしてMENUの機能を増やしてみます。以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]