BetweenAS3を使ってみる6（tweenerからの書き換え2）
Twennerなら使ったことがある、という人は多いだろう。そういう人のためにTweenerの作例をBetweenAS3で書き換えるとこうなるよ、という例を示す。
▼Wonderfl
▼ActionScript AS3(FP9)
/*
TweenerをBetweenAS3に書き換える2
黒■がTweener。赤や緑の■がBetweenAS3。
Tweenerの作例を元にBetweenAS3に書き換えてみた。
★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 org.libspark.betweenas3.events.TweenEvent;
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, "◆5. アニメーションシークエンスを演出するために遅延を設定");
// ◆アニメーションシークエンスを演出するために遅延を設定
var box5t:Sprite = addNewBox(400, 60, 0x000000);
Tweener.addTween(box5t, {x:20, time:0.5});
Tweener.addTween(box5t, {x:0, time:0.5, delay: 0.5});
// ↓BetweenAS3化
var box5b:Sprite = addNewBox(400, 90, 0xFF0000);
BetweenAS3.tween(box5b, {x:20}, null, 0.5, Expo.easeOut).play();
BetweenAS3.delay(BetweenAS3.tween(box5b, {x:0}, {x:20}, 0.5, Expo.easeOut), 0.5).play();
// ↓さらにBetweenAS3風に書き直すなら
var box5b2:Sprite = addNewBox(400, 120, 0x00FF00);
BetweenAS3.serial(
BetweenAS3.tween(box5b2, {x:20}, null, 0.5, Expo.easeOut),
BetweenAS3.tween(box5b2, {x:0}, null, 0.5, Expo.easeOut)
).play();
//addNewText(50, 150, "◆6. tweenerの「テンプレート」を使用");
//tweenerの「テンプレート」を使用
//var box6b:Sprite = addNewBox(400, 180, 0x00FF00);
//var temp:IITween = BetweenAS3.tween(box6b, {x:20}, null, 0.5, Expo.easeOut);
addNewText(50, 150, "◆7. イベントを指定して、フェードアウトの後に半透明で回転（通常の関数）");
var box7t:Sprite = addNewBox(100, 180, 0x000000);
// イベントを指定して、フェードアウトの後に半透明で回転（通常の関数）
var disappear:Function = function():void {
box7t.alpha = 0.5;
box7t.rotation = 45;
};
Tweener.addTween(box7t, {alpha:0, time:1, onComplete:disappear});
var box7b:Sprite = addNewBox(200, 180, 0xFF0000);
var disappear2:Function = function():void {
box7b.alpha = 0.5;
box7b.rotation = 45;
};
var t7:ITween;
t7 = BetweenAS3.tween(box7b, { alpha:0 }, null, 1, Expo.easeOut);
t7.addEventListener(TweenEvent.COMPLETE, disappear2);
t7.play();
addNewText(50, 200, "◆8. イベントを指定して、フェードアウトの後に半透明で回転（匿名関数）");
var box8t:Sprite = addNewBox(100, 230, 0x000000);
// イベントを指定して、フェードアウトの後に半透明で回転（匿名関数）
Tweener.addTween(box8t, {alpha:0, time:1, onComplete:function():void { box8t.alpha = 0.5;box8t.rotation = 45; }});
var box8b:Sprite = addNewBox(200, 230, 0xFF0000);
var t8:ITween;
t8 = BetweenAS3.tween(box8b, { alpha:0 }, null, 1, Expo.easeOut);
t8.addEventListener(TweenEvent.COMPLETE, function():void { box8b.alpha = 0.5; box8b.rotation = 45; } );
t8.play();
addNewText(50, 250, "◆9. より複雑なイベントの例");
var box9t:Sprite = addNewBox(100, 280, 0x000000);
// より複雑なイベントの例
var fGo:Function = function():void { trace ("I'll go!"); };
var fGoing:Function = function():void { trace ("I'm going!"); };
var fGone:Function = function():void { trace ("I'm gone!"); };
Tweener.addTween(box9t, {alpha:0, time:1, onStart:fGo, onUpdate:fGoing, onComplete:fGone});
var box9b:Sprite = addNewBox(200, 280, 0xFF0000);
var fGo2:Function = function():void { trace ("I'll go!2"); };
var fGoing2:Function = function():void { trace ("I'm going!2"); };
var fGone2:Function = function():void { trace ("I'm gone!2"); };
var t9:ITween;
t9 = BetweenAS3.tween(box9b, { alpha:0 }, null, 1, Expo.easeOut);
t9.addEventListener(TweenEvent.PLAY, fGo2);
t9.addEventListener(TweenEvent.UPDATE, fGoing2);
t9.addEventListener(TweenEvent.COMPLETE, fGone2);
t9.play();
addNewText(50, 300, "◆10. 遅延なしに即座に新たな値を適用");
var box10t:Sprite = addNewBox(100, 330, 0x000000);
// 遅延なしに即座に新たな値を適用
Tweener.addTween(box10t, { alpha:0.5 } );
var box10b:Sprite = addNewBox(200, 330, 0xFF0000);
BetweenAS3.tween(box10b, null, { alpha:0.5 }, 0).play();
addNewText(50, 360, "◆11. 変数やプロパティに関係のないその他の特殊なプロパティを使った例");
var box11t:Sprite = addNewBox(100, 390, 0x000000);
var box11tWrapper:Wrapper = new Wrapper(box11t);
// 変数やプロパティに関係のないその他の特殊なプロパティを使った例
Tweener.addTween(box11tWrapper, { quarterRotation:100, time:1 } );
var box11b:Sprite = addNewBox(200, 390, 0xFF0000);
var box11bWrapper:Wrapper = new Wrapper(box11b);
BetweenAS3.tween(box11bWrapper, { quarterRotation:100 }, null, 1, Expo.easeOut).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;
}
}
}
import flash.display.Sprite;
class Wrapper
{
private var _sp:Sprite;
public function Wrapper(sp:Sprite):void
{
_sp = sp;
}
public function set quarterRotation(arg:Number):void
{
_sp.rotation = arg / 4;
}
public function get quarterRotation():Number
{
return _sp.rotation;
}
}
