POPS WEB

 

CreateJS MotionGuidePlugin 利用して、アニメーションを作る一例

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

原則、シミュレーションで「パスデータ」を取得した場合の組み込みの例です。(手書きでパスデータは書けますが)
取得「パスデータ」を使用した、テキストアニメーションの例です。「デモ」では設定を切り替えて見る事が出来ます。
今までとの違いは、複数の「ガイドパス登録」で動かしている点です。ガイドパスをX軸で反転していませんので一応スクリプトは簡単です。設定次第で偶然出来る「面白い動き」を狙っています。

MotionGuide利用、テキストアニメーションのシミュレーション。

【参照】当方の記事: CreateJS MotionGuide利用、テキストアニメーションのシミュレーション

[説明図]

 

1. パスは6種類の中かから選定出来ます。少々ですが動きに違いがあります。(デモ参照)
2. ガイドパスの、Ｘ軸、Ｙ軸反転させていませんので簡単な作りです。
3. テキストアニメーションだけと言う訳には参りませんので、制作には時間がかかります。

DEMO

CreateJS MotionGuidePlugin 利用、複数のガイドパス登録でテキストをMotionTweenさせるの例 (createJS032.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

createJS032.js、ＪＳ名は任意に変更可。easeljs-0.7用 (デモのJSを簡略化しています、シミュレーション部分は削除)

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

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

//メインテキスト
var mainstring="ViVa POPS WEB KOUBOU";
//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;

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

//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 maintextcontainer;
//インスタンス
var welcomeImage;
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;

//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("#000000").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);
	}

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

	//調整
	setTimeout(function() {

		//MAIN-TEXT表示
		set_mainanime();

	},2000);

}

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

	set_text("");

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

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

	//インスタンス配列取得
	//サイズ,フォント,色,虹色,スペース,文字
	//textChip=createMoveText("40px","Arial","#FFFFFF",true,text_spc,mainstring);

	//文字色切り替え
	textChip=createMoveText("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;}

	//パスのランダム選定/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;
	}

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

}

//テキストshadow
function setshadow() {
	this.shadow=shadow2;
}
function resetshadow() {
	this.shadow=null;
}

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

	reset_parts();
}

//reset_parts
function reset_parts() {

	set_text("END");

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

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

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

	//調整
	setTimeout(function() {

		//繰り返し
		set_prologue();

	},2000);

}

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

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

//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) {
	viewtext.text=t;
}

//START
init();

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

CSS

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

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

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

簡単な説明

[説明図]

 

１個のインスタンスでは無く、複数のインスタンスに MotionGuide を設定するために工夫が必要になります。
説明が「難解」ですが、図と合わせて「テキトウ」に理解下さい。

ガイドパス利用の概略

最大の利点はTweenで簡単に曲線に沿ってインスタンスを動かせることです。

1. パスは標準のパス(シミュレーションの)の最終ポイントをずらしただけの簡単なものです(x=500,y=-150)。
標準のパス共、6種類、組み込んでありますので指定可能です。(殆んど最終ポイントは同じの波形)
２次ベジェ曲線ですから、それなりの動きになります。固定の場合はパス波形が変わりますので予期せぬ動きになる。(中央指定、ランダム指定、指定位置、では動きが違う)
2. アニメする場合の速度などの条件で、雰囲気が変わりますので適度に調整します。(動かすテキスト要素数、パスの形状、条件で時間を変えてください)
3. パス情報を書き込み、インスタンス位置の情報を加算するだけですが、Ｘ軸、Ｙ軸反転させていません。(改造の場合はテキストアニメーションのページなどを参照下さい)
4. アニメは IN OUT を表示して見ます。同じパスデータにして、start end を変更しているだけです。
5. インスタンス個別にはパスに沿って動いていますが、全体でみればパスの形と同形に成るとは限りません。
6. テキストは１文字が皆形が違うため、どんな動きをさせてもそれなりに効果があるようです。
7. 設定などはＪＳ上部をご覧下さい。

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

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

登録ガイドパスの使用と変更

下記の様なデータになっています。5番目は「２次ベジェ曲線」1つ、1-3番目は「２次ベジェ曲線」2つの組み合わせ、4.6番目は「２次ベジェ曲線」3つの組み合わせです。構成「２次ベジェ曲線」の個数によりTween時間を変更します。4.6目番使用の場合はTween時間を長くしてください(JSでは1.5倍になるようにした)。
特に、2番目は終端の y値を 150 にして下方に固定して使用してみました。

path:[0,0, 100,-150, 200,0, 300,150, 500,-150];
path:[0,0, 50,-150, 250,-75, 400,0, 500,150]//下方固定
path:[0,0, -50,100, -100,0, -150,-150, 500,-150]
path:[0,0, 200,-150, 150,0, 100,100, 50,0, 0,-150, 500,-150]
path:[0,0, 50,200, 500,-150]//曲線1つ
path:[0,0, 100,-135, -50,-70, -200,50, 50,70, 250,50, 500,-150]

当然、他に作ったパスデータにしても構いません。
上記のパスデータは作った時のものです。最後の値 500,-150 は処理途中に設定ガイド幅、高さなどに変化させています。3-5ピクセル位の値は修正してもさしたる影響は有りません。

実際のガイドパスの組み込み

実際のガイドパスの組み込んで見ます。ガイドパスの１番目を組み込むと下の記述と同じになります。これはインスタンス原点に向かう IN タイプになります。
ガイドパスは、原点、00 より右に向かって描写されていますので、start:1,end:0 で、原点、00 に向かいます。start:0,end:1 では反対向き(OUT)になります。

textPosx[i] textPosy[i]は、インスタンスの位置データですから、ガイドパス位置をインスタンスに合わせるため、x値 を加算して補正しています。(textPosy[i] y位置 は 0 です)

.to({guide:{path:[textPosx[i],textPosy[i], -50+textPosx[i],-100,-100+textPosx[i],0, -100+textPosx[i],200, movePosx[i],movePosy[i]],orient:false,start:1,end:0},rotation:0,scaleX:1,scaleY:1,alpha:1},speed_v)

文字の X位置でずらしているだけ。Y位置は変更の必要のない様に0にして作っている。
もし、X位置の補正をしない場合は、文字を収容しているコンテナの原点(00)に向かいます。

ポイント固定

ガイドパスのデータはそのままで、ガイドパスの終点を固定(ポイント固定)して使用しています。その為に位置が異なれば波形が若干変わりますがそれを利用することにしました。
ポイント移動は終点をも文字位置で補正していますので、波形は変わりません。
よって、表示テキストの全幅、ガイドパスの幅設定などで大きく動きが変わります。モット良い方法が在るかも知れませんが、今回はこの様にしています。

ガイドパスの幅

原則としては、文字全体の幅より少し大きめに設定しますが、この辺は自由です。ガイドパスの幅が小さい(文字全体の幅の半分とか、、)ですと面白い動きになり易い。
IN で「ポイント固定」の場合、最初の文字出現位置は、ガイドパスの幅、高さの位置になります。
「テキストの中央位置」「画面内ランダム位置」の場合は、パスの形が変わりますので、其れなりの予測できない動きになる。(変化があって面白いと理解下さい)

言葉を返せば「イイカゲン」「テキトウ」である。テキトウに動けば「人とネコ」は満足するものです。

ランダムに設定されるもの

殆んどの設定については、JS上部で設定の変更が出来ますが、下記のものはランダムに変わります。

1. 回転と透明度。
2. 拡大率。(JS上部の配列で変更可能)
3. 交互遅延。(確率33%)
4. ガイドパスもランダム設定に出来ますが、動作はマチマチですから満足するかは別問題です。其れなりです。

必要であれば自己責任でスクリプトで変更下さい。

スケールデータの登録変更

下記の様にスケールのデータを登録変更出来ます。但し、縦横とも同じ拡大率が使用されますが、登録次第では出現率を制御できます。登録配列の数値がランダムに実行されます。
初期「透明度」は 0 ですから「フェードイン」します。標準では拡大率 0.2 以下(例 0.15 0.1) の場合は、透明度の変更はしませんのでフエードしない設定になっています。

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

var scaledata=[0,0,0,0,0,0,0,1,1,2,4,6,10];//0の確率が増える

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

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

必要であればこの辺、自己責任でスクリプトを変更下さい。書き換えなどは自由です。

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

この「デモ」では最初は、「文字個別」で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フィルター＆フエード」は大変重く成ります。最近のマシンでは問題有りません。

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

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

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

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

//テキストshadow
function setshadow() {
	this.shadow=shadow2;
}
function resetshadow() {
	this.shadow=null;
}

Shadowフィルターの色は、シミュレーションの都合で #FFFFFF になっています、背景色によっては #000000 の方が良いでしょう。

文字を動かすTweenに付いて

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

1. 色々と追加して楽しんでください。
2. テキストを動かすのはアイデア次第です。
3. 良い方法などあれば発表下さい。

スクリプトエラーにならない限りでは、Tween にしろ何であれ「イイカゲン」「テキトウ」「マチガイ」の方が新しい動きなどの発見に繋がる事は事実です。最重要なことは如何に「ゴマカス」かだ！。

使用画像

背景画像である、Welcome画像は別途用意下さい。ここでは、640x300サイズです。

---

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

インスタンスが変わっただけで、テキストと同じです。以下のテキストアニメーション記事を参照下さい。

【参照】当方の記事: CreateJS MotionGuidePlugin 利用して、テキストアニメーションを作る一例です

MotionGuide利用、テキストアニメーションのシミュレーション。

【参照】当方の記事: CreateJS MotionGuide利用、テキストアニメーションのシミュレーション

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

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

スクリプトで文字を動かすのは AS3 でも殆んど有りませんが、私は MX時代から「コッテ」います。
以上です。