サイン波を描くアニメーション

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

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

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

fig05-02-11a.jpgswfを試す
//初期値設定
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;
	}
	//1つ前のインスタンスを追いかける
	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;
}
まったく新しいAS3の世界!
694a.jpg
Adobe Flash CS4
詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)

楽しいActionScript。
新たなる1歩へと踏み出しましょう。
■内容は?→ 目次を見る
■評判は?→ 書評を読む
この本を書いたわけ

このブログ記事について

このページは、oshigeが2009年7月 4日 00:52に書いたブログ記事です。

ひとつ前のブログ記事は「カーソルの回りを楕円で回る」です。

次のブログ記事は「Tweenクラスを使う」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

あわせて読みたいブログパーツ