filter 에 해당하는 글2 개
2007/08/28   ConvolutionFilter effect
2007/03/11   Filter Tween Class

flash/Tip | 2007/08/28 15:01
Convolution  는 회선기법으로써 입력픽셀과 그 주위의 이웃한 픽셀들을 가중평균(weighted average) 하여 처리하는 기법으로 플래시에서도 ConvolutionFilter 를 지원한다.
다른 필터에 비해 사용빈도에 있어서 떨어지지만 잘만 사용한다면 플래시에서도 포토샵에서 지원하는 여러 효과들의 필터 효과를 낼 수 있을것이다..

인접픽셀들을 이용하기 때문에 나타낼 수 있는 효과는 대부분 이미지의 경계부분(edge)  변형으로 생기는 embossing,blur,sharpen,accented-edge 같은 효과들이다.

convolution 필터는 9개의 파라미터가 존재하는데 일반적으로 아래와 같이 4개를 사용하여 제어를 한다.

ConvolutionFilter(matrixX:Number=0, matrixY:Number=0,matrix:Array=null,divisor:Number=1.0)

여기서 가장 중요한 부분이 matrix 라는 배열 파라미터인데 일반적으로 3x3 행렬을 사용한다.

    0 0 0
    0 1 0      =>  [0,0,0,0,1,0,0,0,0]    형렬표기방법은 좌측과 같이 열단위로 끊어서 작성한다.
    0 0 0 
 <default>

matrix 는 중앙에 있는 값(1)을 기준으로  대칭형태로 사용한다. 이는 인접픽셀과의 가중치 계산을 위한 비율과도 무관하지 않다. 또한 모든 matirx 의 요소 값의 합이 1을 기준으로 크게되면 전체적인
이미지의 밝기(brightness)가 증가하게 되고, 반대로 1보다 작게 되면 밝기가 감소하게 된다.


위에서 볼수 있듯이 matrix 값의 총합이 1이 아닐경우 원본값에서 이미지 밝기에서 차이가 난다.
이런 뜻하지 않은 이미지 밝기의 변화로 인해 의도했던 이미지 효과가 묻혀버리게 되는 일이 발생하는데 이런걸 방지하기 위해 divisor 를 사용하여 값을 조정해준다.
divisor 은 convolution  필터의 4번째 파라미터로서 결과값에 대한 강도를 낮춰주게 된다.
matrix 전체의 총합을 divisor 로 나눈값이 1을 기준으로 설정될수 있는 밝기로 생각하면 된다.

ConvolutionFilter(3,3,[0, 0, 0, 0, 1, 0, 0, 0, 0])
ConvolutionFilter(3,3,[0, 0, 0, 0, 3, 0, 0, 0, 0],3) 

따라서 위 두개의 필터값은 같은 효과를 나타낸다.

<embossing>
embossing 의 matrix 는 양수의 중앙값을 기준으로 좌우의 값의 부호가 반대인 좌우대칭형태
   a   d  -c          -2  -1  0
   b   e  -b   ==>  -1   1   1   ==>    new ConvolutionFilter(3,3,[-2, -1, 0, -1, 1, 1, 0, 1, 2])
   c -d  -a            0   1   2

<sharpening>
sharpening 의 matrix 는 양수의 중앙값을 기준으로 상하대칭형태
   a   b   c          0    -1    0
   d   e   d   ==>  -1   5   -1   ==>    new ConvolutionFilter(3,3,[0, -1, 0, -1, 5, -1, 0, -1, 0])
   c   b   a          0    -1    0

<accented-edge>
accented-edge 의 matrix 는 sharpening 과 비슷한 형태로 음수의 중앙값을 기준으로 상하대칭형태
   a   b   c          0    1    0
   d   e   d   ==>  1   -3   1   ==>    new ConvolutionFilter(3,3,[0, 1, 0, 1, -3, 1, 0, 1, 0])
   c   b   a          0    1    0

위 모든 효과는 중앙값(e) 을 조정하여 효과의 강도를 조정할 수 있다.


download sample files...




 
 
태그 : convolution filter, filter, flash
이 글의 관련글(트랙백) 주소 :: http://kimkijeung.com/trackback/102

Name 
Password 
Homepage 
  secret
Comment 
  글쓰기

flash/As2.0 | 2007/03/11 23:54

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

전반적으로 필터에 대해 다시 살펴보면서 이번기회에 필터트윈 클래스를 만들어 보았다.
새로 만들긴 했지만 기존에 만들었던 무비클립 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);
   }
   
  }
};
}
}



<example code>

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

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


 
 
태그 : As2.0, falsh, filter, filter tween
이 글의 관련글(트랙백) 주소 :: http://kimkijeung.com/trackback/90

Name 
Password 
Homepage 
  secret
Comment 
  글쓰기


[PREV] [1] [NEXT]

 
전체 (105)
flash (74)
math&physics (4)
programming (11)
Flex2 (1)
Mac (2)
photo (0)
project (6)
주저리주저리 (3)
유용한 자료들 (1)
diary (0)
Book (1)
web (2)
«   2009/01   »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31