UI&C(User Interface & Communication) Lab을 끝맺음 하며...

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

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

사용자 삽입 이미지


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

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

UIClab.zip



    

설정

트랙백

댓글

[UI&C] Crop BitmapData

Project/UI&C Lab 2007. 2. 21. 11:03
이번에는 BitmapData를 이용하여 특정 무비클립을 bitmap으로 전환하고 다시 무비클립으로 되돌리는 클래스를 제작한 이후에 재미난 기능을 추가했다.

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

사용자 삽입 이미지

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

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

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

사용자 삽입 이미지

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

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

    

설정

트랙백

댓글

[UI&C Lab] Clip Navigation

Project/UI&C Lab 2007. 2. 21. 11:02

사용자 삽입 이미지
 
무비클립 생성 화면
 
클립 형태의 네비게이션을 만들어볼 생각으로 만든 기본적인 무비클립 생성이다. 생성된 무비클립들의 _rotation을 통해서 모션을 적용하였다.
 
사용자 삽입 이미지
스케일 조정 화면

사용자 삽입 이미지
네비게이션 무비클립 생성
 
앞에서 만든 기본적인 무비클립 생성을 통해서 각각의 무비클립에 event를 적용하였다.
각 무비클립을 클릭했을 때의 모션으로 선택된 무비클립의 rotation을 0으로 하며 나머지는 특정 rotation값을 적용하고 무비클립이 포함된 무비클립의 좌표를 왼쪽 상단으로 위치시켰다.
Back 버튼을 통해서 다시 펼쳐진 형태로 되돌아 가는데 클릭할 때 적용했던 scale을 그대로 적용함으로서 클릭하기 전의 형태를 유지하도록 하였다.

사용자 삽입 이미지
특정 무비클립 클릭시 모션 적용

사용자 삽입 이미지
컨텐츠 view 화면 back 버튼을 누르면 초기화면으로 모션 적용

사용자 삽입 이미지
네이게이션 무비클립 생성
 

사용자 삽입 이미지
특정 무비클립 클릭시 모션 적용

사용자 삽입 이미지
컨텐츠 view 화면 scale을 통해서 줌인 형태로 화면을 채움

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

설정

트랙백

댓글

[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 시키는 것 같은 효과가 가능하게 되었다. 위에 보이는 텍스트는 사용자가 작성하는 것으로 모션을 줄 수가 있다.
 
클래스 생성에서 넘겨주는 파라미터 값은 현재 무비클립과 적용한 무비클립으로 단 두개의 파라미터만을 넘겨주며 그 무비클립의 이미지 사이즈에 따라서 계산처리하기 때문에 화면전환 효과에 적용하기가 단순하여 사용하기 쉽다는 것이 강점일 듯 싶다.
 
 
모델 : 밍밍이...
    

설정

트랙백

댓글

[UI&C Lab] Draw Path...

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

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

사용자 삽입 이미지
 
라인을 path에 따라 그려주는 클래스에서 임의의 좌표점에서 무비클립의 스케일을 랜덤하게 생성하여 scale 1 ~ scale random(100)으로 진행하였다. 기초적인 나무의 형태와 오브젝트들을 나열했으나 부자연스럽다. 다음 진행은 아래와 같다.
 

사용자 삽입 이미지
 
라인의 굵기를 처음 좌표를 시작하는 지점과 끝 지점으로 갈수록 굵은 쪽에서 가늘게 진행하였다. 그리고
꽃과 잎의 구분을 위하여 두개의 무비클립을 상호 조화롭게 나타나도록 배치하였고 라인과 마찬가지로 잎과 꽃의 scale도
큰쪽에서 작은 쪽으로 진행하였다. 그러나 어딘가 또 부자연스럽다. 잎과 꽃의 rotation을 보면 rotation을 랜덤으로
설정해 놓았기 때문에 식물의 가지가 뻗어나가는 방향으로 향하지 않은 놈들이 상당히 보인다. 이는
자연의 나무 형태에서 보는 것과는 다른 부자연스러운 모양을 나타내고 있다. 다음은
그 문제를 해결한 부분이다.

사용자 삽입 이미지
 
앞의 것과 같은 클래스 구조에서 각각의 잎과 꽃을 나타내는 무비클립의 rotation에 제한을 두었다.
 
  var difx:Number = pointList[count].x - pointList[count-1].x;
  var dify:Number = pointList[count].y - pointList[count-1].y;
  var ang:Number = Math.atan2(dify, difx);
  var rotationValue:Number = ang * (180 / Math.PI);
 
여기서의 rotationValue 값은 라인이 진행하는 방향의 각도를 가지고 있으므로 그 각도에서 + and -값을 꽃은 60, 잎은 70도로
한정하고 - 와 +는 랜덤으로 설정하였다. 이렇게 하여 라인이 진행하는 방향 쪽으로 향하는 잎과 꽃을 나타낼 수 있었다.
 

사용자 삽입 이미지
 
이렇게 진행하고 마지막으로 잎과 꽃을 실사 이미지를 입히고 가지의 line은 lineGradientStyle 메소드를
이용하여 명암을 넣으므로써 조금은 입체적인 느낌을 살리려고 했다.
 
이것을 만들때 Line Path Recorder를 이용하여 축출한 Point 좌표가 마우스의 움직임에 따라 저장이되는 관계로
그대로 사용할 경우에는 한점과 한점을 지나는 간격이 좁은 관계로 처리해야 하는 양이 늘어나는 문제가 있었다.
이는 기존의 point 좌표를 갖는 array에서 중간 값들을 두번 걸러내는 것으로 처리속도를 높일 수 있었다.
 
실사 이미지가 들어가므로 인해서 잎과 꽃이 나타날때 약간의 CPU문제가 발생하지만 그럭저럭 쓸만한 클래스가 만들어졌다.
    

설정

트랙백

댓글

[UI&C] Path Recorder

Project/UI&C Lab 2007. 2. 21. 10:58
이번은 화면 좌표를 표준화 String으로 축출하여 화면에 비주얼을 보여주고 네비를 구성해 봤다.
표준화된 String을 이용하기에 다양한 비주얼 형태에 적용이 가능할 것으로 예상된다.
사용자 삽입 이미지

사용자 삽입 이미지

사용자 삽입 이미지


사용자 삽입 이미지


사용자 삽입 이미지


사용자 삽입 이미지


사용자 삽입 이미지


    

설정

트랙백

댓글

UI&C(User Interface & Communication) Lab...

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

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

사용자 삽입 이미지


    

설정

트랙백

댓글