jasu's blog
블로그 메뉴검색결과 리스트
Project에 해당되는 글 65건
- 2007.02.21 [UI&C Lab] BitmpData Characters...
- 2007.02.21 [UI&C Lab] distort bitmapData...
- 2007.02.21 [UI&C Lab] Draw Path...
- 2007.02.21 [UI&C] Path Recorder
- 2007.02.21 UI&C(User Interface & Communication) Lab...
글
[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 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'은 오프라인에서 진행중이다.
