BetweenAS3でビデオ的なコントロールを試してみる

forked:1
favorite:15
lines:361
license : All rights reserved
modified : 2009-05-14 19:42:00

Embed: Tweet

package
{
    import flash.display.*;
    import flash.events.*;
    import flash.text.*;
    import org.libspark.betweenas3.BetweenAS3;
    import org.libspark.betweenas3.easing.*;
    import org.libspark.betweenas3.tweens.ITween;
    import org.libspark.betweenas3.events.BetweenEvent;
    
    public class Main extends Sprite
    {
        
        public function Main()
        {
            addEventListener(Event.ADDED_TO_STAGE, initialize);
        }

private function initialize(e:Event):void
        {
            removeEventListener(Event.ADDED_TO_STAGE, initialize);

//　トゥイーンさせる矩形を配置
            var mc1:Sprite = new Sprite();
            mc1.graphics.beginFill(0);
            mc1.graphics.drawRect(-10, -10, 10, 10);
            mc1.graphics.endFill();
            addChild(mc1);

mc1.x = 100;
            mc1.y = 100;

var mc2:Sprite = new Sprite();
            mc2.graphics.beginFill(0);
            mc2.graphics.drawRect(0, -10, 10, 10);
            mc2.graphics.endFill();
            addChild(mc2);

mc2.x = 100;
            mc2.y = 100;

var mc3:Sprite = new Sprite();
            mc3.graphics.beginFill(0);
            mc3.graphics.drawRect(-10, 0, 10, 10);
            mc3.graphics.endFill();
            addChild(mc3);

mc3.x = 100;
            mc3.y = 100;
            
            var mc4:Sprite = new Sprite();
            mc4.graphics.beginFill(0);
            mc4.graphics.drawRect(0, 0, 10, 10);
            mc4.graphics.endFill();
            addChild(mc4);

mc4.x = 100;
            mc4.y = 100;

// トゥイーンの動きを記述
            var t:ITween = BetweenAS3.parallel(
                BetweenAS3.serial(
                    BetweenAS3.tween(mc1, {$y: 100}, null, 1, Cubic.easeIn),
                    BetweenAS3.tween(mc1, {$x: 100}, null, 1, Linear.easeNone),
                    BetweenAS3.tween(mc1, {$x: 200}, {$x: 100}, 1, Linear.easeNone),
                    BetweenAS3.tween(mc1, {$y: 0}, {$y: 100}, 1, Cubic.easeOut)
                ),
                BetweenAS3.serial(
                    BetweenAS3.tween(mc2, {$y: 150}, null, 1, Cubic.easeIn),
                    BetweenAS3.tween(mc2, {$x: 100}, null, 1, Linear.easeNone),
                    BetweenAS3.tween(mc2, {$x: 200}, {$x: 100}, 1, Linear.easeNone),
                    BetweenAS3.tween(mc2, {$y: 0}, {$y: 150}, 1, Cubic.easeOut)
                ),
                BetweenAS3.serial(
                    BetweenAS3.tween(mc3, {$y: 200}, null, 1, Cubic.easeIn),
                    BetweenAS3.tween(mc3, {$x: 100}, null, 1, Linear.easeNone),
                    BetweenAS3.tween(mc3, {$x: 200}, {$x: 100}, 1, Linear.easeNone),
                    BetweenAS3.tween(mc3, {$y: 0}, {$y: 200}, 1, Cubic.easeOut)
                ),
                BetweenAS3.serial(
                    BetweenAS3.tween(mc4, {$y: 250}, null, 1, Cubic.easeIn),
                    BetweenAS3.tween(mc4, {$x: 100}, null, 1, Linear.easeNone),
                    BetweenAS3.tween(mc4, {$x: 200}, {$x: 100}, 1, Linear.easeNone),
                    BetweenAS3.tween(mc4, {$y: 0}, {$y: 250}, 1, Cubic.easeOut)
                )
            );

var naturalT:ITween = t; // tの無加工状態をコピーしときます

var reversed:Boolean = false; // リバースしてるかどうか
            var scaled:Boolean = false; // スケールしてるかどうか
            const SCALE_NUM:Number = 3.5; // 早送り・早戻しでSCALE_NUM倍早く動かす 
            var tp:Number; // ボタンを押したときにつなぎめなく動かすための、ポジション保持用変数
            
            // コントロールパネルを配置
            /* ほんとはコントロールパネルクラスにボタン等の動きを書いて、tの参照を渡すのが
               いいんでしょうけど、見易さ重視で！ */
            var ctrlpanel:ControlPanel = new ControlPanel();
            ctrlpanel.y = 400;
            addChild(ctrlpanel);
            
            // 再生
            ctrlpanel.playBtn.addEventListener(MouseEvent.MOUSE_DOWN,
                function():void {
                    // 1.うごいていたら、いったん停止
                    if (t.isPlaying) {
                        t.stop();
                    }
                    
                    // 2.現在のポジションを取得して、新しいトゥイーンでのポジションに変換
                    if (!reversed){
                        tp = t.position;
                    }
                    else {
                        tp = t.duration - t.position;
                    }
                    
                    if (scaled){
                        tp = tp * SCALE_NUM;
                    }
                    
                    // 3.あらかじめコピーしておいたトゥイーンをもとに加工する
                    t = naturalT;
                    
                    // 4.ITweenにはisReversedやisScaled(?)みたいなのがないので、そのかわりに。
                    reversed = false;
                    scaled = false;
                    
                    // 5.加工されたトゥイーンを、現状と変わらない位置から再生
                    t.gotoAndPlay(tp);
                    
                    // 以下のボタンも同じ構成です
                }
            );
            
            //　早送り
            ctrlpanel.fastPlayBtn.addEventListener(MouseEvent.MOUSE_DOWN,
                function():void {
                    // 1.
                    if (t.isPlaying) {
                        t.stop();
                    }
                    
                    // 2.
                    if (!reversed){
                        tp = t.position;
                    }
                    else {
                        tp = t.duration - t.position;
                    }
                    
                    if (!scaled){
                        tp = tp / SCALE_NUM;
                    }
                    
                    // 3.
                    t = BetweenAS3.scale(naturalT, 1 / SCALE_NUM);

// 4.
                    reversed = false;
                    scaled = true;
                    
                    // 5.
                    t.gotoAndPlay(tp);
                }
            );
            
            // 逆再生
            ctrlpanel.reverseBtn.addEventListener(MouseEvent.MOUSE_DOWN,
                function():void {
                    // 1.
                    if (t.isPlaying) {
                        t.stop();
                    }
                    
                    // 2.
                    if (!reversed){
                        tp = t.duration - t.position;
                    }
                    else {
                        tp = t.position;
                    }
                    
                    if (scaled){
                        tp = tp * SCALE_NUM;
                    }
                    
                    // 3.
                    t = BetweenAS3.reverse(naturalT);
                    
                    // 4.
                    reversed = true;
                    scaled = false;
                    
                    // 5.
                    t.gotoAndPlay(tp);
                }
            );
            
            // 早戻し
            ctrlpanel.fastReverseBtn.addEventListener(MouseEvent.MOUSE_DOWN,
                function():void {
                    // 1.
                    if (t.isPlaying) {
                        t.stop();
                    }
                    
                    // 2.
                    if (!reversed){
                        tp = t.duration - t.position;
                    }
                    else {
                        tp = t.position;
                    }
                    
                    if (!scaled){
                        tp = tp / SCALE_NUM;
                    }
                    
                    // 3.
                    t = BetweenAS3.reverse(BetweenAS3.scale(naturalT, 1 / SCALE_NUM));
                    
                    // 4.
                    reversed = true;
                    scaled = true;
                    
                    // 5.
                    t.gotoAndPlay(tp);
                }
            );
            
            // 一時停止
            ctrlpanel.pauseBtn.addEventListener(MouseEvent.MOUSE_DOWN,
                function():void {
                    // うごいていたら停止
                    if (t.isPlaying) {
                        t.stop();
                    }
                }
            );
            
            // クリックシーク
            ctrlpanel.seekBase.addEventListener(MouseEvent.MOUSE_DOWN,
                function():void {
                    
                    var tpos:Number
                    
                    tpos = ctrlpanel.seekBase.mouseX / ctrlpanel.seekBase.width * naturalT.duration;
                    
                    if (scaled){
                        tpos = tpos / SCALE_NUM;
                    }
                    
                    if (reversed) {
                        tpos = t.duration - tpos;
                    }
                                        
                    if (t.isPlaying) {
                        t.stop();
                        t.gotoAndPlay(tpos);
                    }
                    else {
                        t.gotoAndStop(tpos);
                    }
                }
            );
            
            // 時間表示
            addEventListener(Event.ENTER_FRAME,
                function():void {
                    
                    /* トゥイーンをscaleやreverseすると、t.positionやdurationも
                       変わってくるので、都合の良いように変換してから表示します */
                    
                    var tpos:Number;
                    
                    if (!reversed) {
                        tpos = t.position;
                    }
                    else {
                        tpos = t.duration - t.position;
                    }
                    
                    if (scaled){
                        tpos = tpos * SCALE_NUM;
                    }
                    
                    ctrlpanel.posText.text = tpos.toString().substr(0, 4);
                    
                    // シークバーにも反映
                    ctrlpanel.seekBar.width = tpos / naturalT.duration * ctrlpanel.seekBase.width;
                }
            );
            
            /**
             * メモ:
             * 時間取得のところは、ほんとはENTER_FRAMEじゃなくて
             * t.addEventListener(BetweenEvent.UPDATE,
             * のようにするのが良さげなのですが、
             * reverseやscaleされたトゥイーンからはイベントがとれないみたいです。
             * → 今後対応予定だそうです！
             */
                
            ctrlpanel.durText.text = t.duration.toString().substr(0, 4);

// 以下、絵的な部分 ------------------------------------------------------------------

var startText:TextField = new TextField();
            startText.text = "START";
            startText.x = 80;
            startText.y = 67;
            addChild(startText);
            
            var startRect:Shape = new Shape();
            startRect.graphics.lineStyle(0,0);
            startRect.graphics.moveTo(-15, 15);
            startRect.graphics.lineTo(-15, -15);
            startRect.graphics.lineTo(15, -15);
            startRect.graphics.lineTo(15, 15);
            startRect.x = 100;
            startRect.y = 100;
            addChild(startRect);
            
            var goalText:TextField = new TextField();
            goalText.text = "GOAL";
            goalText.x = 282;
            goalText.y = 67;
            addChild(goalText);
            
            var goalRect:Shape = new Shape();
            goalRect.graphics.lineStyle(0,0);
            goalRect.graphics.moveTo(-15, 15);
            goalRect.graphics.lineTo(-15, -15);
            goalRect.graphics.lineTo(15, -15);
            goalRect.graphics.lineTo(15, 15);
            goalRect.x = 300;
            goalRect.y = 100;
            addChild(goalRect);
        }
    }
}

import flash.display.*;
import flash.text.*;

class ControlPanel extends Sprite
{
    
    public var playBtn:Sprite;
    public var fastPlayBtn:Sprite;
    public var reverseBtn:Sprite;
    public var fastReverseBtn:Sprite;
    public var pauseBtn:Sprite;
    public var seekBar:Sprite;
    public var seekBase:Sprite;
    public var posText:TextField;
    public var durText:TextField;
    
    public function ControlPanel()
    {
        
        var timeText:TextField = new TextField();
        timeText.x = 10;
        timeText.y = -5;
        timeText.text = "TIME";
        addChild(timeText);
        
        posText = new TextField();
        posText.autoSize = TextFieldAutoSize.LEFT;
        posText.x = 10;
        posText.y = 10;
        addChild(posText);
        
        durText = new TextField();
        durText.autoSize = TextFieldAutoSize.LEFT;
        durText.x = 50;
        durText.y = 10;
        addChild(durText);
        
        playBtn = new Sprite();
        playBtn.graphics.beginFill(0xFF00FF);
        playBtn.graphics.moveTo(0, 0);
        playBtn.graphics.lineTo(30, 20);
        playBtn.graphics.lineTo(0, 40);
        playBtn.graphics.endFill();
        playBtn.buttonMode = true;
        addChild(playBtn);
        playBtn.x = 305;
        var playText:TextField = new TextField();
        playText.text = "Play";
        addChild(playText);
        playText.x = playBtn.x;
        playText.y = playBtn.y + 40;
        
        fastPlayBtn = new Sprite();
        fastPlayBtn.graphics.beginFill(0xFF00FF);
        fastPlayBtn.graphics.moveTo(0, 0);
        fastPlayBtn.graphics.lineTo(20, 20);
        fastPlayBtn.graphics.lineTo(0, 40);
        fastPlayBtn.graphics.moveTo(20, 0);
        fastPlayBtn.graphics.lineTo(40, 20);
        fastPlayBtn.graphics.lineTo(20, 40);
        fastPlayBtn.graphics.endFill();
        fastPlayBtn.buttonMode = true;
        addChild(fastPlayBtn);
        fastPlayBtn.x = 350;
        var fastPlayText:TextField = new TextField();
        fastPlayText.text = "FastPlay";
        addChild(fastPlayText);
        fastPlayText.x = fastPlayBtn.x;
        fastPlayText.y = fastPlayBtn.y+40;
        
        reverseBtn = new Sprite();
        reverseBtn.graphics.beginFill(0xFF00FF);
        reverseBtn.graphics.moveTo(40, 0);
        reverseBtn.graphics.lineTo(10, 20);
        reverseBtn.graphics.lineTo(40, 40);
        reverseBtn.graphics.endFill();
        reverseBtn.buttonMode = true;
        addChild(reverseBtn);    
        reverseBtn.x = 195;
        var reverseText:TextField = new TextField();
        reverseText.text = "Reverse";
        addChild(reverseText);
        reverseText.x = reverseBtn.x;
        reverseText.y = reverseBtn.y + 40;
        
        fastReverseBtn = new Sprite();
        fastReverseBtn.graphics.beginFill(0xFF00FF);
        fastReverseBtn.graphics.moveTo(20, 0);
        fastReverseBtn.graphics.lineTo(00, 20);
        fastReverseBtn.graphics.lineTo(20, 40);
        fastReverseBtn.graphics.moveTo(40, 0);
        fastReverseBtn.graphics.lineTo(20, 20);
        fastReverseBtn.graphics.lineTo(40, 40);
        fastReverseBtn.graphics.endFill();
        fastReverseBtn.buttonMode = true;
        addChild(fastReverseBtn);
        fastReverseBtn.x = 150;
        var fastReverseText:TextField = new TextField();
        fastReverseText.text = "FastRev";
        addChild(fastReverseText);
        fastReverseText.x = fastReverseBtn.x;
        fastReverseText.y = fastReverseBtn.y+40;
        
        pauseBtn = new Sprite();
        pauseBtn.graphics.beginFill(0xFF00FF);
        pauseBtn.graphics.moveTo(0, 0);
        pauseBtn.graphics.lineTo(15, 0);
        pauseBtn.graphics.lineTo(15, 40);
        pauseBtn.graphics.lineTo(0, 40);
        pauseBtn.graphics.moveTo(25, 0);
        pauseBtn.graphics.lineTo(40, 0);
        pauseBtn.graphics.lineTo(40, 40);
        pauseBtn.graphics.lineTo(25, 40);
        pauseBtn.graphics.endFill();
        pauseBtn.buttonMode = true;
        addChild(pauseBtn);
        pauseBtn.x = 250;
        var pauseText:TextField = new TextField();
        pauseText.text = "Pause";
        addChild(pauseText);
        pauseText.x = pauseBtn.x;
        pauseText.y = pauseBtn.y+40;
        
        seekBase = new Sprite();
        seekBase.graphics.beginFill(0xCCCCCC);
        seekBase.graphics.drawRect(0,0,400,10);
        seekBase.x = 20;
        seekBase.y = -20;
        seekBase.buttonMode = true;
        addChild(seekBase);
        
        seekBar = new Sprite();
        seekBar.graphics.beginFill(0xFF00FF);
        seekBar.graphics.drawRect(0,0,400,10);
        seekBar.x = 20;
        seekBar.y = -20;
        seekBar.mouseEnabled = false;        
        addChild(seekBar);
    }
}

Code Fullscreen

Preview Fullscreen