BetweenAS3 색상변환 및 필터효과 적용하기
이번에는 BetweenAS3를 이용한 색상변환 및 필터효과에 대해서 살펴보겠습니다.
우선, 색상변환은 ActionScript 3.0에서 제공되고 있는 ColorTransform클래스의 ColorTransform() 생성자 메서드와 유사한 형식으로 기술하면 됩니다.
package {
import flash.display.Sprite;
import flash.events.MouseEvent;
import org.libspark.betweenas3.BetweenAS3;
import org.libspark.betweenas3.easing.*;
import org.libspark.betweenas3.tweens.ITween;
public class BetweenAS3Color extends Sprite {
private var box:Sprite;
private var t:ITween;
private var tg:ITween;
public function BetweenAS3Color() {
box = new Sprite();
box.graphics.beginFill(0x000000);
box.graphics.drawRect(0, 0, 200, 80);
box.graphics.endFill();
addChild(box);
box.x = Math.round(stage.stageWidth * 0.5 - box.width * 0.5);
box.y = Math.round(stage.stageHeight * 0.5 - box.height * 0.5) - 20;
setTween();
}
private function setTween():void{
t = BetweenAS3.tween(box, {transform:{colorTransform:{ redOffset:-255, greenOffset:255, blueOffset:255 }}}, null, 2, Quart.easeOut);
tg = BetweenAS3.serial(t, BetweenAS3.reverse(t));
stage.addEventListener(MouseEvent.CLICK, hnClick);
}
private function hnClick(e:MouseEvent):void {
tg.stopOnComplete = false;
tg.togglePause();
}
}
}
그리고 BetweenAS3는 DisplayObject에 filter를 적용해 트윈을 재생시킬 수 있습니다.
사용 가능한 필터는 아래와 같으며,
_bevelFilter
_blurFilter
_colorMatrixFilter
_convolutionFilter
_displacementMapFilter
_dropShadowFilter
_glowFilter
_gradientBevelFilter
_gradientGlowFilter
_shaderFilter
_blurFilter
_colorMatrixFilter
_convolutionFilter
_displacementMapFilter
_dropShadowFilter
_glowFilter
_gradientBevelFilter
_gradientGlowFilter
_shaderFilter
사용방법은 ActionScript 3.0에서 제공되고 있는 flash.filters 패키지의 각종 클래스의 생성자 메서드와 유사한 형식으로 기술하면 됩니다.
위 색상변환 예제코드를 응용해서 간단하게 몇 가지 예를 들어보겠습니다.
– BlurFilter
private function setTween():void{
t = BetweenAS3.tween(box, { _blurFilter:{blurX:16, blurY:16} }, null, 2, Quart.easeOut);
tg = BetweenAS3.serial(t, BetweenAS3.reverse(t));
stage.addEventListener(MouseEvent.CLICK, hnClick);
}
private function hnClick(e:MouseEvent):void {
tg.stopOnComplete = false;
tg.togglePause();
}
– ColorMatrixFilter
private function setTween():void{
t = BetweenAS3.tween(box,
{ _colorMatrixFilter:{
matrix:[
1, 0, 0, 0, 255,
0, 1, 0, 0, 255,
0, 0, 1, 0, 255,
0, 0, 0, 1, 0
]
}
},
{ _colorMatrixFilter:{
matrix:[
1, 0, 0, 0, -255,
0, 1, 0, 0, -255,
0, 0, 1, 0, -255,
0, 0, 0, 1, 0
]
}
},
2,
Quart.easeOut);
tg = BetweenAS3.serial(t, BetweenAS3.reverse(t));
stage.addEventListener(MouseEvent.CLICK, hnClick);
}
private function hnClick(e:MouseEvent):void {
tg.stopOnComplete = false;
tg.togglePause();
}
– DropShadowFilter
private function setTween():void{
box.filters = [new DropShadowFilter(4, 0, 0x000000, 0, 4, 4)];
t = BetweenAS3.tween(box,
{ _dropShadowFilter:{
alpha:1,
angle:365,
distance:16
} },
{ _dropShadowFilter:{
alpha:0,
angle:0,
distance:16
} },
2,
Quart.easeOut);
tg = BetweenAS3.serial(t, BetweenAS3.reverse(t));
stage.addEventListener(MouseEvent.CLICK, hnClick);
}
private function hnClick(e:MouseEvent):void {
tg.stopOnComplete = false;
tg.togglePause();
}
– GlowFilter
private function setTween():void{
box.filters = [new GlowFilter(0x000000, 1, 0, 0, 2, 3)];
t = BetweenAS3.tween(box,
{ _glowFilter:{
color:0x000000,
alpha:1,
blurX:16,
blurY:16,
strength:2
} },
{ _glowFilter:{
color:0x000000,
alpha:0,
blurX:16,
blurY:16,
strength:2
} },
2,
Quart.easeOut);
tg = BetweenAS3.serial(t, BetweenAS3.reverse(t));
stage.addEventListener(MouseEvent.CLICK, hnClick);
}
private function hnClick(e:MouseEvent):void {
tg.stopOnComplete = false;
tg.togglePause();
}
