POPSブログ

CreateJS WebFont テキストアニメーション

256

  Category:  javascript2013/10/25 pops 

テキストアニメーションで、一番問題になるのがフォントの種類の指定が容易に出来ないことです。Google WebFont を利用してテキストをアニメーションして見ます。 英字のみですが最近は種類も増えましたので、大変便利です。
easeljs-0.7 でのテストです。

 

CreateJS WebFont テキストアニメーションのテスト


フォントは 表情、感情、個性、を持ちますので、その時のコンテンツ表現に最適なフォントを使用するのも方法の一つで、ビジュアルデザインに大きく影響を与える要素です。
Google WebFont は簡単に取り込み使用出来ます。


DEMO


CreateJS WebFont テキストアニメーションのテストデモ、(createJS041.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

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


//日本語
//createJS041.js
//Google WebFont
//デモ用テキストアニメーション

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

//Webフォント
//Plaster/Limelight/Doppio One/Michroma/Bevan/Alike/
var webfont_name="Limelight";
//Webフォント取得判定
var web_font=false;

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

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

//メインテキスト
var mainstring="ViVa POPS WEB KOUBOU";
//メインテキスト表示位置
var mtcontainer_x=100;//中央補正しない場合
var mtcontainer_y=120;

//サブテキスト/中央
var substring="O.MO.TE.NA.SHI. Welcome to my site. MAIDO!";
var subcontainer_y=180;

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

//ステージ
var stage;
//Object
var canvasObject;
//box
var backrect;
var welcomeImage;
var container;
var btncontainer;
//TEXT
var viewtext;

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

//SUB-TEXT
var subtextcontainer;
//MOVE-TEXT
var textChip2=[];
var textPosx2=[];
var textPosy2=[];

//グローバル変数
var textlen=0;
var subtextlen=0;
var textcount=0;
var subtextcount=0;
//全て終了判定
var allcount=0;

//------------------------------------------------------
//shadowフィルター
var shadow=new createjs.Shadow("#000000",0,0,4);

//click-btn
var myhitBtn;

var backchg_no=0;
var backcolors=["#000000","#FFFFFF","#EEEEEE","#888888"];


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

	//STAGE
	canvasObject=document.getElementById('mainCanvas');
	//createjsステージを設定
	stage=new createjs.Stage(canvasObject);
	//MouseOver重要stage
	stage.enableMouseOver(20);

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

	//welcome画像層画像表示
	//welcomeImage=new createjs.Bitmap('/main/images/welcome_blackx.png');
	//stage.addChild(welcomeImage);
	stage.update();

	//簡易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);
	
	//MAIN-TEXT
	maintextcontainer=new createjs.Container();
	//表示位置
	maintextcontainer.x=mtcontainer_x;
	maintextcontainer.y=mtcontainer_y;
	stage.addChild(maintextcontainer);

	//SUB-TEXT
	subtextcontainer=new createjs.Container();
	subtextcontainer.y=subcontainer_y;
	stage.addChild(subtextcontainer);

	//btncontainer
	btncontainer=new createjs.Container();
	btncontainer.y=280;
	stage.addChild(btncontainer);
	set_btn();
	myhitBtn.visible=false;

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

	//WebFont
	WebFont.load({
		google:{
			families:[webfont_name]
		},
		loading:function(){
			set_text("WebFont Loading Now!");
		},
		active:function(){
			//読み込み成功
			web_font=true;
			set_text("WebFont Loading END");
			set_start();
		},
		inactive:function(){
			//読み込み失敗
			web_font=false;
			set_text("WebFont None!");
			set_start();
		}
	});

}

//フォント読み込み後実行
function set_start() {

	//調整
	setTimeout(function() {

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

	},1000);
}

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

	allcount=0;

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

	//調整
	setTimeout(function() {

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

	},1000);
}

//背景色変更
function backchg() {

	backchg_no ++;
	if (backchg_no > backcolors.length-1) {backchg_no=0;}
	var color=backcolors[backchg_no];
	backrect.graphics.beginFill(color).drawRect(0,0,canvasWidth,canvasHeight);
}

//MAINテキストアニメ/現在使用
function set_mainanime() {

	//カウント
	textcount=0;

	//MAINテキストアニメーション
	var maintext_W=0;
	var text_spc=0;//テキストスペース
	var center=true;
	var tcount=0;

	//標準フォント
	var font_v="Arial";
	//WebFont読み込み成功
	if (web_font) {
		font_v=webfont_name;
	}

	//インスタンス配列取得
	//サイズ,フォント,色,虹色,スペース,文字/italic bold 32px
	textChip=createMoveText("32px",font_v,"#FFFFFF",true,text_spc,mainstring);
	textlen=mainstring.length;//グローバル

	//ランダム配置のため全幅の計算を先に
	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;}

	//移動
	var delay_st=[];
	//パターン番号
	var pattern_no=Math.floor(Math.random()*6);
	//多目的判定用フラグ
	var chgxyflag=Math.floor(Math.random()*5);
	//多目的用2
	var chgflag=Math.floor(Math.random()*3);
	var chgflag2=Math.floor(Math.random()*3);
	//逆転フラグ
	var chg_v=Math.floor(Math.random()*2);
	if (chg_v < 1) {chg_v=-1;}

	//回転
	var rotate_no=chgflag*chg_v;
	//スケール
	var sclsdata=[1,1,1,.5,4,8];
	var scls=sclsdata[Math.floor(Math.random()*sclsdata.length)];
	//delay番号
	var delay_no=Math.floor(Math.random()*3);

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

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

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

		//全幅計算は上で行っている
		//maintext_W +=textChip[i].width;
		//if(i < textlen) {maintext_W +=text_spc;}

		//移動左右1、X方向のみ
		if (pattern_no == 0) {
			textChip[i].x=canvasWidth*chg_v;
			textChip[i].y=textPosy[i];
		}
		//移動左右2、Y方向ズレ
		if (pattern_no == 1) {
			textChip[i].x=canvasWidth/2*chg_v;
			textChip[i].y +=100*flag*chg_v*(chgflag2-1);
		}
		//移動上下
		if (pattern_no == 2) {
			textChip[i].x=textPosx[i];//その場
			textChip[i].y=canvasHeight/2*chg_v*(chgflag+1);
			if (chgflag == 1) {
				textChip[i].y *=flag;//上下交互
			}
		}
		//ランダム
		if (pattern_no == 3) {
			//globalToLocal
			var point=maintextcontainer.globalToLocal(Math.random()*canvasWidth,Math.random()*canvasHeight);
			textChip[i].x=point.x;
			textChip[i].y=point.y;
		}
		//文字列の中心から
		if (pattern_no == 4) {
			textChip[i].x=maintext_W/2;
			textChip[i].y=textPosy[i];//その場
		}
		//その場所から
		if (pattern_no == 5) {
			textChip[i].x=textPosx[i]+20*(chgflag-1);//その場少しずらす
			textChip[i].y=textPosy[i];//その場
		}

		textChip[i].rotation=rotate_no*180*(chgflag2-1);
		textChip[i].alpha=0;
		textChip[i].scaleX=scls;
		textChip[i].scaleY=scls;

		//delay
		delay_st[i]=100*i;//標準
		if (delay_no == 1) {delay_st[i]=20*i*i;}
		if (delay_no > 1) {delay_st[i]=Math.abs(i-sh/2)*150;}//150-200

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

		k ++;
		flag *=-1;
	}
	//delay逆転
	if (chgflag == 0) {
		delay_st.reverse();
	}

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

	//Tween
	for (var i=0; i < textlen; i++) {
		//Tween
		var twn=createjs.Tween.get(textChip[i])
		.wait(delay_st[i])
		.to({x:textPosx[i],y:textPosy[i],scaleX:1,scaleY:1,alpha:1,rotation:0},1000)
		.wait(100).to({scaleX:2,scaleY:2},50)
		.wait(100).to({scaleX:1,scaleY:1},200)
		.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:0.5,scaleY:0.5},500)
		.wait(1000)
		.to({scaleX:1,scaleY:1},500)
		.call(function(){
			//終了判定
			if (textcount == textlen-1) {finshtextAll();}
			textcount +=1;//グローバル
		});

	}

}

//SUBテキストアニメ
function set_subanime() {

	//カウント
	subtextcount=0;

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

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

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

	//多目的用
	var chgflag=Math.floor(Math.random()*5);
	//scale番号
	var scale_no=1;

	//移動
	var k=0;
	var flag=-1;

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

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

		//移動
		if (chgflag == 0) {
			textChip2[i].x=canvasWidth*flag;
			scale_no=1;
		}
		if (chgflag == 1) {
			textChip2[i].y=canvasHeight*flag;
			scale_no=1;
		}
		if (chgflag > 1) {
		//ランダム移動
		//globalToLocal
		var point=subtextcontainer.globalToLocal(Math.random()*canvasWidth,Math.random()*canvasHeight);
			textChip2[i].x=point.x;
			textChip2[i].y=point.y;
			scale_no=0;
		}

		//scale決定
		textChip2[i].scaleX=scale_no;
		textChip2[i].scaleY=scale_no;

		k ++;
		flag *=-1;
	}

	//Tween
	for (var i=0; i < subtextlen; i++) {
		//Tween
		var twn2=createjs.Tween.get(textChip2[i])
		.wait(200*i)
		.to({x:textPosx2[i],y:textPosy2[i],scaleX:1,scaleY:1},1000)
		.call(function(){
			//終了判定
			if (subtextcount == subtextlen-1) {finshtextAll2();}
			subtextcount +=1;//グローバル
		});
	}

}

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

//終了1
function finshtextAll() {

	set_text("[ メインテキスト ] アニメ終了");
	finshAll();
}
//終了2
function finshtextAll2() {

	set_text("[ サブテキスト ] アニメ終了");
	finshAll();
}
//全て終了
function finshAll () {

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

	//2個のアニメ終了
	if (allcount == 2) {
		//調整
		setTimeout(function() {

			//案内
			set_text("テキストアニメーションが終了したら「ボタン」を押してください。");
			//ボタン表示
			myhitBtn.visible=true;

		},2000);
	}
}

//reset_text
function reset_text() {

	set_text("クリア");
	myhitBtn.visible=false;

	//コンテナの中を削除
	maintextcontainer.removeAllChildren();
	subtextcontainer.removeAllChildren();
	stage.update();

	//調整
	setTimeout(function() {

		set_text("ランダムアニメ実行中");
		set_prologue();

	},1000);

}

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

//VIEWTEXT
function set_text(t) {
	viewtext.text=t;
	stage.update();
}

//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-Color2
var rainbowColor=function(v,cv,saturation,lightness) {
	var no=v/cv*360;
	var color=createjs.Graphics.getHSL(no,saturation,lightness);
	return color;
}

//Create-Bottunボタンを作る
function set_btn() {

	//ラベル文字生成
	var label="CLICK";
	//x,y,w,h,r,c,label,lc,overc,outc
	myhitBtn=createbtn (0,0,60,20,5,"#FFFFFF",label,"#FF0000","#48D1CC","#FFFFFF");
	myhitBtn.cursor="pointer";
	myhitBtn.x=canvasWidth/2;
	myhitBtn.y=0;
	//クリック
	myhitBtn.addEventListener("click",reset_text);
	//addChild
	btncontainer.addChild(myhitBtn);

}

//create-bottunベタ塗り中央形firefox補正なし
function createbtn (x,y,w,h,r,c,label,lc,overc,outc) {

	//BTNコンテナ
	var btn=new createjs.Container();
	btn.x=x;
	btn.y=y;
	var s=new createjs.Shape();
	//角丸処理
	s.graphics.s(0).beginFill(outc);
	operaRoundRect(s,-w/2,-h/2,w,h,r);
	btn.addChild(s);
	btn.shadow=shadow;
	var tx=new createjs.Text(label,"12px Arial",lc);
	tx.textAlign="center";
	tx.textBaseline="middle";
	tx.maxWidth=w;
	tx.shadow=shadow;
	tx.name="btntext";//name挿入
	btn.addChild(tx);
	//文字の食み出し防止mask
	tx.mask=s;

	//rollover
	btn.addEventListener("rollover",function () {
		s.graphics.clear();
		s.graphics.s(0).beginFill(overc);
		operaRoundRect(s,-w/2,-h/2,w,h,r);
		stage.update();
	});
	//rollout
	btn.addEventListener("rollout",function () {
		s.graphics.clear();
		s.graphics.s(0).beginFill(outc);
		operaRoundRect(s,-w/2,-h/2,w,h,r);
		stage.update();
	});
	return btn;
}

//START
init();

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


● Webフォントの読み込み表示が悪い場合は、onload=function(){}、の形にして下さい。2014/03/04/追記


//START
window.onload=function() {
	init();
}

CSS

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


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

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


簡単な説明


[説明図]

 

Google WebFont の利用

Google WebFont利用の場合を例に、説明します。
CreateJS別冊付録 Tutorials、WebFont.htmlの例文を元に改造しました。


1. WebFontは完全に読み込みし、WebFontの準備が完了しないと使用出来ません。
2. 読み込み完了などの判定には、Googleの提供している、webfont.js を利用します。
3. WebFontの文字種はGoogle Fontsページで自由に選べます。: Google Fonts
4. Google Fontsに無い文字種を指定した場合「デモ」では Arial に成ります。


webfont.js は使用するページの HTML で事前に読み込んでおきます。(下記「webfont.js 読込み」参照)


Tutorials、WebFont.htmlの例文は以下の様になっています。


<head>
    <link href='http://fonts.googleapis.com/css?family=Dorsa' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
    <script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
    <script type="text/javascript">
        WebFont.load({
            google: {
                families: [ 'Dorsa']
            },
            loading: function() {
                console.log("loading");
            },
            active: function () {
                window.init();
            },
            inactive: function() {
                console.log("inactive")
            }
        });
    </script>
    <script>

        var stage;
        var queue;
        function init() {

            stage = new createjs.Stage("demoCanvas");
            var txt = new createjs.Text();
            txt.x = txt.y = 0;
            txt.font = "96px Dorsa";
            txt.color = "#FF7700";
            txt.text = "Hello World!";

            stage.addChild(txt);
            stage.update();
            createjs.Ticker.addEventListener("tick", tick);
        }

        function tick() {
            stage.tick();
        }
    </script>
</head>

webfont.js 読込み

ajax.googleapis.comより、webfont.js を読み込む必要があります。

注意、複数のJSを読み込む場合は必ず「1番で読み込む」様にしないと機能しない場合があります。
通常CSSの読み込み直後に記述するのが良いと思います。旨く行かない場合は順序を変える。


<link type="text/css" href="xxx.css" />
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>

<script type="text/javascript" src="xxx.js"></script>

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

当方の場合は、ズルです
<script type="text/javascript" src="js/webfont.js"></script>

Google Fonts

フォントの種類などは、Google Fonts ページにて確認できます。

Google Fonts


デモでの使用例

webfont.js、の使用例に基づき、当方で使用し易いように記述した。


1. コンテンツ ステージ画面を表示してから(途中)、フォントの読み込みを行う様にした。
2. 読み込み失敗の場合は Arial を使用する様にした。(殆んど無いと思いますが、、、)


実際の「デモ」での記述は下記の様になります。


//Webフォント
//Plaster/Limelight/Doppio One/Michroma/Bevan/Alike/
var webfont_name="Limelight";
//Webフォント取得判定
var web_font=false;

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

	略す

	//WebFont
	WebFont.load({
		google:{
			families:[webfont_name]
		},
		loading:function(){
			set_text("WebFont Loading Now!");
		},
		active:function(){
			//読み込み成功
			web_font=true;
			set_text("WebFont Loading END");
			set_start();
		},
		inactive:function(){
			//読み込み失敗
			web_font=false;
			set_text("WebFont None!");
			set_start();
		}
	});

	略す

}

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

function set_mainanime() {

	略す

	//標準フォント
	var font_v="Arial";
	//WebFont読み込み成功
	if (web_font) {
		font_v=webfont_name;
	}

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

	略す

}

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

複数のフォントを読み込む場合

families:["fontA","fontB","fontC"....]

で可能の様です

WebFont.load({........を、init の外に置いても良いが、何も表示しない「間」があるのが嫌いである。
この辺は使用者の都合で決定すれば良い。


フォントの種類を指定しない場合には、大きさも解除され、小さな文字表示になります。「エラー」「マチガイ」などの判定の材料になるかも、、、


Nullにしないで何らかの文字を入れること

var webfont_name="";

フォントサイズの指定

フォントサイズは px を指定下さい。「太字」「斜体」は下記の様に指定出来ます。


//サイズ,フォント,色,虹色,スペース,文字
textChip=createMoveText("32px",font_v,"#FFFFFF",true,text_spc,mainstring);

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

「太字」
"bold 32px"

「斜体」
"italic 32px"

「太字 斜体」
"italic bold 32px"

フォントサイズが同じでもそれぞれ違う

 

同じフォントサイズでも実際に表示される大きさ、文字間の距離(文字間隔)が違います。文字間隔が広いとテキストがステージ内に納まらない事態になりますので調整下さい。(場合によっては文字数を減らす)
上の図は「テキストスペース」を調整した概略です。


1. 大きさは「サイズ」は、"XXpx" で調整出来ます。
2. 文字間隔は「テキストスペース」で調整出来ます。初期値は 0 です。
3. 意識的に文字間隔を狭めて使用しても構いません。(文字の太い方が効果的かも知れません)



function set_mainanime() {

	//MAINテキストアニメーション
	var maintext_W=0;
	var text_spc=0;//テキストスペース
	var center=true;
	var tcount=0;

	略す

}

フォントの読み込み表示が悪い場合

Webフォントの読み込み表示が悪い場合は、onload=function(){}、の形にして下さい。2014/03/04/追記


//START
init();

を下記の様にする
-------------------------------------------------------------
//START
window.onload=function() {
	init();
}

CreateJSは本来、onload=function(){}、の形で実行するのが一応の原則です。


テキストアニメーションなどの詳細は、下記記事等を参照下さい。

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




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


以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]