BetweenAS3を使ってみる5（tweenerからの書き換え1）

umhr_betweenas3Twennerなら使ったことがある、という人は多いだろう。そういう人のためにTweenerの作例をBetweenAS3で書き換えるとこうなるよ、という例を示す。

▼Wonderfl

黒■がTweener。赤や緑の■がBetweenAS3。

Tweenerの作例を元にBetweenAS3に書き換えてみた。

play()が必要なのと、
FromValuesを設定できるのがポイント

★Parameters
Tweener Parameters are:
.addTween(target:Object, tweeningParameters:Object)

BetweenAS3 Parameters are:
.tween(Target, ToValues, FromValues, Time, Easing)

★参考
Tweenerの作例は↓ここより
http://www.tonpoo.com/tweener/methods/Tweener_addTween.html

BetweenAS3は↓ここを参考にしたけど、
http://www.be-interactive.org/?itemid=449
仕様変更されているので注意。

▼ActionScript AS3(FP9)
[sourcecode language=”as3″]
/*
TweenerをBetweenAS3に書き換える1

黒■がTweener。赤や緑の■がBetweenAS3。

Tweenerの作例を元にBetweenAS3に書き換えてみた。

play()が必要なのと、
FromValuesを設定できるのがポイント

★Parameters
Tweener Parameters are:
.addTween(target:Object, tweeningParameters:Object)

BetweenAS3 Parameters are:
.tween(Target, ToValues, FromValues, Time, Easing)

★参考
Tweenerの作例は↓ここより
http://www.tonpoo.com/tweener/methods/Tweener_addTween.html

BetweenAS3は↓ここを参考にしたけど、
http://www.be-interactive.org/?itemid=449
仕様変更されているので注意。
*/
package
{
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.events.MouseEvent;
import org.libspark.betweenas3.BetweenAS3;
import org.libspark.betweenas3.tweens.ITween;
import org.libspark.betweenas3.easing.*;
import caurina.transitions.Tweener;

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");

addNewText(50, 30, "◆1. ムービークリップを指定位置に0.5秒でスライドさせる");
// ◆ムービークリップを指定位置に0.5秒でスライドさせる
var box1t:Sprite = addNewBox(400, 60, 0x000000);
Tweener.addTween(box1t, {x:10, time:0.5});

// ↓BetweenAS3化　tweenerのデフォルト値のイージングはExpo.easeOutにあたる
var box1b:Sprite = addNewBox(400, 90, 0xFF0000);
BetweenAS3.tween(box1b, {x:10}, null, 0.5, Expo.easeOut).play();

addNewText(50, 130, "◆2. ムービークリップを2秒でフェードイン");
// ◆ムービークリップを2秒でフェードイン
var box2t:Sprite = addNewBox(100, 160, 0x000000);
box2t.alpha = 0;
Tweener.addTween(box2t, {alpha:1, time:2});

// ↓BetweenAS3化
var box2b:Sprite = addNewBox(200, 160, 0xFF0000);
box2b.alpha = 0;
BetweenAS3.tween(box2b, {alpha:1}, null, 2, Expo.easeOut).play();
// ↓さらにBetweenAS3風に書き直すなら
var box2b2:Sprite = addNewBox(300, 160, 0x00FF00);
BetweenAS3.tween(box2b2, {alpha:1}, {alpha:0}, 2, Expo.easeOut).play();

addNewText(50, 200, "◆3. xとalphaの値を同時に変更");
// ◆xとalphaの値を同時に変更
var box3t:Sprite = addNewBox(400, 230, 0x000000);
box3t.alpha = 0;
Tweener.addTween(box3t, {x:10, alpha:1, time:0.5});

// ↓BetweenAS3化
var box3b:Sprite = addNewBox(400, 260, 0xFF0000);
box3b.alpha = 0;
BetweenAS3.tween(box3b, {x:10, alpha:1}, null, 0.5, Expo.easeOut).play();
// ↓さらにBetweenAS3風に書き直すなら
var box3b2:Sprite = addNewBox(400, 290, 0x00FF00);
BetweenAS3.tween(box3b2, {x:10, alpha:1}, {alpha:0}, 0.5, Expo.easeOut).play();

addNewText(50, 330, "◆4. 他のtransitionタイプを使ってtweening");
// ◆他のtransitionタイプを使ってtweening
var box4t:Sprite = addNewBox(400, 370, 0x000000);
Tweener.addTween(box4t, {x:10, time:0.7, transition:"linear"});

// ↓BetweenAS3化
var box4b:Sprite = addNewBox(400, 400, 0xFF0000);
BetweenAS3.tween(box4b, {x:10}, null, 0.7, Linear.linear).play();
// ↓Linear.linearはデフォルト値なので省略できる
var box4b2:Sprite = addNewBox(400, 430, 0x00FF00);
BetweenAS3.tween(box4b2, {x:10}, null, 0.7).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]

Related Posts