AS3のTweenライブラリ、BetweenAS3を使ってみる。基本的な書き方を見てみよう。
◆Step0 イージングをかけてみよう
BetweenAS3では、tween(ターゲット、終了値、開始値、時間、イージング)という指定の仕方をする。
たとえば、x:50,y:50にあるbox0というSpriteを、y:20に移動してからx:400,y:100にイージングをかけるには次のように書く。
[sourcecode language=”as3″]
var box0:Sprite = addNewBox(50,50,0xFF0000);
//初期化
var t0:ITween;
//tween(ターゲット、終了値、開始値、時間、イージング)
t0 = BetweenAS3.tween(box0,{x:400,y:100},{y:20},3,Cubic.easeOut);
//開始
t0.play();
[/sourcecode]
終了値、開始値はオブジェクトで渡す。開始値を指定する必要がない場合は、次のようにnullにする。
[sourcecode language=”as3″]
t0 = BetweenAS3.tween(box0,{x:400,y:100},null,3,Cubic.easeOut);
[/sourcecode]
◆Step1 相対値
相対的な指定「x += 350」のような場合は頭に「$」をつけて「$x:350」
[sourcecode language=”as3″]
t1 = BetweenAS3.tween(box1,{$x:350,y:200},null,3,Cubic.easeOut);
[/sourcecode]
◆Step2 途中から
tweenを開始するには、必ず「play()」などの開始命令が必要。
「play()」は通常の開始命令だが、「gotoAndPlay(0.7)」にすると、0.7秒目のtweenから開始という意味になる。他には「gotoAndStop()」「stop()」があり、Flashユーザーに親しみやすい名前になっている。
◆Step3 ディレイ
ディレイを指定するには、次のように書く。
[sourcecode language=”as3″]
var t3:ITween;
t3 = BetweenAS3.tween(box3, { x:400, y:400 }, null, 3, Cubic.easeOut);
//1.5秒間のディレイ
t3 = BetweenAS3.delay(t3, 1.5);
t3.play();
[/sourcecode]
■おまけ
BetweenAS3では、まとめて書けるようにもなっている。
上の「Step3 ディレイ」だったら、次のように書き換えが可能。
[sourcecode language=”as3″]
BetweenAS3.delay(BetweenAS3.tween(box3, { x:400, y:400 }, null, 3, Cubic.easeOut), 1.5).play();
[/sourcecode]
▼Wonderfl
▼ActionScript AS3(FP9)
[sourcecode language=”as3″]
/*
* BetweenAS3の基本1(制御)
*
* 参考
* http://www.be-interactive.org/?itemid=449
* */
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import org.libspark.betweenas3.BetweenAS3;
import org.libspark.betweenas3.easing.Cubic;
import org.libspark.betweenas3.tweens.ITween;
public class Main extends Sprite
{
public function Main()
{
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
mouseUpHandler(null);
}
private function mouseUpHandler(e:MouseEvent):void
{
while (numChildren > 0) {
removeChildAt(0);
}
addNewText(0, 0, "Click to replay");
//◆Step0 イージングをかけてみよう
addNewText(50, 30, "◆0. tween(ターゲット、終了値、開始値、時間、イージング)");
var box0:Sprite = addNewBox(50, 50, 0xFF0000);
//初期化
var t0:ITween;
//tween(ターゲット、終了値、開始値、時間、イージング)
//開始値を指定しない場合は、null
t0 = BetweenAS3.tween(box0, { x:400, y:100 }, { y:20 }, 3, Cubic.easeOut);
//開始
t0.play();
//◆Step1 相対値
addNewText(50, 130, "◆1. 相対的な指定 $x:350");
var box1:Sprite = addNewBox(50, 150, 0x00FF00);
var t1:ITween;
//相対的な指定「x += 350」のような場合は頭に「$」をつけて「$x:350」
t1 = BetweenAS3.tween(box1, { $x:350, y:200 }, null, 3, Cubic.easeOut);
t1.play();
//◆Step2 途中から
addNewText(50, 230, "◆2. 途中(0.7秒目)から開始 t2.gotoAndPlay(0.7)");
var box2:Sprite = addNewBox(50, 250, 0x0000FF);
var t2:ITween;
t2 = BetweenAS3.tween(box2, { x:400, y:300 }, null, 3, Cubic.easeOut);
//0.7秒目から開始
t2.gotoAndPlay(0.7);
//◆Step3 ディレイ
addNewText(50, 330, "◆3. ディレイ(1.5秒間) t3 = BetweenAS3.delay(t3,1.5)");
var box3:Sprite = addNewBox(50, 350, 0x000000);
var t3:ITween;
t3 = BetweenAS3.tween(box3, { x:400, y:400 }, null, 3, Cubic.easeOut);
//1.5秒間のディレイ
t3 = BetweenAS3.delay(t3, 1.5);
t3.play();
}
private function addNewBox(x:Number, y:Number, c:int):Sprite
{
var sp:Sprite = new Sprite();
sp.graphics.beginFill(c);
sp.graphics.drawRect( -10, -10, 20, 20);
sp.graphics.endFill();
sp.x = x;
sp.y = y;
addChild(sp);
return sp;
}
private function addNewText(x:Number, y:Number, txt:String):TextField
{
var tf:TextField = new TextField();
tf.text = txt;
tf.autoSize = TextFieldAutoSize.LEFT;
tf.x = x;
tf.y = y;
addChild(tf);
return tf;
}
}
}
[/sourcecode]
