POPSブログ

CreateJS テキストアニメーション、Tweenの途中でグラフィックを挿入する

244

  Category:  javascript2013/08/29 pops 

MotionGuidePluginのガイドパスMotionTween、複数の「ガイドパス登録」でテキストをMotionTweenさせます。途中でグラフィックを挿入(テキスト文字と入れ替え)して変化を演出します。マア、百面相が七変化する様なもので単純計算で 100x7=700 と成るんでしょうか。
easeljs-0.7 でのテストです。

 

CreateJS テキストアニメーション、Tweenの途中でグラフィックを挿入する


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


以前のものはテキストの図形を挿入しましたが、今回は通常のグラフィックを挿入出来るように改造しました。
Shapeクラスと共にコンテナに収容する構造ですが、原点設定の都合で少しクセのある物になりますのでグラフィックを挿入時に注意が必要です。グラフィック挿入が必要で無い場合は、前のテキスト図形を挿入する形式が簡単です。


[説明図]

 

1. パスは6種類の中から選定出来ます。少々ですが動き(見た目)に違いが有ります。(デモ参照)
2. ガイドパスの、X軸、Y軸反転させていませんので簡単な作りです。
3. 前のサンプルそのままを再利用していますので、その設定などは同じです。(前ページ参照)
4. テキストアニメーションだけと言う訳には参りませんので、制作には時間がかかります。
デモでは、動く形式の違う「サブテキスト」と、画像のフエードイン、アウトを組み込んでみました。


ガイドパス及び関連設定などは、前ページのものと同じですからそちらを参照下さい

【参照】当方の記事: CreateJS MotionGuidePlugin利用、複数のガイドパス登録でテキストをMotionTweenさせる


DEMO


CreateJS テキストアニメーション、Tweenの途中でグラフィックを挿入する例 (createJS033.js)

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


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/tweenjs-0.5.0.min.js"></script>

重要、バージョン違いでは動かない場合が有りますので必ず合わせて下さい。このデモでは preloadjs を使用していません。


HTML (HTML5)


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

JS

createJS033.js、JS名は任意に変更可。easeljs-0.7用


//日本語
//createJS033.js
//easeljs-0.7用MotionGuideアニメーション
//rainbow-Color

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

//メインテキスト
var mainstring="ViVa POPS WEB KOUBOU";
//サブテキスト
var substring="Ah.dosukoi! Welcome to my site. Gottuandesu";

//rainbow虹色にする true false
var rainbowSet=true;
//文字指定色rainbowSetがfalseの場合有効
var maintext_color="#CCCCCC";//#FFFFFF
//MAIN-TEXTコンテナ高さ
var contna_H=150;

//welcome画像を使用 true false
var welcomeUse=true;

//ガイド設定 ガイド幅高さ
var guide_w=500;//原則文字の幅より大きい方が良い
var guide_h=-150;//0 から -200位

//パスの種類指定 0-5
var pathdata=0;
//上記6種をランダムに選ぶ true false
var pathRandom=true;

//ポイント固定=0 移動=1 中央=2 画面ランダム=3 指定位置=4
var pointType=0;
//上記5種をランダムに選ぶ true false
var patternRandom=true;

//画面指定位置=4の場合のステージ内位置
var stagePoint_x=550;
var stagePoint_y=10;

//間隔の基準時間//100-250
var base_time=200;
//交互遅延時間 500-1000
var delayed_time=1000;
//Tween速度 2000-3000
var speed=2000;

//スケールデータ
var scaledata=[0,0,0,1,1,2,4,6,10];

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

//左上方TEXTを有効にする true false
var textUse=true;

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

//keep ガイドパス下方固定用
var keepguide_w=guide_w;
var keepguide_h=guide_h;
//補正
if (pointType > 4) {pointType=0;}//補正エラー回避
if (pathdata > 5) {pathdata=0;}//補正エラー回避

//Plugin読み込み
createjs.MotionGuidePlugin.install();

//変数、未使用もあり
//ステージ
var stage;
//コンテナなど
var backrect;
var welcomecontainer;
var welcomecontainer2;
var subtextcontainer;
var maintextcontainer;
//インスタンス
var welcomeImage;
var welcomeImage2;//isanda
var maintext;
//TEXT
var viewtext;

//MAIN-TEXT
var textChip=[];
//並び順のポジション保存
var textPosx=[];
var textPosy=[];
//MOVEポジション保存
var movePosx=[];
var movePosy=[];
//スケール保存
var keepScale=0;
//回転保存
var keepRote=0;
//alpha保存
var keepAlpha=0;

//テキスト用グローバル変数
var textmax=0;
var textcount=0;

//図形
var ballChip=[];
var moveBallPosx=[];
var moveBallPosy=[];

//SUB-TEXT
var textChip2=[];
var textPosx2=[];
var textPosy2=[];
//MOVEポジション保存
var movePosx2=[];
var movePosy2=[];

//subテキスト用グローバル変数
var textmax2=0;
var textcount2=0;

//全て終了グローバル変数
var allcount=0;

//shadowフィルター
var shadow=new createjs.Shadow("#000000",0,0,4);
var shadow2=new createjs.Shadow("#FFFFFF",0,0,6);//影2

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

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

	//STAGE
	stage=new createjs.Stage('mainCanvas');
	//MouseOver設定/必要に応じ設定
	//stage.enableMouseOver(20);

	//バックRect/最下位色背景層、無くとも良い
	backrect=new createjs.Shape();
	backrect.graphics.beginFill("#555555").drawRect(0,0,canvasWidth,canvasHeight);
	stage.addChild(backrect);

	//welcome画像
	if (welcomeUse) {
		welcomecontainer=new createjs.Container();
		welcomeImage=new createjs.Bitmap("/main/images/welcome_back.jpg");
		welcomecontainer.addChild(welcomeImage)
		stage.addChild(welcomecontainer);
	}

	//welcome2画像非表示/isanda.png
	welcomecontainer2=new createjs.Container();
	welcomecontainer2.x=canvasWidth/2;
	welcomecontainer2.y=canvasHeight/2-55;
	welcomeImage2=new createjs.Bitmap("/main/images/isanda2.png");
	welcomeImage2.regX=320/2;
	welcomeImage2.regY=32/2;
	welcomecontainer2.addChild(welcomeImage2);
	welcomeImage2.visible=false;
	stage.addChild(welcomecontainer2);


	//SUB-TEXT
	subtextcontainer=new createjs.Container();
	//位置
	subtextcontainer.x=0;
	subtextcontainer.y=200;
	stage.addChild(subtextcontainer);

	//MAIN-TEXT
	maintextcontainer=new createjs.Container();
	//位置中央/あとで修正される
	maintextcontainer.x=canvasWidth/2;
	maintextcontainer.y=contna_H;
	stage.addChild(maintextcontainer);

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

	stage.update();

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

	//調整
	setTimeout(function() {

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

	},2000);

}

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

	set_text("START");

	//全て終了グローバル変数
	allcount=0;//クリア

	//MAIN-TEXT表示
	set_mainanime();

	//調整
	setTimeout(function() {

		set_text("");
		//SUBテキストアニメ
		set_subanime();

	},7000);

}

//MAINテキストアニメ
function set_mainanime() {

	textcount=0;//カウント、グローバル

	textChip=[];//クリア
	//MAINテキストアニメーション
	var maintext_W=0;
	var text_spc=0;//テキストスペース
	var center=true;

	//コンテナ収容インスタンス配列取得、やはりこちらしかない
	//サイズ,フォント,色,虹色,スペース,文字
	textChip=createMoveText2("40px","Arial",maintext_color,rainbowSet,text_spc,mainstring);

	var textlen=mainstring.length;
	//テキスト用グローバル変数
	textmax=textlen;

	//全幅の計算を先に計算
	for (var i=0; i < textlen; i++) {
		maintext_W +=textChip[i].width;
		if(i < textlen) {maintext_W +=text_spc;}
	}
	//コンテナ中央補正
	if (center) {maintextcontainer.x=(canvasWidth-maintext_W)/2;}

	//BALL番号
	var ballno=Math.floor(Math.random()*8);

	//BALLインスタンスを作る
	for (var i=0; i < textlen; i++) {

		//Circleインスタンス
		if (ballno == 0) {
			//(x,y,r,color,rainbow,len,no)
			ballChip[i]=createBall(0,0,20,"#FFFFFF",true,textlen,i);
		}
		//Starインスタンス
		if (ballno == 1) {
			//(x,y,r,color,rainbow,len,no)
			ballChip[i]=createStar(0,0,15,"#FFFFFF",true,textlen,i);
		}
		//Rectインスタンス
		if (ballno == 2) {
			//(x,y,w,h,color,rainbow,len,no)
			ballChip[i]=createRect(0,0,40,40,"#FFFFFF",true,textlen,i);
		}
		//RoundRectインスタンス
		if (ballno == 3) {
			//(x,y,w,h,r,color,rainbow,len,no)
			ballChip[i]=createRoundRect(-20,-20,40,40,5,"#FFFFFF",true,textlen,i);
		}
		//Lineインスタンス
		if (ballno == 4) {
			//(x,y,w,h,color,rainbow,len,no)
			ballChip[i]=createLine(0,0,30,40,"#FFFFFF",true,textlen,i);
		}
		//Leafインスタンス
		if (ballno == 5) {
			//(x,y,w,h,color,rainbow,len,no)
			ballChip[i]=createLeaf(0,0,40,40,"#FFFFFF",true,textlen,i);
		}
		//Ellipseインスタンス
		if (ballno == 6) {
			//(x,y,w,h,color,rainbow,len,no)
			ballChip[i]=createEllipse(-10,-20,20,40,"#FFFFFF",true,textlen,i);
		}
		//ランダムBallインスタンス
		if (ballno == 7) {
			//(w,h,r,color,rainbow,len,no)/w,hは範囲 50x50-100x100
			ballChip[i]=createRandomBall(80,80,2,"#FFFFFF",false,textlen,i);
		}

		//ID
		ballChip[i].id=i;

		//TEXTが半角スペースの場所はgraphics.clear()/非表示
		if(textChip[i].text == ' ') {ballChip[i].graphics.clear();}

		//陰影はつけていない
		//ballChip[i].shadow=shadow2;
		//ランダム位置ポジション保存
		//globalToLocal
		var point=maintextcontainer.globalToLocal(Math.random()*canvasWidth,Math.random()*canvasHeight);
		moveBallPosx[i]=point.x;
		moveBallPosy[i]=point.y;

	}

	//パスのランダム選定/6種
	var path_no=Math.floor(Math.random()*6);
	if (pathRandom) {
		pathdata=path_no;
	}

	//パターン番号
	var pattern_no=Math.floor(Math.random()*5);
	//パターン番号 ポイント固定=0 移動=1 中央=2 画面ランダム=3 指定位置=4
	var pointtype_no=pointType;
	if (patternRandom) {
		//ランダム指定
		pointtype_no=pattern_no;
	}

	//遅延保存
	var delay_st=[];
	//多目的判定用フラグ/未使用もあり
	var chgxyflag=Math.floor(Math.random()*5);
	//多目的用2
	var chgflag=Math.floor(Math.random()*3);
	var chgflag2=Math.floor(Math.random()*3);
	var chgflag3=Math.floor(Math.random()*3);//ガイド用
	//逆転フラグ
	var chg_v=Math.floor(Math.random()*2);
	if (chg_v < 1) {chg_v=-1;}

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

	//回転
	var rotate_no=(chgflag-1)*360;//正逆、なし
	//スケール
	var scls=scaledata[Math.floor(Math.random()*scaledata.length)];

	//alphaの調整
	var alpha_no=0;
	if (scls < 0.2) {alpha_no=1;}

	var sh=textlen-1;
	var k=0;
	var flag=-1;

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

		//ID
		textChip[i].id=i;
		//addChild
		maintextcontainer.addChild(textChip[i]);

		//ポジション取得
		textPosx[i]=textChip[i].x;
		textPosy[i]=textChip[i].y;

		//ポイント固定
		if (pointtype_no == 0) {
			textChip[i].x=guide_w;
			textChip[i].y=guide_h;
			//1 ガイド高さ下方不変
			if (pathdata == 1) {textChip[i].y =keepguide_h*-1;}
		}
		//ポイント移動
		if (pointtype_no == 1) {
			textChip[i].x=guide_w+textPosx[i];
			textChip[i].y=guide_h;
			//1 ガイド高さ下方不変
			if (pathdata == 1) {textChip[i].y =keepguide_h*-1;}
		}
		//強制中央に修正
		if (pointtype_no == 2) {
			textChip[i].x=maintext_W/2;
			textChip[i].y=0;
		}
		//画面ランダム
		if (pointtype_no == 3) {
			//globalToLocal
			var point=maintextcontainer.globalToLocal(Math.random()*canvasWidth,Math.random()*canvasHeight);
			textChip[i].x=point.x;
			textChip[i].y=point.y;
		}
		//ステージ内指定位置
		if (pointtype_no == 4) {
			//globalToLocal
			var point=maintextcontainer.globalToLocal(stagePoint_x,stagePoint_y);
			textChip[i].x=point.x;
			textChip[i].y=point.y;
		}

		//MOVEポジション保存
		movePosx[i]=textChip[i].x;
		movePosy[i]=textChip[i].y;

		//セット
		textChip[i].rotation=rotate_no;
		textChip[i].alpha=alpha_no;//調整
		textChip[i].scaleX=scls;
		textChip[i].scaleY=scls;
		//スケール保存
		keepScale=scls;
		//回転保存逆転あり
		keepRote=rotate_no*-1;//設定の逆転
		//alpha保存
		keepAlpha=alpha_no;

		//delay計算/現在文字列順
		delay_st[i]=base_time*i;

		if (delay_no == 0) {delay_st[i]=base_time*(sh-i);}//逆順
		if (delay_no == 1) {delay_st[i]=Math.abs(i-sh/2)*base_time;}//中から
		if (delay_no == 2) {delay_st[i]=Math.abs(Math.abs(i-sh/2)-textlen/2)*base_time;}//外から

		//交互遅延
		if (chgflag2 == 1) {
			if (flag == 1) {delay_st[i] +=delayed_time;}
		}

		k ++;
		flag *=-1;
	}

	//TEXT
	//set_text("");

	//delayの最大値を求める
	var max_delay=Math.max.apply(null,delay_st);

	//速度補正
	var speed_v=speed;
	//pathdata3.5番 速度1.5倍補正
	if (pathdata == 3 || pathdata == 5) {speed_v *=1.5;}

	var flag=-1;
	//Tween
	for (var i=0; i < textlen; i++) {

		var pathdata_v;
		if (pathdata == 0) {pathdata_v=[textPosx[i],textPosy[i], 100+textPosx[i],-150, 200+textPosx[i],0, 300+textPosx[i],150, movePosx[i],movePosy[i]];}//1
		if (pathdata == 1) {pathdata_v=[textPosx[i],textPosy[i], 50+textPosx[i],-150, 250+textPosx[i],-75, 400+textPosx[i],0, movePosx[i],movePosy[i]];}//2
		if (pathdata == 2) {pathdata_v=[textPosx[i],textPosy[i], -50+textPosx[i],100, -100+textPosx[i],0, -150+textPosx[i],-150, movePosx[i],movePosy[i]];}//3
		if (pathdata == 3) {pathdata_v=[textPosx[i],textPosy[i], 200+textPosx[i],-150, 150+textPosx[i],0, 100+textPosx[i],100, 50+textPosx[i],0, 0+textPosx[i],-150, movePosx[i],movePosy[i]];}//4
		if (pathdata == 4) {pathdata_v=[textPosx[i],textPosy[i], 50+textPosx[i],200, movePosx[i],movePosy[i]];}//5
		if (pathdata == 5) {pathdata_v=[textPosx[i],textPosy[i], 100+textPosx[i],-135, -50+textPosx[i],-70, -200+textPosx[i],50, 50+textPosx[i],70, 250+textPosx[i],50, movePosx[i],movePosy[i]];}//6

		//Tween
		var twn=createjs.Tween.get(textChip[i]);
		twn.wait(delay_st[i])
		.to({guide:{path:pathdata_v,orient:false,start:1,end:0},rotation:0,scaleX:1,scaleY:1,alpha:1},speed_v)//右用
		.to({x:textPosx[i],y:textPosy[i],rotation:0},50)

		.wait(50).to({x:textPosx[i],y:textPosy[i]},50)
		.wait(100).to({scaleX:2,scaleY:2},50)
		.wait(100).to({scaleX:1,scaleY:1},200);

		if (chgflag == 0) {
			twn.wait(1000).to({y:-30*flag},400)
			.to({y:textPosy[i]},100);
		}

		twn.call(setshadow)//shadow
		.wait(max_delay-delay_st[i])//最大値利用時間差吸収
		.wait(1000)
		.to({scaleX:2,scaleY:2,rotation:360*chg_v},1000)
		.to({rotation:0},1)
		.wait(1000)
		.to({scaleX:1,scaleY:1},500)
		.wait(3000)

		.wait(delay_st[i])
		.to({scaleX:.1,scaleY:.1},500)
		.call(chgball)
		.to({x:moveBallPosx[i],y:moveBallPosy[i],scaleX:3,scaleY:3,rotation:360*chg_v,alpha:0},2000)
		.wait(max_delay)
		.to({x:textPosx[i],y:textPosy[i],scaleX:.1,scaleY:.1,rotation:0,alpha:1},1000)
		.call(chgball2)
		.wait(500)
		.to({scaleX:1.5,scaleY:1.5},500)
		.to({scaleX:1,scaleY:1},100)
		.wait(3000)
		.to({x:canvasWidth*chg_v},1000)
		.wait(max_delay)
		.to({x:canvasWidth*chg_v*-1},1)
		.to({x:textPosx[i]},1000)
		.wait(1000)

		.wait(max_delay-delay_st[i])//最大値利用時間差吸収
		.wait(4000)
		.to({scaleX:-2,scaleY:1},1000)
		.to({scaleX:-1,scaleY:1,rotation:360*chg_v},800)
		.to({rotation:0},1)
		.to({scaleX:1,scaleY:1},1000)
		.wait(8000)
		.wait(delay_st[i])
		.call(resetshadow)//shadow-clear
		.wait(500)
		.to({guide:{path:pathdata_v,orient:false,start:0,end:1},scaleX:keepScale,scaleY:keepScale,alpha:keepAlpha,rotation:keepRote},speed_v)
		.call(function(){
			//終了
			if (textcount == textmax-1) {finshtextAll();}
			textcount +=1;//グローバルの事
		});

		flag *=-1;

	}

}

//SUBテキストアニメ、ガイドなし
function set_subanime() {

	textChip2=[];//クリア

	//SUBテキストアニメーション
	var subtext_W=0;
	var text_spc=0;//テキストスペース
	var center=true;
	textcount2=0;

	//インスタンス配列取得
	//サイズ,フォント,色,虹色,スペース,文字
	textChip2=createMoveText("20px","Arial","#CCCCCC",false,text_spc,substring);
	var textlen=substring.length;

	textmax2=textlen;

	//ランダム配置のため全幅の計算を先に
	for (var i=0; i < textlen; i++) {
		subtext_W +=textChip2[i].width;
		if(i < textlen) {subtext_W +=text_spc;}
	}
	//コンテナ中央補正
	if (center) {subtextcontainer.x=(canvasWidth-subtext_W)/2;}

	//移動
	var delay_st2=[];
	var k=0;
	var flag=-1;

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

		//addChild
		subtextcontainer.addChild(textChip2[i]);
		//ポジション取得
		textPosx2[i]=textChip2[i].x;
		textPosy2[i]=textChip2[i].y;

		//ランダム移動
		//globalToLocal
		var point=subtextcontainer.globalToLocal(Math.random()*canvasWidth,Math.random()*canvasHeight);
		textChip2[i].x=point.x;
		textChip2[i].y=point.y;

		//MOVEポジション保存
		movePosx2[i]=textChip2[i].x;
		movePosy2[i]=textChip2[i].y;

		textChip2[i].scaleX=0;
		textChip2[i].scaleY=0;

		//delay
		delay_st2[i]=200*i;

		k ++;
		flag *=-1;
	}

	//delayの最大値を求める
	var max_delay2=Math.max.apply(null,delay_st2);

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn2=createjs.Tween.get(textChip2[i])
		.wait(delay_st2[i])
		.to({x:textPosx2[i],y:textPosy2[i],scaleX:1,scaleY:1},1000)//IN
		.wait(max_delay2-delay_st2[i])//最大値利用時間差吸収
		.wait(22000)
		.wait(delay_st2[i])
		.to({scaleX:1.5,scaleY:1.5},200)
		.to({x:movePosx2[i],y:movePosy2[i],scaleX:0,scaleY:0},1000)//OUT
		.call(function(){
			//終了
			if (textcount2 == textmax2-1) {finshtextAll2();}
			textcount2 +=1;//グローバルの事
		});
	}

}

//BALLグラフィック流し込み
function chgball () {
	var no=this.id;
	this.getChildAt(1).visible=false;
	//this.getChildAt(0).graphics.clear();
	this.getChildAt(0).graphics=ballChip[no].graphics;
}
function chgball2 () {
	var no=this.id;
	this.getChildAt(0).graphics.clear();
	this.getChildAt(1).visible=true;
}

//テキストshadow処理
function setshadow() {
	var no=this.id;
	this.getChildAt(1).shadow=shadow2;
	//this.shadow=shadow2;
}
function resetshadow() {
	var no=this.id;
	this.getChildAt(1).shadow=null;
	//this.shadow=null;
}

//MAINテキスト終了
function finshtextAll () {

	set_text("ISANDA");

	//welcome画像FadeIn
	welcomeImage2.alpha=0;
	welcomeImage2.y=20;
	welcomeImage2.visible=true;
	var twn3=createjs.Tween.get(welcomeImage2)
	.to({y:0,alpha:1},600)//FadeIn
	.wait(2000)
	.to({y:20,alpha:0},600)//FadeOut
	.call(function(){
		//welcome画像非表示
		welcomeImage2.visible=false;
		finshAll();
	});
}

//SUBテキスト終了
function finshtextAll2 () {
	finshAll();
}

//全て終了
function finshAll () {

	//全て終了グローバル変数
	allcount +=1;

	//2個のアニメ終了
	if (allcount == 2) {
		//調整
		setTimeout(function() {
			//リセット処理
			reset_parts();
		},1000);
	}
}

//reset_parts
function reset_parts() {

	set_text("CLEAR / RESET");

	//removeAllTweens バージョン4.2.1
	//createjs.Tween.removeAllTweens();

	//個別removeTweens
	for (var i=0; i < textmax; i++) {
		//removeTween
		createjs.Tween.removeTweens(textChip[i]);
	}
	for (var i=0; i < textmax2; i++) {
		//removeTween
		createjs.Tween.removeTweens(textChip2[i]);
	}
	createjs.Tween.removeTweens(welcomeImage2);

	//MAIN-TEXTコンテナの中を削除
	maintextcontainer.removeAllChildren();
	//SUB-TEXTコンテナの中を削除
	subtextcontainer.removeAllChildren();

	//調整
	setTimeout(function() {

		//繰り返し
		set_prologue();

	},4000);

}

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


//コンテナ収容MOVEテキストインスタンスを作る
//この形式でなければ旨く行かない
function createMoveText2(size,font,color,rainbow,space,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

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

		//コンテナ収容形
		var box=new createjs.Container();
		var s=new createjs.Shape();
		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		//1文字入れる
		t.text=str.charAt(i);
		//幅高さ取得
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();
		//受け渡し用
		t.width=w;
		t.height=h;
		//原点中央テキストのみ重要
		t.regX=w/2;
		t.regY=h/2;
		//コンテナ/受け渡し用重要
		box.width=w;
		box.height=h;

		//虹色
		if (rainbow) {
			t.color=rainbowColor(i,len,80,40);//rainbow
			//t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}
		//位置計算
		tpos_x +=w/2;//half

		//コンテナを文字位置にあわせる
		box.x=tpos_x;
		box.y=tpos_y;//0

		//add
		box.addChild(s,t);

		//位置加算補正
		tpos_x +=(w/2+space);//half+space

		//配列に入れる
		chip[i]=box;
	}
	//戻り配列
	return chip;
}

//標準MOVEテキストインスタンスを作る
function createMoveText(size,font,color,rainbow,space,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;

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

		//文字インスタンスを作る
		var t=new createjs.Text("",fontdata,color);
		//1文字入れる
		t.text=str.charAt(i);
		//幅高さ
		var w=t.getMeasuredWidth();
		var h=t.getMeasuredHeight();
		//原点中央
		t.regX=w/2;
		t.regY=h/2;
		//虹色
		if (rainbow) {
			t.color=rainbowColor(i,len,80,40);//rainbow
			//t.color=createjs.Graphics.getHSL(i/len*360,100,50);//直接
		}
		//位置
		tpos_x +=w/2;//half
		t.x=tpos_x;
		t.y=tpos_y;//0
		//位置加算
		tpos_x +=(w/2+space);//half+space
		//大きさ重要
		t.width=w;
		t.height=h;
		//
		chip[i]=t;
	}
	//戻り配列
	return chip;
}

//Circleインスタンスを作る
function createBall(x,y,r,color,rainbow,len,no) {
	var c=color;
	if (rainbow) {
		c=createjs.Graphics.getHSL(no/len*360,100,50);//直接
	}
	var s=new createjs.Shape();
	//ベタ
	//s.graphics.s().beginFill(c).drawCircle(x,y,r);
	//グラデ、若干効果
	s.graphics.s().beginLinearGradientFill([c,"#FFFFFF"],[0,1],0,0,0,r).drawCircle(x,y,r);
	//原点
	s.regX=0;
	s.regY=0;
	return s;
}
//Starインスタンスを作る
function createStar(x,y,r,color,rainbow,len,no) {
	var c=color;
	if (rainbow) {
		c=createjs.Graphics.getHSL(no/len*360,100,50);//直接
	}
	var s=new createjs.Shape();
	s.graphics.s().beginFill(c).drawPolyStar(0,0,r,5,.65,-90);
	//原点
	s.regX=0;
	s.regY=0;
	return s;
}
//Rectインスタンスを作る
function createRect(x,y,w,h,color,rainbow,len,no) {
	var c=color;
	if (rainbow) {
		c=createjs.Graphics.getHSL(no/len*360,100,50);//直接
	}
	var s=new createjs.Shape();
	s.x=x;
	s.y=y;
	s.graphics.s().beginFill(c).drawRect(-w/2,-h/2,w,h);
	//原点
	s.regX=0;
	s.regY=0;
	return s;
}
//RoundRectインスタンスを作る
function createRoundRect(x,y,w,h,r,color,rainbow,len,no) {
	var c=color;
	if (rainbow) {
		c=createjs.Graphics.getHSL(no/len*360,100,50);//直接
	}
	var s=new createjs.Shape();
	s.graphics.s().beginFill(c);
	operaRoundRect(s,x,y,w,h,r);
	//原点
	s.regX=0;
	s.regY=0;
	return s;
}
//Lineインスタンスを作る
function createLine(x,y,w,h,color,rainbow,len,no) {
	var c=color;
	if (rainbow) {
		c=createjs.Graphics.getHSL(no/len*360,100,50);//直接
	}
	var s=new createjs.Shape();
	s.graphics.ss(w,"round").s(c).moveTo(0,-h/2).lineTo(0,h/2);
	//原点
	s.regX=0;
	s.regY=0;
	return s;
}
//Leafインスタンスを作る
function createLeaf(x,y,w,h,color,rainbow,len,no) {
	var c=color;
	if (rainbow) {
		c=createjs.Graphics.getHSL(no/len*360,100,50);//直接
	}
	var s=new createjs.Shape();
	s.graphics.s().beginFill(c).moveTo(0,-h/2).quadraticCurveTo(w/2,0,0,h/2).quadraticCurveTo(-w/2,0,0,-h/2);
	//原点
	s.regX=0;
	s.regY=0;
	return s;
}
//Ellipseインスタンスを作る
function createEllipse(x,y,w,h,color,rainbow,len,no) {
	var c=color;
	if (rainbow) {
		c=createjs.Graphics.getHSL(no/len*360,100,50);//直接
	}
	var s=new createjs.Shape();
	s.graphics.s().beginFill(c).drawEllipse(x,y,w,h);
	//原点
	s.regX=0;
	s.regY=0;
	return s;
}
//ランダムBALLインスタンス
function createRandomBall(w,h,r,color,rainbow,len,no) {
	var c=color;
	if (rainbow) {
		c=createjs.Graphics.getHSL(no/len*360,100,50);//直接
	}
	var s=new createjs.Shape();
	//5-8個
	var k=Math.floor(Math.random()*4)+5;
	for (var i=0; i < k; i++) {
		var x_v=Math.floor(Math.random()*w)-w/2;
		var y_v=Math.floor(Math.random()*h)-h/2;
		s.graphics.s().beginFill(c).drawCircle(x_v,y_v,r);
	}
	//原点
	s.regX=0;
	s.regY=0;
	return s;
}
//Oyatu画像インスタンスを作る/Matrix処理
function createOyatu(bitmap,r) {

	//画像の大きさ
	var w=bitmap.image.width;
	var h=bitmap.image.height;
	var matrix=new createjs.Matrix2D();
	//位置修正
	matrix.translate(-w/2,-h/2);

	var s=new createjs.Shape();
	//画像流し込み
	if (w > 0) {
		s.graphics.ss(1).s("#000000").beginBitmapFill(bitmap.image,"no-repeat",matrix).drawCircle(0,0,30);
	} else {
		//画像なしベタ
		s.graphics.ss(1).s("#000000").beginFill("#FFFFFF").drawCircle(0,0,30);
	}
	
	//原点
	s.regX=0;
	s.regY=0;
	return s;
}

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

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

//VIEWTEXT
function set_text(t) {
	if (textUse) {
		viewtext.text=t;
	}
}

//START
init();

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


CSS

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


/*日本語 createJS033.css*/

#demo-wrap {
text-align:center;
}

#image-box {
position:relative;
top:0;left:0;
width:640px;
height:300px;
margin:0 auto;
padding:0;
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:#FFFFFF;
}

#image-box #mainCanvas {
border-radius:10px;
}
canvas {
border-style:none;
background-color:transparent;
}

.radius {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-box-border-radius:10px;
-ms-border-radius:10px;
}

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


簡単な説明


多少の問題も有りますが以前の、標準MOVEテキストインスタンスを作る createMoveText関数 を改造して作ります。
説明が「難解」ですが、図と合わせて「テキトウ」に理解下さい。


テキストアニメーション、Tweenの途中でグラフィックを挿入する

色々な方法は有ろうかと思いますが、テキストの間隔を維持しながらのTweenは以外と面倒です。Tweenの途中でグラフィックを挿入するのは中にShapeクラスが有れば簡単ですが、当方のものは軽量にするためにTextクラスのみの構造になっています。


1. 簡単な方法は、テキストの図形(例、★◇○ など)を入れれば良いが、日本語環境以外の場合は文字化けする可能性がある(環境が違うので確認は出来ない)。Shapeクラスを入れてグラフイックで処理すればテキスト図形と違い問題は出ない。
2. 例えば下図の様に、テキスト階層の上に画像階層を置き、「表示」「非表示」の切り替えなどでゴマカス方法があるが、Tween が複雑な場合は大変である。今回はこの方法は取らない。
3. Textクラス、Shapeクラスをコンテナクラスでラップした構造を作るのが1番良い。テキストの並びを維持した構造は少しクセが有り特殊になるが、今回はこの方法を取る。(グラフィックにズレが出て、挿入にコツが要る)
4. 今まで説明はしていないが、Textクラスの「文字要素」には見えないが「半角スペース」も存在する。グラフィックを挿入した場合に、この「スペース」にも描画するため区別して処理する必要がある。


[説明図]

注意、テキスト階層の上に画像階層を置く方法は今回はしない。(例えばの図です)

 

Shapeクラスを内包したテキスト要素を作る

コンテナ収容MOVEテキストインスタンスを作る、createMoveText2関数 になります。この形式でなければ旨く行かない場合がある。(構造は下の図の様になります)


Shapeクラス、コンテナクラスを大きさのあるように描いてあるが、実際は点である。

 

テキストの間隔を維持したままでShapeクラスを内包した場合も、各部材を中央に配置する事は共通ですが、上図の様に原点(00位置)が違います。(色々と方法を試したが旨く行かない場合があるので一応この形式で作る)


1. Textクラス、Shapeクラスをコンテナクラスでラップしたボタンなどと同じ構造を作る。
Textクラスは必ず中央補正が必要で有り、textAlign center は絶対設定しない事(文字が揃わない)
但し、Shapeクラス、Containerクラスの 原点(00) は中央補正しません。今回はこの方法です。

(中央補正するとTextクラス文字、グラフイックが中央からズレてしまうなど不具合が発生して使えない)
Textクラスのみでは有りませんから、若干重くは成りますが動作に支障は有りません。
モウ1回、コンテナクラスでラップする方法もあるが、構造が複雑で色々面倒、より重く成りますので止めます。
2. 半角スペースがあるために、グラフイックのない空Shapeに成ります
3. 問題はグラフイックを流し込む場合にグラフイックの中央を 00 に成るように描画しなければならない面倒さが発生します。(マトリックスクラスで補正しても良い)
4. Tween は通常のTextクラスだけのTween処理と同じですから、意外と作業が楽になります。
5. 陰影は中のTextクラスに処理しました。全体のコンテナクラスに処理する事も可能です。
6. グラフイックの必要な時点でグラフイックを流し込み、Textクラスは非表示にしています
7. 半角スペースのグラフイックはクリアして削除しています。(最初から流し込まない方法もあるが、、、)
8. 実際に作らないと理解し難いと思います。モット良い方法があれば、考えてください。


一般的に、ボタンなどはTextクラス、Shapeクラスは原点そのままで作り、ラップのコンテナクラスで中央補正します。
(Textを中央揃えにするために、textAlign center を設定するのが通常と思う)

しかし、この作りでは最初からTextクラスを regXY で中央補正していますから少し違ってきます(改造の時は注意)。
取り合えずここでは、文字の間隔を揃える事が最重要である
よって、グラフイック等の修正が発生するのは仕方がない、面倒でも修正すれば済む話である。


Shapeクラスを内包したテキスト要素

メインテキストですが、createMoveText2()で、配列 textChip で受け取ります、インスタンスのオブジェクトが入ります。
Shapeクラスを内包しないとグラフイックを挿入出来ませんから、文字列には「半角スペース」が有るために最初は、空のShapeを入れます。必要な時にグラフイックを挿入して使用します。

Tweenは、Shapeクラス内包でも他の文字のTweenと全く同じですので便利です。但し、中のTextクラスにアクセスする時に階層があることに注意下さい。


//サイズ,フォント,色,虹色,スペース,文字
textChip=createMoveText2("40px","Arial",maintext_color,rainbowSet,text_spc,mainstring);

作りにクセが有りますので改造などは注意、「大文字」「小文字」の文字列が見易くキレイに揃わなければ問題があると判断ください。(小文字位置がずれる、文字の原点が違い回転が変、など、、、)


配列textChipには、X方向の文字の間隔に整えられたインスタンスを返しますから、最初に位置情報を保存します。その後移動させてTweenで所定の位置に戻すわけです。Y位置は 0 にして作業を簡単にしている。
全てこの方法で作っています。但し、IN OUT は同じガイドパスを使用して、start end で方向を切り替えていますので少し戸惑うと思います。


//MAINテキストアニメ
function set_mainanime() {

	前後略す

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

		//ID
		textChip[i].id=i;
		//addChild
		maintextcontainer.addChild(textChip[i]);

		//ポジション取得を最初に、重要です
		textPosx[i]=textChip[i].x;
		textPosy[i]=textChip[i].y;

		前後略す
	}

	前後略す
}

Shapeクラスの無い通常のテキスト要素

サブテキストですが、createMoveText()で、配列 textChip2 で受け取ります、インスタンスのオブジェクトが入ります。
以前に使用していたもので、虹色にしていないだけです(false)。虹色にしない場合は「指定色」が有効になります。
軽量化のために、Textクラスのみで構成されていますので、Shapeクラスを add する事も出来ませんからグラフイックは挿入出来ません。

Textクラスですから図形文字は挿入出来ますが、グラフイックを使用するとなればアイデアが必要で、且つ困難である。


//サイズ,フォント,色,虹色,スペース,文字
textChip2=createMoveText("20px","Arial","#CCCCCC",false,text_spc,substring);

当方はChrome重視で作っています。Textクラスのみにしたのは、Chromeでの動作が重いことも有ります。Chromeはキャンバス処理が重いし描画品質も悪い、いずれは直るでしょうが。(デスプレーの種類によっても違い有り)


半角スペースの扱い

文字列の「文字の間隔」は配列に保存されますから、「半角スペース」を除外し「スペースの幅分」を修正しての処理も出来ますが、何かと面倒になるので除外していません。(透明人間的存在だ)
その為Shapeクラスを内包した時に、「半角スペース」の有無の判定が必要であるがソウ面倒でもない。「透明人間」がTweenでブンブン飛び回っている状態であるから、この辺は制作時の自由課題である。


「透明人間」にバケツで水をぶっかけろ。ミエルゼ!

 

グラフイックと文字を同時に表示させる

現在グラフイック表示の場合は文字を非表示にしていますが、グラフイックと文字を同時に表示させる事も可能です。
文字の間隔で配置していますので、文字がグラフイックで隠れますから、グラフイックに透明度を設定するか、或いは文字間隔(図形の間隔で一定にする)を変えれば良い訳です。
これらも自由です。


これは簡単な動作のサンプルです

このJSは、簡単な動作のサンプルですから未完成の形になります。本格的に利用するならば、目的に合わせて修正、加筆しなければなりません。


登録ガイドパス

下記の様なデータになっています。


ガイドパス及び関連設定などは、前ページのものと同じですからそちらを参照下さい

【参照】当方の記事: CreateJS MotionGuidePlugin利用、複数のガイドパス登録でテキストをMotionTweenさせる


インスタンス(テキスト)個別の動作から全体の動作に移行させる

この「デモ」では最初は、「文字個別」でTweenさせ、途中で「文字全体」のTweenに変化させています。
文字の出現順序にwait()を利用していますので、wait()値を同じに補正する事により時間をあわせています。


下の例では、始め個別にTweenして途中で全体の動きに変えているその後また元に戻している。delay_st[i]は個別の遅延時間です。


//delayの最大値を求める
var max_delay=Math.max.apply(null,delay_st);

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

.wait(max_delay-delay_st[i])//最大値利用時間差吸収
.wait(1000)//1秒まつ
.to({rotation:360*chg_v},1000)//全体で右または左に1回転

略

.wait(delay_st[i])//全体から個別動作に戻す

この様な技法(ゴマカシ)は自分で考えて行くしか方法は有りません。資料情報がない!


Shadowフィルターとフエード

Shadowフィルターは簡単に陰影を付けられるので大変便利ですが、文字にフィルターを掛けたまま「フエード」させると、汚くなる場合があります(フィルター処理で陰影内部も染まる)。フィルターの特性ですから直りません。
背景色などによっては目立たない事もあるが、ワタシの場合、INの時、フエード後に文字にフィルター処理して、OUTでは直前にフィルター解除しています。

マシン環境がよくない場合は「Shadowフィルター&フエード」は大変重く成ります。最近のマシンでは問題有りません。


要素の中には、Textクラス、Shapeクラス、と2つ有りますから、getChildAt() で区別します。場合によっては、ラップのContainerクラスに処理しても良い。(但し、グラフィックにも陰影が付く)



var shadow2=new createjs.Shadow("#FFFFFF",0,0,6);

-------------------------------------------------
陰影を付ける
call(setshadow)//shadow

陰影をクリア
call(resetshadow)//shadow-clear

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

//テキストshadow処理
function setshadow() {
	var no=this.id;
	this.getChildAt(1).shadow=shadow2;
	//this.shadow=shadow2;
}
function resetshadow() {
	var no=this.id;
	this.getChildAt(1).shadow=null;
	//this.shadow=null;
}

Shadowフィルターの色は、シミュレーションの都合で #FFFFFF になっています、背景色によっては #000000 の方が良いでしょう。Shadowフィルターがどうしても必要でも有りませんし、この辺は自由です。


グラフィック流し込み

グラフィック流し込みは、事前にballChip[ ]配列にグラフィックを作っていますので取替えるだけです。その際にテキストは非表示にしています。文字要素の中には「テキスト」と「シャープ」があるので getChildAt() で区別しています。


Shapeの重なり順などを変えずに中のグラフィックのみを塗り替える方法で、図形などを変えます。初期時は当方の都合でグラフィックのない空Shape()です。


グラフィックは重ね描きですから、前のグラフィックが残らないように一旦、.graphics.clear() を実行してから、該当のグラフィックを描くのが一般的です。



グラフィック流し込み
chgball()

グラフィッククリア
chgball2()

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

//BALLグラフィック流し込み
function chgball () {
	var no=this.id;
	this.getChildAt(1).visible=false;
	//this.getChildAt(0).graphics.clear();
	this.getChildAt(0).graphics=ballChip[no].graphics;
}
function chgball2 () {
	var no=this.id;
	this.getChildAt(0).graphics.clear();
	this.getChildAt(1).visible=true;
}

このデモでは事前にgraphics.clear()をしているため、chgball()で実行していない
chgball2()の実行前に、グラフィックを再度取り替える時はgraphics.clear()が必要

グラフィック流し込みの場合に必ずclear()します。スクリプトの書き方(代入の方法)にもよりますが、保存配列のデータを使い回しで参照(代入)すると、参照元のグラフィックが消滅する事があります。新規に new してから代入するか、あるいは、clone()でコピーしてから使用すると大丈夫です。


内包のグラフィックについて

グラフィックはShapeクラスで作り中の graphics のみを利用しています。
原点の補正の都合で、この形式専用のグラフィックに成ります、他の用途に使用した場合は表示位置がずれます。
BALLインスタンスは、Circle Star Rect RoundRect Line Leaf Ellipse ランダムBall、の8種類用意しました。
尚、画像挿入のインスタンスの場合は、次ぎの「グラフィックに画像を流し込み使用する」を参照下さい。



文字要素の中の graphics に、事前に作ってあるグラフィックを graphics で代入

this.getChildAt(0).graphics=ballChip[no].graphics;

オイシイカタチ、「おやつガゾウ」をだせ!

 

グラフィックに「おやつ画像」を流し込み使用する


デモではグラフィックに図形を使用しましたが、「おやつ画像」を流し込み表示する時は原点00を中央に補正して処理します。Matrix処理すると簡単に補正できます。
問題は画像の取得の出来ない場合に、Firefox で決定的なエラーになるために、画像取得を判定して、取得出来ない場合はベタの塗りをしてエラーを回避します。( Chrome Safari(Win) IE9 はエラーにはならず画像非表示、その外のブラウザでは不明だ、エラー回避策をとった方が安心)
現在デモでは画像には対応していませんが、下記の様にすれば表示できます。


画像は、Loader()を利用しなくとも早めに Bitmap() で読み込むとグラフイックの beginBitmapFill() に取り込める。読み込みに時間がかかるとエラー(Firefox)になるので「エラー処理」を忘れずに!



//事前にBitmapで画像読み込み、早ければ早いほうが良い
var oyatuImage=new createjs.Bitmap("/main/images/gkf001.gif");

-------------------------------------------------
//BALL番号の確率を変更、8を9に
//var ballno=Math.floor(Math.random()*8);
var ballno=Math.floor(Math.random()*9);

//ballno 8 で表示するように
//画像インスタンス
if (ballno == 8) {
	//bitmap,r
	ballChip[i]=createOyatu(oyatuImage,30);
}
-------------------------------------------------

//画像があるか判定して処理
//Oyatu画像インスタンスを作る/Matrix処理
function createOyatu(bitmap,r) {

	//画像の大きさ、取得できれば画像はある
	var w=bitmap.image.width;
	var h=bitmap.image.height;
	var matrix=new createjs.Matrix2D();
	//位置修正
	matrix.translate(-w/2,-h/2);

	var s=new createjs.Shape();
	//画像流し込み
	if (w > 0) {
		s.graphics.ss(1).s("#000000").beginBitmapFill(bitmap.image,"no-repeat",matrix).drawCircle(0,0,30);
	} else {
		//画像なしベタ/エラー回避
		s.graphics.ss(1).s("#000000").beginFill("#FFFFFF").drawCircle(0,0,30);
	}
	
	//原点
	s.regX=0;
	s.regY=0;
	return s;
}

画像をグラフィック図形に流し込みのは大変便利ですが、beginBitmapFill()の利用には注意が必要です。
画像をBitmap()に変換すれば大きさの取得が出来るため、画像の横幅または高さを調べ画像の「有無」を判定。


グラフィックに画像を埋め込む問題点、代替画像などを用意するなどは、下記ページを参照下さい。

【参照】当方の記事: CreateJS Graphicsクラスの beginBitmapFill() を考える


文字を動かすTweenに付いて

スクリプトで文字を動かすこと自体、AS3でもあまり有りませんでした(面倒すぎるのでFlash自体で作る方が多かったのでしょう)。よって、CreateJSではまだ「資料」が殆んど有りませんから、自作で方法を見つけて行くほか有りません。

1. 色々と追加して楽しんでください。
2. テキストを動かすのはアイデア次第です。
(文字を遅刻させる、マチガイ文字を表示し取り替える、あらぬ所に飛ばして所定の位置に戻す、など、、、)
3. デモでは、skewX skewY を使用していませんが設定すれば、またメチャな動きをします。
4. 良い方法などあれば発表下さい。

スクリプトエラーにならない限りでは、Tween にしろ何であれ試して見なければ判りません。


サブテキスト

今回は、サブテキストを配置してみたがメインテキストとほぼ同じ作りである。Textクラスのみの軽量タイプである。
書き換え次第では色々な動きになるが移動する場所を何処に決めるかでかなり違う。詳細は下記ページなど参照してください。


【参照】当方の記事: CreateJS テキストアニメーション ランダム設定のテスト レインボー色(虹色)


Tween全て終了とリセット処理

「全て終了」は複数のTweenで、またそれぞれのTweenの実行時間など違いますので、デモではアニメを繰り返しているため、メインテキストとサブテキストのTweenが終了した時点を判定して、リセット処理に進み、その後また繰り返す。
一応、リセット処理で「文字要素」のインスタンスを削除、Tweenの削除を行っている。
AS3の時にはメモリを増やさないように不要なものは直ぐに削除するのが慣例のようだった。
この辺は、各自の設計理念で対応すべき事である。


テキストアニメーションについて

AS3の時も、「テキストアニメーション」は殆んど手がける人はいなかった。Fontの埋め込みとか問題が多かったし、テキストクラスに進化も無かったので資料なども少ない。単にワタシが前々から興味を持ち、MX AS3 の場合と作って来たのでそれを元に、CreateJSで動くようにしているだけである。ご覧の通り面倒であるからして興味を持つ人はイナイだろうと思います。
尚且つ「テキストアニメーション」のみでコンテンツは成り立たない。2-3のパーツと組み合わせなければ「絵」に成らない繁雑さがある。(経費が掛かり重くなる、この点はパーテクルと同じだ)
「左巻き回転で文字を動かして何が面白いのだ、アホウ!」と言われるのが積の山である。


使用画像

画像などは原則、使用者が目的に応じ用意します。


背景画像、なし(必要なら用意ください) 640x300。

特製、Welcome画像 320x32 陰影付きPNG isanda2.png

 

オヤツガゾウ 34x61 gkf001.gif

節水に協力クダサイ。水道のアケシメはコマメに!、左巻き回転警報発令中!

 




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


ガイドパス及び関連設定などは、前ページのものと同じですからそちらを参照下さい

【参照】当方の記事: CreateJS MotionGuidePlugin利用、複数のガイドパス登録でテキストをMotionTweenさせる


MotionGuide利用、図形とテキストアニメーション。

【参照】当方の記事: CreateJS 図形テキストをアニメーション、Tween 連続操作と MotionGuideTween の組み合わせ


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]