무비클립 부드럽게 색 바꾸기

지난번 포스팅한 ColorMatrixFilter 색조, 채도 변경에서는 오브젝트의 색상을 바꾸는 방법을 다루었습니다.

 

그런데 색상이 바로바로 바뀌니까 다소 딱딱한 느낌이 있었습니다.

 

그후 어떻게 하면 보아의 홈페이지처럼 부드럽게 색을 바꿀수 있을까 열심히 고뇌했습니다 -_-;

 

답은 아래 스크립트에 있었습니다.

 for(ia=0; ia<=2; ia++){
 if(Math.round((c[ia]-color[ia])*100)>0) c[ia]= 0.01*Math.round(c[ia]*100)-0.01;
 if(Math.round((c[ia]-color[ia])*100)<0) c[ia]= 0.01*Math.round(c[ia]*100)+0.01;
 }//trace(c[0]+c[1]+c[2]);

색이 바뀌면 즉시 전달하지 않고 color[ia] 변수의 값을 조금씩 조정하는 것입니다.

(EnterFrame으로 반복 걸구요)

 

즉, 기존 색상이 새로 얻은 값보다 크다면 값을 빼고, 작다면 더해서 기존 색상이 새로운 값을 따라가는거죠.

(어려운 것을 설명할수록 제가 글을 참 못쓴다는 생각이 ㅠㅠ)

 

 

 

 

 

 

이 플래시는 아무때나, 아무색으로 바뀝니다.

 

소스 잘 뜯어보세요^^

 

소스보기..

c = new Array(0,0,0);
color = new Array(1,0,0);
onEnterFrame = function (){
 
 
 for(i=0; i<=1; i++){
 if(random(75)==0){
 color[0] = random(11)/10; color[1] = random(11)/10; color[2] = random(11)/10;
 if(color[0]+color[1]+color[2]>1) i--;
 color[1] += 0.1*Math.round((1-color[0]-color[1]-color[2])/30);
 color[2] += 0.1*Math.round((1-color[0]-color[1]-color[2])/30);
 color[0] = 0.1*Math.round((1-color[1]-color[2])*10);
 }
 
view_color = color[0]+", "+color[1]+", "+color[2]+",\n"
view_color += color[2]+", "+color[0]+", "+color[1]+",\n"
view_color += color[1]+", "+color[2]+", "+color[0]
trace(view_color+"\n--Color Info--");
}
 
 
 for(ia=0; ia<=2; ia++){
 if(Math.round((c[ia]-color[ia])*100)>0) c[ia]= 0.01*Math.round(c[ia]*100)-0.01;
 if(Math.round((c[ia]-color[ia])*100)<0) c[ia]= 0.01*Math.round(c[ia]*100)+0.01;
 }//trace(c[0]+c[1]+c[2]);
filterObj = new flash.filters.ColorMatrixFilter();
filterObj.matrix = new Array(
c[0],c[1],c[2],0,0,
c[2],c[0],c[1],0,0,
c[1],c[2],c[0],0,0,
0,0,0,1,0);
_root.img_down.filters = [filterObj];
}

 

Color.fla

ColorMatrixFilter 색조, 채도 변경

ColorMatrixFilter 클래스를 이용하여 채도(Aturation)와 색조(Hue)를 바꿔보겠습니다.

(밝기 변화 없음)

 

색조(Hue)만 바꾸는 것은 여기를 참고하세요.

 

채도만 변경하는 것은 여기를 참고하세요.

 

이제 예제를 볼까요?

 

아래 플래시를 클릭하면 랜덤으로 색조와 채도가 바뀝니다.

 

 

 

 

 

 

Gray에 변화가 없다는 것은 밝기가 그대로라는 거죠.

 - 밝기

a b c 0 0 // a+b+c==1 && d+e+f==1 && g+h+i==1

d e f 0 0 // Red, Blue, Green 크기가 1이 되야 밝기가 변하지 않습니다.

g h i 0 0 // 1보다 크면 밝아지고, 작으면 어두워집니다.
0 0 0 1 0

 

 - 채도

a b c 0 0 // (a==1 || b==1 || c==1) && a+b+c==1

d e f 0 0 // (d==1 || e==1 || f==1) && d+e+f==1

g h i 0 0 // (g==1 || h==1 || i==1) && g+h+i==1
0 0 0 1 0 // 기본 채도값을 유지하려면 위 조건대로 해야 합니다.

// 1보다 커지면 채도가 올라갑니다.

// a==b && b==c 이렇게 되면 흑백이 됩니다. (밝기 변화가 없어야 하므로 각 값은 1/3)

 

결론은 직접 대입해봐야 이해할 수 있어요 -_-;

 

*참고: &&연산자: AND, ||연산자: OR

 

Color_1.fla

 

ColorMatrixFilter 클래스, flash.filters.ColorMatrixFilter

ColorMatrixFilter 클래스를 이용하여 입력 이미지의 각 픽셀의 RGBA 색상 및 알파 값에 4 x 5 행렬 변환을 적용해서 새로운 세트의 RGBA 색상 및 알파 값 결과를 얻습니다. ColorMatrixFilter 클래스를 이용하여 알파 및 기타 다양한 효과에 채도 변경, 색조 회전, 광도를 활용할 수 있습니다. 이 필터를 비트맵과 MovieClip 인스턴스에 적용할 수 있습니다.

필터 사용은 필터를 적용할 객체에 따라 달라집니다.

• 런타임에 필터를 무비 클립에 적용하려면 filters 속성을 사용합니다. 객체의 filters 속성을 설정해도 객체는 수정되지 않으며, filters 속성을 지워 실행 취소할 수 있습니다.
• BitmapData 인스턴스에 필터를 적용하려면 BitmapData.applyFilter() 메서드를 사용합니다. BitmapData 객체에 대해 applyFilter()를 호출하면 소스 BitmapData 객체와 필터 객체를 통해 필터링된 이미지가 만들어집니다.

제작 시 이미지와 비디오에 필터 효과를 적용할 수도 있습니다. 자세한 내용은 제작 설명서를 참조하십시오.

무비 클립 또는 버튼에 필터를 적용하는 경우 무비 클립이나 버튼의 cacheAsBitmap 속성이 true로 설정됩니다. 모든 필터를 지우면 cacheAsBitmap의 원래 값이 복원됩니다.

다음 공식이 사용됩니다. 여기서 a[0]부터 a[19]는 20개의 요소로 이루어진 배열 속성 행렬의 항목 0부터 19에 해당합니다.

redResult = a[0] * srcR + a[1] * srcG + a[2] * srcB + a[3] * srcA + a[4]

greenResult = a[5] * srcR + a[6] * srcG + a[7] * srcB + a[8] * srcA + a[9]

blueResult = a[10] * srcR + a[11] * srcG + a[12] * srcB + a[13] * srcA + a[14]

alphaResult = a[15] * srcR + a[16] * srcG + a[17] * srcB + a[18] * srcA + a[19]

 

이 필터는 각 소스 픽셀을 빨강(srcR), 녹색(srcG), 파랑(srcB) 및 알파(srcA) 요소로 분리합니다. 마지막으로 이 필터는 각 색상 요소를 다시 단일 픽셀로 결합하고 그 결과를 기록합니다.

연산은 곱하지 않은 색상값에 실행됩니다. 입력 그래픽이 미리 곱해진 색상 값으로 구성된 경우 이러한 값은 이 연산을 위해 자동으로 곱해지지 않은 색상 값으로 변환됩니다.

다음과 같은 두 개의 최적화된 모드를 사용할 수 있습니다.

 

알파에만 적용.다음과 같이 알파 요소만 조절하는 행렬을 필터에 전달하면 필터 성능이 최적화됩니다.

1 0 0 0 0

0 1 0 0 0

0 0 1 0 0

0 0 0 N 0         (where N is between 0.0 and 1.0)

 

 

(example)

 

적청반전
var filterObj = new flash.filters.ColorMatrixFilter();
filterObj.matrix = new Array(
0,0,1,0,0,
0,1,0,0,0,
1,0,0,0,0,
0,0,0,1,0);
mc.filters = [filterObj];

//
흑백
var filterObj = new flash.filters.ColorMatrixFilter();
filterObj.matrix = new Array(
1/3,1/3,1/3,0,0,
1/3,1/3,1/3,0,0,
1/3,1/3,1/3,0,0,
  0,  0,  0,1,0);
mc.filters = [filterObj];

//
세피아
var filterObj = new flash.filters.ColorMatrixFilter();
filterObj.matrix = new Array(
1/2,1/2,1/2,0,0,
1/3,1/3,1/3,0,0,
1/4,1/4,1/4,0,0,
  0,  0,  0,1,0);
mc.filters = [filterObj];

펼쳐두기..

http://www.flash8coders.com/zbxe/?document_srl=18835
//
샤프
var filterObj = new flash.filters.ConvolutionFilter();
filterObj.matrix = new Array(
0,-1, 0,
-1, 5,-1,
0,-1, 0
);
filterObj.matrixX = 3;
filterObj.matrixY = 3;
filterObj.bias = 0;
filterObj.divisor = 1;
mc.filters = [filterObj];

//
윤곽 추출
var filterObj = new flash.filters.ConvolutionFilter();
filterObj.matrix = new Array(
1, 1, 1,
1,-7, 1,
1, 1, 1
);
filterObj.matrixX = 3;
filterObj.matrixY = 3;
filterObj.bias = 0;
filterObj.divisor = 1;
mc.filters = [filterObj];

//
엠보스
var filterObj = new flash.filters.ConvolutionFilter();
filterObj.matrix = new Array(
1, 1, 0,
1, 0,-1,
0,-1,-1
);
filterObj.matrixX = 3;
filterObj.matrixY = 3;
filterObj.bias = 128;
filterObj.divisor = 1;
mc.filters = [filterObj];

 

원문보기