POPSブログ

CreateJS テキストアニメーション 祝賀用豪華3段重ね

246

  Category:  javascript2013/09/08 pops 

CreateJS MotionGuidePlugin利用のテキストアニメーション豪華3段重ねです。祝賀用、正月用などに最適ですが、パワーの無いマシン環境では大変動作が重く成ります。よってパワーアップのビタミン剤などの服用をお勧めします。
easeljs-0.7 でのテストです。

 

CreateJS テキストアニメーション 祝賀用豪華3段重ねのテスト


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


前ページの背景図形付きものと通常のテキストアニメーションを組み合わせたものです。欠点として、パワーの無いマシン環境では大変動作が重く成ります。最近のマシン環境では問題有りません。


ガイドパス及び関連設定などは、下記記事を参照下さい

【参照】当方の記事: CreateJS テキストアニメーション、Tweenの途中でグラフィックを挿入する

【参照】当方の記事: CreateJS テキスト背景に図形を挿入して(MotionGuide Tween)テキストアニメーション


[説明図]

 

1. テキストアニメーション3種、3段重ね豪華版です。(デモ参照)
2. 但し、パワーの無いマシン環境では大変動作が重く成ります。Firefoxの動作が無理の様なマシン環境の場合は Firefox が正常に動作しなくなります(この様な使用は無いと思いますが、、)。
3. 動作が重いので、薬効成分を入れましたが、効果はまだ確認されていません。
4. 正月用にはミカンを載せて、イセエビを散らします。
5. その外は、上記掲載の当方の記事ページを参照下さい。


DEMO


CreateJS MotionGuide Tween テキストアニメーション例 (createJS034b.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

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


//日本語
//createJS034b.js
//デモ用MotionGuideアニメーション
//スペース補正形/英数漢字判別補正するArialで漢字を使う事
//easeljs-0.7用
//rainbow-Color

//------------------------------------------------------
//Browser判定
var userAgent = window.navigator.userAgent.toLowerCase();
var safari=false,chrome=false,firefox=false,opera=false;
var ie=false;
var browser_v;
if (/*@cc_on!@*/false) {
	ie=true;
	if (navigator.userAgent.match(/MSIE (¥d¥.¥d+)/)) {browser_v = parseFloat(RegExp.$1);}//IE6.7.8.9.10
}
if (userAgent.indexOf("safari") > -1) {safari=true;}
if (userAgent.indexOf("chrome") > -1) {chrome=true;}
if (userAgent.indexOf("firefox") > -1) {firefox=true;}
if (userAgent.indexOf("opera") > -1) {opera=true;}

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

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

//英数漢字判別補正するArialで漢字を使う事
//メインテキスト
var mainstring="ViVa POPS WEB KOUBOU";
//ベーステキスト
var basestring="赤マムシ 生タマゴ を世界遺産に!";
//サブテキスト
var substring="Hoyo.Irassyaa-i! Welcome to my site. Doumo!";

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

//MAIN-TEXT
//welcome画像を使用 true false
var welcomeUse=true;//未使用

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

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

//パスの種類指定 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;

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

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

//BASE-TEXT
//コンテナ高さ、幅中央に自動修正
var basecontna_H=80;
//rainbow虹色にする true false
var rainbowSet3=true;
//ベース指定色rainbowSet3がfalseの場合有効
var base_color="#FF1493";
//文字指定色
var basetext_color="#FFFFFF";//#FFFFFF

//出現間隔
var base_time3=400;
//交互遅延
var delayed_time3=1000;
//Tween速度 2000-3000
var speed3=2000;

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

//パスの種類指定 0-5
var pathdata3=0;
//上記6種をランダムに選ぶ true false
var pathRandom3=true;
//ポイント固定=0 移動=1 中央=2 画面ランダム=3 指定位置=4
var pointType3=0;
//上記5種をランダムに選ぶ true false
var patternRandom3=true;
//画面指定位置=4の場合のステージ内位置
var stagePoint_x3=320;
var stagePoint_y3=250;

//スケールデータ
var scaledata3=[0,0,0,0,.5,1,2,4];
var ball_num3=0;//未使用

//ランダムBallの指定色
var randomBall_color="#FFFFFF";

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

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

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

//補正
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 basetextcontainer;
var maintextcontainer;
//インスタンス
var welcomeImage;
var welcomeImage2;//isanda
var maintext;
var basetext;
//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 ballChip3=[];
var moveBallPosx3=[];
var moveBallPosy3=[];

var textChip3=[];
//並び順のポジション保存
var textPosx3=[];
var textPosy3=[];
//MOVEポジション保存
var movePosx3=[];
var movePosy3=[];
//スケール保存
var keepScale3=0;
//回転保存
var keepRote3=0;
//alpha保存
var keepAlpha3=0;
//BASEテキスト用グローバル変数
var textmax3=0;
var textcount3=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画像
	welcomecontainer=new createjs.Container();
	welcomeImage=new createjs.Bitmap("/main/images/yakei.png");
	welcomecontainer.addChild(welcomeImage);
	welcomeImage.visible=false;
	stage.addChild(welcomecontainer);

	//welcome2画像非表示
	welcomecontainer2=new createjs.Container();
	welcomecontainer2.x=canvasWidth/2;
	welcomecontainer2.y=canvasHeight/2;
	welcomeImage2=new createjs.Bitmap("/main/images/olympic.png");
	welcomeImage2.regX=150/2;
	welcomeImage2.regY=200/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);

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

	//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("");
		//BASE-TEXT表示
		set_baseanime();

	},6000);

	//調整
	setTimeout(function() {

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

	},14000);

}

//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(5000)

		.wait(max_delay-delay_st[i])//最大値利用時間差吸収
		.to({x:canvasWidth*chg_v},2000)
		.wait(2000)
		.to({x:canvasWidth*chg_v*-1},1)
		.to({x:textPosx[i]},2000)

		.wait(20000)
		.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;

	}

}

//BASEテキストアニメ
function set_baseanime() {

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

	textChip3=[];//クリア
	var basetext_W=0;//0
	var text_spc=4;//文字間隔
	var spc_width=10;//半角スペース幅
	var center=true;
	//図形の大きさ
	var base_width=30;
	var base_height=30;
	//文字サイズ
	var font_size="26px";//pxを付ける

	//スペース補正形コンテナ収容インスタンス配列取得 Arial専用
	//サイズ,フォント,ベース幅,ベース高さ,角丸半径,ベース色,虹色,文字間隔,半角スペース幅,文字色,文字
	textChip3=createMoveText3(font_size,"Arial",base_width,base_height,5,base_color,rainbowSet3,text_spc,spc_width,basetext_color,basestring);

	//スペースを除去した文字数
	var textlen3=textChip3.length;
	//テキスト用グローバル変数
	textmax3=textlen3;

	//全幅の計算を先に計算/文字間の距離プラス図形幅
	basetext_W =textChip3[textlen3-1].x-textChip3[0].x+base_width;

	//コンテナ中央補正
	if (center) {basetextcontainer.x=(canvasWidth-basetext_W)/2;}

	//BALL番号、ランダムのみ
	var ballno3=Math.floor(Math.random()*6);

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

		//ランダムBallインスタンス/色randomBall_color
		if (ballno3 == 0) {
			//(w,h,r,color,rainbow,len,no)/w,hは範囲 50x50-100x100
			ballChip3[i]=createRandomBall(80,80,2,randomBall_color,false,textlen3,i);
		}
		//ランダムRingインスタンス
		if (ballno3 == 1) {
			//(w,h,r,color,rainbow,len,no)/w,hは範囲 50x50-100x100
			ballChip3[i]=createRandomRing(80,80,3,randomBall_color,false,textlen3,i);
		}
		//ランダムRectインスタンス
		if (ballno3 == 2) {
			ballChip3[i]=createRandomRect(80,80,3,randomBall_color,false,textlen3,i);
		}
		//ランダムStar3インスタンス
		if (ballno3 == 3) {
			//(w,h,r,星の分割数,color,rainbow,len,no)/w,hは範囲 50x50-100x100
			ballChip3[i]=createRandomStars(80,80,4,3,randomBall_color,false,textlen3,i);
		}
		//ランダムStar4インスタンス
		if (ballno3 == 4) {
			ballChip3[i]=createRandomStars(80,80,4,4,randomBall_color,false,textlen3,i);
		}
		//ランダムStar5インスタンス
		if (ballno3 == 5) {
			ballChip3[i]=createRandomStars(80,80,4,5,randomBall_color,false,textlen3,i);
		}

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

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

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

	}

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

	//パターン番号
	var pattern_no=Math.floor(Math.random()*5);
	//パターン番号 ポイント固定=0 移動=1 中央=2 画面ランダム=3 指定位置=4
	var pointtype_no=pointType3;
	if (patternRandom3) {
		//ランダム指定
		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=scaledata3[Math.floor(Math.random()*scaledata3.length)];

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

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

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

		//ID
		textChip3[i].id=i;
		//addChild
		basetextcontainer.addChild(textChip3[i]);

		//ポジション取得
		textPosx3[i]=textChip3[i].x;
		textPosy3[i]=textChip3[i].y;

		//ポイント固定
		if (pointtype_no == 0) {
			textChip3[i].x=guide_w3;
			textChip3[i].y=guide_h3;
			//1 ガイド高さ下方不変
			if (pathdata3 == 1) {textChip3[i].y =keepguide_h3*-1;}
		}
		//ポイント移動
		if (pointtype_no == 1) {
			textChip3[i].x=guide_w3+textPosx3[i];
			textChip3[i].y=guide_h3;
			//1 ガイド高さ下方不変
			if (pathdata3 == 1) {textChip3[i].y =keepguide_h3*-1;}
		}
		//強制中央に修正
		if (pointtype_no == 2) {
			textChip3[i].x=basetext_W/2;
			textChip3[i].y=0;
		}
		//画面ランダム
		if (pointtype_no == 3) {
			//globalToLocal
			var point=basetextcontainer.globalToLocal(Math.random()*canvasWidth,Math.random()*canvasHeight);
			textChip3[i].x=point.x;
			textChip3[i].y=point.y;
		}
		//ステージ内指定位置
		if (pointtype_no == 4) {
			//globalToLocal
			var point=basetextcontainer.globalToLocal(stagePoint_x3,stagePoint_y3);
			textChip3[i].x=point.x;
			textChip3[i].y=point.y;
		}

		//MOVEポジション保存
		movePosx3[i]=textChip3[i].x;
		movePosy3[i]=textChip3[i].y;

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

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

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

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

		k ++;
		flag *=-1;
	}

	//TEXT
	//set_text("");

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

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

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

		var pathdata_v;
		if (pathdata3 == 0) {pathdata_v=[textPosx3[i],textPosy3[i], 100+textPosx3[i],-150, 200+textPosx3[i],0, 300+textPosx3[i],150, movePosx3[i],movePosy3[i]];}//1
		if (pathdata3 == 1) {pathdata_v=[textPosx3[i],textPosy3[i], 50+textPosx3[i],-150, 250+textPosx3[i],-75, 400+textPosx3[i],0, movePosx3[i],movePosy3[i]];}//2
		if (pathdata3 == 2) {pathdata_v=[textPosx3[i],textPosy3[i], -50+textPosx3[i],100, -100+textPosx3[i],0, -150+textPosx3[i],-150, movePosx3[i],movePosy3[i]];}//3
		if (pathdata3 == 3) {pathdata_v=[textPosx3[i],textPosy3[i], 200+textPosx3[i],-150, 150+textPosx3[i],0, 100+textPosx3[i],100, 50+textPosx3[i],0, 0+textPosx3[i],-150, movePosx3[i],movePosy3[i]];}//4
		if (pathdata3 == 4) {pathdata_v=[textPosx3[i],textPosy3[i], 50+textPosx3[i],200, movePosx3[i],movePosy3[i]];}//5
		if (pathdata3 == 5) {pathdata_v=[textPosx3[i],textPosy3[i], 100+textPosx3[i],-135, -50+textPosx3[i],-70, -200+textPosx3[i],50, 50+textPosx3[i],70, 250+textPosx3[i],50, movePosx3[i],movePosy3[i]];}//6

		//Tween
		var twn3=createjs.Tween.get(textChip3[i]);
		twn3.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:textPosx3[i],y:textPosy3[i],rotation:0},50)

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

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

		twn3.wait(max_delay-delay_st[i])//最大値利用時間差吸収
		.wait(8000)

		.wait(delay_st[i])
		.to({scaleX:.1,scaleY:.1},500)
		.to({x:moveBallPosx3[i],y:moveBallPosy3[i],scaleX:3,scaleY:3,rotation:360*chg_v,alpha:0},2000)
		.wait(max_delay)
		.to({x:textPosx3[i],y:textPosy3[i],scaleX:.1,scaleY:.1,rotation:0,alpha:1},1500)
		.wait(500)
		.to({scaleX:1.5,scaleY:1.5},800)
		.to({scaleX:1,scaleY:1},200)

		.wait(max_delay-delay_st[i])//最大値利用時間差吸収
		.wait(8000)

		.wait(delay_st[i])
		.to({scaleX:0.1,scaleY:0.1},500)
		.call(chgballb)
		.wait(500)
		//.to({guide:{path:pathdata_v,orient:false,start:0,end:1},scaleX:keepScale3,scaleY:keepScale3,alpha:keepAlpha3,rotation:keepRote3},speed_v)
		.to({x:moveBallPosx3[i],y:moveBallPosy3[i],scaleX:3,scaleY:3,rotation:360*chg_v*flag,alpha:0},1000)
		.call(function(){
			//終了
			if (textcount3 == textmax3-1) {finshtextAll3();}
			textcount3 +=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(20000)
		.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;
}

//BASE-BALLグラフィック流し込み
function chgballb () {
	var no=this.id;
	this.getChildAt(2).visible=false;
	this.getChildAt(1).visible=false;
	//this.getChildAt(0).graphics.clear();
	this.getChildAt(0).graphics=ballChip3[no].graphics;
}
function chgballb2 () {
	var no=this.id;
	this.getChildAt(0).graphics.clear();
	this.getChildAt(1).visible=true;
	this.getChildAt(2).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("WELCOME");

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

			var twn6=createjs.Tween.get(welcomeImage)
			.wait(1000)
			.to({y:0,alpha:0},600)//FadeOUT
			.call(function(){
				//welcome画像非表示
				welcomeImage.visible=false;

				finshAll();
			});
		});
	});

}

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

//全て終了
function finshAll () {

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

	//3個のアニメ終了
	if (allcount == 3) {
		//調整
		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]);
	}
	for (var i=0; i < textmax3; i++) {
		//removeTween
		createjs.Tween.removeTweens(textChip3[i]);
	}
	//welcomeImage
	createjs.Tween.removeTweens(welcomeImage);
	createjs.Tween.removeTweens(welcomeImage2);

	//BASE-TEXTコンテナの中を削除
	basetextcontainer.removeAllChildren();
	//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 createMoveText3(size,font,bw,bh,br,basecolor,rainbow,space,space_w,strcolor,str) {

	var fontdata=size + " " + font;

	var chip=[];
	var len=str.length;
	var tpos_x=0;
	var tpos_y=0;
	var boxpos_x=0;
	var boxpos_y=0;
	var spcflag=false;
	var k=0;

	var eisuu=false;
	var regy_v=0;

	//半角スペースを除いた長さ
	var strings=str;
	//注意正規表現
	var nospclen=strings.replace(/ /g,'').length;
	var string_v="";

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

		string_v=str.charAt(i);
		spcflag=false;
		//スペース判定、インスタンスを作らない
		if (string_v != ' ') {spcflag=true;}

		if (spcflag) {
			//コンテナ収容形
			var box=new createjs.Container();
			//Shape
			var s=new createjs.Shape();
			var s2=new createjs.Shape();//空Shape
			//文字インスタンスを作る文字指定色
			var t=new createjs.Text("",fontdata,strcolor);
			t.textBaseline="middle";
			//1文字入れる
			t.text=string_v;

			//英数字判別
			eisuu=isEisuu(string_v);

			//幅高さ取得
			var w=t.getMeasuredWidth();
			var h=t.getMeasuredHeight();

			//受け渡し用
			t.width=w;
			t.height=h;
			//原点中央テキストのみ重要
			t.regX=w/2;//X実行
			//t.regY=h/2;//補正後実行

			//textBaseline middleでの修正のほうが楽かも
			//firefox、2ピクセルほど上になる
			//漢字はoperafirefox、2ピクセルほど上になる

			regy_v=0;//補正なしは0

			//英数字の場合
			if (eisuu) {
				if (opera) {regy_v=0;}
				if (firefox) {regy_v=-1;}
			}
			//漢字の場合
			if (!eisuu) {
				if (opera) {regy_v=2;}
				if (firefox) {regy_v=-1;}
			}
			//regYの実行
			t.regY=regy_v;

			//shadow
			t.shadow=shadow;

			//コンテナ/受け渡し用重要未使用
			box.width=bw;
			box.height=bh;

			//図形RoundRect
			s=createRoundRect(-bw/2,-bh/2,bw,bh,br,basecolor,rainbow,nospclen-1,k);
			//図形Rectx,y,w,h,color,rainbow,len,no
			//s=createRect(0,0,bw,bh,basecolor,rainbow,nospclen-1,k);
			//Circle/文字は小さく
			//s=createBall(0,0,bw/2,basecolor,rainbow,nospclen-1,k);

			//X位置計算 文字間隔
			if(k == 0) {
				boxpos_x=bw/2;
			} else {
				boxpos_x +=(bw+space);
			}

			//コンテナを位置にあわせる
			box.x=boxpos_x;
			box.y=boxpos_y;//0
		
			//add s2,s,t
			box.addChild(s2,s,t);
			//配列に入れる/半角スペース除去のインスタンス
			chip.push(box);

			k +=1;

		}
		if (!spcflag) {
			//半角スペース幅加算
			boxpos_x +=space_w;
		}

	}
	//戻り配列
	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;
}
//ランダムRINGインスタンス
function createRandomRing(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.ss(1).s(c).beginFill().drawCircle(x_v,y_v,r);
	}
	//原点
	s.regX=0;
	s.regY=0;
	return s;
}
//ランダムRectインスタンス
function createRandomRect(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).drawRect(x_v,y_v,r,r);
	}
	//原点
	s.regX=0;
	s.regY=0;
	return s;
}
//ランダムSTARSインスタンス、star_vは角数
function createRandomStars(w,h,r,star_v,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).drawPolyStar(x_v,y_v,r,star_v,.8,30*i);
	}
	//原点
	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;
	}
}
//英数字判別、こちらは使える
function isEisuu(c){
	var unicode=c.charCodeAt(0);
	if (unicode < 256 || (unicode >= 0xff61 && unicode <= 0xff9f)){
	return true;
	} else {return false;}
}


//START
init();

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


CSS

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


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

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


簡単な説明


祝事に付き、不評を買う「長ったらしい祝辞、説明」は省略いたします。


使用画像

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


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

特製、ゴリンピック、パクリンコ画像 olympic.png 150x200

 




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


下記ページのJS、2種を組み合わせたものです。ガイドパス及び関連設定などは、下記記事を参照下さい

【参照】当方の記事: CreateJS テキストアニメーション、Tweenの途中でグラフィックを挿入する

【参照】当方の記事: CreateJS テキスト背景に図形を挿入して(MotionGuide Tween)テキストアニメーション


2020 東京五輪(ゴリンピック) 開催決定を祝し特別掲載しました。
以上です。

 


[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]