POPSブログ

CreateJS 画像スライド、アニメーション DOMElementクラスでテキスト表示

231

  Category:  javascript2013/06/29 pops 

CreateJSを利用してキャンバスに、画像を表示します。アニメーションはスライド、フェード系でランダムに切り替わります。また、文字などの表示には、DOMElementクラスを使用して見ましたが、CreateJSで制御出来ますから結構便利です。
easeljs-0.7 でのテストです。

 

CreateJS 画像スライドアニメ DOMElementクラスでテキスト表示のテスト


2013/09/25/EaselJSなどバージョンUPされました(easeljs-0.7)。動作など確認してeaseljs-0.7用に更新しています。(2013/10/21)


基本的には、前に作った「画像フェード表示」系統等の画像表示(draw)部分の改造ですから簡単に仕上がります。DOMElementクラスの部分は切り替え出来る様にしました。
リンク等も設定出来ますので応用範囲が広がります。特にトップページに配置する場合は「簡単なメニュー」としても併用可能かと思う。イベント関連の処理が変更なりましたので注意下さい

 

[説明図]

 

1.「画像アニメーション」は、スライド、フェード系です。
2. DOMElementクラスを使用して文字など表示(非表示の切り替え可能)。
3. 画像は一括読み込み方式ですから、10枚以内位で使用します(標準5-6枚)。
4. 最初に表示する画像(welcome画像)は自由ですが、有った方が効果的と思われます。
5. 完全では有りませんが不具合などなるべく出無いように処理。
6. 設定はJSの上部をご覧下さい。

 

DEMO


CreateJS 画像スライドアニメ DOMElementクラスでテキスト表示 (createJS022.js)

このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。
/// マシン環境の悪い方は「Chrome」推奨 ///


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


HTML JS CSS


使用するライブラリ

easeljs preloadjs tweenjs

配布元 : CreateJS createjs.com


ライブラリの読み込み

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


<script type="text/javascript" src="js/easeljs-0.7.0.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.4.0.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.5.0.min.js"></script>

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


HTML (HTML5)


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

JS

createJS022.js、JS名は任意に変更可。(注意、easeljs-0.7用)


//日本語
//createJS022.js
//デモ用スライド
//easeljs-0.7用

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

var speed=1200;//拡大移動、アニメ速度
var delay_speed=150;//未使用
var slide_time;//未使用

//canvasの大きさ/全てこの値を使用
var canvasWidth=640;
var canvasHeight=300;
//タイマーの使用、useであること
var timer_use="use";
//タイマー値 5000-10000
var time=8000;

//comment-box
var viewcomment;
var viewcomment_W=600;
//comment番号保存
var comment_arr=[];
var comment_list=[];
//使用するか true false
var viewcommentUse=true;//true

//commentリスト
if (viewcommentUse) {
	var keepcommentList=[
	'<p class="red">COMMENT-1 ページ表示後、画像を全て読み込み最初の画像を表示します。スライド、フェード系でランダムにアニメします。必要ないなら非表示に出来ます。</p>',
	'COMMENT-2: <p>ホー、リンクも書けるのだ!。<a href="/main/pops/archives/231">記事のページに戻る</a> / <a href="/main/">MAINページに戻る</a></p>',
	'COMMENT-3<p><img src="/main/images/gkf001.gif" width="34" height="61" style="float:left;margin-right:5px;margin-bottom:5px;" />CreateJSを利用して、HTML5のCanvasで画像をアニメさせます。<br>文字などの表示には、DOMElementクラスを使用して見ましたが、結構便利です。</p>',
	'COMMENT-4 今なら「1000円札」が消費税込みぽっきり2000円で買えます。期間限定早いもの勝ち。<p><a href="javascript:void(0);"><img src="/main/images/click_btn5.png" width="68" height="30" /></a></p>',
	'<p style="text-align:center;">COMMENT-5<br><img src="/main/images/textimg01.png" width="340" height="50" /></p>',
	'COMMENT-6'
	];
}

//画像manifestリスト/idは利用していない
var manifest=[
{src:"/main/images/welcome_black_w.png",id:"welcome"},
{src:"/main/images/toyota_car10.jpg",id:"PHOTO"},
{src:"/main/images/toyota_car11.jpg",id:"PHOTO"},
{src:"/main/images/toyota_car12.jpg",id:"PHOTO"},
{src:"/main/images/toyota_car13.jpg",id:"PHOTO"},
{src:"/main/images/toyota_car15.jpg",id:"PHOTO"},
{src:"/main/images/toyota_car16.jpg",id:"PHOTO"}
];

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

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

//ステージ
var stage;
//コンテナ
var container;
var backcontainer;
var loadingcontainer;
var progresscontainer;

//画像result
var globalflag=false,backImage,topImage,mainImage,keep_mainImage,welcomeImage,timerID=null;
//Loader
var loader;
//Loading
var loadingShape;
var progressbar;
var loading=false;
//ProgressBar変数
var bar_v=0;
//load番号
var loadcount=0;
//TEXT
var viewtext;
//welcome画像は有るか
var welcomeflag=false;
var once=true;
//IN OUT
var inType=true;

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

//スケール方向番号データ 0-3
var scales=[0,0,0,0,1,2,3];
//回転データ、余り回転しない、回転は120度x回転データ
var rotates=[0,0,0,0,1,2,3];

//shadowフィルター
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);

	//welcome画像層空画像
	welcomeImage=new createjs.Bitmap();
	stage.addChild(welcomeImage);
	//welcome画像を先に表示
	stage.update();

	//下画像層、空画像コンテナを作る/寸法設定なくともOK
	backcontainer=new createjs.Container();
	backImage=new createjs.Bitmap();
	backcontainer.addChild(backImage);
	stage.addChild(backcontainer);
	
	//上画像層、空画像コンテナを作る
	container=new createjs.Container();
	container.x=0;
	container.y=0;
	//Top画像非表示
	topImage=new createjs.Bitmap();
	topImage.visible=false;
	//Top画像中央補正
	topImage.regX=canvasWidth/2;
	topImage.regY=canvasHeight/2;
	container.addChild(topImage);
	stage.addChild(container);

	//loadingコンテナを作る
	loadingcontainer=new createjs.Container();
	stage.addChild(loadingcontainer);
	//LOADINGを作る
	loadingShape=loadingIndicator();
	loadingShape.x=canvasWidth/2;
	loadingShape.y=canvasHeight/2;
	//tickを設定
	loadingShape.tick=function (){
		if(loading) {
			loadingShape.rotation +=5;
			stage.update();
		}
	}
	//loading addEventListenerを設定
	createjs.Ticker.addEventListener('tick',loadingShape.tick);
	//コンテナに貼り付け
	loadingcontainer.addChild(loadingShape);
	loading=true;//loading表示判定

	//ProgressBar/canvasWidthの幅で描画
	progresscontainer=new createjs.Container();
	progresscontainer.x=0;
	progresscontainer.y=20;
	progressbar=new createjs.Shape();
	progressbar.graphics.s(0).beginFill("#888888").drawRect(0,0,canvasWidth,4);
	//bar_v判定tickを設定
	progressbar.tick=function (){
		if(bar_v > 0) {
			progressbar.graphics.s(0).beginFill("#C00000").drawRect(0,0,canvasWidth*bar_v,4);
			stage.update();
		}
	}
	//Ticker.addEventListener設定
	createjs.Ticker.addEventListener('tick',progressbar.tick);
	//addChild
	progresscontainer.addChild(progressbar);
	stage.addChild(progresscontainer);

	//簡易TEXT
	viewtext=new createjs.Text("Loading Now!","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);

	//吹き出しをDOMElementとして取得
	//一番上になる、なかには配置できない
	if (viewcommentUse) {

		//Canvas位置/image-boxで無いと取得出来ない
		var element=document.getElementById("image-box");
		var pos_x=element.offsetLeft;

		viewcomment=new createjs.DOMElement("viewcomment");
		viewcomment.regX=viewcomment_W/2;
		viewcomment.x=(pos_x+canvasWidth/2)-10;//陰影誤差補正
		viewcomment.y=30;//30
		viewcomment.visible=false;
		stage.addChild(viewcomment);

		//v0.7ではDOMElementのイベントが変わったので、特殊な作りになる
		stage.addEventListener('stagemousemove',set_comment);
		stage.addEventListener('rollout',reset_comment);

	}

	stage.update();

	//画像ロードに進む
	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);
	//COMMENT調整用
	loader.addEventListener("error",loaderror);

	//Manifestを使用、manifest読み込み開始
	loader.loadManifest(manifest);

}
//各画像読み込み完了
function fileload (event) {

	var id=event.item.id;

	//welcome画像
	if (id == 'welcome') {
		welcomeflag=true;
	}

	//画像選別 commentの番号保存
	if (id == 'PHOTO') {
		//エラー無しの画像をassets容器に保存
		assets.push(event.result);

		//エラー無画像comment番号保存
		if (viewcommentUse) {
			//comment_arr.push(loadcount);
			comment_list.push(keepcommentList[loadcount]);
		}
		loadcount ++;
	}
}
//全ての画像読み込み完了
function complete (event) {

	//画像数確認、再計算
	image_max=assets.length;
	//簡易TEXT
	viewtext.text="Loading End!";

	//loader Listener削除
	loader.removeEventListener("fileload",fileload);
	loader.removeEventListener("complete",complete);
	loader.removeEventListener("error",loaderror);

	//loading EventListener削除
	createjs.Ticker.removeEventListener('tick',loadingShape.tick);
	//非表示でも良い
	loadingcontainer.visible=false;
	loading=false;//loading表示判定

	//配列クリア
	if (viewcommentUse) {
		keepcommentList=[];
	}

	//welcome画像ロード成功ならwelcome表示
	if (welcomeflag) {
		welcomeImage.alpha=0;
		//保存値にURL代入
		keep_mainImage=loader.getResult("welcome");
		//Fade表示
		welcomeImage.image=new createjs.Bitmap(loader.getResult("welcome")).image;
		var tween=createjs.Tween.get(welcomeImage)
		.to({alpha:1},500);
	}

	stage.update();

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

		//早すぎるので調整
		setTimeout(function() {

			//遅延progressbar最後の前にcompleteが反応する
			event.target.removeEventListener("progress",progress);
			//progressTicker削除
			createjs.Ticker.removeEventListener('tick',progressbar.tick);
			//progress非表示
			progresscontainer.visible=false;
			//簡易TEXTクリア非表示
			viewtext.text="";
			viewtext.visible=false;

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

		},2000);//1000-2000
	}

}
//LoadError
function loaderror (event) {

	var id=event.item.id;
	//画像選別カウントUP
	if (id == 'PHOTO') {
		loadcount ++;
	}
}

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

	globalflag=false;

	//COMMENT表示
	if (viewcommentUse) {
		var element=document.getElementById("viewcomment");
		//html取替えこちらが簡単だ、簡易処理
		element.innerHTML=comment_list[image_no];
		stage.update();
	}

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

	//最初、変更したので使用していない
	if (once) {
		once=true;
	}

	//keep値が無ければ強制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];


	//実際配置位置中央
	var set_pos_X=canvasWidth/2;
	var set_pos_Y=canvasHeight/2;
	//移動配置位置
	var mov_pos_X=0,mov_pos_Y=0;

	//アニメ条件設定
	//クリア
	var delay_st;
	var delay_pt;
	//rotation受渡変数配列
	var rotate_v;
	//動きの分類
	moveType="";

	//多目的判定用、未使用のものもある
	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;}
	//逆転フラグ2
	var chg_v2=Math.floor(Math.random()*2);
	if (chg_v2 < 1) {chg_v2=-1;}

	//配置disposition位置番号/加算値
	var disposition_no=Math.floor(Math.random()*8);
	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;
	//回転データ取得
	var rotate=rotates[Math.floor(Math.random()*rotates.length)];

	//透明度
	var alpha_no=Math.floor(Math.random()*2);
	//速度補正係数
	var spd_v=1;

	//位置は4箇所に搾る
	if (disposition_no == 1) {disposition_no=2;}
	if (disposition_no == 4) {disposition_no=3;}

	//移動加算値等の計算/ほぼ回転なし
	switch(disposition_no){
		case 0://対角位置
			//対角位置算出
			disposition_X=set_pos_X+canvasWidth*chg_v;
			disposition_Y=set_pos_Y+canvasHeight*chg_v2;//逆転フラグ2
			//補正
			scale_no=1;
			rotate=0;
			spd_v=1;
		break;
		case 2://左右に
			disposition_X=set_pos_X+canvasWidth*chg_v;//逆転フラグ
			disposition_Y=set_pos_Y;
			//補正
			rotate=0;
			scale_no=1;
			spd_v=1.2;
		break;
		case 3://上下に
			disposition_X=set_pos_X;
			disposition_Y=set_pos_Y+canvasHeight*chg_v;//逆転フラグ
			//回転補正
			rotate=0;
			scale_no=1;
			spd_v=1;
		break;
		case 5://Cross-Fade-In
			disposition_X=set_pos_X;
			disposition_Y=set_pos_Y;
			//補正
			alpha_no=0;
			rotate=0;
			scale_no=1;
			spd_v=1;
		break;
		case 6://左右上下スケール伸縮
			if (chgxyflag < 3) {
				//左右
				disposition_X=set_pos_X+canvasWidth/2*chg_v;//逆転フラグ
				disposition_Y=set_pos_Y;
				scale_no=2;
				rotate=0;
			} else {
				//上下
				disposition_X=set_pos_X;
				disposition_Y=set_pos_Y+canvasHeight/2*chg_v;//逆転フラグ
				scale_no=3;
				rotate=0;
			}
			//補正
			spd_v=1;
		break;
		default://そのほか全て中心/マレに回転あり
			disposition_X=set_pos_X;
			disposition_Y=set_pos_Y;
			//補正
			spd_v=1.5;
			//スケール例外その場拡大20%
			if (chgxyflag == 2) {scale_no=4;alpha_no=0;rotate=0}
			if(scale_no == 1){alpha_no=0;}
			if(scale_no == 2 || scale_no == 3) {rotate=0;alpha_no=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;
		case 4:
			scale_X=2;scale_Y=2;alpha_no=0;//スケール例外2倍、負荷が大きい
		break;
		default:
			scale_X=0;scale_Y=0;
	}

	//回転角度計算
	rotate_v=rotate*120*chg_v;

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

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

	//上画像挿入/早めにいれておく
	topImage.image=new createjs.Bitmap(mainImage).image;

	//上画像表示
	topImage.visible=true;
	//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={};
	if (inType) {
		params={x:set_pos_X,y:set_pos_Y,scaleX:1,scaleY:1,rotation:0,alpha:1};
	} else {
		params={x:mov_pos_X,y:mov_pos_Y,scaleX:scale_X,scaleY:scale_Y,rotation:rotate_v,alpha:alpha_no};
	}

	//Tween対象インスタンス
	var tw=createjs.Tween.get(topImage)
	.to(params,speed*spd_v,ease)
	.call(finshtween);

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

}

//フェードアニメ完了
function finshtween () {

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

	//上画像非表示
	topImage.visible=false;
	topImage.alpha=1;
	stage.update();

	//welcome画像層画像を消す
	if (once) {
		welcomeImage.visible=false;
		once=false;
	}

	//アニメ作業中である、現在は未使用
	globalflag=true;

	//遅延
	setTimeout(function() {
		//Ticker削除
		createjs.Ticker.removeEventListener('tick',tick);
		//タイマー次ぎ開く
		if (timer_use == 'use') {
			set_timer();
		}
	},500);

}

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

}

//comment表示
function set_comment() {
	viewcomment.visible=true;
	stage.update();
}

//reset
function reset_comment() {
	viewcomment.visible=false;
	stage.update();
}

//簡単なLOADING
function loadingIndicator(){

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

	//描画データ
	var cx,cy,
	numNeedles=12,
	innerR=10,
	outerR=5,
	cAngle= -Math.PI/2,
	nAngle;

	//ライン描画
	nAngle=Math.PI*2/numNeedles;
	for (var i=0; i < numNeedles; i++){
		cAngle +=nAngle;
		cx=Math.cos(cAngle)*innerR;
		cy=Math.sin(cAngle)*innerR;
		graphics.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

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


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

/* comment */
#viewcomment {
position:relative;
top:0;left:0;
width:600px;
height:auto;
padding:10px;
text-align:left;
font-size:12px;
border-radius:8px;
background-color:#FFFFFF;
}

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


簡単な説明


DOMElementクラスでhtmlエレメントをインスタンス化すれば、CreateJSでBitmap()、Shape()、同様に制御可能になるから便利です。但し応用事例など資料は現在皆無に近いので、自分で考えて使用する外方法が無いようです。
DOMElementクラスの詳細は、CreateJS付属のマニュアル、DOMElement Class など参照ください。


DOMElement()の設定

DEMOのHTML構造は通常とは違います。キャンバス、画像共にCSS3のスタイルで角丸陰影処理されています。


1. DEMOのキャンバスは、DIV要素#image-boxの中に入っています。且つ、DIV要素#demo-wrapでラップされ、CSSで中央に表示されるようになっています。
2. CSS3のスタイルで角丸陰影のため、DIV要素の幅は広がっています。
3. DOMElement()で作ったインスタンス(viewcomment)の位置も上記のCSSに影響を受けていますので修正して配置しました。(下記参照)
4. キャンバスの上にappendするような形になるようです。キャンバス内部の階層の中に挿入などは出来ません。(仮に内部にコンテナを作りそこにaddChildしても表示はキャンバスの上になります)
5. 表示させるには、他のインスタンス同様、ステージの stage.update() が必要です。
6. 現時点で、キャンバスに描画する文字はまだ貧弱ですから、表示階層が限定されても有効な手段となります。内部は通常のCSSで配置などの処理が出来るので簡単だ!。
7. DOMElementクラスにはバグがあるようです。easeljs-0.7でバグが修正されたのと、イベント処理の変更により、easeljs-0.6で正常だったMouseOverが旨く機能せず設定を変更しました。


その時々のHTML構造及びCSS設定にもよりますが、多少配置には工夫がいる様です。DEMOでは offsetLeft 値を取得して加算しています。使用する場合に処理しています。


 

/// easeljs-0.7より、イベント関連の処理が変更になりましたので修正します ///


1. easeljs-0.7より、イベント関連の処理が大幅に変更。
2. DOMElementクラスのバグが修正された。(振る舞いが以前とは全く違う)
3. 以前のイベント処理ではキレイにならない。


その為に、mouseover mouseout を、rollover rollout に変更しても良い結果にならない場合がある。
「デモ」では、Aリンクが有るので面倒である。



if (viewcommentUse) {

	//Canvas位置/image-boxで無いと取得出来ない
	var element=document.getElementById("image-box");
	var pos_x=element.offsetLeft;

	viewcomment=new createjs.DOMElement("viewcomment");
	viewcomment.regX=viewcomment_W/2;
	viewcomment.x=(pos_x+canvasWidth/2)-10;//陰影誤差補正
	viewcomment.y=30;//30
	viewcomment.visible=false;
	stage.addChild(viewcomment);

	//v0.7ではDOMElementのイベントが変わったので、特殊な作りになる
	stage.addEventListener('stagemousemove',set_comment);
	stage.addEventListener('rollout',reset_comment);

}

HTML構造、CSS設定により位置が違いますから状況の応じ臨機応変に「工夫」することが必要です。


● easeljs-0.6の時は、DOMElementクラスのバグのために旨く機能していた。easeljs-0.7では機能しない。


easeljs-0.6の時は以下の様であった、(e) は飾り
if (viewcommentUse) {

	略す

	//backImageOverAction
	backImage.addEventListener('mouseover',function (e) {
		set_comment();
	});
	backImage.addEventListener('mouseout',function (e) {
		reset_comment();
	})
}

● rollover rollout に変更しても、DOMElementクラスに、文字、Aリンクが有ると乱れる。
単に、文字のみ表示するのなら構わないと思う。実際に設定して見ないと振る舞いは説明では判らない。
使い難い場合は、次に説明の設定にすれば良いと思う。


if (viewcommentUse) {

	略す

	//rollover rollout
	backImage.addEventListener('rollover',function () {
		set_comment();
	});
	backImage.addEventListener('rollout',function () {
		reset_comment();
	})
}

● DOMElementクラスに、Aリンクが有るので工夫した。

イベント処理が変更になったので、ステージまたは画像の上にある、DOMElementクラスにマウスが移動すると、easeljs-0.7 ではイベントが発生するので振る舞いが違ってくる。
rollover ではまずいので、ステージ専用のイベント、stagemousemove を利用した。Aリンクが乱れ無い。
rollout は使用したく無いが、他に方法が無くマシン環境が悪いと少しチラツク。backImage に設定しても機能する。
他に良い方法が有ればどんな方法でも構わない、、、


if (viewcommentUse) {

	略す

	//v0.7ではDOMElementのイベントが変わったので、特殊な作りになる
	stage.addEventListener('stagemousemove',set_comment);
	stage.addEventListener('rollout',reset_comment);

	//backImage.addEventListener('rollout',reset_comment);

}

DOMElementクラスの文字の上を移動するとチラツク場合があります。ブラウザに拠っても微妙な差がある。


 

DOMElement()の中身の更新1 (画像表示の所で処理)

画像毎に表示するコメント類が違いますので、予めJS内部にある文字を取り込みますが、HTML要素として処理した方が便利なようです。
通常のHTMLエレメントを記述するようにデータとして収納しておきます。画像表示もリンクも組めます。
DEMOでは画像更新の先頭部分で、コメントデータを変更して見ました。(set_comment()関数に記述しても良い)


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

	略す

	//COMMENT表示
	if (viewcommentUse) {
		var element=document.getElementById("viewcomment");
		//html取替えこちらが簡単だ、簡易処理
		element.innerHTML=comment_list[image_no];
		stage.update();
	}

	略す
}

画像取得の失敗を考慮して「コメントデータ」も、配列 comment_list に push して使用しています。DOMElementクラスにはバグがあるようですがテキトウにすればナントカなるでショウ。


DOMElement()の中身の更新2 (set_comment()関数の所で処理)

set_comment()関数の所で処理も出来ますが、ここで更新すると再度画像をマウスオーバーしないと更新が反映されません。


現在の設定
function set_comment() {
	viewcomment.visible=true;
	stage.update();
}

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

更新させる場合
function set_comment() {
	var element=document.getElementById("viewcomment");
	//html取替え
	element.innerHTML=comment_list[image_no];
	viewcomment.visible=true;
	stage.update();
}

TEXT形式で文字のみ更新する場合

innerTextを使用すれば良いが、文字のみだから汎用性が無い。


element.innerText=comment_list[image_no];

参考、Node形式で処理する場合

次ぎの様にエライ面倒になります。やはり innerHTML 形式が簡単でよい。


//comment表示2、Node形式面倒
function set_comment() {
	var cmtnode=document.createTextNode(comment_list[image_no]);
	//veiwcommentはcreateJSに制御されているので、新たにelement取得
	var element=document.getElementById("viewcomment");

	//クリア、最初から#veiwcommentが有るためか機能する
	//element.removeChild(element.childNodes.item(0));
	element.removeChild(element.childNodes[0]);
	//挿入
	element.appendChild(cmtnode);
	//
	viewcomment.visible=true;
	stage.update();
}

jqueryの利用

javascriptで書かねば成らない所が多くなるので、jqueryを利用すれば手軽に処理できる。ページのhtmlに埋め込んであるエレメントを挿入したりの操作が手軽になります。これらの処理はアイデア次第と思います。(詳細などは省略)


DEMOでのcommentリスト記載例

DEMOでのJSの記載例は次ぎの様になります。記載などは使用者の自由です。
CSSは、ページのCSSが反映されますので、そこを考慮して書けば良い訳です。


//commentリスト
if (viewcommentUse) {
	var keepcommentList=[
	'<p class="red">COMMENT-1 ページ表示後、画像を全て読み込み最初の画像を表示します。スライド、フェード系でランダムにアニメします。必要ないなら非表示に出来ます。</p>',
	'COMMENT-2: <p>ホー、リンクも書けるのだ!。<a href="/main/pops/archives/231">記事のページに戻る</a> / <a href="/main/">MAINページに戻る</a></p>',
	'COMMENT-3<p><img src="/main/images/gkf001.gif" width="34" height="61" style="float:left;margin-right:5px;margin-bottom:5px;" />CreateJSを利用して、HTML5のCanvasで画像をアニメさせます。<br>文字などの表示には、DOMElementクラスを使用して見ましたが、結構便利です。</p>',
	'COMMENT-4 今なら「1000円札」が消費税込みぽっきり2000円で買えます。期間限定早いもの勝ち。<p><a href="javascript:void(0);"><img src="/main/images/click_btn5.png" width="68" height="30" /></a></p>',
	'<p style="text-align:center;">COMMENT-5<br><img src="/main/images/textimg01.png" width="340" height="50" /></p>',
	'COMMENT-6'
	];
}

特性を知って、旨く利用して行けば応用範囲が広がると言う事でしょう。


1枚画像スライド系は次のページにも有ります。このデモと比較し少々の違いは有ります。

【参照】当方の記事: CreateJS、で「TickerクラスのaddEventListener設定」を考える


 

その他

DEMO専用です。使用する事は可能ですが、あくまでもテストですので個人の判断で使用下さい。画像などは各自ご用意下さい。JSの先頭部分をお読み下さい。
但し、効率的な方法があれば、予告無くスクリプトなど修正する場合があります、ご了承下さい。


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]