POPSブログ

CreateJS 大型画像スライス DOORタイプ MENU

307

  Category:  javascript2014/06/18 pops 

大型画像の画像分割、DOOR 形式の画像エフェクトと「MENU」の組み合わせです。原則、2x2、x2x1、1x2分割の 4DOOR 2DOOR になります。一応「MENU」としての利用を目的としていますので(使える程度の代物)、画像読み込み失敗時のエラー処理もしました。TOPページでの使用を想定した構造、構成となります。
easeljs-0.7.1 でのテストです。

 

CreateJS 大型画像スライス DOORタイプ MENU 5 テスト

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


 

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


上図の文字部分は画像ですので、任意に分割されます。


DEMO


CreateJS 大型画像スライス DOORタイプ MENU のデモ、(createJS091.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

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


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

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

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

var open_speed=400;//Menu速度

//ボタンを作る
var clickbtnUse=true;//true false

//タイマーの使用、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;

//案内文を表示する
infortextUse=true;//false true
//模擬ボタンを作りリンクを有効にする
var linkUse=true;//false true
//下画像のリンクを有効にする
var imagelinkUse=false;//false true

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

//分割設定----------------------------------------

var speed=1200;//拡大移動、アニメ速度 800-1500
var delay_speed=150;//出現間隔、delay基準時間 100-200

//4DOORアレンジを行う 
var arrangeUse=true;//true false

var split_free=true;//自動分割 true false
//自動分割でない場合の分割
var split_h=2;//標準の横方向分割数
var split_v=2;//標準の縦方向分割数
var split_all=split_h*split_v;
//自動分割の場合、free分割データを登録
var splitHs=[2,2,1,2,1,11,11];//縦40以上は注意、修正済み
var splitVs=[2,2,2,1,1,3,1];

//スケール方向番号データ 0-3
var scales=[0,0,0,0,1,2,3];
//回転データ
var rotates=[0,0,0,0,0];

//分割設定終り------------------------------------

//画像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 title_text=["Blog","Index","Service","Links","Download","Map"];//未使用
//案内文
var info_text=[
"POPS-WEB Blog ページに進みます",
"POPS-WEB Index ページに進みます",
"POPS-WEB Service ページに進みます",
"POPS-WEB Links ページに進みます",
"POPS-WEB Download ページに進みます",
"POPS-WEB Map ページに進みます"
];

//リンクデータ
var link_url=["blog.html","index.html","service.html","links.html","download.html","map.html"];
//登録色
var d_color=["#FF1493","#FF69B4","#FFA07A","#9370DB","#6A5ACD","#4682B4","#778899","#B8860B","#DEB887","#FFD700"];//代替画像に利用

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

//ステージ
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

//分割
//ボタンが押された/有効
var btnValidity=false;//未使用
var inType;
var moveType;
var kcount=0
var once=false;

////分割
//分割大きさ位置保存容器
var chip_W=[],chip_H=[],chip_pos_X=[],chip_pos_Y=[];
//実際配置位置
var set_pos_X=[],set_pos_Y=[];
//移動配置位置
var mov_pos_X=[],mov_pos_Y=[];
//スライスObject容器
var chip=[];
//分割なし1枚画像用スライド移動位置データ/注意中心補正値
var posX=[canvasWidth/2,canvasWidth*1.5,-canvasWidth*1.5,canvasWidth/2,canvasWidth/2,canvasWidth/2,canvasWidth/2,canvasWidth/2,canvasWidth/2];
var posY=[canvasHeight/2,canvasHeight/2,canvasHeight/2,canvasHeight*1.5,-canvasHeight*1.5,canvasHeight/2,canvasHeight/2,canvasHeight/2,canvasHeight/2];

//4DOOR位置番号
var doorPos_no=[0,3,2,1];

//色付きcanvas保存画像を作る
keep_mainImage=createColorCanvas (canvasWidth,canvasHeight,"#000000");

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

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

	//上画像層、コンテナのみを作る
	container=new createjs.Container();
	//画像分割は中のインスタンスはあとで作る
	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+3;
	stage.addChild(nextcontainer);
	nextcontainer.visible=false;

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

	//FadeサムネールBOX
	hoverthumb=new createjs.Shape();
	//仮のgraphicsで画像は入っていない
	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);

	//Go-btn設置/模擬ボタン
	if(linkUse) {

		//リンクコンテナ
		linkcontainer=new createjs.Container();
		//BTN
		linkBtn=createShapeBtn2(0,0,60,20,5,"GO","12px","#FFFFFF","#FF69B4",0);//変更可能
		linkBtn.x=canvasWidth-60;
		linkBtn.y=25;
		//linkBtn.shadow=shadow;//陰影
		//TEXT
		infortext=new createjs.Text("","13px Arial","#FFFFFF");
		infortext.textAlign="right";
		infortext.x=canvasWidth-100;
		infortext.y=15;
		infortext.shadow=shadow;
		linkcontainer.addChild(infortext,linkBtn);

		//クリックアクション/番号は仮
		linkBtn.on("click",gobtn_handleclick,null,false,image_no);//不要なら削除する
		stage.addChild(linkcontainer);
		linkcontainer.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);
	//error関数を追加
	loader.addEventListener("error",loaderror);

	//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);
	//追加error関数を削除
	loader.removeEventListener("error",loaderror);

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

}
//エラー処理
function loaderror(eventObject) {

	//エラーの場合代替画像を作りassets容器に格納
	//var img=createColorCanvas (canvasWidth,canvasHeight,"#FFFFFF");//ベタ
 	var img=createLineGradBox (canvasWidth,canvasHeight,"#FFFFFF",d_color[assets.length],"#FFFFFF","y",2);//登録色グラデーション
	assets.push(img);
}

//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_radius/2;//補正

}

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

	//AUTO文字表示/ボタン有効判定
	if (timer_use =='use') {
		if (clickbtnUse) {text_set("AUTO");}
	};

	//サムネール表示中ならクリア
	if (thumb) {
		hoverthumb.visible=false;
		thumb=false;
	}
	//リンクボタン非表示
	if(linkBtn) {
		//linkBtnコンテナ
		linkcontainer.visible=false;
	}

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

	//IN OUTを確率で決定
	inType=true;
	var in_no=Math.floor(Math.random()*2);
	if (in_no == 0) {inType=false;}

	//画像保存がなければIN
	if (!keep_mainImage) {
		inType=true;
	}

	//INの場合画像result取得
	if (inType) {
		mainImage=assets[image_no];
	} else {
		//OUTの場合画像keep.result取得
		mainImage=keep_mainImage;
	}
	//グラフィックに流し込むにresultで処理のため
	keep_mainImage=assets[image_no];

	//カウントクリア
	kcount=0;

	//分割変更
	if (split_free) {
		var splitNo=Math.floor(Math.random()*splitHs.length);
		//分割値代入
		split_h=splitHs[splitNo];//★縦40以上は注意
		split_v=splitVs[splitNo];
	}

	//スライス寸法データを得る1
	slice_set(canvasWidth,canvasHeight,split_h,split_v);
	//分割合計要素数計算
	split_all=split_h*split_v;

	//画像分割貼り付け
	var srcArr=[];//URL容器
	var k=0;
	for (var i=0; i < split_h; i++) {
		for (var j=0; j < split_v; j++) {

			var sliceCanvas=document.createElement("canvas");
			sliceCanvas.width=chip_W[k];
			sliceCanvas.height=chip_H[k];

			var context=sliceCanvas.getContext("2d");
			//トリミング
			context.drawImage(mainImage,chip_pos_X[k],chip_pos_Y[k],chip_W[k],chip_H[k],0,0,chip_W[k],chip_H[k]);
			//Canvasエレメントを保存
			srcArr[k]=sliceCanvas;
			k++;
		}
	}

	//アニメ条件設定
	//配列クリア
	var delay_st=[];
	var delay_pt=[];
	//rotation受渡変数配列
	var rotate_v=[];

	//動きの分類
	moveType="none";
	if(split_h == 2 && split_v == 2){moveType="door4";}
	if(split_h == 1 && split_v == 2){moveType="h-door";}
	if(split_h == 2 && split_v == 1){moveType="v-door";}
	if(split_all == 1){moveType="sheet";}

	//標準パターン番号削除未使用
	var patternflag=false;
	//パターン番号未使用
	var pattern_no=0;

	//多目的判定用
	var chgxyflag=Math.floor(Math.random()*5);
	//多目的用2
	var chgflag=Math.floor(Math.random()*3);
	//多目的判定用3 1-2の値
	var chgflag2=Math.floor(Math.random()*2)+1;
	//逆転フラグ
	var chg_v=Math.floor(Math.random()*2);
	if (chg_v < 1) {chg_v=-1;}
	//タイプ決定フラグ未使用
	var typeflag=0;

	//delay番号
	var delay_no=Math.floor(Math.random()*6);
	//delayed遅延させる/20%
	var delayed=Math.floor(Math.random()*5);

	//配置disposition位置番号/加算値
	var disposition_no=Math.floor(Math.random()*4);
	var disposition_X=0;
	var disposition_Y=0;

	//スケール方向番号
	var scale_no = scales[Math.floor(Math.random()*scales.length)];
	var scale_X=0;
	var scale_Y=0;

	//回転0
	var rotate=0;

	//透明度
	var alpha_no=Math.floor(Math.random()*2);

	//速度補正係数
	var spd_v=1;

	//回転の場合の食み出し防止、長いので見える、透過させる
	if (split_h == 1 || split_v == 1) {
		if (rotate > 0) {alpha_no=0;}
	}

	//Even算出
	var even_v = 1;
	if (split_v % 2 != 0) {even_v = 0;}

	//4DOORアレンジを行う 
	var doorflag=2;//アレンジなし
	if (arrangeUse) {
		doorflag=Math.floor(Math.random()*5);//増やす
	}

	//Bitmap配置、配置条件設定
	var vx=0,vy=0,angle_v=0;

	var shc=(split_h/2)-0.01;
	var svc=(split_v/2)-0.01;
	var diag_no=0;
	var v_x=0;
	var v_y=0;
	flag3=1;
	var k=0;
	for (var i=0; i < split_h; i++) {
		for (var j=0; j < split_v; j++) {

			//Canvasエレメントを表示のためにBitmapに収納
			chip[k]=new createjs.Bitmap(srcArr[k]);

			chip[k].width=chip_W[k];
			chip[k].height=chip_H[k];

			//中央補正
			chip[k].regX=chip_W[k]/2;
			chip[k].regY=chip_H[k]/2;

			//戻り位置計算
			set_pos_X[k]=chip_pos_X[k]+chip_W[k]/2;
    			set_pos_Y[k]=chip_pos_Y[k]+chip_H[k]/2;

			//door4
			if (moveType == 'door4') {
				var c_W=chip_W[k];
				var c_H=chip_H[k];
				//アレンジarrange
				if(doorflag == 0) {c_W=0;}//上下
				if(doorflag == 1) {c_H=0;}//左右
			}

			//移動加算値等の計算
			//door4
			if (moveType == 'door4') {

				//4方向に順序修正
				if(doorPos_no[k] == 0) {
					disposition_X=set_pos_X[k]-c_W;
					disposition_Y=set_pos_Y[k]-c_H;
				}
				if(doorPos_no[k] == 1) {
					disposition_X=set_pos_X[k]+c_W;
					disposition_Y=set_pos_Y[k]+c_H;
				}
				if(doorPos_no[k] == 2) {
					disposition_X=set_pos_X[k]+c_W;
					disposition_Y=set_pos_Y[k]-c_H;
				}
				if(doorPos_no[k] == 3) {
					disposition_X=set_pos_X[k]-c_W;
					disposition_Y=set_pos_Y[k]+c_H;
				}

				spd_v=1;
				if(doorflag == 0) {spd_v=0.5;}//上下補正
				//スケール補正
				scale_no=1;
				//回転補正
				rotate=0;

			}

			//h-door上下
			if (moveType == 'h-door') {

				disposition_X=set_pos_X[k];//X固定
				//上下に補正
				if(j == 0) {disposition_Y=set_pos_Y[k]-chip_H[k];}
				if(j == 1) {disposition_Y=set_pos_Y[k]+chip_H[k];}
				spd_v=0.5;
				//スケール補正
				scale_no=1;
				//回転補正
				rotate=0;

			}
			//v-door左右
			if (moveType == 'v-door') {

				disposition_Y=set_pos_Y[k];//Y固定
				//左右に補正
				if(i == 0) {disposition_X=set_pos_X[k]-chip_W[k];}
				if(i == 1) {disposition_X=set_pos_X[k]+chip_W[k];}
				spd_v=1;
				//スケール補正
				scale_no=1;
				//回転補正
				rotate=0;

			}
			//1枚画像 slide scale
			if (moveType == 'sheet') {
				//移動位置決定/0=FADE/1=left/2=right/3=up/4=down/567=scale
				var no=Math.floor(Math.random()*8) || 0;
				//XY
				disposition_X=posX[no];
				disposition_Y=posY[no];
				//スケール補正
				if(no < 5) {scale_no=1;}
				if(no == 5) {scale_no=0;}
				if(no == 6) {scale_no=2;}
				if(no == 7) {scale_no=3;}
				//
				if(no == 0) {alpha_no=0;}
				//回転補正
				rotate=0;
			}
			//区分外その場
			if (moveType == 'none') {
				disposition_X=set_pos_X[k];
				disposition_Y=set_pos_Y[k];
				if(scale_no == 1) {alpha_no=0;}
				spd_v=0.5;
				//回転補正
				rotate=0;
			}


			//スケール方向決定
			switch(scale_no){
				case 0:
					scale_X=0;scale_Y=0;
				break;
				case 1:
					scale_X=1;scale_Y=1;
				break;
				case 2:
					scale_X=0;scale_Y=1;
				break;
				case 3:
					scale_X=1;scale_Y=0;
				break;
				default:
					scale_X=0;scale_Y=0;
			}

			//rotation
			rotate_v[k]=0;

			//初期の移動
			//IN
			if (inType) {
				mov_pos_X[k]=disposition_X;
				mov_pos_Y[k]=disposition_Y;
				chip[k].x=mov_pos_X[k];
    				chip[k].y=mov_pos_Y[k];
				chip[k].rotation=rotate_v[k];
				chip[k].scaleX=scale_X;
				chip[k].scaleY=scale_Y;
				chip[k].alpha=alpha_no;
			}

			//OUT
			if (!inType) {
				mov_pos_X[k]=disposition_X;
				mov_pos_Y[k]=disposition_Y;
				chip[k].x=set_pos_X[k];
    				chip[k].y=set_pos_Y[k];
				//初期の条件
				chip[k].rotation=0;
				chip[k].scaleX=1;
				chip[k].scaleY=1;
				chip[k].alpha=1;
			}

			//表示リストaddChild、stage.updateはしないこと
			//コンテナに収容
			container.addChild(chip[k]);

			k++;
			flag3 *=-1;
		}
		if (even_v) {flag3 *=-1;}
	}

	//delayの計算/通常より増やした
	var sh=split_h-1;
	var sv=split_v-1;
	var flag3=1;
	var kk=0;//方向違いカウント
	var kkk=0;//半分でカウントダウン
	var k=0;
	for (var i=0; i < split_h; i++) {
		for (var j=0; j < split_v; j++) {

			//縦方向にカウント
			kk=i*split_v+j;
			kkk=k;
			if (k > (split_all-1)/2) {kkk=Math.abs(split_all-k)-1;}

			delay_st[k]=k*delay_speed*0.5;//標準

			//4DOOR
			if (moveType == 'door4') {
				delay_st[k]=doorPos_no[k]*chgflag*2*delay_speed;//同時あり
				if (delay_no == 0) {delay_st[k]=1*delay_speed;doorflag=2;delayed=1;}//遅延変則処理
			}
			//
			if (moveType == 'h-door') {
				delay_st[k]=chgflag*delay_speed;//同時変則
			}
			//
			if (moveType == 'v-door') {
				delay_st[k]=chgflag*delay_speed;//同時変則
			}
			//
			if (moveType == 'sheet') {
				delay_st[k]=chgflag*delay_speed;//同時変則
			}
			//区分外
			if (moveType == 'none') {
				if (delay_no == 0) {delay_st[k]=(Math.abs(Math.abs(i-sh/2)-sh)+Math.abs(Math.abs(j-sv/2)-sv))*2*delay_speed;}//円形状外から中心に
				if (delay_no == 1) {delay_st[k]=(i+j)*0.5*delay_speed;delayed=1;}//delayed
				if (delay_no == 2) {delay_st[k]=(i+(split_v-j))*delay_speed;}//標準斜め2
				if (delay_no == 3) {delay_st[k]=(i+j)*delay_speed;}//標準斜め2
				if (delay_no == 4) {delay_st[k]=(Math.abs(i-(sh/2)))*2*delay_speed;}//縦状中より左右に
			}

			//delayed遅延、計算複雑
			if (delayed == 1 && moveType == 'door4') {
				var dd_time=1000/spd_v;//補正
				//アレンジなしflag3判定
				if (doorflag == 2) {
					if (flag3 < 0) {delay_st[k] +=dd_time;}
				}
				//アレンジ位置doorPos_no判定
				if (doorflag != 2) {
					if (doorPos_no[k] % 2 != 0) {delay_st[k] +=dd_time;}
				}
			}
			//2
			if (delayed == 1 && moveType != 'door4') {
				var dd_time=1000/spd_v;//補正
				if (flag3 < 0) {delay_st[k] +=dd_time;}
			}

			k++;
			flag3 *=-1;

		}
		if (even_v) {flag3 *=-1;}
	}

	//delay反転
	if (chgxyflag > 2) {
		delay_st.reverse();
	}

	//EDIT用、状況をテキスト表示
	//text_set("MT/"+moveType+" DNo."+disposition_no+" SNo. "+scale_no+" delayNo."+delay_no+" alpha/ "+alpha_no);

	//OUTの場合下画像を入れるstage.updateはしないこと
	if (!inType) {
		backImage.image=new createjs.Bitmap(keep_mainImage).image;
	}

	//Easeの変更 IN最後遅くOUT等速
	var ease=createjs.Ease.linear;
	if (inType) {ease=createjs.Ease.cubicOut;}

	//TWEENの実行
	var k=0;
	var params={};
	for (var i=0; i < split_h; i++) {
		for (var j=0; j < split_v; j++) {

			if (inType) {
				params={x:set_pos_X[k],y:set_pos_Y[k],scaleX:1,scaleY:1,rotation:0,alpha:1};
			} else {
				params={x:mov_pos_X[k],y:mov_pos_Y[k],scaleX:scale_X,scaleY:scale_Y,rotation:rotate_v[k],alpha:alpha_no};
			}

			var tw=createjs.Tween.get(chip[k])
			.wait(delay_st[k])
			.call(indexchg)
			.to(params,speed*spd_v,ease)
			.call(finshtween)

			k++;

		}
	}

}

//重ね順を一番上にする
function indexchg () {
	container.setChildIndex(this,split_all-1);
	//container.setChildIndex(this,0);
}

//要素ごとのアニメ完了処理
function finshtween () {

	//全て完了
	if(kcount == split_all-1 ){
		finshAll();
	}
	//0からカウント加算
	kcount ++;

}

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

	//Tween全てが完了してから下画像表示
	if (inType) {
		backImage.image=new createjs.Bitmap(mainImage).image;
	}

	//コンテナの中を削除
	container.removeAllChildren();
	//クリア
	kcount=0;
	globalflag=true;

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

		//Go-btn表示
		if(linkUse) {
			//テキスト交換
			if(infortextUse) {infortext.text=info_text[image_no];}
			//linkBtnコンテナ
			linkcontainer.visible=true;
		}
		//タイマー次ぎ開く
		if (timer_use == 'use') {
			//if (clickbtnUse) {text_set("AUTO");}
			set_timer();
		}

	},500);

}

//スライス要素の位置大きさ決定、保存
function slice_set(bw,bh,slh,slv) {

	//スライス/細分しすぎるとroundでエラーになる場合あり修正
	slice_W=Math.round(bw/slh);//YOKO
	slice_H=Math.round(bh/slv);//TATE
	//とりあえずエラー回避のみ
	slice_Wb=bw-slice_W*(slh-1);
	if(slice_Wb < 1) {slice_Wb=2;}
	slice_Hb=bh-slice_H*(slv-1);
	if(slice_Hb < 1) {slice_Hb=2;}

	var k=0;
	for (var i=0; i < slh; i++) {
		for (var j=0; j < slv; j++) {
			//大きさ保存
			chip_W[k]=slice_W;
			if (i == slh-1) {chip_W[k]=slice_Wb;}
			chip_H[k]=slice_H;
			if (j == slv-1) {chip_H[k]=slice_Hb;}
			//位置保存中央補正前
			chip_pos_X[k]=(slice_W*i);
			chip_pos_Y[k]=(slice_H*j);
			k ++;
		}
	}
}

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

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

//arcToフキダシBOX
//arcToBalloonEx(x,y,幅,高さ,半径,矢幅,矢高さ)、矢幅は偶数値
function openThumbBoxEx(no) {

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

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

	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 {

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

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

			draw();

		},200);//200-500

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

	//登録リンクデータ
	//var url="/main/html/" + link_url[image_no];//有効にすること

	var url="javascript:void(0)";//削除のこと

	//ウィンドウに出力
	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;
}

//arcToフキダシBOX拡張arcToEx形式
//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)
}

//create-Shape模擬ボタン
function createShapeBtn2 (x,y,w,h,r,label,size,lc,backcolor,no) {

	var font_v=size+" "+"Arial";

	//BTNコンテナ
	var btn=new createjs.Container();
	var shape=new createjs.Shape();
	//Fill
	shape.graphics.ss(2).s("#FFFFFF").beginFill(backcolor).drawRoundRect(x,y,w,h,r);
	shape.regX=w/2;
	shape.regY=h/2;

	var tx=new createjs.Text(label,font_v,lc);
	tx.maxWidth=w;
	tx.textAlign="center";
	tx.textBaseline="middle";
	btn.addChild(shape,tx);

	//rollover
	btn.addEventListener("rollover",function (e) {
		shape.graphics.clear();
		shape.graphics.ss(2).s("#FFFFFF").beginFill("#DAA520").drawRoundRect(x,y,w,h,r);
		//stage.update();
	});
	//rollout
	btn.addEventListener("rollout",function (e) {
		shape.graphics.clear();
		shape.graphics.ss(2).s("#FFFFFF").beginFill(backcolor).drawRoundRect(x,y,w,h,r);
		//stage.update();
	});

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

//LinearGradientBox
//幅、高さ、色1、色2、色3、方向(x.y)、タイプ(2.3)
function createLineGradBox (w,h,color1,color2,color3,direction,type) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");

	//LinearGradient
	var gradient;
	if(direction == 'x') {
		gradient=ctx.createLinearGradient(0,h,w,h);
	}
	if(direction == 'y') {
		gradient=ctx.createLinearGradient(w,0,w,h);
	}
	if(direction == 'xy') {
		gradient=ctx.createLinearGradient(0,0,w,h);
	}
	if(type == 2) {
    		gradient.addColorStop(0,color1);
    		gradient.addColorStop(1,color2);
	}
	if(type == 3) {
    		gradient.addColorStop(0,color1);
		gradient.addColorStop(0.5,color2);
    		gradient.addColorStop(1,color3);
	}
	ctx.fillStyle=gradient;
	//FILL
	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

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


/*日本語 createJS091.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 大型画像スライス DOORタイプ MENU 5

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


1. 大型画像用途で、MENU兼用になります。(MENUとして利用しない設定もOK)
但し「MENUとして使用できないことはない」と言う程度のものです
2. LINK用のボタンを表示できます。また画像に直接アクションを設定可能です。
3. ボタンHOVERで、該当のサムネール画像を表示できます。(サムネールはShapeで単純化)
4. 原則、2x2、x2x1、1x2分割の 4DOOR 2DOOR になり移動方向は限定されます。
(但し、1枚画像、多分割画像の登録も可能ですがエフェクトは僅かで少ない)
5. 「説明案内文」など1行のみTEXT表示が可能です。
6. 既存のTEXT表示がありますので、利用が可能です。
7. 画像読み込み失敗時、代替画像挿入の「エラー処理」を行いました。
8. 詳細は、JS上部を参照ください。


基本的にはMENUなどは同じで有り、画像アニメーション部分のみを「4DOOR 2DOOR形式」に改造しています。
以下、概略のみの説明です。

 

 

4DOOR 2DOOR形式

分割数と縦横の関係で4DOOR 2DOOR形式に分類して、それに見合ったアニメを実行しています。
但しスライドでパターンは極端に少ない。しいて言えば透明度の変化がある位です。

 

1. 対角方向の4DOORタイプ(2x2)。オプション設定で、上下方向、左右方向にも可能です。
2. 上下方向の2DOORタイプ(1x2)。
3. 左右方向の2DOORタイプ(2x1)。
4. 1枚画像スライド(1x1)、多分割(自由分割)の簡単なエフェクト設定が可能。


画像の大きさ

画像の大きさはCanvasの大きさになりますが、Canvasが大きいと負荷がかかります。ページでは他のJS、CSSも動作していますので画像の大きさは動作を確認し最小限にしてください。
マシン環境性能に左右されますが、1000x500 位が限度。
「デモ」では 1000x250 で高さを抑えて対処しています。これらの大きさの設定(画像の大きさ)は使用者の判断です。



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

HTMLのCanvasの大きさも必ず合わせる事。CSSでの変更は縮尺が狂うので出来ません。


最初の画像を作る

IN OUT のエフェクトがあるのが特徴ですが、最初にOUTになる場合に1枚の画像が多く必要になりますので、デモでは「黒背景色」で「代替画像」を作り、画像保存値に入れてあります。(現在、ステージ背景は黒のShapeが理由)
つまり「分割アニメ」以前に「表示画像」があればそれも利用できる事につながります。



//色付きcanvas保存画像を作る
keep_mainImage=createColorCanvas (canvasWidth,canvasHeight,"#000000");

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

なんらかの画像
keep_mainImage=完全読み込み画像のresult値;

● 画像保存がなければ最初は IN で処理される。


//画像保存がなければIN
if (!keep_mainImage) {
	inType=true;
}

分割の変更

原則、2x2、1x2、2x1、設定を記述します。同じ設定が複数あれば出現確率がまします。

1x1、多分割は、原則として使用しませんが、記述すればそれなりに簡単な処理をします。「デモ」では下記の設定で、1x1、多分割、も表示しています。



//自動分割の場合、free分割データを登録
var splitHs=[2,2,1,2,1,11,11];//縦40以上は注意、修正済み
var splitVs=[2,2,2,1,1,3,1];

上記、11x1、多分割 11x3 は、分類以外であるので moveType は none で処理されます。


1枚画像とその他の分割

1枚画像(1x1)とその他の多分割(11x1 9x3 20x5 など自由)の登録も出来ます。但し4DOOR(4x4) 2DOOR(1x2 2x1)と処理は違います。
必要がなければ登録しません。同じ登録が複数あれば出現確率が増します。


1. 1枚画像、左右、上下のスライドおよび伸縮。
2. 多分割、その場での伸縮およびフェード。


アニメの時間(速度)

アニメの時間(Tween)ですが、分割画像の出現間隔(delay値、Tweenではwait値)を変える事によりパターンを変更しています。delay遅延基準時間をかえます(見た目は結構変わる)。
移動などはアニメ速度で制御されていますが、分割数が増えても大きな差はありません。このJSでは移動はほとんどありません。



var speed=1200;//拡大移動、アニメ速度 800-1500
var delay_speed=150;//出現間隔、delay基準時間 100-200

4DOORオプション設定

オプション設定で「対角方向」の移動に「上下方向」「左右方向」を加えます。処理の都合上、稀に2DOORタイプが出現する場合があります。

2DOORタイプを表示しないように処理する場合は複雑になるので止めた。



//4DOORアレンジを行う 
var arrangeUse=true;//true false

● 「対角方向」の出現確率が多い
doorflag=0「上下方向」、doorflag=1「左右方向」、doorflag=2以上「対角方向」として計算していますので、下記の様に「対角方向」の出現確率が多い。


//4DOORアレンジを行う 
var doorflag=2;//アレンジなし
if (arrangeUse) {
	doorflag=Math.floor(Math.random()*5);//増やす
}

動作を確認して、必要に応じランダム計算の数値を変える。


4DOORの処理

4DOORの処理は「対角を対にして」の順序にかえています。(ループの順序ではない)
そのため他の処理と合わなくなる場合が応応としてあり、その修正などを行っているので多少煩雑です。
他のJSでは、動きを複雑にして修正なしで誤魔化している場合もある。(4DOORの処理を独立して別処理すれば多少簡単になる)



//4DOOR位置番号
var doorPos_no=[0,3,2,1];

下記、遅延変則処理はかなり強引に処理している。


//4DOOR
if (moveType == 'door4') {
	delay_st[k]=doorPos_no[k]*chgflag*2*delay_speed;//同時あり
	if (delay_no == 0) {delay_st[k]=1*delay_speed;doorflag=2;delayed=1;}//遅延変則処理
}

2DOORの処理

2DOORの処理は上下、左右に分けて専用に簡単な処理をしています。
4DOORタイプの4分割でも2DOOR処理は可能ですが、ここでは分割の条件で分類して専用の処理をしています。



//動きの分類
moveType="none";
if(split_h == 2 && split_v == 2){moveType="door4";}
if(split_h == 1 && split_v == 2){moveType="h-door";}
if(split_h == 2 && split_v == 1){moveType="v-door";}
if(split_all == 1){moveType="sheet";}

スケール方向

スケール方向の出現確率を登録できますが、対象が限定されますので其のままにしてください。回転はしません。



//スケール方向番号データ 0-3
var scales=[0,0,0,0,1,2,3];

交互遅延

パターンが「市松状」になるように「交互に遅延」させていますが、条件により「アニメ速度」をかえているためと、「4ドア」の順序を変更している理由で、通常よりパターンが合わなくなるための補正をしています。
本来は、下記の様に簡単な処理です。(これでもよいが、パターンが乱れる場合がある)

「アニメ速度」speed は1つですが、複数の「アニメ速度」を登録出来る様にすれば、処理は簡単に出来る。
或いは「4ドア」処理を他のものと完全に独立した処理にすれば、ミトウシがよくなると思います。


● 1つおきに1秒遅延させる。


if (delayed == 1) {
	if (flag3 < 0) {delay_st[k] +=1000;}
}

JSによっては、変数 spd_v の使用と処理が違っていますので注意ください。


変化のパターンは少ない

ほとんどがスライドでパターンは極端に少ない。しいて言えば透明度の変化がある位です。


変化のパターンを増やす

分類以外の分割の場合は、下記を修正すればパターンを増やすことが可能です。delay番号は、分類以外であるので moveType は none で使用されています。


● ランダム値を増やす。


//delay番号
var delay_no=Math.floor(Math.random()*6);

● パターン処理を追加記述する。


delay_st[k]=k*delay_speed*0.5;//標準

//区分外
if (moveType == 'none') {
	if (delay_no == 0) {delay_st[k]=(Math.abs(Math.abs(i-sh/2)-sh)+Math.abs(Math.abs(j-sv/2)-sv))*2*delay_speed;}//円形状外から中心に
	if (delay_no == 1) {delay_st[k]=(i+j)*0.5*delay_speed;delayed=1;}//delayed
	if (delay_no == 2) {delay_st[k]=(i+(split_v-j))*delay_speed;}//標準斜め2
	if (delay_no == 3) {delay_st[k]=(i+j)*delay_speed;}//標準斜め2
	if (delay_no == 4) {delay_st[k]=(Math.abs(i-(sh/2)))*2*delay_speed;}//縦状中より左右に

	処理を追加する

}

 


 

// 以下は、MENU関連の説明ですので、前ページと同様になります。//

 

画像読み込み失敗時のエラー処理

一番問題になるのは、画像読み込み失敗によってメニュー用の画像が表示されなくなり、リンクなどもズレてしまうことです(ほとんど無いと思うのですが?)。
読み込み失敗時のエラー処理で簡単な「代替画像」を挿入しますので、リンクのズレはありません。

登録色グラデーションの「Canvasエレメント」を作り画像の代用としています。



//エラー処理
function loaderror(eventObject) {

	//エラーの場合代替画像を作りassets容器に格納
	//var img=createColorCanvas (canvasWidth,canvasHeight,"#FFFFFF");//ベタ
 	var img=createLineGradBox (canvasWidth,canvasHeight,"#FFFFFF",d_color[assets.length],"#FFFFFF","y",2);//登録色グラデーション
	assets.push(img);
}

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

//LinearGradientBox
//幅、高さ、色1、色2、色3、方向(x.y)、タイプ(2.3)
function createLineGradBox (w,h,color1,color2,color3,direction,type) {

	var canvas=document.createElement("canvas");
	canvas.width=w;
	canvas.height=h;
	var ctx=canvas.getContext("2d");

	略す

	return canvas;
}


リンク用ボタンの表示

指定ページにジャンプするための簡単な「ボタン」です。勿論画像そのものにもリンクのアクションを設定できます。



//模擬ボタンを作りリンクを有効にする
var linkUse=true;//false true

Clickアクションの処理も、使用者用にあわせてください。

現在デモのために、javascript:void(0) をセットしています。削除ください。


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

	//登録リンクデータ
	//var url="/main/html/" + link_url[image_no];//有効にすること

	var url="javascript:void(0)";//削除のこと

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

}

案内文を表示する

事前に「案内文」を登録して置きます。表示領域に表示されます。



//案内文を表示する
infortextUse=true;//false true

//案内文
var info_text=[
"POPS-WEB Blog ページに進みます",
"POPS-WEB Index ページに進みます",
"POPS-WEB Service ページに進みます",
"POPS-WEB Links ページに進みます",
"POPS-WEB Download ページに進みます",
"POPS-WEB Map ページに進みます"
];

矢印つきサムネール画像

このJSでは「矢印つきサムネール」の表示に限定しました。

 

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


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


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


サムネール画像の入れ替えは、下記、例の様に書いてください。他にも書き方はありますが、Graphicsクラス拡張での処理を行っています....
注意、Graphics処理のスクリプトの書き方如何ではエラーで処理できない場合があります。



//arcToフキダシBOX
//arcToBalloonEx(x,y,幅,高さ,半径,矢幅,矢高さ)、矢幅は偶数値
function openThumbBoxEx(no) {

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

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

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

フキダシはarcTo形式で処理しました。CreateJS Graphicsクラスの記述でかいています(かゆいときにはムヒ)。


//arcToフキダシBOX拡張arcToEx形式
//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)
}

Linkボタンの変更(GOボタン)

どうしても必要なものではありませんが表示する場合の参考です。以下の様にしていますので必要であれば変更ください。デザイン変更などの書き換えなどは自由です。ラベルは現在「GO」になっています。
「クリックアクション」を削除すれば、模擬ボタンになります。画像に「クリックアクション」を設定すれば良い訳です。
下側は「案内文」表示の設定ですので、移動の際は適当に配置ください。



//Go-btn設置/模擬ボタン
if(linkUse) {

	//リンクコンテナ
	linkcontainer=new createjs.Container();
	//BTN
	linkBtn=createShapeBtn2(0,0,60,20,5,"GO","12px","#FFFFFF","#FF69B4",0);//変更可能
	linkBtn.x=canvasWidth-60;
	linkBtn.y=25;
	//linkBtn.shadow=shadow;//陰影
	//TEXT
	infortext=new createjs.Text("","13px Arial","#FFFFFF");
	infortext.textAlign="right";
	infortext.x=canvasWidth-100;
	infortext.y=15;
	infortext.shadow=shadow;
	linkcontainer.addChild(infortext,linkBtn);

	//クリックアクション/番号は仮
	linkBtn.on("click",gobtn_handleclick,null,false,image_no);//不要なら削除する
	stage.addChild(linkcontainer);
	linkcontainer.visible=false;
}

現在「デモ」では「模擬ボタン」に「クリックアクション」、下画像はアクションなしの状態です。


現在、角丸ボタン、外側ラインは2ピクセル幅、白に固定していますので、必要があれば修正ください。


//create-Shape模擬ボタン
function createShapeBtn2 (x,y,w,h,r,label,size,lc,backcolor,no) {

	var font_v=size+" "+"Arial";

	//BTNコンテナ
	var btn=new createjs.Container();
	var shape=new createjs.Shape();
	//Fill
	shape.graphics.ss(2).s("#FFFFFF").beginFill(backcolor).drawRoundRect(x,y,w,h,r);
	shape.regX=w/2;
	shape.regY=h/2;

	var tx=new createjs.Text(label,font_v,lc);
	tx.maxWidth=w;
	tx.textAlign="center";
	tx.textBaseline="middle";
	btn.addChild(shape,tx);

	//rollover
	btn.addEventListener("rollover",function (e) {
		shape.graphics.clear();
		shape.graphics.ss(2).s("#FFFFFF").beginFill("#DAA520").drawRoundRect(x,y,w,h,r);
		//stage.update();
	});
	//rollout
	btn.addEventListener("rollout",function (e) {
		shape.graphics.clear();
		shape.graphics.ss(2).s("#FFFFFF").beginFill(backcolor).drawRoundRect(x,y,w,h,r);
		//stage.update();
	});

	return btn;
}

当方の参照記事など

このJSは、下記ページのMENU部分を使用しアニメ部分を取り替え改造しました。

【参照】当方の記事: CreateJS 大型画像スライドMENU 2

画像分割の最新のもので「分割」が違いますので、余り参考にはならないでしょう。

【参照】当方の記事: CreateJS 画像分割とテキストアニメーションの組み合わせ (最新)


使用画像

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



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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧



[1]