[UI&C Lab] distort bitmapData...

 

bitmapData를 이용하여 rectangle의 상하좌우의 좌표를 이용하여 이미지를 외곡하는 클래스를 통해서 3D 육면체와 유사한 네비게이션을 만들어 보면 어떨까하는 생각에서 시작했다. 요즘들어 bitmapData를 이용하여 그러한 화면전환 효과를 보여주는 사이트들이

심심치않게 보인다. 4개의 좌표를 이용하여 이미지 또는 무비클립을 외곡시킬수 있어서 다양한 형태로 적용이 가능할 것으로 생각된다.

 

이것은 위의 기본적인 4개의 좌표를 이용하여 왼쪽과 오른쪽 화면전환을 할 수있도록 제작하였다. 여기서 문제가 되었던 부분은

현재 화면이 왼쪽으로 out하는 것과 오른쪽으로 in하는 것, 그리고 왼쪽의 이미지가 오른쪽에서 in하는 것과 오른쪽으로 out하는

메소드를 따로 만들어야 했다. 기본적인 구조는 같으나 여러가지 유기적으로 연결되어야 하는 좌표가 있어서 찜찜하지만

서로 다른 메소드로 구현을 했다.

 

또하나의 문제점, bitmapData를 이용하여 픽셀들의 값을 얻어 뿌려주는 과정에서 기존의 이미지 정보를 지우고 새로운 이미지를 쓰게 되는데 이때 이미지가 깜박거리는 문제점이 있다 심한 깜박임은 기존의 이미지를 최상위 뎁스로 이동시키고 그 아래에서 뿌려주는 것으로 해결했지만 바람직한 방법은 아닌듯 싶다.

 

이것은 기존의 구조를 그대로 사용하되 이미지를 대신하여 input textField를 넣어 사용자가 입력할 수 있도록 하였다.

bitmapData를 통해서 무비클립의 모양을 데이터를 취득한 이후에는 해당 무비클립에 입력텍스트필드가 있다고 하여도 그것은 하나의 이미지 정보를 가지고 있는 이미지일 뿐이기 때문에 입력하지 못한다.

 

구조는 이러하다. 이런 형태의 화면전환을 하고자하는 무비클립과 그 무비클립이 포함될 경로(무비클립)을 플래스 생성시에 전달받으면 어떠한 무비클립이도 이러한 형태로 화면전환이 가능하다. 이는 적용하고자 하는 무비클립 안에서 프레임으로 화면의 페이지를 넣어두었고 클래스 내에서 해당 무비클립의 프레임을 이동한 무비클립을 복제하였다. 그리고 bitmapData를 통해서 모션이 이루어지고 마지막 정지 시점에서 bitmapData를 통해서 모션을 주었던 무비클립을 제거하고 그 자리에 해당 무비클립을 바꿔치기 하는 방법으로 진행하였다. 그리고 다시 모션이 이루어지기 전에 현재 보고있는 화면의 bitmapData를 다시 draw하여 기존에 있는 bitmapData를 통해서 만들어진 무비클립을 대체하는 것으로 마치 bitmapData를 사용하지 않고 무비크립을 distrot 시키는 것 같은 효과가 가능하게 되었다. 위에 보이는 텍스트는 사용자가 작성하는 것으로 모션을 줄 수가 있다.

 

클래스 생성에서 넘겨주는 파라미터 값은 현재 무비클립과 적용한 무비클립으로 단 두개의 파라미터만을 넘겨주며 그 무비클립의 이미지 사이즈에 따라서 계산처리하기 때문에 화면전환 효과에 적용하기가 단순하여 사용하기 쉽다는 것이 강점일 듯 싶다.

 

 

모델 : 밍밍이...