ColorMatrixFilter 클래스를 이용하면  이미지의 각 픽셀의 RGBA 색상 및 알파 값에 4 x 5
행렬 변환을 적용하여 saturation 또는 contrast 또는  brightness 를 적용할수 있다.
물론 각각의 ColorMatrixFilter 에 적용되는 matrix 속성값을 다르게 설정하여야 한다.
이 예제에서 활용한 ColorMatrix 는 Mario Klingemann(http://www.quasimondo.com) 가 제작한 소스를 이용하여 트윈클래스를 제작하였다.
 기본적인 클래스 구조는 이전의 트윈클래스와 같다. 객체속성을 이용하여 for~in 구문으로 트윈을 적용하였다. 다른 객체에 비해 적용되는 속성의 갯수(matrix 속성)가 20개로써 많기 때문에 이미지를 크게 하거나 트윈길이를 너무 길게할 경우 느려질 수가 있다. 또한 트윈이후 이전 트윈클래스와 같이 콜백함수를 호출할 수 있다.

/**
 @description
* 무비클립의  ColorMatrixFilter 트윈 클래스 : 이징함수 설정으로 조절 

* @example
*     <code>
*     ColorMatrixTween.tween(targetMc,0,ColorMatrixTween.SATURATION,Regular.easeOut,30,
             {{func: callBackFunction,obj: functionScope, param: [파라미터 배열로 들어감]}}
*     </code>
*/

import flash.filters.ColorMatrixFilter;
import com.dstrict.UB.util.filters.ColorMatrix;

class com.dstrict.UB.util.transitions.tween.ColorMatrixTween{
  public static var SATURATION:String="saturation";
  public static var CONTRAST:String="contrast";
  public static var BRIGHTNESS:String="brightness";

 /**---------------------------------------------------------------------
  *@description  saturation, contrast, brightness 트랜지션
    @param mc : MovieClip, 적용무비클립
    @param value : Number , 적용 percentage
    @param mode :String , saturation or contrast or brightness mode
    @param func : Function, easing function
   @param durationFrame : Number, 지속프레임
*----------------------------------------------------------------------*/

public static function tween(mc:MovieClip,value:Number,mode:String,func:Function,durationFrame:Number):Void{
var time:Number=1;
var beginning:Array=new Array();
var change:Array=new Array();

 var mat:ColorMatrix = new ColorMatrix();
 switch(mode){
   case SATURATION :
     mat.adjustSaturation(value/100);
     break;
   
   case CONTRAST :
     mat.adjustContrast(value/100);
     break;
   
   case BRIGHTNESS :
     mat.adjustBrightness(255*value/100);
     break;
  }
  var cm:ColorMatrixFilter = new ColorMatrixFilter(mat.matrix);
  var startMatrix:Array=
                       (mc.filters[0].matrix==undefined) ? ColorMatrix.IDENTITY : mc.filters[0].matrix;
  var targetMatrix:Array=mat.matrix;
 
for(var i in targetMatrix){
  beginning.push(startMatrix[i]);
  change.push(targetMatrix[i]-startMatrix[i]);    
}
       var type=(typeof(arguments[5])=="object")? true : false;
       if(type){
        var referObj=arguments[5];
       }else{
        var p:Number=arguments[5];
        var referObj=arguments[6];
       }
  mc.onEnterFrame=function(){
  var objIdx:Number=0;
  for(var i in targetMatrix){
   targetMatrix[i]=func(time,beginning[objIdx],change[objIdx],durationFrame,p);
   objIdx++;
   }
   targetColMatrixFilter.matrix=targetMatrix;
   mc.filters=[targetColMatrixFilter];

   time++;
  if(time>durationFrame){
   delete this.onEnterFrame;
   if(referObj!=undefined){
    referObj.func.apply(referObj.obj,referObj.param);
   }
   
  }
};
}
}


<example code>

import  com.dstrict.UB.util.transitions.tween.FilterTween;
import  mx.transitions.easing.*;
import com.dstrict.UB.util.filters.ColorMatrix;

//SATURATION (from 0  to 100)
image.onRollOver=function(){
 ColorMatrixTween.tween(image,0,ColorMatrixTween.SATURATION,Regular.easeOut,10);
}

image.onRollOut=function(){
 ColorMatrixTween.tween(image,100,ColorMatrixTween.SATURATION,Regular.easeOut,10);
}

//CONTRAST (from 0  to 100)
image2.onRollOver=function(){
 ColorMatrixTween.tween(image2,100,ColorMatrixTween.CONTRAST,Regular.easeOut,10);
}

image2.onRollOut=function(){
 ColorMatrixTween.tween(image2,0,ColorMatrixTween.CONTRAST,Regular.easeOut,10);
}

//BRIGHTNESS (from -100  to 100)
image3.onRollOver=function(){
ColorMatrixTween.tween(image3,100,ColorMatrixTween.BRIGHTNESS,Regular.easeOut,10);
}

image3.onRollOut=function(){
ColorMatrixTween.tween(image3,0,ColorMatrixTween.BRIGHTNESS,Regular.easeOut,10);
}


download sample

무비클립 속성에 비해 다루기가 까다로워 필터 트원은 좀처럼 사용하지는 않았다.
특히 프레임으로 모션트윈은 어느정도 사용했지만 스크립트를 이용한 조절은 거의......

전반적으로 필터에 대해 다시 살펴보면서 이번기회에 필터트윈 클래스를 만들어 보았다.
새로 만들긴 했지만 기존에 만들었던 무비클립 Tween 클래스와 기본 구조는 같다.
어짜피 필터 트원이라는것이 필터속성을 시간단위로 변화를 주는 것이기 때문에 무비클립의 그것과 다르지 않았다.

무비클립 트윈클래스와 다른점은 인자값으로 적용할 필터오브젝트를 생성해서 넘겨주는 것이다.
그리고 그 필터속성의 변화값을 무비클립 filters 속성에 적용해 주는 것이다.
그리고 다중필터 지원은 동시에 여러가지 필터를 적용하는 경우가 많지 않을뿐더러 쓸데없이 파라미터가 길어질 염려가 있어 적용하지 않았다.

필터 적용범위는 필터속성의 데이타 타입이 Number 일경우에만 적용해야 한다. 따라서 ColorMatrixFilter와 같이 속성값이 matrix 일 경우 이 클래스로는 트윈이 적용되지 않는다. 그 이외의 모든 필터의 속성에 대해서는 트윈이 가능하다.
또한 필터 속성마다 해당하는 속성 범위가 존재한다. 이점을 유의해서 적용해야한다.


//==================================================================
//@class name  :  FilterTween.as
//@author          : vkimone. KimKiJeung  (http://kimkijeung.com)
//@last update   : 2007. 03. 07
//@version         : V1.0
//==================================================================

/**
 @description
* 무비클립의 필터 속성  트윈 클래스 : 이징함수 설정으로 조절
* 트원할 필터속성의 갯수에 관계없이 오브젝트로 적용 가능
*
* @caution
*  -반드시 트원할 필터 속성의 데이타 타입이 Number 일경우에만 적용할수 있다.
    String,Boolean,Array 는 적용할 수 없다.
   -다중필터 적용은 지원하지 않는다.
*
* @example
*     <code>
*        Filtertween.tween(targetMc,{blurX:36,blurY:36},Regular.easeOut,30,
       {{func: callBackFunction,obj: functionScope, param: [파라미터 배열로 들어감]}}
*     </code>
*/

import flash.filters.BitmapFilter;
class com.dstrict.UB.util.transitions.tween.FilterTween{
/**------------------------------------------------------------------------
 * @param mc : MovieClip, 적용무비클립
 * @param filter : BitmapFilter , 적용할 필터 객체
 * @param obj : Object, 단일 필터속성 (필터 속성 data type 이 Number 일 경우)
                                                     ex. {blurX:32,blurY:32}
 * @param func : Function, easing function
 * @param durationFrame : Number, 지속프레임
 * @param referObj :[option] reference object(caution--> 파라미터값 반드시 배열요소로 입력)
*----------------------------------------------------------------------*/

public static function tween(mc:MovieClip,filter:BitmapFilter,obj:Object,func:Function,durationFrame:Number):Void{
var time:Number=1;
var beginning:Array=new Array();
var change:Array=new Array();

 
for(var i in obj){
  beginning.push(filter[i]);
  change.push(obj[i]-filter[i]);    
}
       var type=(typeof(arguments[5])=="object")? true : false;
       if(type){
        var referObj=arguments[5];
       }else{
        var p:Number=arguments[5];
        var referObj=arguments[6];
       }
  mc.onEnterFrame=function(){
  var objIdx:Number=0;
  for(var i in obj){
   filter[i]=func(time,beginning[objIdx],change[objIdx],durationFrame,p);
   mc.filters=[filter]; //필터 적용부분
   objIdx++;
   }
   time++;
  if(time>durationFrame){
   delete this.onEnterFrame;
   if(referObj!=undefined){
    referObj.func.apply(referObj.obj,referObj.param);
   }
   
  }
};
}
}

var blurFilter:BlurFilter=new BlurFilter(0,0,1);
var dropShadowFilter:DropShadowFilter=new DropShadowFilter(0,120,0x000000,1);
var glowFilter:GlowFilter=new GlowFilter(0x6E7D74,1,16,16,2,2);

//BlurFilter
image.onRollOver=function(){
 FilterTween.tween(image,blurFilter,{blurX:8,blurY:8},Regular.easeOut,15,
        {func:onFilterTweenFinished,obj:_root,param:["blur"]});
}

image.onRollOut=function(){
 FilterTween.tween(image,blurFilter,{blurX:0,blurY:0},Regular.easeOut,15);
}

//DropShadowFilter
image2.onRollOver=function(){
 FilterTween.tween(image2,dropShadowFilter,{distance:4,blurX:4,blurY:4},Regular.easeOut,15,
        {func:onFilterTweenFinished,obj:_root,param:["dropShadow"]});
}

image2.onRollOut=function(){
 FilterTween.tween(image2,dropShadowFilter,{distance:0,blurX:4,blurY:0},Regular.easeOut,15);
}

//GlowFilter
image3.onRollOver=function(){
 FilterTween.tween(image3,glowFilter,{alpha:1,blurX:36,blurY:36},Regular.easeOut,15,
        {func:onFilterTweenFinished,obj:_root,param:["glow"]});
}

image3.onRollOut=function(){
 FilterTween.tween(image3,glowFilter,{alpha:0,blurX:0,blurY:0},Regular.easeOut,15);
}

function onFilterTweenFinished(evt):Void{
 trace("filterTween finished....."+evt);
}


download sample

<Interval Class>

import com.dstrict.UB.events.Dispatcher;
import com.dstrict.UB.management.IntervalEvent;
/**--------------------------------------------------------------------------------
* @description 인터벌 생성및 실행 클래스
*    원하는 함수를 사용자가 원하는 횟수만큼 호출한후 onIntervalEnd 를 발행시킴...
*
* @implement
*   Interval#onIntervalEnd
*  
* @example
* <code>
*  _interval=new Interval();
 _interval.addEventListener(IntervalEvent.ON_INTERVAL_END,this);
 _interval.makeInterval(functionScope,functionReference,duration,loop,[parameter array]);
   
 public function onIntervalEnd(evt:IntervalEvent):Void{
    // 인터벌 이후에 이벤트를 사용하려면 구현...
     parameter array 인자가 그대로 넘어온다...
    
  }
* </code>
*  
*--------------------------------------------------------------------------------*/

class com.dstrict.UB.management.Interval extends Dispatcher{

 private var _IntervalID : Number;
 private var _count : Number;
 
  /**------------------------------------------------------------------------------
     * Constructor function
   *------------------------------------------------------------------------------*/
 public function Interval() {
  //생성자 함수 필요없음....
 }
 
 /**------------------------------------------------------------------------------
 * @description 전역속성인 setInterval 함수의 id 값 전부 제거
 *-------------------------------------------------------------------------------*/
 public static function clearAllInterval():Void{
  var topId=setInterval(function(){
  },100);
  for(var i=0 ; i<=topId; i++){
   clearInterval(i);
  }
 }
 
 
  /**------------------------------------------------------------------------------
    * @description interval 에의한 실행함수
    * @param loop : Number, 함수 실행할 횟수
    *@param referObj : Object, 인터벌에 등록한 함수 오브젝트
    *-------------------------------------------------------------------------------*/
  public function execute(loop:Number,referObj:Object):Void{
     if(_count>loop){
        clearInterval(_IntervalID);
       _count=1;
     startEvent(new IntervalEvent(IntervalEvent.ON_INTERVAL_END,referObj.param)); //Dispatch  event
     }else{
        if(referObj!=undefined){
           referObj.func.apply(referObj.obj,referObj.param);
         }
         _count++;
      }
    }
 
 /**-----------------------------------------------------------------------------
 * @description  인터벌 생성
 * @param scope : Object, 실행할 함수의 스코프
 * @param func : Function, 실행할 함수
 * @param duration : Number, 인터벌 간격(밀리세컨드)
 * @param loop : Number, 함수 실행할 횟수
 *-------------------------------------------------------------------------------*/
 public function makeInterval(scope:Object,func:Function,duration:Number,
                                            loop:Number,parameter:Array):Void{
 
   clearInterval(_IntervalID);
   _count=1;
  _IntervalID=setInterval(this,"execute",duration,loop,{func:func,obj:scope,param:parameter});
 
 }
   
}



<DispatcherClass>

import mx.events.EventDispatcher;
/**
* @description     이벤트 디스패처 확장 클래스
*                        이벤트 발생할 클래스에 상속후 startEvent 함수 실행.....
*/
class com.dstrict.UB.events.Dispatcher {
   public var dispatchEvent:Function;
   public var addEventListener:Function;
   public var removeEventListener:Function;
 
   public function Dispatcher() {
      EventDispatcher.initialize(this);
   }
 
   public function startEvent(obj : Object) : Void {
     dispatchEvent(obj);
    }
 }

자주사용하는 인터벌을 쓰기 편하게 클래스로 만들었다.  원하는 함수를 원하는 횟수만큼 호출한후 자동으로 인터벌이 삭제된다. 함수 호출시 파라미터도 같이 호출할 수도 있고 인터벌이후에 발생하는 이벤트도 실행할 수도 있게 구성했다.

<example code>
  test 함수를 문자열 2개 인자와 함께 200 millisecond 간격으로 5번 호출한다.

 _interval=new Interval();
 _interval.addEventListener(IntervalEvent.ON_INTERVAL_END,this); --> 인터벌이후에 발생하는이 벤트를 받기위해서 리스너를 붙인다. 받을 이벤트가 없다면 필요없다.
 _interval.makeInterval(this,test,200,5,["test string1......","test string2......"]);

function test(str:String,str2:String):Void{
  trace(str);
  trace(str2);
}

 function onIntervalEnd(evt:IntervalEvent):Void{
    // 인터벌 이후에 이벤트를 사용하려면 구현...
    // evt 값은 makeInterval 에서 test 함수를 호출할때 같이 쓰인 문자열 인자값이 배열로 그대로 들어온다. 
   // evt.target[0] -----> test string1...... evt.target[1] -----> test string2......
 
 }

플래시에서 제공되는 component 들은 종류에 비해 디자인적인 확장성에서 제약이 있기 때문에 많이 사용되지 않고 있다. 물론 나도 특별한 경우를 제외하고는 사용하지 않는 편이다.
나름대로 디자인에 큰 영향이 없다면 제공되는 기본 component 를 사용하지만 간혹가다 뜻하지 않는 문제점에 부딛히게 되면 여간 힘든게 아니다. 많이 사용해 보지 않는 문제점을 해결하는 것이 만만치 않다. 특히 기본 component 를 사용할때 가장 문제가 되는것이 바로 border 처리 문제일것이다.
halo theme 에서 제공되는 border를 쓰자니 디자인에 걸릴때가 참 많이 발생하게 된다.
물론 theme 파일을 수정하여 요소들을 수정할 수 있지만 여간 손이 많이 가는게 아닐 뿐더러 자칫하면 내장 클래스를 건드리게 되어 플래시 전체의 component 의 UI 가 뜻하지 않게 될수도 있다.

이런 저런 문제로 그동안 사용을 극도로 꺼려했지만 이번에 러퍼런스를 보고 가장 손쉽게 border 를 사용자가 맞게 구성하는 방법을 찾아내어 소개해 본다.

기본적인 방법은 내장 component 에서 사용하는  RectBorder 을 편집하여 사용자가 만든 border 를 사용할 수 있게 하는 것이다.

1. 플래시가 설치되어 있는 폴더에서 Class/mx/skins 폴더에 사용자 정의 테두리에 사용할 사용자 정의 패키지 이름으로 새 폴더를 만든다.
ex: C:\Program Files\Macromedia\Flash 8\en\First Run\Classes\mx\skins
2. 이폴더에 RectBorder.as 이름으로 사용자 정의 클래스를 만든다.
3.다음 코드를 삽입한다.

  import mx.core.ext.UIObjectExtensions;
  class mx.skins.myTheme.RectBorder extends mx.skins.RectBorder {
     static var symbolName:String = "RectBorder";     
     static var symbolOwner:Object = RectBorder;
     var className:String = "RectBorder";
    #include "../../core/ComponentVersion.as"
    // All of these borders have the same size edges, 1 pixel.
    var offset:Number = 4;
  function init(Void):Void {
       super.init();
  }
   function drawBorder(Void):Void {
  // The graphics are on the symbol's timeline,
  // so all you need to do here is size the border.
        _width = __width;
        _height = __height;
    }
  // Register the class as the RectBorder for all components to use.
  static function classConstruct():Boolean {
         UIObjectExtensions.Extensions();
        _global.styles.rectBorderClass = RectBorder;
       _global.skinRegistry["RectBorder"] = true;
       return true;
  }
  static var classConstructed:Boolean = classConstruct();
  static var UIObjectExtensionsDependency = UIObjectExtensions;
}

위코드는 사용자 정의 Symbol 을 사용하여 사용자가 정의한  RectBorder을 사용하여 border를 설정하는 것이다.

4. 새로운 Symbol 을 생성한 후  linkage property 에서 아래와 같이 설정한다.
  Identifier :  RectBorder
  As 2.0 Class : mx.skins.myTheme.RectBorder  
 
5. 조금전에 생성한 RectBorder symbol 을 편집해 원하는 border 를 그린다.
  단지 좌표값을 0,0 에 맞추어 속이 빈 사각형 박스를 그리기만 하면 된다.

6. RectBorder를 사용하는 여러 component 요소를 스테이지로 드래그합니다.
  예를 들어 List, TextArea 및 TextInput component
7. export movie 를 통해 확인해 보면 자신이 만든 border 사용하여 그려진 것을 볼 수 있다.

이런 방법을 사용하면 전체적으로  borderStyle 에 영향받지 않고 자신이 원하는 border 를 구성할 수 있을 것이다.

//==================================================================
//@class name :   PropertyTweenEase.as
//@author            : vkimone. KimKiJeung  (http://kimkijeung.com)
//@last update   :2006. 12. 4
//@version          : V1.2
//==================================================================

/**
* @description
* 무비클립 속성  트윈 클래스 : 이징함수 설정으로 조절
* 트원할 속성의 갯수에 관계없이 오브젝트로 적용 가능
*
* 트윈이 끝났을 때 실행할 함수 및 파라미터 설정 방법
* 다른 클래스에서 직접 참조해서 호출 가능....
* @param referObj : reference object(caution--> 파라미터값 반드시 배열요소로 입력)
* @example
*     <code>
*        PropertyTweenEase.tween(targetMc,{_x:200,_y:100},Elastic.easeOut,30,{{func: 실행할 함수
이름 , obj: 참조오브젝트, param: [파라미터 배열로 들어감]}}
*     </code>
*/

class com.dstrict.UB.util.transitions.tween.PropertyTweenEase {
/**----------------------------------------------------------------------------------
* @param mc : MovieClip, 적용무비클립
* @param property : Object, 무비클립속성 오브젝트 ex. {_x:100,_y:200}
* @param func : Function, easing function
* @param durationFrame : Number, 지속프레임
*------------------------------------------------------------------------------------*/

public static function tween(mc:MovieClip,obj:Object,func:Function,durationFrame:Number):Void{
var time:Number=1;
var beginning:Array=new Array();
var change:Array=new Array();

 
for(var i in obj){
  beginning.push(mc[i]);
     change.push(obj[i]-mc[i]);
    
}
       var type=(typeof(arguments[4])=="object")? true : false;
       if(type){
        var referObj=arguments[4];
       }else{
        var p:Number=arguments[4];
        var referObj=arguments[5];
       }
  mc.onEnterFrame=function(){
  var objIdx:Number=0;
  for(var i in obj){
   mc[i]=func(time,beginning[objIdx],change[objIdx],durationFrame,p);
   objIdx++;
  }

     time++;
  if(time>durationFrame){
   delete this.onEnterFrame;
   if(referObj!=undefined){
    referObj.func.apply(referObj.obj,referObj.param);
   }
   
  }
};
}
}

기존에 동시에 2개의 속성을 트윈시킬 수 있었던 것에서 트원 속성 갯수에 관계없이
가능하도록 수정하였다.  이 클래스 하나로 무비클립 속성 트윈은 대부분 가능하다.
마지막 파라미터를 이용해 콜백함수를 호출할수 있다. 이징 함수 자체도 조절 가능하게
해보았지만 효율성 측면에서 생략했다.
어쩌면 이정도 길이에 가장 많은 기능을 제공하고 범용적으로 사용될수 있는 트윈클래스가 없지 않을듯 싶다...^^

<사용방법>

PropertyTweenEase.tween(mc,{_x:100,_y:200,_alpha:100},Regular.easeOut,20,
{func:this.onMotionFinished,obj:this});

function onMotionFinished():Void{
  trace("motion finished.......");
}

Base64 --->
2진 데이터를 아스키 텍스트로 변환하거나 그 반대로 변환하는 인코딩 방법. MIME에 의해 사용되는 방법으로, 4개의 7비트 아스키 문자로 표현되도록 데이터를 3바이트씩 4개의 6비트 단위로 나누어 표현한다. 메일에서 이미지, 오디오 파일을 보낼 때 이용하는 코딩으로 모든 플랫폼에서 안보이거나 깨지는 일이 생기지 않도록 공통으로 64개 아스키 코드를 이용하여 2진 데이터를 변환하기 위해 베이스64를 이용한다. 따라서 베이스64로 인코딩하면 크기가 33% 커진다.


다른 곳에서는 보안 모듈로 많이 사용되고 있지만 플래시에서는 코드자체를 다 디컴파일 할 수 있어
효용성에서 의문이 든다. 디컴파일러를 이용해 플래시 파일이 base64 를 이용해 암호화 했다는 것을 알았을때 엔코더를 이용해서 암호화된 스트링을 똑같이 첨부할수 있을 것이다.
플래시에서 암호화 모듈에 의해 암호화를 할수 있는 방법은 없는것일까?..............

import com.dstrict.UB.util.system.security.Base64;

var source:String="Base64 test";
var encoded:String=Base64.Encode(source);
trace("encoded--->"+encoded);
var decoded:String=Base64.Decode(encoded);
trace("decoded--->"+decoded);

result
encoded--->QmFzZTY0IHRlc3Q=
decoded--->Base64 test

Download file

플래시 자체가 이벤트 기반의 프로그램이다 보니 발생하는 이벤트 중심으로 코딩하는 방법이 로직상이나 가독성 측면에서 좋은 코딩 방법이라는 생각이 든다.
하지만 이벤트 별로 패턴을 나누다 보니 코드길이가 자연스레 길어지고 이벤트 리스너(addEventListener) 를 연결하는 시간과 인스턴스를 초기화하는 시간과의 차이로 인해 적지않은 문제점이 발생한다.

var myLoader:XmlLoader=new XmlLoader(this,UrlSet.xmlUrl+"navigation.xml",100,100);
myLoader.setXmlAttribute(["label","src","loadingPos"]);
myLoader.addEventListener(XmlLoaderEvent.ON_START,this);

  function onStart(evt:XmlLoaderEvent){
      myLoader.removeEventListener(XmlLoaderEvent.ON_START);
 
   //파싱완료후 실행함수
  }
 
간혹가다 인스턴스(myLoader ) 초기화보다 인스턴스 메소드가 먼저 실행되는 이상한 일이 발생할 경우가 있다.