こんばんは。きんくまです。
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();
}
}
}
このブログで関連すると思われる他の投稿
