BetweenAS3 색상변환 및 필터효과 적용하기

BetweenAS3 — Tags: , , , — Siaa @ 11:08 pm

이번에는 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

사용방법은 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();
}

Share

0 Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
(c) 2012 blog.flasia.com | powered by WordPress with Barecity