as3_movieclipを動かす(減速イージング)

flashムービーを作るときにもっとも基本になるのがムービークリップをアニメーションさせることだと思います。
actionscriptでムービークリップを動かす時に良く使うのが以下の仕組みで、
目的値に向かって減速していって最後に止まるというものです。
FLASHアニメのかっこよさげなものは、ほぼこれを使っておけば間違いないです。

減速する座標移動の計算は下記のとおりです。

動かしたいMC座標 +=( 目的地座標 – 動かしたいMC座標 ) * 減速係数

目的座標を現在座標で引き算することで、目的値までの距離を出します。
その距離にたいして減速に関わる数値(0.1~0.3程度がいい動きします。)の値で掛けることで1回の移動距離が決まります。
それを+=で足すことで移動していきます。
減速
ブルーの線が1回に移動する距離で、常に距離の10分4だけ進むので
近づけば近づくほど1回の移動距離が短くなっていきます。
これが減速していく理由です。

実際にはこんなコードになると思います。
ballを tox , toyで指定した場所まで移動。

ball.x += ( tox - ball.x ) * 0.3;
ball.y += ( toy - ball.y ) * 0.3;

[ ダウンロード ]
このサンプルは1秒おきに、目的地のtoxとtoyにランダムで数値が入るようにしています。

例えばマウスに追従するならこんな感じ

ball.addEventListener( Event.ENTER_FRAME, scrollbana );
function scrollbana( event:Event ):void{
	var a:Number = 0.3;
	event.target.x +=  ( stage.mouseX - event.target.x)*a;
	event.target.y +=  ( stage.mouseY - event.target.y)*a;
}

[ ダウンロード ]

前回のスクロールバナーを減速イージングで表現するとこんな感じ。

[ ダウンロード ]

複数のムービークリップが同時に動くときに使うとかっこいいかもですね
たとえば、画像ギャラリーなどで写真の絞り込みなんかに使うとか。
サンプル↓(下のall ,block,wallなどで絞り込みができます)

[ ダウンロード ]

これも前回のXMLの読み込みでやった方法でデータとしてXMLを読み込み、photoの数だけ写真を読み込み、その後categoryの属性によって絞り込むというものです。
XMLはこちら↓

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<root>
	<photo image="1.jpg" category="block" />
	<photo image="2.jpg" category="block" />
			/* 途中略 */
	<photo image="18.jpg" category="sky" />
</root>

ちょっとしたムービーでも、イージングがかかってるだけど高品位に見えます。



Adobe Flash CS3 詳細! ActionScript3.0入門ノート2 (CD-ROM付)

Post a comment.