Chap05 基本的なアニメーションテクニック: 2009年7月アーカイブ

（section05-03 座標移動のアニメーションから抜粋）

　yoyo()はトゥイーンの逆再生を行うメソッドです。プロパティの値がaからbに変化するトゥイーンを作って実行している最中にyoyo()を実行すると、bからaへの逆向きのトゥイーンになります。さらに逆向きのトゥイーンの再生中にyoyo()を実行すると再びトゥイーンの方向が逆転してaからbへのトゥイーンになります。
→swfを試す

[:script:]ロールオーバーしている間、右回りと左回りを交互に繰り返す。

import fl.transitions.Tween;
import fl.transitions.easing.Regular;
import fl.transitions.TweenEvent;
var twObj:Tween;

//ロールオーバーとロールアウトの設定
box_mc.addEventListener(MouseEvent.ROLL_OVER, startSwing);
box_mc.addEventListener(MouseEvent.ROLL_OUT, stopSwing);

//右回転
function startSwing(eventObj:MouseEvent):void {
	//右に１回転する
	twObj=new Tween(box_mc,"rotation",Regular.easeInOut,0,360,1,true);
	//回転が完了したら逆回転する
	twObj.addEventListener(TweenEvent.MOTION_FINISH, rewind);
}
//逆回転
function rewind(eventObj:TweenEvent):void {
	twObj.yoyo();
}
//逆回転を行わない
function stopSwing(eventObj:MouseEvent):void {
	twObj.removeEventListener(TweenEvent.MOTION_FINISH, rewind);
}

（section05-03 座標移動のアニメーションから抜粋）

　次のサンプルでは、トゥイーンアニメーションの関数を配列motionListに入れておき、トゥイーンが完了したならばmotionListから順に次の関数を取り出して実行します。トゥイーンの関数には右へトゥイーンするmoveRight()、左へトゥイーンするmoveLeft()、180度回転するturn()の３つの種類の関数があります。これを９行目で示すように[moveRight,turn,moveLeft,turn]の順でmotionListに入れます。そしてnextMotion()でmotionListから関数を順に取り出して実行していきます。36行目ではmotionListから取り出した関数は変数motionに入れていますが、motion()と実行することで取り出した関数を実行できます。

　トゥイーンアニメーションのそれぞれの関数では、実行したトゥイーンが完了したならばnextMotion()を呼び出すようにTweenEvent.MOTION_FINISHイベントのリスナー関数を登録します。moveRight()、moveLeft()、turn()で毎回新しくtwObjインスタンスを作成するので、そのつどにTweenEvent.MOTION_FINISHイベントのリスナー関数を登録しなければなりません。

→swfを試す

[:script:]複数のトゥイーンアニメーションを連続して再生する

（section05-03 座標移動のアニメーションから抜粋）

トゥイーンの完了を待って次の処理に移りたいという場合があります。Tweenクラスではトゥイーンの完了をTweenEvent.MOTION_FINISHイベントで知ることができます。
　次のサンプルではこれを利用して２つのトゥイーンを連続させています。まず最初にステージの外から中央へトゥイーンで登場し、移動が完了したならば続いてスケールをトゥイーンさせてビヨンと弾むようなアニメーションを行います。トゥイーンの関数にElastic.easeOutを使うとビヨンと弾むように見えます。
→swfを試す

//利用するクラスをインポート
import fl.transitions.Tween;
import fl.transitions.easing.Regular;
import fl.transitions.easing.Elastic;
import fl.transitions.TweenEvent;
var twObj1:Tween;
var twObj2:Tween;
var twObj3:Tween;

//ステージの外から登場してくる
twObj1=new Tween(box_mc,"x",Regular.easeInOut,-100,275,1,true);
twObj1.addEventListener(TweenEvent.MOTION_FINISH, spring);

//移動が完了したらビヨンと弾む
function spring(eventObj:TweenEvent):void {
	twObj2=new Tween(box_mc,"scaleX",Elastic.easeOut,0.8,1,1,true);
	twObj3=new Tween(box_mc,"scaleY",Elastic.easeOut,0.8,1,1,true);
}

（section05-03 Tweenクラスを利用したアニメーションから抜粋）

　次のサンプルはステージにあるbox_mcインスタンスをx座標50の位置からx座標450の位置まで、Tweenクラスを利用して直線的に移動させる例です。引数は次のようになります。トゥイーンさせるインスタンスはbox_mc、値を変化させるプロパティはx、値の変化に利用する関数は標準的なイーズイン・アウトのRegular.easeInOut、xプロパティの開始値は50、終了値は450、移動には1秒間、秒数指定なので最後の引数はtrueです。

//利用するクラスをインポート
import fl.transitions.Tween;
import fl.transitions.easing.Regular;
//box_mcのx座標をトゥイーンする
var twObj_x:Tween=new Tween(box_mc,"x",Regular.easeInOut,50,450,1,true);

→swfを試す

（section05-02 座標移動のアニメーションから抜粋）

　次のサンプルでは５個のインスタンスがサイン波を描きながらステージを右から左へ横切ります。実際には最初の１個だけがサイン波を描いて動き、残りのインスタンスは１つ前のインスタンスを追いかけています。各インスタンスは前との間隔を少しずつ詰めるようにしてあり、アルファ値も少しずつ薄くしてあるので残像のように見えます。
　１個目のインスタンスはステージの右端まで来たら左端に戻ります。他のインスタンスも遅れてそれに追従します。インスタンスをサイン波を描いて動かせるためにY軸座標をMath.sin()で縦の振幅運動にしておき、X座標は5ピクセルずつ加算してステージを横切るようにしています。

#ステージ右まで行ったball_mcの5個がすべて右に抜け、左から出てくるようにするにはどうしたらいいでしょう？ぜひ、自分で考えてみてください。

→swfを試す

//初期値設定
var offsetY:Number=200;
var deg:uint=0;
ball5_mc.x=ball4_mc.x=ball3_mc.x=ball2_mc.x=ball_mc.x=100;
ball5_mc.y=ball4_mc.y=ball3_mc.y=ball2_mc.y=ball_mc.y=offsetY;
ball2_mc.alpha=0.8;
ball3_mc.alpha=0.6;
ball4_mc.alpha=0.4;
ball5_mc.alpha=0.2;
//イベントリスナーの設定
addEventListener(Event.ENTER_FRAME, onEnterframe);
//フレーム再生イベントのリスナー関数
function onEnterframe(eventObj:Event):void {
	//10度ずつ進める
	deg = (deg+10)%360;
	//振幅100のサイン波
	ball_mc.y=offsetY-100*Math.sin(deg*Math.PI/180);
	//座標移動
	if ((ball_mc.x-ball_mc.width/2)>stage.stageWidth) {
		//ステージの外に出たら反対側に左に戻す
		ball_mc.x=- ball_mc.width/2;
	} else {
		//右へ進む
		ball_mc.x+=5;
	}
	//１つ前のインスタンスを追いかける
	ball2_mc.x += (ball_mc.x - ball2_mc.x)/3;
	ball2_mc.y += (ball_mc.y - ball2_mc.y)/3;
	ball3_mc.x += (ball2_mc.x - ball3_mc.x)/3;
	ball3_mc.y += (ball2_mc.y - ball3_mc.y)/3;
	ball4_mc.x += (ball3_mc.x - ball4_mc.x)/3;
	ball4_mc.y += (ball3_mc.y - ball4_mc.y)/3;
	ball5_mc.x += (ball4_mc.x - ball5_mc.x)/3;
	ball5_mc.y += (ball4_mc.y - ball5_mc.y)/3;
}

（section05-02 座標移動のアニメーションから抜粋）

　次のサンプルはマウスカーソルを回りを楕円形を描いてトンボのインスタンスが飛びます。トンボは進行方向を向くように回転に合わせて向きを変えます。マウスカーソルを動かすとトンボはゆっくり追いかけます。
　トンボが回る軌道を楕円形にするには、15〜16行目のようにX軸方向の振幅をY軸方向の振幅の2倍にします。これで横方向に２倍の長さの楕円になります。マウスカーソルの座標を楕円の中心にすればマウスカーソルの回りをトンボが回ります。このとき10〜11行目のようにマウスカーソルの座標にイージングで近づくようにすれば、マウスカーソルをゆっくり追いかける楕円軌道になります。
　トンボの向きを回転の進行方向に合わせているのは18行目です。トンボのインスタンスのrotationの値を周回の回転角度と同じにすれば向きが合いますが、時計回りなのでトンボを下向きに作っておく必要があります。

#このサンプルは「AS3入門ノート２」にもあるサンプルですが、好例なので取り上げました（説明は書き直してます）。

→swfを試す

var deg:uint = 0;
var r:uint = 90;
var tmpX:Number = stage.mouseX;
var tmpY:Number = stage.mouseY;
//イベントリスナーの設定	
tombo_mc.addEventListener(Event.ENTER_FRAME, roundCursor);
//フレーム再生イベントのリスナー関数
function roundCursor(eventObj:Event):void {
	//マウスカーソルの位置に近づく
	tmpX += (stage.mouseX-tmpX)/10;
	tmpY += (stage.mouseY-tmpY)/10;
	//15度ずつ回転する
	deg = (deg+15)%360;
	//(tmpX,tmpY)を中心点にして時計回りに楕円で回る
	tombo_mc.x = 2*r*Math.cos(deg*Math.PI/180) + tmpX;
	tombo_mc.y = r*Math.sin(deg*Math.PI/180) + tmpY;
	//回転に合わせて向きを変える
	tombo_mc.rotation = deg;
}

（section05-01 フレームのナビゲーションから抜粋）

次のサンプルではムービークリップの上でマウスカーソルを左右に水平に動かすだけでムービークリップのフレームの写真をブラウズできます。スライダーを動かして映像のコマ送りを行うような操作です。マウスカーソルがインスタンスの左端ならフレーム１の写真を表示し、右端なら最終フレームの写真を表示します。カーソルが途中の40%の位置にあるならば総フレーム数の40%の位置のフレームを表示します。
＃これを応用すれば外部ファイルのサムネイルだけを先に読み込んでブラウズすることもできますよね。


カーソルが左端ならフレーム１，右端は最終フレームというようにロールオーバーしているカーソルの水平座標に応じてムービークリップのフレームを移動します。
→swfを試す

photo_mc.stop();
photo_mc.addEventListener(MouseEvent.ROLL_OVER, onRollover);
photo_mc.addEventListener(MouseEvent.ROLL_OUT, onRollout);

//ロールオーバーで動作開始
function onRollover(eventObj:MouseEvent):void {
	var mc:MovieClip=eventObj.target as MovieClip;
	mc.addEventListener(Event.ENTER_FRAME, stepFrame);
}
//ロールアウトで動作停止
function onRollout(eventObj:MouseEvent):void {
	var mc:MovieClip=eventObj.target as MovieClip;
	mc.removeEventListener(Event.ENTER_FRAME, stepFrame);
	mc.gotoAndStop(1);
}
//マウス座標に応じたフレームへ移動
function stepFrame(eventObj:Event):void {
	var mc:MovieClip=eventObj.target as MovieClip;
	//幅を総フレーム数としたときのマウスが指すフレーム番号
	var frame:uint= Math.ceil(mc.totalFrames*mc.mouseX/mc.width);
	mc.gotoAndStop(frame);
}