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
1.MovieClipの設定を以下のようにします。
（titleのMovieclipに入れ子状に文字の構成要素をt1,t2,... とMovieClipにします。）
2.ドキュメントのプロパティの設定を以下のようにすると，初期に読み込まれるクラスを指定できます。
(以下のようにして編集ボタンを押すと, Main.asが自動生成されて，編集可能になります。)
3.Main.asのソースコードは以下の通りです
■コードのポイント
・初期座標はムービークリップから直接取得しています。
→あとから初期値の変更をビジュアルを見ながら変更できます。
・パラメータベースでアニメーションをコントロールしています。
→こうすると，全体の秩序をたもったまま微妙な調整がしやすくなります。
・タイムラインをswitch(time)で記述します。
→あとから微妙なタイミングやFPSを変更しやすくなります。
■モーションのポイント
・文字のパーツごとに飛び出てくるようにして、演出しています。
・位置と拡大率の減衰速度を微妙にずらすと雰囲気がでます。
・文字が迫ってくるような表現にし，画面をホワイトアウトするような切替で繋ぎやすくしています。
・AfterEffectsでモーションブラーを加えると、より自然な動きとなります。
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"];
}
}
}
}