[UI&C Lab] Create Random MovieClip

Project/UI&C Lab 2007. 2. 21. 11:01
사용자 삽입 이미지

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 문제점을 해소하는 것에 중점을 두었다.
    

설정

트랙백

댓글

[UI&C Lab] graph

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


    

설정

트랙백

댓글

[UI&C Lab] trapezoid navigation

Project/UI&C Lab 2007. 2. 21. 11:00
사용자 삽입 이미지

사용자 삽입 이미지

사용자 삽입 이미지

trapezoid navigation 은 좌우로 슬라이드되는 형태의 네비게이션을 만들기 위해 만들었는데 여러장을 적용했을 경우 CPU문제가 있어서 잠시 보류중이다. 이것은 무비클립을 좌우로 사다리꼴모양으로 외곡시켜기 중앙에 위치했을 때는 무비클립을 사용할 수 있도록 만들어 졌다.
 
    

설정

트랙백

댓글

[UI&C Lab] BitmpData Characters...

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

사용자 삽입 이미지

사용자 삽입 이미지

사용자 삽입 이미지


    

설정

트랙백

댓글

[UI&C Lab] distort bitmapData...

Project/UI&C Lab 2007. 2. 21. 10:59

사용자 삽입 이미지
 
bitmapData를 이용하여 rectangle의 상하좌우의 좌표를 이용하여 이미지를 외곡하는 클래스를 통해서 3D 육면체와 유사한 네비게이션을 만들어 보면 어떨까하는 생각에서 시작했다. 요즘들어 bitmapData를 이용하여 그러한 화면전환 효과를 보여주는 사이트들이
심심치않게 보인다. 4개의 좌표를 이용하여 이미지 또는 무비클립을 외곡시킬수 있어서 다양한 형태로 적용이 가능할 것으로 생각된다.

사용자 삽입 이미지
 
이것은 위의 기본적인 4개의 좌표를 이용하여 왼쪽과 오른쪽 화면전환을 할 수있도록 제작하였다. 여기서 문제가 되었던 부분은
현재 화면이 왼쪽으로 out하는 것과 오른쪽으로 in하는 것, 그리고 왼쪽의 이미지가 오른쪽에서 in하는 것과 오른쪽으로 out하는
메소드를 따로 만들어야 했다. 기본적인 구조는 같으나 여러가지 유기적으로 연결되어야 하는 좌표가 있어서 찜찜하지만
서로 다른 메소드로 구현을 했다.
 
또하나의 문제점, bitmapData를 이용하여 픽셀들의 값을 얻어 뿌려주는 과정에서 기존의 이미지 정보를 지우고 새로운 이미지를 쓰게 되는데 이때 이미지가 깜박거리는 문제점이 있다 심한 깜박임은 기존의 이미지를 최상위 뎁스로 이동시키고 그 아래에서 뿌려주는 것으로 해결했지만 바람직한 방법은 아닌듯 싶다.

사용자 삽입 이미지
 
이것은 기존의 구조를 그대로 사용하되 이미지를 대신하여 input textField를 넣어 사용자가 입력할 수 있도록 하였다.
bitmapData를 통해서 무비클립의 모양을 데이터를 취득한 이후에는 해당 무비클립에 입력텍스트필드가 있다고 하여도 그것은 하나의 이미지 정보를 가지고 있는 이미지일 뿐이기 때문에 입력하지 못한다.
 
구조는 이러하다. 이런 형태의 화면전환을 하고자하는 무비클립과 그 무비클립이 포함될 경로(무비클립)을 플래스 생성시에 전달받으면 어떠한 무비클립이도 이러한 형태로 화면전환이 가능하다. 이는 적용하고자 하는 무비클립 안에서 프레임으로 화면의 페이지를 넣어두었고 클래스 내에서 해당 무비클립의 프레임을 이동한 무비클립을 복제하였다. 그리고 bitmapData를 통해서 모션이 이루어지고 마지막 정지 시점에서 bitmapData를 통해서 모션을 주었던 무비클립을 제거하고 그 자리에 해당 무비클립을 바꿔치기 하는 방법으로 진행하였다. 그리고 다시 모션이 이루어지기 전에 현재 보고있는 화면의 bitmapData를 다시 draw하여 기존에 있는 bitmapData를 통해서 만들어진 무비클립을 대체하는 것으로 마치 bitmapData를 사용하지 않고 무비크립을 distrot 시키는 것 같은 효과가 가능하게 되었다. 위에 보이는 텍스트는 사용자가 작성하는 것으로 모션을 줄 수가 있다.
 
클래스 생성에서 넘겨주는 파라미터 값은 현재 무비클립과 적용한 무비클립으로 단 두개의 파라미터만을 넘겨주며 그 무비클립의 이미지 사이즈에 따라서 계산처리하기 때문에 화면전환 효과에 적용하기가 단순하여 사용하기 쉽다는 것이 강점일 듯 싶다.
 
 
모델 : 밍밍이...
    

설정

트랙백

댓글