jasu's blog

그 동안 ActionScript 2.0으로 UserInterface & Communication Lab(UICLab)을 진행하였던 작업물을 압축파일로 올려놓는다. 평소에 생각하던 아이디어나 기술적인 부분을 테스트 하기 위해 오프라인에서 진행하였으나 이제는 오프라인에서 진행하는 의미가 없어졌고 기술적인 진보를 위하여 이쯤에서 UICLab을 끝맺음 하고 앞으로는 시급한 사항이 아닌 이상은 ActionScript 3.0로 작업을 진행할까 한다.

차기 UICLab은 AS3 공부를 위한 아주 기초적인 것에서부터 시작할 듯 싶다. 오프라인에서 진행을 할지 아니면 블로그의 infinite 메뉴에서 진행할지는 앞으로 생각해 봐야 하겠다.

제작된 결과물에 대한 내용은 압축파일을 풀고 실행파일을 실행하면 왼쪽 메뉴 왼쪽에 중간에 나와있는 버튼을 클릭하면 상세하지는 못하나 결과물에 대한 설명을 볼 수 있다. 버튼 가독성이 떨어져서 버튼의 위치는 위 이미지에 표시해 놓았다.

아무쪼록 플래시를 시작하시는 분들에게 재미있다는 느낌이 전해졌으면 좋겠다...

UIClab.zip

이번에는 BitmapData를 이용하여 특정 무비클립을 bitmap으로 전환하고 다시 무비클립으로 되돌리는 클래스를 제작한 이후에 재미난 기능을 추가했다.

플래시 8의 bitmapData 클래스가 아니라면 예전에는 상상도 못할 구현이 가능해졌다. 플래시로 만든 마술이라고 해야할까...;;


위에 보이는 이미지는 중앙에 있는 crop 버튼을 누르게 되면 현재 화면에 보여지고 있는 오른쪽 네비게이션을 포함한 화면에 보여지는 모든 무비클립을 하나의 BitmapData로 전환하고 기존에 있던 무비클립을 visible = false를 적용한다. 이렇게 하면 화면에서 event가 발생하는 모든 것들은 bitmapData로 전환되기 때문에 작동하지 않는다.

여기서 화면에서 특정 좌표에 마우스로 클릭하고 사각 박스를 드레그하여 영역을 잡게 되면 그 영역을 새로운 bitmapData로 전환하여 무비클립을 생성하게 되는데 그 무비클립을 마우스로 press and drag하면 그 부분만 따로 분리하게 만들어 졌다. 화면에 보여지는 것처럼 rectangle로 선택한 영역을 따로 분리되는 것을 볼수가 있다.

ctrl 키를 누르게되면 순차적으로 다시 제자리로 되돌아간 이후 기존에 있던 무비크립으로 대체된다.


이것은 위의 것을 조금 응용한 모션이다. 중앙에 있는 crop 버튼을 누르게되면 화면에서 random 좌표의 사각 박스가 화면에서 분리되어 위로 올라가게 된다. _y값 모션에서 blur 필터를 적용하였다. 모두 올라간 이후에는 ctrl 키를 누르면 다시 각각의 영역이 자신의 자리로 되돌아 오게 된다.

이번 아이디어의 구상은 처음 원하는 무비클립을 bitmapData로 전환하고 되돌리는 클래스를 제작한 이후에 파생된 모션 형태이다. 이것은 많은 부분에서 활용도가 높을 것으로 예상된다. 예를 들면 처음 모션이 이루어진 이후에 더이상 움직임이 없는 배경의 경우는 이렇게 bitmapData로 전환하게 되면 모션을 주기 위해서 생성했던 많은 무비클립들을 하나의 무비클립으로 대체할 수있어 리소스 낭비를 줄일 수 있는 점이 있을 것이고, 화면전환효과에서 이를 활용하면 다양한 형태의 전환효과를 만들어 낼 수 있을 것으로 예상된다.

  무비클립 생성 화면  클립 형태의 네비게이션을 만들어볼 생각으로 만든 기본적인 무비클립 생성이다. 생성된 무비클립들의 _rotation을 통해서 모션을 적용하였다.

스케일 조정 화면

네비게이션 무비클립 생성  

특정 무비클립 클릭시 모션 적용

컨텐츠 view 화면 back 버튼을 누르면 초기화면으로 모션 적용

네이게이션 무비클립 생성  

특정 무비클립 클릭시 모션 적용

컨텐츠 view 화면 scale을 통해서 줌인 형태로 화면을 채움

 

BACK 버튼을 눌렀을때 화면으로 되돌아 가는 모션     clip_navi_2번과 같은 로직으로 구성하였으나 무비크립을 클릭했을 때 무비클립 전체가 scale이 커지면서 보여지는 화면을 채우는 형태로 제작하였다. 이것 또한 2번과 같이 back 버튼을 누르면 기존의 형태로 되돌아 간다.
  이로써 간단한 _rotation의 Tween을 통한 재미있는 네비게이션이 만들어진듯 하다.

Create Random MovieClip_1

stage의 특정 random 영역에 무비클립을 생성한다. 생성할 때는 중심점이 되는 new Point(x,y)좌표점을 rnadom으로 설정하므로써 그룹단위로 무비클립을 생성하게 된다. 여기서의 문제점은 무비클립이 많아지면 많아질수록 CPU의 과부화 문제가 발생한다. 노트북에서는 무비클립 300개 이상이되면 그때부터 현저하게 속도 저하가 발생한다.

Create Random MovieClip_2

앞의 버전에서 발생한 CPU 문제점을 BitmapData를 통해서 해결한 버전이다. 생성 방법은 앞과 동일하며 그룹단위(무비클립이 30개 단위로 그룹으로 묶는다 if count%30 == 0)

한 그룹이 완료되었을 때 BitmapData를 통해서 화면에 보여지는 무비클립들을 빈 무비클립으로 생성한 무비클립에 draw하고 생성했던 30개의 무비클립을 remove 시킨다. 그리고 다시 30개의 그룹이 완료되면 또다시 밑에 있는 BitmapData로 그린 무비클립과 새로 생성한 무비클립을 다시 BitmapData로 draw시킨다.

이렇게 진행하면 쌓이는 무비클립이 30개 이상을 넘지 않기 때문에 생성하는 무비클립의 갯수가 무한정 늘어난다고 하여도 CPU의 문제는 없다.

진행을 하면서 오류를 범했던 부분은 BitmapData를 draw시키는 무비클립을 draw 시킬때 마다 새로 생성하지 않고 같은 무비클립에 draw시킬 경우에 기존의 draw시킨 무비클립이 메모리에 쌓이는 문제로 인하여 CPU문제가 그대로 존재한다는 것이었다. 이는 30개 그룹단위로 draw시킨때 같은 depth에 새로 무비클립을 생성하여 기존의 무비클립을 삭제하는 형태로 해결하였다.

BitmapData로 draw시킬때 alpha 값을 50%으로 설정하여 draw시키는 시점과 30개의 무비클립이 삭제되는 시점을 화면에 보여주고 있다

Create Random MovieClip_3  

앞의 구조와 같다. 앞의 경우는 draw시키는 시점을 alpha = 50으로 보여주었으나 여기서는 Bitmap에 blur 필터를 적용한 것이다.

var filter = new BlurFilter (2, 2, 1);
bitmap.applyFilter (bitmap,bitmap.rectangle, new Point (0, 0) , filter);

 

  Create Random MovieClip_4  

앞에서 연구한 결과를 가지고 비주얼적으로 표현할 수 있는 방법으로 이와 같은 형태로 작업을 진행하였다.

 

이것은 앞의 것들과 무비클립의 생성과정은 동일하다. 여기서 해당 무비클립이 그룹단위로 생성할때 자신의 고유색을 가지고 생성을 하는데 그 색은 Shift버튼을 누르면 나타나는 background 이미지의 pixel단위 RGB를 축출하여 적용하였다.이미지의 사이즈가 작기 때문에 앞의 것들보다 무비클립을 작게 하였다.

 

  Shift 버튼을 눌렀을때 배경을 볼 수 있다.  

Create Random MovieClip의 가장 중요한 부분은 화면에 나타난 무비클립이 변형되지 않는다는 전제조건이 있을 경우에는 해당 무비클립을 stage에 남겨두는 것이 아니라 remove 시키되 기존의 이미지가 그대로 남도록 BitmapData를 사용하여 특정 무비클립에 draw시키므로써 수많은 무비클립의 생성으로 발생하는 플래시의 전체적인 cpu 문제점을 해소하는 것에 중점을 두었다.

예전 모 클라이언트가 그래프를 플래시로 제작하고자하여 만들었던 그래프다. 기본적인 형태는 xml을 로그하여 데이터를 보여주게 되는데 그래프가 나타날때 다이나믹한 모션 효과를 주었다. 시간이없어서 재사용성을 고려하지 않고 만들었던 아쉬움이 있는데 나중에 다용도로 사용할 수 있는 그래프 컴포넌트를 만들어볼 생각이다.

이번은 BitmapData를 이용하여 배경 이미지의 색을 축출하여 문자가 포함된 무비클립의 색을 변경하는 작업을 해봤다. 이미지의 윤곽을 잘 보이도록 하기 위해서 무비클립의 갯수를 늘려 6000개가 넘어가니 무비클립을 생성할 때와 색을 입힐때 다소 처리 시간이 지연되는 경향이 있다...

 

 

 

이번에는 만들어 놓은 Draw Path Recorder를 이용하여 path 경로를 축출하여 나무가지가 뻗어나가며 꽃과 잎이 돋아나는 형태의 결과물을 만들게 되었다. draw path를 가져와서 라인을 그리는 클래스에서 추가적인 기능을 넣는 것으로 완성을 하게 되었는데 그 과정은 다음과 같다.

   

 

   

 

이번은 화면 좌표를 표준화 String으로 축출하여 화면에 비주얼을 보여주고 네비를 구성해 봤다.

표준화된 String을 이용하기에 다양한 비주얼 형태에 적용이 가능할 것으로 예상된다.

'UI&C Lab'은 개인적인 공부와 프로젝트를 통해서 얻은 경험을 바탕으로 제대로 된 UI를 개발하는 목표로 만들게 되었다. 이를 통해서 작게는 나의 역량을 키우고 쌓아갈 수 있는 발판이 될 것이며 크게는 사내 프로세스를 변화시키고 진정 내가 하고싶은 것을 하며 밤을 새는 일일 것이다.

'UI&C Lab'은 오프라인에서 진행중이다.