FlashでつくるMotionGraphics(2): 文字アニメーション

Flashでモーショングラフィックスを製作するための
いくつかテクニックを紹介します．

文字の構成要素別にアニメーションするものを製作します．

同じような表現は他でも可能ですが，
Premire,AffterEffectsでは表現しきれない細かい表現が可能です．

入門編はこちら
http://qiita.com/fatwhale/items/f8d93a79ed12e2e96040


---
本ページのポイント

・クラスを使ったアニメーション
・パラメータベースのアニメーション
・バネの表現

---
■
MP4：http://www.yasuikeita.com/works/qiita/motiontitle.mp4
FLA: http://www.yasuikeita.com/works/qiita/motiontitle.zip
![sample.png](https://qiita-image-store.s3.amazonaws.com/0/54559/719da031-c739-990c-d379-ffffac54cc31.png)

---

1.MovieClipの設定を以下のようにします。
（titleのMovieclipに入れ子状に文字の構成要素をt1,t2,... とMovieClipにします。）

![dir.png](https://qiita-image-store.s3.amazonaws.com/0/54559/a990c869-3e14-a464-d786-235c24de0c9a.png)





2.ドキュメントのプロパティの設定を以下のようにすると，初期に読み込まれるクラスを指定できます。
(以下のようにして編集ボタンを押すと, Main.asが自動生成されて，編集可能になります。)
![dir2.png](https://qiita-image-store.s3.amazonaws.com/0/54559/7640f70f-b3d6-fcc6-ad05-4e3e486e3d81.png)

3.Main.asのソースコードは以下の通りです

■コードのポイント
・初期座標はムービークリップから直接取得しています。
　→あとから初期値の変更をビジュアルを見ながら変更できます。
・パラメータベースでアニメーションをコントロールしています。
　→こうすると，全体の秩序をたもったまま微妙な調整がしやすくなります。
・タイムラインをswitch(time)で記述します。
　→あとから微妙なタイミングやFPSを変更しやすくなります。

■モーションのポイント
・文字のパーツごとに飛び出てくるようにして、演出しています。
・位置と拡大率の減衰速度を微妙にずらすと雰囲気がでます。
・文字が迫ってくるような表現にし，画面をホワイトアウトするような切替で繋ぎやすくしています。
・AfterEffectsでモーションブラーを加えると、より自然な動きとなります。

---

```as3:Main.as

package  {
	
	import flash.display.MovieClip;
	import flash.events.*;
	
	public class Main extends MovieClip {
		
		private var position:Array = new Array();
		private var time:int = 0;
		private var FPS = 30;
		private var i;
		
		public function Main() {
			
			position = new Array();
			for(i=1;i<=title.numChildren;i++){
				position[i] = new Array();
			
				//loadDefaultPosition
				position[i]["targetX"] 		  	= title["t"+i].x;
				position[i]["targetY"] 		  	= title["t"+i].y;
			}
			
			
			this.addEventListener(Event.ENTER_FRAME,enterFrame);
			
		}
		
		private function enterFrame(e:Event)
		{
			var i;
			var k=0.05;
	
			time++;
			
			for(i=1;i<=title.numChildren;i++)
			{
				
				// set target of parts
				
				switch(time)
				{
					case 1:
						
						position[i]["x"] 			= 0;
						position[i]["y"] 			= 0;
						position[i]["scale"] 		= 0;
						position[i]["rotation"] 	=  Math.random() * 360*4 - 360*2);
						position[i]["alpha"]	 	= 0;
						position[i]["vx"] 			= 0;
						position[i]["vy"] 			= 0;
						position[i]["vscale"] 		= 0;
						position[i]["vrotation"] 	= 0;
					
						position[i]["targetRotation"]	= 0;
						position[i]["targetAlpha"]		= 1;
						position[i]["targetScale"]		= 1;
						break;
					
					case 4*FPS: /* 4sec after */
						position[i]["targetRotation"] 	+= Math.random() * 10 -5;
						position[i]["targetScale"] 		+= Math.random() * 0.4;
						position[i]["targetX"] += Math.random() * 10 -5;
						position[i]["targetY"] += Math.random() * 10 -5;
						break;

					case int(5.2*FPS): /* 5.2sec after*/
						position[i]["targetRotation"] 	+= Math.random() * 50 -25;
						position[i]["targetScale"] 		+= Math.random() * 1.8;
						position[i]["targetX"] += Math.random() * 100 -50;
						position[i]["targetY"] += Math.random() * 100 -50;
						break;

					case int(6.2*FPS): /* 6.2sec after*/
						position[i]["targetRotation"] 	+= Math.random() * 100 -50;
						position[i]["targetScale"] 		+= Math.random() * 5;
						position[i]["targetX"] += Math.random() * 100 -50;
						position[i]["targetY"] += Math.random() * 100 -50;
						break;
				}
				
				// move parts
				
				if (i<=int(time/2))
				{
				
				position[i]["x"] += position[i]["vx"] += (position[i]["targetX"] - position[i]["x"])*k;
				position[i]["y"] += position[i]["vy"] += (position[i]["targetY"] - position[i]["y"])*k;
				position[i]["rotation"] += position[i]["vrotation"] += (position[i]["targetRotation"] - position[i]["rotation"])*k;
				position[i]["scale"] += position[i]["vscale"] += (position[i]["targetScale"] - position[i]["scale"])*k;
				position[i]["alpha"] += (position[i]["targetAlpha"] - position[i]["alpha"])*k;
				
				position[i]["vx"] *= 0.9;
				position[i]["vy"] *= 0.9;
				position[i]["vscale"] *= 0.9;
				position[i]["vrotation"] *= 0.85;
				
				}
				// set parts
				
				title["t"+i].x = position[i]["x"];
				title["t"+i].y = position[i]["y"];
				title["t"+i].rotation = position[i]["rotation"];
				title["t"+i].alpha    = position[i]["alpha"];
				title["t"+i].scaleX   = position[i]["scale"];
				title["t"+i].scaleY   = position[i]["scale"];
			}
		}
	}
}

```