AS3 Next トランジションマスクの非同期クラス

2009/03/16

こんばんは。きんくまです。

Nextでオリジナルの非同期クラスです。
トランジションマスクをします。要Tweensyです。、、けどすぐTweenerに改造できると思う。
これ、もともとThread+Tweenerで前に作ってあったクラスをNext+Tweensyに書き換えたものなので。
本当はオリジナル関数として、Next.registerしたかったけどうまくいかなかったので、pushで対応です。

package
{
  import com.flashdynamix.motion.Tweensy;
  import com.flashdynamix.motion.TweensyTimeline;
  import flash.display.DisplayObject;
  import flash.display.DisplayObjectContainer;
  import flash.display.Graphics;
  import flash.display.Shape;
  import flash.display.Sprite;
  import flash.geom.Rectangle;
  import org.libspark.next.ITrigger;
  import org.libspark.next.Trigger;

  public class MaskTransition
  {
    private var _target:DisplayObject;
    private var _targetParent:DisplayObjectContainer;
    private var _targetRect:Rectangle;
    private var _mask:Shape;
    private var _fadeType:String;
    private var _direction:String;
    private var _time:Number;
    private var _delay:Number;
    private var _transition:Function;
    private var _padding:uint = 10;
    public static const FADE_IN:String = "fade_in";
    public static const FADE_OUT:String = "fade_out";
    public static const TOP:String = "top";
    public static const BOTTOM:String = "bottom";
    public static const LEFT:String = "left";
    public static const RIGHT:String = "right";
    public var trigger:Trigger;

    public function MaskTransition():void
    {

    }

    public function start(target:DisplayObject, configObj:Object):ITrigger
    {
      this._target = target;
      this._targetParent = target.parent;
      this._targetRect = target.getBounds(this._targetParent);

      //config
      this._fadeType = configObj.fadeType;
      this._direction = configObj.direction;
      this._time = configObj.time;
      this._delay = configObj.delay;
      this._transition = configObj.transition;

      this.setMask();
      this.transtionStart();

      trigger = new Trigger();
      return trigger;
    }

    private function setMask():void
    {
      this._mask = new Shape();
      var g:Graphics = this._mask.graphics;
      g.beginFill(0xff0000, 1);
      g.drawRect(
        0,
        0,
        this._targetRect.width + this._padding * 2,
        this._targetRect.height + this._padding * 2
      );
      g.endFill();
      this._targetParent.addChild(this._mask);
      this._mask.x = this._targetRect.x - this._padding;
      this._mask.y = this._targetRect.y - this._padding;
      this._target.mask = this._mask;
    }

    private function transtionStart():void
    {
      var tw_obj:Object = { x:this._mask.x, y:this._mask.y };
      var y1:Number, y2:Number, x1:Number, x2:Number;
      switch(this._direction)
      {
        case TOP:
          y1 = _targetRect.y - _mask.height - _padding;
          y2 = _targetRect.y - _padding;
          this._mask.y = this._fadeType == FADE_IN ? y1 : y2;
          tw_obj.y = this._fadeType == FADE_IN ? y2 : y1;
        break;
        case BOTTOM:
          y1 = _targetRect.y  + _targetRect.height + _padding;
          y2 = _targetRect.y - _padding;
          this._mask.y = this._fadeType == FADE_IN ? y1 : y2;
          tw_obj.y = _fadeType == FADE_IN ? y2 : y1;
        break;
        case LEFT:
          x1 = _targetRect.x - _mask.width - _padding;
          x2 = _targetRect.x -_padding;
          this._mask.x = this._fadeType == FADE_IN ? x1 : x2;
          tw_obj.x = _fadeType == FADE_IN ? x2 : x1;
        break;
        case RIGHT:
          x1 = _targetRect.x + _targetRect.width + _padding;
          x2 = _targetRect.x -_padding;
          this._mask.x = this._fadeType == FADE_IN ? x1 : x2;
          tw_obj.x = _fadeType == FADE_IN ? x2 : x1;
        break;
        default: break;
      }
      var tw:TweensyTimeline = Tweensy.to(
        this._mask,
        { x:tw_obj.x, y:tw_obj.y},
        this._time,
        this._transition,
        this._delay
      );
      var self:MaskTransition = this;
      this.setTargetVisible(true);
      tw.onComplete = function() {
        self.transitionCompleteHD();
      }
    }

    private function transitionCompleteHD():void
    {
      this.removeMask();
      this.trigger.call();
    }

    private function setTargetVisible(visible:Boolean):void
    {
      this._target.visible = visible;
    }

    private function removeMask():void
    {
      this._target.visible = this._fadeType == FADE_IN ? true : false;
      this._target.mask = null;
      this._targetParent.removeChild(this._mask);
      this._mask = null;
    }
  }


}

上をこんな感じで使います。

package
{
  import fl.controls.Button;
  import fl.motion.easing.Circular;
  import flash.display.MovieClip;
  import flash.display.Sprite;
  import flash.events.MouseEvent;
  import org.libspark.next.*;

  public class Main2 extends MovieClip
  {
    public var btn1:Button;
    public var btn2:Button;
    public var transitionTarget:MovieClip;

    public function Main2()
    {
      registerButtonEvent();
    }

    private function registerButtonEvent():void
    {
      var n:Next = N.or([
        N.event(btn1, MouseEvent.CLICK),
        N.event(btn2, MouseEvent.CLICK)
      ]).func(function(e:MouseEvent) {
        var btn:Button = e.currentTarget as Button;
        btnClickHD(btn);
      });
      n.start();
    }

    private function btnClickHD(btn:Button):void
    {
      var mt:MaskTransition = new MaskTransition();
      var n:Next = new Next();
      if (btn.name == "btn1")
      {
        /*
         * こんな感じに使う
         *
         * fadeType: フェードイン・フェードアウト
         * direction: 上下左右の方向
         * time: アニメーションの時間
         * delay: 遅延時間
         * transition: イージング fl.motion.easingの中のやつ
         */
        n.push(mt.start, transitionTarget, {
          fadeType:MaskTransition.FADE_IN,
          direction:MaskTransition.LEFT,
          time:0.8,
          delay:0,
          transition:Circular.easeIn
        });
      }
      else if (btn.name == "btn2")
      {
        n.push(mt.start, transitionTarget, {
          fadeType:MaskTransition.FADE_OUT,
          direction:MaskTransition.BOTTOM,
          time:0.8,
          delay:0,
          transition:Circular.easeOut
        });
      }
      var self:Main2 = this;
      n.func(function() { self.registerButtonEvent(); } );
      n.start();
    }
  }

}