モーションタイポグラフィをActionScript3で試してみる

Flash

簡単なモーションタイポグラフィをActionScript3で作成できるといいですね。
ネットで調べてもAS2のサンプルはあるけれどAS3はなかなか適当なものがありません。
で、作ってみました。
ABCDEFGのテキストを分割してA,B,C,D,E,F,Gに対してインスタンス名を t1,t2,t3,t4,t5,t6,t7としました。
あとはアクションにAS3を記述するだけです。
第1のパターン

//テキストの数
var txtLength:Number = 7;
//連番ムービークリップの固定文字列名
//例 t_1,t_2,t_3なら"t_"
var txtName:String = "t";
//移動速度
var moveSp:Number = 3;
//スクリプトの制限時間
var limit:Number = 100;
//テキストのムービークリップを格納する配列
var txtArray:Array = new Array();
//テキストの数だけループします
for (var i = 1; i<=txtLength; i++)
{
	//テキストのムービークリップのパス
	var mc:MovieClip = this[txtName + i.toString()];
	//mcムービークリップを配列にいれる
	txtArray.push(mc);
	//次にムービークリップの初期状態を決めます。
	//テキストはこの状態から変化を始めます。
	mc.start_alpha = mc.alpha;
	mc.start_x = mc.x;
	mc.start_y = mc.y;
	mc.start_rotation = mc.rotation;
	mc.x = -600;
	mc.y = -500;
	//wait(待ち時間)をフレーム単位で設定します。
	mc.wait = i * 2;
	mc.count = 0;
this.addEventListener(Event.ENTER_FRAME,onload);
}
function onload(e){
	for (var j = 1; j <= txtLength; j++){
		 mc = txtArray[j-1];
		if (mc.count++ > mc.wait){
		//差分を計算して補完してきます
		mc.x += (mc.start_x - mc.x) / moveSp;
		mc.y += (mc.start_y - mc.y) / moveSp;
		}
	if (mc.count++ > limit + mc.wait)
	{
		//制限時間を過ぎた場合、この関数を破棄します。
		removeEventListener(Event.ENTER_FRAME,onload);
		}
	}
}


第2のパターン 回る回る

//テキストの数
var txtLength:Number = 7;
//連番ムービークリップの固定文字列名
//例 t_1,t_2,t_3なら"t_"
var txtName:String = "t";
//スクリプトの制限時間
var limit:Number = 180;
//最初の角度
var deg:uint = 0;
//回転する半径
var  r:uint = 100;
//テキストのムービークリップを格納する配列
var txtArray:Array = new Array();
//テキストの数だけループします
for (var i = 1; i <= txtLength; i++)
{
	//テキストのムービークリップのパス
	var mc:MovieClip = this[txtName + i.toString()];
	//mcムービークリップを配列にいれる
	txtArray.push(mc);
	/*次にムービークリップの初期状態を決めます。今回はテキストを遠くに追いやります*/
	mc.x=-500;
	mc.y=0;
//wait(待ち時間)をフレーム単位で設定します。
	mc.wait = i * 20;
	mc.count = 0;
//ENTER_FRAMEでフレームレートごとにイベントを発生させます
this.addEventListener(Event.ENTER_FRAME,onloop);
}
//リスナー関数
function onloop(e){
	//テキストの数だけループします
	for (var j = 1; j<=txtLength; j++){
		//mcムービークリップに配列から取り出したテキストを格納
		 mc = txtArray[j-1];
		if (mc.count++ > mc.wait){
		//ここから物理法則楕円を描く
		deg = ( deg + 30 ) % 360;
		mc.x = 2 * r * Math.cos (deg * Math.PI / 180) +275;
		mc.y = r * Math.sin(deg * Math.PI / 180) + 200;
		}
	if (mc.count++ > limit + mc.wait){
		//制限時間を過ぎた場合、この関数を破棄します。
		removeEventListener(Event.ENTER_FRAME,onloop);
		}
	}
}


第3のパターン 文字も回る

//テキストの数
var txtLength:Number=7;
//連番ムービークリップの固定文字列名
//例 t_1,t_2,t_3なら"t_"
var txtName:String="t";
//スクリプトの制限時間
var limit:Number=180;
//最初の角度
var deg:uint=0;
//回転する半径
var r:uint=100;
//テキストのムービークリップを格納する配列
var txtArray:Array = new Array();
//テキストの数だけループします
for (var i = 1; i<=txtLength; i++) {
	//テキストのムービークリップのパス
	var mc:MovieClip=this[txtName+i.toString()];
	//mcムービークリップを配列にいれる
	txtArray.push(mc);
	/*次にムービークリップの初期状態を決めます。今回はテキストを遠くに追いやります*/
	mc.x=-500;
	mc.y=0;
	//wait(待ち時間)をフレーム単位で設定します。
	mc.wait=i*20;
	mc.count=0;
	//ENTER_FRAMEでフレームレートごとにイベントを発生させます
	this.addEventListener(Event.ENTER_FRAME,onloop);
}
//リスナー関数
function onloop(e) {
	//テキストの数だけループします
	for (var j = 1; j <= txtLength; j++) {
		//mcムービークリップに配列から取り出したテキストを格納
		mc = txtArray[j-1];
		if  (mc.count++ > mc.wait) {
			//ここから物理法則楕円を描く
			deg = (deg + 30) % 360;
			mc.x = 2 * r * Math.cos (deg * Math.PI / 180) + 275;
			mc.y = r * Math.sin ( deg * Math.PI / 180) + 200;
			//個々のテキストを回転させる
			mc.rotation = deg;
		}
		if (mc.count++ > limit + mc.wait) {
			//制限時間を過ぎた場合、この関数を破棄します。
			removeEventListener(Event.ENTER_FRAME,onloop);
		}
	}
}


第4のパターン 拡大縮小、回転など

//テキストの数
var txtLength:Number = 7;
//連番ムービークリップの固定文字列名
//例 t_1,t_2,t_3なら"t_"
var txtName:String = "t";
//移動速度
var moveSp:Number = 6;
//アルファ値の変化速度
var alphaSp:Number = 6;
//スケールの変化速度
var scaleSp:Number = 6;
//回転の変化速度
var rotateSp:Number = 6;
//スクリプトの制限時間
var limit:Number = 200;
//テキストのムービークリップを格納する配列
var txtArray:Array = new Array();
//テキストの数だけループします
for (var i = 1; i<=txtLength; i++)
{
	//テキストのムービークリップのパス
	var mc:MovieClip = this[txtName + i.toString()];
	//mcムービークリップを配列にいれる
	txtArray.push(mc);
	//次にムービークリップの初期状態を決めます。
	//テキストはこの状態から変化を始めます。
	mc.start_alpha = mc.alpha;
	mc.start_x = mc.x;
	mc.start_y = mc.y;
	mc.start_scalex = mc.scaleX;
	mc.start_scaley = mc.scaleY;
	mc.start_rotation = mc.rotation;
	mc.alpha = 0;
	mc.x = -500;
	mc.y = 0;
	mc.rotation = -180;
	mc.scaleX = 50;
	mc.scaleY = 50;

	//wait(待ち時間)をフレーム単位で設定します。
	//limitとあわせて設定
	mc.wait = i * 20;
	mc.count = 0;
//待ち時間まで待機します。
this.addEventListener(Event.ENTER_FRAME,onload);
}

function onload(e){
	for (var j = 1; j <= txtLength; j++){
		 mc = txtArray[j-1];
		if (mc.count++ > mc.wait){
		//差分を計算して補完してきます
		mc.alpha += (mc.start_alpha - mc.alpha) / alphaSp;
		mc.x += (mc.start_x - mc.x) / moveSp;
		mc.y += (mc.start_y - mc.y) / moveSp;
		mc.scaleX += (mc.start_scalex-mc.scaleX)/scaleSp;
		mc.scaleY += (mc.start_scaley-mc.scaleY)/scaleSp;
		mc.rotation += (mc.start_rotation-mc.rotation) / rotateSp;
		}
		if (mc.count++ > limit + mc.wait)
		{
			//制限時間を過ぎた場合、この関数を破棄します。
			removeEventListener(Event.ENTER_FRAME,onload);
		}
	}
}
スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

Flash
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました