플래시에서의 비트맵의 모든것 & 그룹으로 모션

카페 > Flash Action Sc.. | 지그프리
http://cafe.naver.com/fas/290

다음의 내용은 플래시코더포럼에서 어떤분의 질문에 대한 답입니다.

질문의 내용은 비트맵으로 불러온 이미지를 조각 조각 낸 다음 모션트위닝을 주어서 조각을 합쳤을때 경계선이 정확게 맞물리지않고 어긋나는 현상에 대한 것입니다.

 

그리고 얼마전에 파스게시판에서 질문 올라왔던 내용중에도 비슷한 내용이 있었는데 비트맵이 찌그러지고 꿀렁거리는 현상에 대한것이었죠. 제가 강좌를 따로 준비하려고 했는데 시간이 잘 나지 않아서... 좀더 쉽게 예제를 가지고 올리려고 했는데 일단 다음의 내용으로도 어느정도 포함이 되는듯 해서 파스 회원과 함께 공유합니다.

 

 

--------------------  여기서부터 질문에 대해 답한 내용입니다.

 

위의 파일을 받아서 테스트 하던중 처음으로 발견된(제생각) 엄청난 플래시 버그를 발견하게 되었습니다. 또한 아이러니 하게도 그 버그로 인해 조각난 비트맵이 정확하고 깨끗하게 맞물리게 되는 현상도 발견했습니다. .. 스스로 놀라고 있슴...^^;;
(사실 모션트위닝을 그룹으로 할수 없다고 생각했을시점에는 버그라고 생각했슴... 나중에 레퍼런스에 그룹되더군요.)

위의 비트맵 조각 모션트위닝을 보고 처음에는 단순히 플래시의 비트맵 픽셀 처리문제로만 생각하고 테스트 해보았습니다.

플래시에서 비트맵 꿀렁이고 찌글찌글해지는 현상의 비밀

일반적으로 가로세로 직각의 형태로 잘려진 비트맵이나 하나짜리 비트맵이 모션트위닝 될때 픽셀이 찌글찌글 하거나 꿀렁거리는 현상은 사실상 버그는 아닙니다.

비트맵 이미지는 1픽셀이 최소단위로 색상이 구성되어 있지만 플래시는 1픽셀 이하.. 0.1 픽셀 단위로도 화면상에 인스턴스의 좌표가 잡힐수도 있기 때문에 백터 심볼 또는 쉐이프는 1픽셀에 맞물리지 않고 소수점의 위치에 놓이게 되면 아웃트라인이 안티얼라이싱으로 처리되버리며 1픽셀에 맞물리면 안티얼라이싱이 없는 깨끗한 외곽으로 표현됩니다.

하지만 1픽셀 단위의 비트맵 이미지는 상황이 틀립니다. 1픽셀 단위로 움직일때 즉 정수 단위로 좌표가 움직이거나 놓일때에는 픽셀이 정상적으로 화면에 출력되지만 0.1픽셀 처럼 소수점으로 움직이거나 놓이게 되면 픽셀이 두꺼워지거나 사라지거나 해버립니다. 플레시 플래이어에서 자동으로 평균값으로 계산되어서 화면에 뿌려지게 되기 때문이죠..

그렇기 때문에 1픽셀 라인이 많은 비트맵 이미지를 모션트위닝할때에는 상당한 주의가 요구되며 되도록 움직임은 정확히 정수값으로 움직이게 할수 있는 액션스크립트로 좌표이동을 주어야 비트맵 픽셀 손실을 막을수 있습니다.

가령 액션으로 감속운동의 움직임을 주더라도 정수값으로 좌표값이 처리되도록 해야됩니다.

ActionScript:

ball.onEnterFrame = function(){
        this._x += Math.round((posx-this._x)*0.3)
}

스케일 확장 축소할때도 마찬가지이며 일단 비트맵의 좌표나 사이즈의 변형이 일어 나는 스크립트에서는 저렇게 계산된 값이 정수값으로 떨어지도록 Math.round() 또는 int() 메서드를 이용하시면됩니다.

대부분의 가로 세로로 잘리거나 잘리지 않더라도 모든 비트맵은 위의 내용처럼 정수값으로 움직이게 하면 아주 깨끗하게 비트맵이 처리될수 있습니다.

위의 질문으로 올라온 경우도 이경우라고 생각하고 확인해보았지만 이 경우는 사선으로 잘려서 겹쳐지는 형태이기때문에 사선의 경계선이 정확히 정수 픽셀에 맞물리기 힘듭니다. 그렇기 때문에 부분적으로 어긋나는 경우가 생길수 있습니다.

**
여기서 트위닝 방법을 달리해서 위의 부분적으로 어긋나는 경우까지 해결하는 방법을 소개 합니다.

일반적으로 모션트위닝을 할수 있는 최소 단위는 그래픽 심볼이며 무비클립 심볼 또는 버튼 심볼.. 즉 심볼로 등록이 된 요소들만 모션트위닝이 가능하다고 알고 있습니다. 모든 플래시 책에도 그렇게 되어 있지요.

테스트를 하던중 그룹(group) 도 모션트위닝이 가능하다는것을 알았습니다. 레퍼런스를 뒤져보니 "Flash에서는 인스턴스, 그룹 및 유형의 위치, 크기, 회전 및 기울이기를 트위닝할 수 있습니다" 라고 나와 있더군요.

물론 대부분 모션트위닝을 하기 위해서는 다음의 두가지 방법을 많이 쓰죠.

1. 쉐이프를 F8 그래픽 또는 무비클립 심볼로 등록한 후 적당한 프레임에 F6 키프레임 복사를 해서 플래이 해드를 키프레임 중간정도에 놓고 마우스 오른쪽 버튼 맨위에 Create Motion Tween 을 선택하거나 속성창의 트윈 옵션에서 모션트윈을 설정하는 방법

2. 쉐이프가 있고 적당한 프레임에 F6 키프레임 복사를 한후(양쪽 키프레임에 쉐이프인상태) 프레임 전체 선택후 마우스 오른쪽 버튼 맨위 Create Motion Tween 선택해서 모션트위닝을 주는 방법.(이때는 자동으로 그래픽심볼로 변경되면서 라이브러리에 심볼이 생성이 됩니다.)

***
그룹이 되는것은 생각도 못하다가 우연히 위의 예제를 그룹으로만 트위닝을 했더니 비트맵 처리가 완벽하게 깨끗해지더군요.

*** 그룹으로만 모션트위닝 주기
1번프레임에 쉐이프를 그리고 그룹 지정하고 적당한 프레임 위치에 F6 키프레임 복사를 합니다. 이때 프레임의 중간을 선택하거나 전체 선택한후 속성창에 있는 트윈 옵션에서 모션 트위닝을 줍니다.

이렇게 만들어진 모션트위닝은 라이브러리에도 남지 않습니다. 심볼이 아니기 때문이죠.
(쉐이프 트위닝도 라이브러리에 남지 않습니다. 쉐이프 개념으로 움직이기 때문이죠)


제가 내린 결론은 비트맵 이미지가 심볼로 등록되는 과정에서 비트맵의 부분 손실이 일어 나는것 같습니다.
그룹의 경우는 쉐이프 또는 비트맵을 라이브러리에 등록하는것이 아니기 때문에 단순 그룹핑의 개념이기 때문에 비트맵의 변형이 일어 나지 않는듯 합니다.

어째꺼나 매크로미디어에서 좀더 신경을 써서 만들었어야 되는 부분인데....심볼로 만들어지더라도 비트맵이 변형되지 않도록 말이죠... 나중에는 개선이 될지모르겠네요... ^^;

암튼...

질문소스와 그 부분만 그룹 모션트위닝으로 수정한것을 첨부파일로 둘다 올립니다.

비트맵응용