POPSブログ

CreateJS 3D風Carousel画像拡大表示(easeljs-0.8)

342

  Category:  javascript2015/03/08 pops 

円周上に配置したインスタンスを回転させる 3D Carousel もどきですが「2D」で作成し中にサムネール画像を挿入しています。サムネール「Click」で大きな画像を表示します。
easeljs-0.8でMatrix2Dクラスに変更がありましたので修正します。

 

CreateJS 3D風Carousel画像拡大表示テスト


これは、3D風Carouselであり、実際は2Dです。基本的な構造などは「前々ページ」のものを改造したものです。
以前のeaseljs-0.7のものはeaseljs-0.8で一部正常に動作しないので修正しています。
また少々機能なども追加しました。


zu

 

DEMO (easeljs-0.8)


CreateJS 3D風Carousel画像拡大表示テスト、(createJS124.js)

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


demo


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


 

HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

ダウンロードしたJSを使用する場合。記述は一例です。(バージョン 0.8使用)


<script type="text/javascript" src="js/easeljs-0.8.0.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.6.0.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.6.0.min.js"></script>

重要、バージョン違いでは動かない場合が有りますので必ず合わせて下さい。


HTML (HTML5)


<div id="demo-wrap">
	<div id="image-box">
		<canvas id="mainCanvas" width="640" height="300"></canvas>
	</div>
</div>

JS

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



//日本語
//createJS124.js
//画像Carousel/position2追加
//easeljs-0.8.0 デモ用

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

//canvasの大きさ/全てこの値を使用
var canvasWidth=640;
var canvasHeight=300;
//Load画像の大きさ
imageWidth=640;
imageHeight=300;
//サムネール画像の大きさ整数値で入力
var thumbWidth=128;
var thumbHeight=60;

//PUFF拡大タイプ
var puffType=true;
//拡大速度
var speed=1000;
//PUFF拡大率 1.5-2
var scale_rate=1.5;

//carouselの色
var carouselbackcolor="#FFFFFF";
//base枠の幅/ラインは1以上の場合
var base_W=4;
//角丸半径2以上のこと/2以下はRECT
var round_radius=4;
//陰影を付ける true false
var shadow_use=false;

//スタイル
//standerd/xscale1/xscale2/xyscale/position/position2
var scaleType="position2";
//後を透過する false true
var fadeflag=false;
//後方を消す/xscale1 position2で効果有り
var hidd_behind=false;

//split分割数自動修正 3-12
var carouselsplit=11;

//半径
var radiusX=240;//X方向
var radiusY=80;//Y方向

//回転速度 デグリー値1-5
var angle=2;//DEG
//正転逆転フラグ 右正転=1 左逆転=-1
var carouselflag=1;
//マウスイベントの使用 true false
var eventUse=true;
//コンテナ角 度デグリー値
var containerAngle=0;
//パーツ角度 デグリー値
var partsAngle=0;
//虹色にする不透明 true false
var rainbowColor=true;//未使用
//基本スケール
var stScale=0.75;
//始点の角度
var startAngle=-Math.PI/2;

//text
var text_use="use";

//画像リスト100x100
var manifest=[
{id:0,src:"/main/images/flower01.jpg"},
{id:1,src:"/main/images/flower02.jpg"},
{id:2,src:"/main/images/flower03.jpg"},
{id:3,src:"/main/images/flower04.jpg"},
{id:4,src:"/main/images/flower05.jpg"},
{id:5,src:"/main/images/flower06.jpg"},
{id:5,src:"/main/images/flower100.jpg"},
{id:5,src:"/main/images/flower101.jpg"},
{id:5,src:"/main/images/flower102.jpg"},
{id:5,src:"/main/images/flower103.jpg"},
{id:5,src:"/main/images/flower104.jpg"}
];


//------------------------------------------------------
//回転正逆補正
angle *=carouselflag;
//to-RAD
var rotate_angle=angle*createjs.Matrix2D.DEG_TO_RAD;
var plusAngle=-Math.PI/2;
//------------------------------------------------------

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

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

//ステージ
var stage;
//Loader
var loader;
//コンテナ
var container,loadingcontainer,progresscontainer;
//画像/コンテナ
var welcomeImage,topImage,backimage;
var carouselContainer,topContainer;
var progresscontainer;
//Loading関連
var loadingShape,progressbar,progtext,bar_v;
//TEXT
var viewtext;

//読み込み画像result保存容器
var assets=[];

//matrix
var matrix=new createjs.Matrix2D();
var chip=[];
var innerchip=[];
var imgchip=[];

//shadowフィルター
var shadow=new createjs.Shadow("#000000",0,0,4);
var image_max=0;
var stopNo=1;//0停止


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

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

	//welcome画像ロード後に表示
	welcomeImage=new createjs.Bitmap();
	stage.addChild(welcomeImage);
	var bkloader=new createjs.ImageLoader("/main/images/yakei.png",false);
	bkloader.addEventListener("complete",function(event) {
		welcomeImage.image=new createjs.Bitmap(event.result).image;
		stage.update();
	});
	bkloader.load();

	//空コンテナを作る/未使用
	container=new createjs.Container();
	stage.addChild(container);

	//空コンテナインスタンス配置
	carouselContainer=new createjs.Container();
	carouselContainer.x=canvasWidth/2;
	carouselContainer.y=canvasHeight/2;
	stage.addChild(carouselContainer);

	//上画像層、空コンテナを作る
	topContainer=new createjs.Container();
	topContainer.x=canvasWidth/2;
	topContainer.y=canvasHeight/2;
	topImage=new createjs.Bitmap();
	//ロード画像サイズで調整
	topImage.regX=imageWidth/2;
	topImage.regY=imageHeight/2;
	topContainer.addChild(topImage);
	stage.addChild(topContainer);
	//clickアクション
	topImage.addEventListener("click",resize_image);
	topImage.visible=false;

	//loadingコンテナを作る
	loadingcontainer=new createjs.Container();
	stage.addChild(loadingcontainer);
	//LOADINGを作る
	loadingShape=loadingIndicator3();
	loadingShape.x=canvasWidth/2;
	loadingShape.y=canvasHeight/2;

	//loading addEventListenerを設定
	createjs.Ticker.addEventListener('tick',loadingShape_tick);

	//コンテナに貼り付け
	loadingcontainer.addChild(loadingShape);
	loadingcontainer.visible=false;//非表示

	//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;
	//addChild
	progresscontainer.x=canvasWidth/2;
	progresscontainer.y=canvasHeight/2;
	progresscontainer.addChild(progressbar,progtext);
	stage.addChild(progresscontainer);
	progresscontainer.visible=false;//非表示

	//簡易TEXT
	viewtext=new createjs.Text("","12px Arial","#FFFFFF");
	viewtext.x=20;
	viewtext.y=15;
	viewtext.maxWidth=canvasWidth-40;
	viewtext.lineHeight=20;
	viewtext.textBaseline="bottom";
	viewtext.shadow=shadow;//SHADOW処理
	stage.addChild(viewtext);
	//一旦ステージ表示
	stage.update();

	//MAIN-Ticker設定
	createjs.Ticker.setFPS(30);
	createjs.Ticker.addEventListener('tick',tick);

	//delay_speed調整
	setTimeout(function() {
		//画像ロードに進む
		bulkload();
	},1000);

}

//bulk-load、画像一括ロード
function bulkload() {

	set_text("Loading Now!");

	//ProgressBar-Listener設定
	createjs.Ticker.addEventListener('tick',progressBar_tick);
	//ProgressBar
	bar_v=0;
	progresscontainer.visible=true;//表示
	loadingcontainer.visible=true;//表示

	//Loaderを作る/エラー対処ならtrue設定
	loader=new createjs.LoadQueue(true,"","");
	//progress
	loader.on("progress",progress);
	//loader EventListener設定
	loader.on("fileload",fileload);
	loader.on("error",error);
	loader.on("complete",complete);
	//Manifestを使用、manifest読み込み開始
	loader.loadManifest(manifest);

}

//各画像読み込み完了
function fileload (event) {
	var id=event.item.id;
	assets.push(event.result);
}
//エラーerror
function error (event) {
	//var id=event.item.id;
	//エラー画像をassets容器に保存
	assets.push(createColorCanvas(canvasWidth,canvasHeight,"#333333"));
}

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

	//画像数確認、再計算
	image_max=assets.length;
	carouselsplit=image_max;

	//簡易TEXT
	set_text("Loading End!")
	//loader Listener停止
	loader.off("fileload",fileload);
	//loader.off("error",error);
	loader.off("complete",complete);

	//loading EventListener削除
	createjs.Ticker.removeEventListener('tick',loadingShape_tick);

	//非表示でも良い
	loadingcontainer.visible=false;

	//画像があれば、最初の画像表示
	if (image_max) {

		//調整
		setTimeout(function() {

			//遅延progressbar最後の前にcompleteが反応する
			loader.off("progress",progress);
			//progressTicker停止
			createjs.Ticker.removeEventListener('tick',progressBar_tick);
			//progress非表示
			progresscontainer.visible=false;

			//簡易TEXTクリア
			set_text("");

			//画像表示に進む
			draw();

		},1000);
	}
}

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

	//carousel
	carousel_set();
}

//carousel/パーツを配置してBaseを作る
function carousel_set() {

	//TEXT
	set_text("Carousel");

	///BitmapFill画像
	set_baseCircle();

	//コンテナを傾ける
	carouselContainer.rotation=containerAngle;

	//Listener
	createjs.Ticker.addEventListener("tick",carousel_rotate);

	//マウスイベントの使用
	if (eventUse) {
		stage.addEventListener("stagemousemove",setAngle);
	}

}

//マウスアクション
function setAngle(event) {
	var mouseX=event.stageX;
	angle=(mouseX-canvasWidth/2)*1/50;
}

//Ticker
function carousel_rotate(event) {

	var count=carouselsplit;

	//加算/停止処理
	plusAngle +=(angle*createjs.Matrix2D.DEG_TO_RAD*stopNo);

	//描画データ
	var cx,cy;
	var cAngle=startAngle;
	var nAngle=0;

	//描画位置
	nAngle=Math.PI*2/count;
	var chipflag=1;
	var parts_angle=0;

	//保存POSITION配列
	var posArr=[];
	//SORT用POSITION配列
	var zArr=[];
	//透明度用配列
	var alphaArr=[];
	//scale用配列
	var sclArr=[];
	var sclArr2=[];

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

		//回転
		cAngle +=nAngle;

		cx=Math.cos(cAngle+plusAngle)*radiusX;
		cy=Math.sin(cAngle+plusAngle)*radiusY;

		//alpha-Data計算
		alphaArr[i]=(1+cy/radiusY)/2;

		//配置角度取得
		parts_angle=Math.atan2(cy,cx);
		//スケール、ポジション位置で計算 0-1
		sclArr[i]=(Math.abs(cy)/radiusY);
		sclArr2[i]=(cy/radiusY);
		//伸縮1 Xスケールで向きを変える
		if(scaleType == 'xscale1') {
			var scl=sclArr[i];//Xスケール
		}
		if(scaleType == 'xscale2') {
			var scl=sclArr2[i];//Xスケール2
		}
		//伸縮2 遠近感を付ける
		if(scaleType == 'xyscale') {
			var sclxy=(Math.abs(Math.cos(parts_angle/2-Math.PI/4)/Math.cos(Math.PI))+1)/2;
		}
		//position段階計算
		if(scaleType == 'position') {
			var a_v=1+(cy*0.25)/radiusY;
			posArr[i]=a_v;
		}
		//position段階反転計算
		if(scaleType == 'position2') {
			var a_v=1+(cy*0.25)/radiusY;//position段階
			var scl=sclArr2[i]*a_v;//Xスケール反転

		}
		//sort-DATAを保存
		var id=chip[i].id;
		//オブジェクトで保存
		zArr.push({'id':id, 'position':cy});

		//matrix
		matrix.identity();
		//順序重要
		//位置をずらす
		matrix.translate(cx,cy);

		//伸縮1実行
		if(scaleType == 'xscale1') {
			matrix.scale(scl*stScale,stScale);
		}
		//伸縮1実行B
		if(scaleType == 'xscale2') {
			matrix.scale(scl*stScale,stScale);
		}
		//伸縮2実行
		if(scaleType == 'xyscale') {
			matrix.scale(sclxy*stScale,sclxy*stScale);
		}
		//position段階スケール実行
		if(scaleType == 'position') {
			matrix.scale(posArr[i]*stScale,posArr[i]*stScale);
		}
		//position段階スケール伸縮反転
		if(scaleType == 'position2') {
			matrix.scale(scl*stScale,a_v*stScale);
		}
		//基本スケール実行
		if(scaleType == 'standerd') {
			matrix.scale(stScale,stScale);
		}

		//実行
		matrix.decompose(chip[i]);
		//インナーコンテナ回転デグリー
		innerchip[i].rotation=partsAngle;

	}

	//配列をソート/positionの昇順にsort
	zArr.sort(function(a,b) {
		var x=a.position;
		var y=b.position;
		return x > y ? 1 : -1;}
	);

	//INDEX alpha修正
	for (var i=0; i < zArr.length; i++){
		var idno=zArr[i].id;
		//Index
		carouselContainer.setChildIndex(chip[idno],i);
		//alpha有効
		if(!hidd_behind) {
			//alpha
			if(fadeflag) {chip[idno].alpha=alphaArr[idno]+0.2;}
			if(!fadeflag) {chip[idno].alpha=1;}
		}
		//後方を消す/xscale1 position2で効果有り
		if(hidd_behind) {
			//alphaで調整
			if(chip[idno].y < 0){chip[idno].alpha=0;}
			if(chip[idno].y > 0){chip[idno].alpha=1;}
		}
	}

}

//base/BitmapFill
function set_baseCircle() {

	//パーツの大きさ
	var parts_w=imageWidth+base_W*2;
	var parts_h=imageHeight+base_W*2;
	//数
	var count=carouselsplit;

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

		//図形用インスタンス配置
		chip[i]=new createjs.Container();
		chip[i].id=i;
		//インナーコンテナ
		innerchip[i]=new createjs.Container();
		//shape
		var shape=new createjs.Shape();
		//ライン処理
		if(base_W > 1) {
			shape.graphics.ss(base_W).s(carouselbackcolor);
		}
		//canvasエレメント挿入
		var thumb=createImgCanvas(thumbWidth,thumbHeight,assets[i])
		//BitmapFill/角丸
		if(round_radius >= 2) {
			shape.graphics.beginBitmapFill(thumb).drawRoundRect(0,0,thumbWidth,thumbHeight,round_radius);
		}else{
			shape.graphics.beginBitmapFill(thumb).drawRect(0,0,thumbWidth,thumbHeight);
		}
		shape.regX=thumbWidth/2;
		shape.regY=thumbHeight/2;
		//陰影
		if(shadow_use) {
			shape.shadow=shadow;//shadow重い
		}
		imgchip[i]=shape;

		//add
		chip[i].addChild(innerchip[i]);
		innerchip[i].addChild(imgchip[i]);
		carouselContainer.addChild(chip[i]);

		//Action
		//rollover
		chip[i].addEventListener("rollover",function () {
			stopNo=0;
		});
		//rollout
		chip[i].addEventListener("rollout",function () {
			stopNo=1;
		});
		//click
		chip[i].addEventListener("click",handleclick);


	}

}

//CLICK処理
function handleclick (event) {

	var instance=event.currentTarget;
	var hit_no=instance.id;
	set_text("No. "+hit_no);//番号表示

	setTimeout(function() {

		stopNo=0;
		topImage.image=new createjs.Bitmap(assets[hit_no]).image;
		if (!puffType) {
			topImage.scaleX=thumbWidth/imageWidth*stScale;
			topImage.scaleY=thumbHeight/imageHeight*stScale;
		} else {
			topImage.scaleX=scale_rate;
			topImage.scaleY=scale_rate;
		}
		topImage.alpha=0;
		topImage.visible=true;
		view_image();

	},100);
}

//上画像FadeIn
function view_image() {

	topImage.alpha=0;

	topImage.rotation=partsAngle+containerAngle;
	//
	var tw=createjs.Tween.get(topImage)
	tw.to({scaleX:1,scaleY:1,rotation:0,alpha:1},speed)
	.call(function() {
		//
	});

}
//上画像を戻すFadeOut
function resize_image() {

	topImage.alpha=1;
	if (!puffType) {
		var sclx=thumbWidth/imageWidth*stScale;
		var scly=thumbHeight/imageHeight*stScale;
	} else {
		var sclx=scale_rate;
		var scly=scale_rate;
	}
	//
	var tw=createjs.Tween.get(topImage)
	tw.to({scaleX:sclx,scaleY:scly,rotation:partsAngle+containerAngle,alpha:0},speed)
	.call(function() {
		topImage.visible=false;
		stopNo=1;
		set_text("");
	});

}

//progressBar
function progress(event) {
	//loadedのみ効く
	bar_v=event.loaded;
}
//progressbar-tick
//bar_v判定tickを設定(butt round)/90度是正-Math.PI/2
function progressBar_tick(){
	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);
		stage.update();
	}
}

//loadingShape-tick
function loadingShape_tick(){
	loadingShape.rotation +=5;
}

//tickステージ
function tick(event) {
	stage.update();
}

//VIEWTEXT
function set_text(t) {
	if (text_use=='use') {
		viewtext.text=t;
	}
}

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

//色付き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;
}

//簡単なLOADING3
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
window.onload=function() {
	init();
}

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


CSS

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



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

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


 

簡単な説明


easeljs-0.8用に書き換えました


以前のJSでは、インスタンスのX方向のスケール変更が、easeljs-0.8では壊れて正常に機能しませんのでこの部分を修正します。多少前のものと比較して良くはなっています。
内容などはほぼ同じですが、違いは下記ページのものと比較ください。

easeljs-0.7用の記事です

【参照】当方の記事: CreateJS 3D Carousel もどき、と画像拡大の組み合わせ


 

インスタンスのスケール変更など

zuzu

 

1. Matrixクラスの変更で合わなくなった部分を修正した。
2. スケール変化など、Math.PIで計算して合わない部分は別の計算にした。
3. matrix2D.rotate()の使用を止めてrotationを使用するように修正した。
4. 画像タイプはBitmapFillタイプに限定します。


スケール変化のスタイル

スケール変化のスタイルを以下の様にセットすれば目的の形に変化する。スタイルは6種類。
(Blur処理は、position position2 推奨)
標準スケール、伸縮1(標準)、伸縮1(反転)、伸縮2(遠近感)、段階スケール、段階スケール反転、より選定できます。
その他の設定はJSの先頭を参照ください。多少違いを加えています。


遠近感が強調されなければ効果のバランスが崩れますから「position」「position2」が良いようです。
その他はそれなりの効果になります。
後方を消すモードも追加しました。後方半分が非表示(透明度0)になりますが通常の透明度設定より優先度が高い。
画像反転の場合にスムーズに表示されます。


zu

 


//スタイル
//standerd/xscale1/xscale2/xyscale/position/position2
var scaleType="position2";

//後を透過する false true
var fadeflag=true;
//後方を消す/xscale1 position2で効果有り
var hidd_behind=false;

画像の大きさ

Canvas画面の大きさと画像の大きさは原則同じにして下さい。 サムネール画像の大きさは、大きな画像を縮小しますが、必ず整数値で入力して下さい。Canvas画面とのつりあいは基本スケールで調整できます。


//Load画像の大きさ整数値で入力
imageWidth=640;
imageHeight=300;
//画像の大きさ
var thumbWidth=128;
var thumbHeight=60;

//基本スケール
var stScale=0.75;

画像の拡大表示

サムネール「Click」で画像を拡大します。2つの形式がありますので選定できます。
通常の拡大縮小と、PUFF形式の拡大縮小です。PUFF形式は予め拡大しておき、画像の大きさに縮小表示します。


//PUFF拡大タイプ
var puffType=true;
//拡大速度
var speed=1000;
//PUFF拡大率 1.5-2
var scale_rate=1.5;

外周配置のインスタンスは自由に改造出来ますので、好みの形にして下さい。
また、不要な部分は削除も可能です。詳細はJSを参照ください。



「前ページ」Carouselの基本形。easeljs-0.8用の記事です

【参照】当方の記事: CreateJS 3D風Carousel円周配置のインスタンスを回転させる(easeljs-0.8)

過去の、easeljs-0.7用の記事です。easeljs-0.8では正常に動作しません。

【参照】当方の記事: CreateJS 3D Carousel もどき、と画像拡大の組み合わせ



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

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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]