DisplaceMentMapFilter Class

DIsplacementMapFilter class  (이하 DMF클래스)

DMF 클래스는 지정된 BitmapData 객체의 픽셀 값을 사용하여 객체의 위치 변경을 수행합니다.
이 필터를 사용하여 BitmapData 객체는 물론 DisplayObject 클래스로부터 상속되는 임의의 객체에
필터효과를 적용할 수 있습니다

상속된 메서드를 제외하면 메서드는 두가지입니다. 생성자와  dmf객체를 복사하는 clone.

기본적인 사용방법은 아래와 같습니다.

--------------------------------------------------------------------------------------
var myDmf:DisplacementMapFilter;
//DMF객체 생성
myDmf = new DisplacementMapFilter( mapBitmap:BitmapData = null
                                                      mapPoint:Point = null
                                                      componentX:uint = 0
                                                      componentY:uint = 0
                                                      scaleX:Number = 0.0
                                                      scaleY:Number = 0.0
                                                      mode:String = "wrap"
                                                      color:uint = 0
                                                      alpha:Number = 0.0
}
DisplayObject를 상속받은 객체.filters = new Array(myDmf)       or          
                                                    = [myDmf]
----------------------------------------------------------------------------------------

DMF 클래스 역시  BitmapFilter 클래스를 상속받았기 때문에 기타 Filter 클래스 사용과 흡사합니다.
필터객체를 만들고 DisplayObject 의 filters 속성에 배열로 집어넣는거죠.

특이점은 필터객체를 만들때 재료가 될 비트맵데이터객체가 있어야 합니다.
mapBitmap인수에 해당하는 비트맵데이터의 정보를 componentX,Y 에 설정된 채널에 따라
설정한 scaleX,Y 값만큼 위치변경을 합니다.
mode,color,alpha 는 픽셀이동후 빈공간을 어떻게 처리하는지에 대한 설정입니다.

생성자에 필요한 인수에 대한 자세한  설명은 F1 도움말을 참조하시길 바랍니다.
도움말보다 잘 설명할 자신이 없습니다 -..-;
                                                    
일단 직접 해보겠습니다.

1.위에서부터 순서대로 RGB로 적당히 나눠 색칠된
 
PNG파일을 준비했습니다.

DMF객체를 생성시킬때 재료로 쓸 비트맵데이터 입니다.

라이브러리에서 Linkage를 "RGB" 로 설정했습니다.

2.필터가 적용될 녀석입니다. mapPoint 인수를 이용하여 중앙의 빨간 사각형부분에 필터효과를 줄생각입니다.
이름은 background 입니다.
일단 객체를 생성시킬때 어떻게 변화는지 눈에 잘들어오게 Y좌표 이동에 관련된 scaleY 를
기본값인 0을 줄 생각이기에 이런식으로 색칠을 좀 했습니다--;

function makeDmf():void {
 var map:BitmapData = new RGB(0,0);
 var compX:uint=BitmapDataChannel.RED;
 var compY:uint=BitmapDataChannel.RED;
 var scaleX:Number=60;
 var scaleY:Number=0;
 var mode:String=DisplacementMapFilterMode.CLAMP;
 var color:uint=0;
 var alpha:Number= 0;
 var dmf:DisplacementMapFilter;
 dmf=new DisplacementMapFiltermap,newPoint(127,127),compX,compY,scaleX,scaleY,mode,color,alpha);
 background.filters = [dmf];
}
makeDmf();

--------------------------------------------------------------------
componentX,Y와 mode 의 경우 바로 을 집어 넣어도 됩니다.
ex ) componetX,Y => RED - GREEN - BLUE - ALPHA => 순서대로  1,2,4,8
---------------------------------------------------------------------

결과

뭔가 바꼈군요.

scaleX에만 값을 주었기때문에 픽셀이 x좌표로만 이동되었습니다.

주목할점은 재료가된 RGB비트맵데이터의 윗부분 빨간색이였던

부분만 따로 놀고있네요.

comp를 RED로 설정한거랑 무슨 관련이 있는거같죠?

그렇다면 comp 를  GREEN으로 해보겠습니다.


결과

이젠 중앙(RGB비트맵데이터의 초록색부분) 이 바꼈습니다.

DMF 클래스는 재료가 되는 mapBitmap의 색상과

componetX,Y 에 설정에 따라 픽셀을 scale 값만큼 이동시킵니다.

그렇다면 어떻게 하면 재밌는 효과를 낼 수 있을까요?

mapBitmap 이였던 RGB를 다른애로 바꿔보겠습니다.

1.0x808080 색으로 칠해진 배경에 그라데이션처리된 원이 있습니다.

DMF객체를 생성시킬때 재료로 쓸 비트맵데이터 입니다.

라이브러리에서 Linkage를 "Circle" 로 설정했습니다.

배경색을 808080으로 한이유는 중앙의 원에서만 픽셀을 변경하기위해서입니다.

var map:BitmapData = new Circle(0,0);
 var dmf:DisplacementMapFilter;
 dmf = new DisplacementMapFilter(map,new Point(127,127),2,1,100,100);
 background.filters = [dmf];
------------------------------------------------------------------
dmf 를 생성하는 과정에서 확 줄이고 직접 인수를 적어 전달했습니다.
전달하지않은 인수는 자동으로 기본값으로 들어가겠죠?

결과

엇..뭔가 볼록해졌습니다.

그라데이션 원부분만 변화가 생겼군요.

그렇다면 저걸 조금 부드럽게 효과를 주고싶습니다.

블러필터를 이용해보도록 하죠.




다음코드를 추가 시켜  Circle 객체(map)에 블러효과를 줍니다.
map.applyFilter(map,map.rect,new Point(),new BlurFilter(40,40));

applyFilter를 이용해 블러효과를 준 map을

비트맵클래스에 넣어 addChild 시켰습니다.

블러가 제대로 들어갔네요.

블러가 들어간 이상태의 map을 이용해서 DMF객체를 생성하고 필터를주겠습니다.

var map:BitmapData = new Circle(0,0);
map.applyFilter(map,map.rect,new Point(),new BlurFilter(40,40));
var dmf:DisplacementMapFilter;
dmf = new DisplacementMapFilter(map,new Point(127,127),2,1,100,100);
background.filters = [dmf];

결과

부드럽게 볼록렌즈 효과가 생겼습니다.

그렇다면 오목렌즈 효과는 어떻게 줘야할까요?

재료가된 Cilcle 비트맵데이터를 상하좌우로 색을 바꾸면됩니다.

(스터디때 안된다고했었는데 제가 잘못알았습니다. 가능합니다.)

더 쉬운 방법은  scaleX,와 scaleY를 마이러스값으로 주는겁니다.

 100을 -100으로 줘보겠습니다.

var map:BitmapData = new Circle(0,0);
map.applyFilter(map,map.rect,new Point(),new BlurFilter(40,40));
var dmf:DisplacementMapFilter;
dmf = new DisplacementMapFilter(map,new Point(127,127),2,1,-100,-100);
background.filters = [dmf];

결과

 

성공입니다.

scale값에 따라 효과의 정도가 달라집니다.

블러의 x,y값에도 제법 영향을 받습니다.

자 그럼 이제 간단한 응용을 해보겠습니다.

요런식이면?     







결과

뭔가 기묘해졌습니다. 나올땐 나오고 들어갈땐 들어가는 글래머 몸매가 되었네요.


자 그럼 먼가 실제로 만들어 보겠습니다.

 

위에서 사용한 Circle 을 이용해 dmf필터를 만들고

타이머로 마우스의 좌표를 이용해 마우스이동속도를 구해 dmf필터의 scale속성과 point속성을 변경.

의외로 코드는 짧습니다.

var beforeX:Number =mouseX;
var beforeY:Number = mouseY;
var dmfScale:int = 150;
var map:BitmapData = new Circle(0,0);
var timer:Timer;
function makeDmf():void {
 map.applyFilter(map,map.rect,new Point(),new BlurFilter(40,40));
 var dmf:DisplacementMapFilter;
 dmf = new DisplacementMapFilter(map,new Point(),2,1,120,120);
 background.filters = [dmf];
 timer = new Timer(30,0);
 timer.addEventListener(TimerEvent.TIMER,getPos);
 timer.start();
}
function getPos(e:Event):void {
 var tx:Number = beforeX + 0.1*(mouseX-beforeX);
 var ty:Number = beforeY + 0.1*(mouseY-beforeY);
 var diffX:Number = Math.round(tx-beforeX);
 var diffY:Number = Math.round(ty-beforeY);
 dmfScale =1.2*diffX*Math.abs(diffY)
 setPos(tx, ty);
}
function setPos(tx:Number,ty:Number):void {
 var pt:Point = new Point(tx - map.width/2,ty - map.height/2);
 var dmf:DisplacementMapFilter = this.background.filters[0];
 dmf.mapPoint = pt;
 dmf.scaleX = dmf.scaleY = dmfScale;
 this.background.filters = [dmf];
 beforeX = tx;
 beforeY = ty;
}
this.makeDmf();

레퍼런스와 구글트위너의 예제들을 참고했습니다.