ActionScript入門Wiki - BetweenAS3でオブジェクトを動かす

トップページ > BetweenAS3 > BetweenAS3でオブジェクトを動かす

概要

まずは基本的な使い方として、BetweenAS3.tween()でオブジェクトを動かしてみましょう。
BetweenAS3.tween()とは、time秒かけてfromからtoへとプロパティ値を変更させるメソッドです。

プログラム

var rect:Sprite = new Sprite();
rect.graphics.beginFill(0xFF0000);
rect.graphics.drawRect(0, 0, 50, 50);
rect.graphics.endFill();
addChild(rect);

rectという名前のSpriteを用意して、表示リストに加えておきます。
drawRect()を使用して50 * 50ピクセルの赤四角形を描いてください。

引数を一つ一つ説明していきます。

第一引数

BetweenAS3.tween(rect, ...続く

target:Object
ここに動かしたいオブジェクトを指定します。
今回は上で描いた赤四角形を動かしたいのでrectと書いておきます。

第二引数

BetweenAS3.tween(rect, { x:300, y:200 }, ...続く

to:Object
第二引数はプロパティの設定です。
この引数は目標値を設定します。

プロパティ名:値の順番で記述してください。
複数のプロパティを設定したい場合は、カンマで区切って記述します。
そのプロパティを中括弧(波括弧)で括って完成です。

ここで指定できるプロパティというのは、第一引数で指定したオブジェクトに付いているプロパティだけです。
例えばSpriteならx, y, rotation, scaleX, scaleYなどですね。
オブジェクトに付いていないプロパティを指定すると実行時にエラーが出ます。

rectを動かすにはx, yプロパティを使用すればいいですね。
{ x:300, y:200 }のようにxの位置を300, yの位置を200に設定させます。

第三引数

BetweenAS3.tween(rect, { x:300, y:200 }, null, ...続く

from:Object = null
第三引数もプロパティの設定です。
この引数はプロパティの初期設定をするためのものです。

プロパティの設定方法は第二引数のfromとまったく同じです。
nullを指定すると今のプロパティのまま実行されます。

rectの初期位置(プロパティ)を決めるための設定だと思ってください。
初期位置は今の位置、つまり座標(0, 0)のままでいいのでnullを入れておきます。
別に、{ x:0, y:0 }と書いても構いません。

第四引数

BetweenAS3.tween(rect, { x:300, y:200 }, { x:0, y:0 }, 1.0)

time:Number = 1.0
第四引数は動かす時間の設定です。
fromからtoへとプロパティ値を変更させるわけですが、その処理の時間を設定させるわけです。
単位は秒で、デフォルト値は1.0(秒)です。

さて、これでtween()の設定が出来ました。

BetweenAS3.tween(rect, { x:300, y:200 }, { x:0, y:0 }, 1.0).play();

後ろに.play()と付けるとtween()の処理が実行されます。

ここでは、

target
- rect
to
- { x:300, y:200 }
from
- null
time
- 1.0

を指定しているので、rectオブジェクトを1.0秒かけて、今の位置から(300, 200)の位置まで移動させるという処理が行われます。

BetweenAS3.tween(rect, { x:300, y:200 }).play();

fromとtimeの指定した値はデフォルト値と同じなので上のコードのように省略することが出来ます。

.play()と付けると何故動くのかは次の記事で説明したいと思います。

検証用コード

package
{
	import flash.display.Sprite;
	import org.libspark.betweenas3.BetweenAS3;
 
	public class Main extends Sprite
	{
		public function Main()
		{
			var rect:Sprite = new Sprite();
			rect.graphics.beginFill(0xFF0000);
			rect.graphics.drawRect(0, 0, 50, 50);
			rect.graphics.endFill();
			addChild(rect);
 
			BetweenAS3.tween(rect, { x:300, y:200 }).play();
		}
	}
}

リンク元(0)