POPS WEB

 

CreateJS 画像フェード、テキストアニメーションとレインボー色 表示のテスト

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

基本的には、前に作った「画像フェード表示」系統等の改造ですから簡単に仕上がります。テキストアニメーションは、AS AS3アニメを書き換えたような感じです。まだ簡単単純ですが、CreateJSのTweenが高性能ですから結構満足で面白いのが出来ると思います。

 

[説明図]

 

1.「画像アニメーション」は、フェード系です。テキストアニメーション有り。
2. テキスト、Loading、ボタンをレインボー色の装飾にしてみました。
3. 画像は一括読み込み方式ですから、10枚以内位で使用します(標準5-6枚)。
4. 最初に表示する画像(welcome画像)は自由ですが、有った方が効果的と思われます。
5. 設定はＪＳの上部をご覧下さい。

 

DEMO

CreateJS 画像フェード、テキストアニメーションとレインボー色 (createJS023.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>

JS

createJS023.js、ＪＳ名は任意に変更可。easeljs-0.7用

//日本語
//createJS023.js
//デモ用 rainbow-Color
//easeljs-0.7用

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

//初期設定
var split_free=true;//自動分割 true false
var speed=1000;//拡大移動、アニメ速度
var slide_time;//未使用
var delay_speed=150;//出現間隔、delay基準時間 100-200

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

//読み込み画像の大きさcanvasと同じ
var imageW=640;
var imageH=300;

//タイマーの使用切り替え可能/use none
var timer_use="use";//use
//タイマー値 5000-10000
var time=8000;

//clickbtnの使用 use none
var clickbtn_use="use";//ues

//Loading AUTOの文字を表示するか use
//タイマーの使用しないときAUTOの文字なし
var text_use="use";

//Activeボタン
var activeBtn;
//ボタンの大きさ
var btnRadius=5;//半径
var btnSpace=10;//未使用
var interval_W=20;//ボタン間隔
var interval_H=10;//下からの位置
//ボタンactiveカラー
var active_color="#FFFFFF";

//サムネールを使用する true false
var thumbBoxUse=true;//true
//サムネールの大きさ余白
var thumbW=128;
var thumbH=60;
var margin=2;//余白 R
var interval_thumbH=70;//下からの位置

//メインテキスト
var mainstring="ViVa POPS WEB KOUBOU";
var maintextUse=true;//true
var centerUse=true;//中央補正
//プロローグ、メインテキストあれば実行
var prologue=true;//未使用
var prologue_time=8000;
//メインテキスト表示位置
var mtcontainer_x=100;//中央補正しない場合
var mtcontainer_y=80;


//画像manifestリスト
var manifest=[
{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"}
];

//------------------------------------------------------
//変数、未使用もあり

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

//画像result
var globalflag=false,backImage,mainImage,topImage,welcomeImage,timerID=null;

//Loading
var loadingShape;
//TEXT
var viewtext;

//サムネールBOX
var thumbBox;//container
var thumbImage;//画像Bitmap
var thumb=false;//サムネール動作判定
var thumb_x=0;//サムネール位置

//ボタンが押された/有効
var btnValidity=false;

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

//変数
//loading変数
var loading=false;
//ProgressBar
var progressbar;
var progtext;
var bar_v=0;
var once=true;
//load番号未使用
var loadcount=0;

//ボタン
var myBtn=[];
var activeBtn;

//shadowフィルター
var shadow=new createjs.Shadow("#000000",0,0,4);
var shadow2=new createjs.Shadow("#FFFFFF",1,1,2);//影2未使用
var shadow3=new createjs.Shadow("#000000",0,0,8);//影3未使用

//最初の画像0のこと
var image_no=0;
//画像数
var image_max=0;
//welcome画像は有るか
var welcomeflag=false;

//MAIN-TEXT
var maintextcontainer;
var maintext;
//MOVE-TEXT
var textChip=[];
var textPosx=[];
var textPosy=[];
var textlen=0;
var textcount=0;


//ステージ周りセット
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('/main/images/welcome_black.png');
	stage.addChild(welcomeImage);
	//
	stage.update();

	//下画像層、空画像コンテナを作る/寸法設定なくともＯＫ
	backcontainer=new createjs.Container();
	backImage=new createjs.Bitmap();
	backcontainer.addChild(backImage);
	stage.addChild(backcontainer);
	
	//上画像層、空画像コンテナを作る
	container=new createjs.Container();
	topImage=new createjs.Bitmap();
	container.addChild(topImage);
	stage.addChild(container);

	//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表示判定

	stage.update();

	//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);
			stage.update();
		}
	}
	//Ticker.Listener設定
	createjs.Ticker.addEventListener('tick',progressbar.tick);
	//addChild
	progresscontainer.x=canvasWidth/2;
	progresscontainer.y=canvasHeight/2;
	progresscontainer.addChild(progressbar,progtext);
	stage.addChild(progresscontainer);

	//簡易TEXT、Arialに変更
	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);
	set_text("Loading Now!");

	//MAIN-TEXT
	if (maintextUse) {
		maintextcontainer=new createjs.Container();
		//表示位置
		maintextcontainer.x=mtcontainer_x;
		maintextcontainer.y=mtcontainer_y;
		stage.addChild(maintextcontainer);
	}

	//サムネール補正
	if (clickbtn_use != 'use') {thumbBoxUse=false;}
	//FadeサムネールBOXを使用なら作る、使いまわし、移動
	if (thumbBoxUse && clickbtn_use == 'use') {
		thumbBox=new createjs.Container(0,0,thumbW+margin*2,thumbH+margin*2);
		thumbImage=new createjs.Bitmap();
		thumbImage.x=margin;
		thumbImage.y=margin;
		//縮小
		thumbImage.scaleX=thumbW/imageW;
		thumbImage.scaleY=thumbH/imageH;
		//back
		var thumbback=new createjs.Shape();
		//共通
		thumbback.graphics.s(0).beginFill("#FFFFFF");

		//RoundRectBOX矢印なし
		//operaRoundRect(thumbback,0,0,thumbW+margin*2,thumbH+margin*2,4);

		//RoundRectフキダシBOX(Shape,x,y,幅,高さ,半径,矢幅,矢高さ)、矢幅は偶数値
		roundRectBalloon(thumbback,0,0,thumbW+margin*2,thumbH+margin*2,4,6,8);

		thumbback.shadow=shadow;

		thumbBox.addChild(thumbback,thumbImage);
		thumbBox.regX=(thumbW+margin*2)/2;
		thumbBox.regY=(thumbH+margin*2)/2;
		thumbBox.x=canvasWidth/2;
		thumbBox.y=canvasHeight-interval_thumbH;//高さ
		stage.addChild(thumbBox);
		thumbBox.visible=false;
		//フエード用tick設定
		thumbBox.tick=function (){
			if(thumbBox.alpha < 1 && thumb) {
				thumbBox.alpha+=0.05;
				stage.update();
			}
		}
		//Ticker.Listener設定
		createjs.Ticker.addEventListener('tick',thumbBox.tick);
	}

	stage.update();

	if (clickbtn_use == 'use') {

		//ステージ ボタンコンテナ、ボタンはあとで作る
		btncontainer=new createjs.Container();
		//ボタンコンテナをステージにaddChild
		stage.addChild(btncontainer);
		btncontainer.visible=false;

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

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

}

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

	var id=event.item.id;

	//画像選別 commentの番号保存
	if (id == 'PHOTO') {
		//エラー無しの画像をassets容器に保存
		assets.push(event.result);
	}
}
//全ての画像読み込み完了
function complete (event) {

	//画像数確認、再計算
	image_max=assets.length;
	//簡易TEXT
	set_text("Loading End!");
	//loader Listener削除
	loader.removeEventListener("fileload",fileload);
	loader.removeEventListener("complete",complete);

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

	stage.update();

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

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

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

			//簡易TEXTクリア
			set_text("");
			//viewtext.visible=false;

			stage.update();

			//プロローグ表示に進む
			set_prologue();

		},1000);
	}
}

//ボタンMenuを作る
function drawMenu () {

	//Activeボタンを作る active_color使用
	activeBtn=createActivebtn (0,0,btnRadius,active_color);
	//全ボタン幅
	var btnW_all=0;

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

		//番号受け渡し
		var no=i;
		//Circle/rainbow-Colorに変更で色は反映しません
		myBtn[i]=createCirclebtn(0,0,btnRadius,"#FFFFFF","#FFFFFF",no);
		myBtn[i].cursor="pointer";
		//ボタン間隔
		myBtn[i].x=i*interval_W;
		//ボタン判別用のproperty:idを書き込む、未使用
		myBtn[i].id=i;
		//クリックアクション
		myBtn[i].addEventListener("click",handleclick);
		//myBtn addChild
		btncontainer.addChild(myBtn[i]);

	}

	//activeBtnを乗っける
	btncontainer.addChild(activeBtn);
	//ボタン収容幅
	btnW_all=interval_W*(image_max-1);
	//ボタンコンテナを中央に修正1
	var btncont_x=(canvasWidth-btnW_all)/2;
	btncontainer.x=btncont_x;
	btncontainer.y=canvasHeight-interval_H;
	//まだ非表示
}

//プロローグ
function set_prologue() {

	//Menuを作る
	if (clickbtn_use == 'use') {
		drawMenu();
	}
	if (maintextUse) {
		//静止テキスト
		//draw_maintext();
		//テキストアニメーション
		createMovetext();
		//調整
		setTimeout(function() {
			//ボタン表示
			btncontainer_show ();
			//画像表示に進む
			draw();
		},prologue_time);

	}
	if (!maintextUse) {
		//ボタン表示
		btncontainer_show();
		//画像表示に進む、プロローグ略
		draw();
	}

}

//btncontainer-show
function btncontainer_show () {
	if (clickbtn_use == 'use') {
		btncontainer.visible=true;
		stage.update();
	}
}

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

	globalflag=false;

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

	//activeボタン色変更
	if (clickbtn_use == 'use') {
		activeBtn.x=myBtn[image_no].x;
		stage.update();
	}

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

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

	//最初、変更したので使用していない
	if (once) {
		//処理
		if (maintextUse) {maintextcontainer.visible=false;}
		once=true;
	}

	//画像result取得/Tween後も使用する
	mainImage=assets[image_no];

	//上画像更新、透明度0
	var newimage=new createjs.Bitmap(mainImage);
	topImage.alpha=0;
	topImage.image=newimage.image;

	//TWEENの実行
	var tw=createjs.Tween.get(topImage)
	.to({alpha:1},speed)
	.call(finshtween);

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

}

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

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

	//上画像に空Bitmap挿入
	var newimage=new createjs.Bitmap();
	topImage.image=newimage.image;
	stage.update();

	//アニメ作業中である
	globalflag=true;

	//welcome表示中なら削除、遅延して削除している
	if(welcomeImage.visible) {
		stage.removeChild(welcomeImage);
	}

	//画像処理に時間がかかるので、少し遅延させる、あったほうが良い
	setTimeout(function() {
		//Ticker削除
		createjs.Ticker.removeEventListener('tick',tick);
		//タイマー次ぎ開く
		if (timer_use == 'use') {
			set_timer();
		}
	},500);

}

//tickステージ
function tick() {
	stage.update();
}
//texttick
function texttick() {
	stage.update();
}
//次ぎの開く要素を計算
function next_set() {

	//次ぎの番号
	image_no +=1;
	if (image_no > (image_max-1)) {image_no=0;}
	draw();

}

//タイマー
function set_timer() {

	//一旦切ってからセット
	clearTimeout(timerID);
	timerID=setTimeout(next_set,time);
}

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

//BtnClick
function handleclick (event) {

	//アニメ中は機能しない
	if (!globalflag) {return}

	//v0.7
	var instance=event.target.parent;
	var hit_no=instance.parent.getChildIndex(instance);

	//idで判定v0.7未使用
	//var hit_no=event.target.parent.id;

	//表示中番号なら戻る
	if (hit_no == image_no) {
		return
	} else {
		//ボタン有効/AUTO文字書き換え
		btnValidity=true;
		viewtext.text="";
		//タイマー強制停止
		clearTimeout(timerID);
		//指定番号の画像表示
		image_no=hit_no;

		//少し遅延させるclickは重要だ
		setTimeout(function() {
			draw();
		},300);//200-500

	}
}

//quadraticCurveToこちら使用
function operaRoundRect(s,x,y,w,h,r) {

	s.graphics.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+r,y+h)
	.quadraticCurveTo(x,y+h,x,y+h-r)
	.lineTo(x,y+r)
	.quadraticCurveTo(x,y,x+r,y);
}


//create-box
function createThumbBox (image,x,y,w,h,r,m,imgw,imgh,no) {

	//サムネールBOX
	box=new createjs.Container();
	var thumbimg=new createjs.Bitmap(image);
	thumbimg.x=m;
	thumbimg.y=m;
	//縮小
	thumbimg.scaleX=w/imgw;
	thumbimg.scaleY=h/imgh;
	//back
	var thumbback=new createjs.Shape();
	thumbback.graphics.s(0).beginFill('#FFFFFF');
	operaRoundRect(thumbback,x,y,w+m*2,h+m*2,4);

	thumbback.shadow=shadow;

	box.addChild(thumbback,thumbimg);
	box.regX=(w+m*2)/2;
	box.regY=(h+m*2)/2;

	//rollover rollout
	box.addEventListener('rollover',function (e) {
		//
		set_open(no);
	});
	box.addEventListener('rollout',function (e) {
		//
		//reset_open();
	});

	return box;
}

//create-Circleボタンc,outc,overcは未使用rainbow-Color
function createCirclebtn (x,y,r,outc,overc,no){

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	btn.name="btntext";//name挿入
	var s=new createjs.Shape();
	//共通
	s.graphics.s().beginFill(rainbowColor(no,image_max,100,90)).drawCircle(x,y,r);
	btn.addChild(s);
	btn.shadow=shadow;

	//Circle rollover
	btn.addEventListener("rollover",function (e) {
		s.graphics.clear();
		//共通
		s.graphics.s().beginFill(rainbowColor(no,image_max,100,50)).drawCircle(x,y,r);
		//Point計算、btncontainer基準localToGlobal
		var point=btncontainer.localToGlobal(e.target.x,e.target.y);
		//Point補正btnRadius
		thumb_x=point.x;
		stage.update();

		//サムネールopen
		if (thumbBoxUse) {
			openThumbBox(no);
		}

	});
	//Circle rollout
	btn.addEventListener("rollout",function (e) {
		s.graphics.clear();
		//共通
		s.graphics.s().beginFill(rainbowColor(no,image_max,100,90)).drawCircle(x,y,r);
		stage.update();

		//サムネールclose
		if (thumbBoxUse) {

			closeThumbBox(no);
		}

	});
	return btn;
}

//注意、Activebtn Circle
function createActivebtn (x,y,r,activec) {

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	btn.name="btntext";
	var s=new createjs.Shape();
	//共通
	s.graphics.s("#000000").beginFill(activec).drawCircle(x,y,r);
	//.beginFill("#FFFFFF").drawCircle(x,y,r/2);
	btn.addChild(s);
	return btn;
}

//RoundRectフキダシBOX
function roundRectBalloon(s,x,y,w,h,r,tw,th) {
	s.graphics.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(w/2+tw/2,y+h)
	.lineTo(w/2,y+h+th)
	.lineTo(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);
}

//ThumbBox表示/update自動
function openThumbBox(no) {
	//サムネール画像書き換え/画像result取得
	thumbImage.image=new createjs.Bitmap(assets[no]).image;
	thumbBox.x=thumb_x;//X位置
	thumbBox.alpha=0;
	thumbBox.visible=true;
	thumb=true;
	//stage.update();
}
//ThumbBox非表示
function closeThumbBox(no) {
	//サムネール画像クリア空画像挿入
	//thumbImage.image=new createjs.Bitmap().image;
	thumbBox.visible=false;
	thumb=false;
	stage.update();
}

//rainbow-Color2
var rainbowColor=function(v,cv,saturation,lightness) {
	var no=v/cv*360;
	var color=createjs.Graphics.getHSL(no,saturation,lightness);
	return color;
}

//Main-Text-Set
function draw_maintext() {

	textlen=mainstring.length;
	var text_spc=0;//テキストスペース
	var tpos_x=0;
	var tpos_y=0;
	var maintext_W=0;

	for (var i=0; i < textlen; i++) {
		var t=new createjs.Text("","32px Arial","#000000");
		t.text=mainstring.charAt(i);
		t.color=rainbowColor(i,textlen,100,50);//rainbow

		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();
		//位置
		tpos_x +=w/2;

		//中央補正
		t.regX=w/2;
		t.regY=h/2;

		t.x=tpos_x;
		t.y=tpos_y;

		//位置加算
		tpos_x +=(w/2+text_spc);
		//幅計算
		maintext_W +=(w+text_spc);
		maintextcontainer.addChild(t);
	}
	maintext_W -=text_spc;//補正

	//コンテナ中央
	if (centerUse) {
		maintextcontainer.x=(canvasWidth-maintext_W)/2;
	}
	stage.update();
}

//Movetext
function createMovetext() {

	textlen=mainstring.length;
	textcount=0;
	var text_spc=0;//テキストスペース
	var tpos_x=0;
	var tpos_y=0;
	var maintext_W=0;

	for (var i=0; i < textlen; i++) {
		var t=new createjs.Text("","32px Arial","#000000");
		t.text=mainstring.charAt(i);
		t.color=rainbowColor(i,textlen,100,50);//rainbow
		textChip[i]=t;
		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();

		//位置
		tpos_x +=w/2;//half
		textChip[i].regX=w/2;
		textChip[i].regY=h/2;
		textChip[i].x=textPosx[i]=tpos_x;
		textChip[i].y=textPosy[i]=tpos_y;//0
		//位置加算
		tpos_x +=(w/2+text_spc);//half+space
		//移動
		textChip[i].x=canvasWidth;
		//幅計算
		maintext_W +=(w+text_spc);
		maintextcontainer.addChild(textChip[i]);

		//Tween
		var twn=createjs.Tween.get(textChip[i])
		.wait(100*i)
		.to({x:textPosx[i]},1000)
		.wait(100).to({scaleX:2,scaleY:2},50)
		.wait(100).to({scaleX:1,scaleY:1},200)
		.call(finshmove);

	}
	maintext_W -=text_spc;//補正

	//コンテナ中央
	if (centerUse) {
		maintextcontainer.x=(canvasWidth-maintext_W)/2;
	}
	stage.update();

	createjs.Ticker.setFPS(30);
	createjs.Ticker.addEventListener('tick',texttick);
}
//終了removeEventListener
function finshmove () {
	textcount ++;
	if (textcount > textlen) {
		createjs.Ticker.removeEventListener('tick',texttick);
	}
}

//簡単なLOADING rainbow-Color
function loadingIndicator(){

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

	//描画データ
	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++){
		graphics.beginStroke(createjs.Graphics.getHSL(i/numNeedles*360,100,50));
		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();

注釈文を削除すれば、幾分早くなります。

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

CSS

createJS023.css、ＣＳＳ名は任意に変更可

/*日本語 createJS023.css*/

#demo-wrap {
position:relative;
width:auto;
height:380px;
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;
}

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

簡単な説明

[説明図]

 

テキスト文字の分解組み立ては、FLASHの、MX AS3と長年少しも進歩が有りません。キャンバスにおいても同様の方法で出来そうです。１文字ずつ取り出しTextクラスのインスタンスを作り、中心補正して並べて行く作業になります。但し並べ方に「コツ」が有ります。
アニメーションはTweenで行う事にします。その外の方法も有ると思いますが、ライブラリでも出ればウレシイですね。

テキスト文字の分解組み立て概略

Flashのテキストフィルドなりがあって、文字位置など取得できれば良いのですがまだキャンバスでは有りませんので、ＪＳの「登録文字列」を１文字ずつ取り出して配置して行きます。以下の方法はワタシの MX AS3 でのテキストアニメ手法をCreateJS形式に移植したものである。上の説明図は概略的なものです。

1. １文字ずつ取り出しTextクラスのインスタンスを作ります。文字は左寄せ(初期は左寄せ)です。絶対に中央配置にしないこと(正確に揃わなくなる)。文字種は Arial が良いようです(IE9対応のため)。
2. インスタンスの大きさは、getMeasuredWidth()、getMeasuredHeight()、で取得出来ます。
3. インスタンスの原点を regX、regY、で中心に補正します。
4. インスタンスをコンテナに並べて行きますが、インスタンスのX方向、半分の値づつ２回ずらし、中にスペースを入れます。Y方向は0になっています(値を入れても良い)。
１文字ずつの「位置情報を保存」します。これがアニメの「戻り位置」になります。スペースで文字の間隔の調整が可能です。後は、好きな所に移動させて「戻り位置」までTweenさせるだけです。
5. 全ての文字を並べた場合の「全体の横幅」を計算しておきます。これでコンテナ位置を調整して「中央配置」などに利用します。(原則1行です、改行させる方法もありますが、、)
6. Tweenでアニメーションさせますが、wait()を旨く使用すると自由に動かせます。(画像分解アニメと同じですからそちらの処理を参考すると簡単だ)
7. 必要であればグラフィック(Shape)を入れても良いでしょうがその分重く成ります。テキストだけで十分です。
8. 文字間のスペースを設定出来ますので便利です。文字の雰囲気が変わる。(テキストスペース text_spc)。
9. 文字の描画品質はブラウザにより違いがあります。

配列が無くとも作れるが、有った方が判りやすいし、改造も楽になる。

文字列の長さで実行時間が変わりますので、表示時間は、prologue_time を調整。１行のみの表示のため文字数が多い場合は文字サイズを直接変更下さい。(32px Arial)

var mainstring="ViVa POPS WEB KOUBOU";
var textlen;
var textcount=0;
--------------------------------------------------------

//Movetext
function createMovetext() {

	textlen=mainstring.length;
	textcount=0;
	var text_spc=0;//テキストスペース
	var tpos_x=0;
	var tpos_y=0;
	var maintext_W=0;

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

		//Textクラスインスタンスを作る
		var t=new createjs.Text("","32px Arial","#000000");
		//1文字取り出す
		t.text=mainstring.charAt(i);
		//レインボー色に染める
		t.color=rainbowColor(i,textlen,100,50);//rainbow
		//インスタンスを配列に保存
		textChip[i]=t;
		//幅高さを取得
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();

		//位置設定1、インスタンス原点を中央位置に
		tpos_x +=w/2;//half
		textChip[i].regX=w/2;
		textChip[i].regY=h/2;
		//位置情報を保存
		textChip[i].x=textPosx[i]=tpos_x;
		textChip[i].y=textPosy[i]=tpos_y;//0
		//位置加算、半分進めてスペース加算
		tpos_x +=(w/2+text_spc);//half+space
		//インスタンスを移動させる
		textChip[i].x=canvasWidth;
		//幅計算
		maintext_W +=(w+text_spc);
		//コンテナにaddChildする
		maintextcontainer.addChild(textChip[i]);

		//Tweenを設定するwaitで操作
		var twn=createjs.Tween.get(textChip[i])
		.wait(100*i)
		.to({x:textPosx[i]},1000)
		.wait(100).to({scaleX:2,scaleY:2},50)
		.wait(100).to({scaleX:1,scaleY:1},200)
		.call(finshmove);

	}
	maintext_W -=text_spc;//スペースが１回分多いため補正する

	//コンテナ位置修正、文字全体を中央配置
	if (centerUse) {
		maintextcontainer.x=(canvasWidth-maintext_W)/2;
	}
	stage.update();
	//Ticker設定
	createjs.Ticker.setFPS(30);
	createjs.Ticker.addEventListener('tick',texttick);
}

//終了removeEventListener
function finshmove () {
	//全部の終了を知るためカウントする
	textcount ++;
	if (textcount > textlen) {
		createjs.Ticker.removeEventListener('tick',texttick);
	}
}

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

MAINテキストを動かさない場合

動かさない場合は、静止テキスト draw_maintext() を処理する。Tweenが無いだけでやってることは同じです。処理の分岐を修正のこと。表示時間は、prologue_time を調整。

//プロローグ
function set_prologue() {
	略す
	if (maintextUse) {
		//静止テキスト
		//draw_maintext();
		//テキストアニメーション
		createMovetext();
		//調整
		setTimeout(function() {
			//ボタン表示
			btncontainer_show ();
			//画像表示に進む
			draw();
		},prologue_time);
	}
	略す
}

レインボー色に染める(色相環)

イワユル虹色に配色するのですが、Graphicsクラスの getHSL() を利用します。

色データ=createjs.Graphics.getHSL(設定データ)

1. CSSが対応しているので、テキストクラス、text.color="色データ"
2. グラフィック塗りの色を設定できます、graphics.beginFill("色データ")
3. グラフィック線の色を設定できます、graphics.beginStroke("色データ")

「色相」が 360 有りますので、順次割り当てて行き、「彩度」「輝度」を決めるだけです。
単純にいえば、最大を360として、色相のどの位置に有るか計算して割り振ると言うことです(最初は0で赤)。
下記では、rainbowColor関数を作り利用しています。別途説明の様に、直接に実行しても良い。

//レインボー色に染める
t.color=rainbowColor(i,textlen,100,50);//rainbow

//rainbow-Color2
var rainbowColor=function(v,cv,saturation,lightness) {
	var no=v/cv*360;
	var color=createjs.Graphics.getHSL(no,saturation,lightness);
	return color;
}

CreateJSマニュアル Graphics Class getHSL()の説明抜粋

「HSL名前空間」に拠る色の指定方法は、マニュアルには以下の様に記載されている。色相、彩度、輝度、透明度を設定できる(透明度は省略可)。色の諧調を付けるなどの操作には便利のようだ。

getHSL(hue saturation lightness [alpha]) String static

Returns a CSS compatible color string based on the specified
HSL numeric color values in the format "hsla(360,100,100,1.0)",
or if alpha is null then in the format "hsl(360,100,100)".

Graphics.getHSL(150, 100, 70);
// Returns "hsl(150,100,70)"

色指定方法の参考記事

【参考】jsdoc.hotcom-web.com 記事: EaselJSの様々な色指定方法まとめ

[説明図]

 

「彩度」「輝度」を変化させた時の「色の具合」の様子である。パラメータ変化の色感覚を認識する事が大事！。
「輝度」100 は「白」になる。(図では、見えるように陰影をつけた)
「輝度」0 は「黒」になる。

DEMOでは文字の間に空白(半角)を入れている。文字の間の「空白」にも色は割り振られているが、実際には「空白」だから見えない。(修行すれば見える様になるかも知れない)

getHSL()を直接に実行

LOADINGはgetHSL()を直接に実行する様に書いています。同じことです。

//簡単なLOADING
function loadingIndicator(){

	略す

	//ライン描画
	nAngle=Math.PI*2/numNeedles;
	for (var i=0; i < numNeedles; i++){
		graphics.beginStroke(createjs.Graphics.getHSL(i/numNeedles*360,100,50));

		略す

	}

	略す
	return s
}

文字種と文字サイズとIE9

IE9の振る舞いが少し変だ。キャンバスに、通常の文字は余り使用したくないのでテキトウで有った。単に表示されれば良いと言う具合である。(策定が完全ではなく、ブラウザで差異があるので文字は余り触りたくない)

しかし、文字を動かすと成ると問題がある。IE9では「_ゴシック」が効かない「ゴシック」でもブラウザにより違う。

そこで、「Arial」を設定して見たら、ほぼブラウザに差異無く表示される。日本語もそれなり表示する。(文字の大きさに若干違いが出るかも知れないが、、当方では全て調べて確認する方法が無い)

調べるのも大変なので、応急的に「Arial」を設定にするが、問題が有れば各自調べて設定下さい。特にＭＡＣについては不明ですし、IE10はナントカ成るんじゃないかと期待します。

//Textクラスインスタンスを作る
var t=new createjs.Text("","32px Arial","#000000");

文字サイズは直接変更ください。日本語の表示もできます。

ボタンの色

イキオイでボタンの色を「レインボー色」に染めたが余り効果のあるものでは無い。graphics.beginFill()もレインボー色に出来る例である。暫定的に改造したもので色の指定は無視されます。

TextクラスのFont設定変更

今までDEMOでのTextクラスのFont設定では、単に表示できれば良いだけの目的で「_ゴシック」を使用して来ましたが、今後は「IE9」を考慮して「Arial」に変更します。
このキャンバス表示の文字は重要なものでは有りませんので問題は出ません。しいて言えば必要性の無いものです。

 

その他

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

名前空間、HSL名前空間、正規表現、二項分布、、、ワカラン名前が多い。最初の「訳」の命名次第と思うが！
以上です。