jasu's blog

금주 프로젝트 일정이 빠듯하다. 예상은 했지만 이런 저런 변수로 인해서 생각하고 있던 일정이 어긋나 버리니 내가 표현하고자 하는 의도를 마음껏 하지 못하는 것 같아서 고민중이다.

2005년 3월 경에 지금 다니고 있는 회사에 오게 되었는데 그 전에는 웹에 대해서 거의 문외한이었다. 간간히 학교 생활하면서 개인 홈페이지를 만들고 들어오는 알바를 통해 홈페이지를 만들어 보기는 했지만 아주 기초적인 지식에 국한하여 한정된 디자인과 컨텐츠, 레이아웃을 가지고 작업을 했기 때문에 이것이 잘 한 것인지 못한 것인지에 대한 판단도 서지 않았다.

처음 도메인(http://www.n-collection.com)을 만들고 개인 홈페이지를 만들어 운영을 했었는데 초기 플래시 홈페이지 버전은 플래시 3버전부터 였다. 그때는 html tag로 주로 작업을 하던 시절이었기 때문에 플래시라는 것이 무엇인지도 일반인들은 잘 알지 못하는 시절이었는데, 어느날 홈페이지를 만들기 위해 여기저기 웹서핑을 하다가 어떤 사이트를 보니 신기하게도 화면에서 이미지가 움직이고 글씨가 움직이는 것을 보고 반해 버렸다.

그때 처음으로 플래시로 홈페이지를 만들어서 네띠앙에서 주췌하는 홈페이지 경연대회에 출품을 했었는데 등수에는들지 못했지만 인기상을 받았던 기억이다.

그 이후로 도메인을 통해 여러개의 개인 홈페이지를 만들었다. 그 홈페이지들은 아직도 계정에 살아있다.

http://dicaland.cafe24.com/n-collection/
n-collection.com 도메인으로 초창기에 만들었던 사이트(대학교 시절 방학 기간중에 만들었던 기억이다. 여러가지 실험을 하고 상당히 공을 들여서 만들었던 기억이다.)

http://www.sg-boiler.com/
아는 분의 회사 홍보용 홈페이지를 만들었었다. 이것도 대학 다니면서 작업했던 것

http://dicaland.cafe24.com/jasu_gallery/
디카를 구입하고 사진을 찍으면서 만들었던 사진 갤러리 사이트 디비와 연동하고 이미지 정보를 보여주는 것과 같은 작업을 했었다.

http://dicaland.cafe24.com/sigma/
여러가지 컴펙트 디카를 사용하다가 시그마 d9, d-slr급  카메라를 중고로 구입하고  거의 매일 같이 카메라를 들고 다녔던 시절에 시그마의  이미지 정보를 가지고 재미있는 사이트를 만들어 볼까 싶어서 만들었던 사이트다. 시그마 카메라는 로우 파일로만 저장되기 때문에 나중에 다운 받아서 jpg 파일로 저장해야 한다. 그 이미지 변환 프로그램의 디자인을 그대로 따라한 사이트다.

http://dicaland.cafe24.com/portfolio/
홈페이지를 알바로 하기 위해서 포트폴리오용 사이트를 만들었던 것이다. 이건 이 회사에 입사하기 1년 전에 작업했던 사이트...

http://www.n-collection.com
이건 재작년에 만들었던 것 같다. 회사를 다니면서 작업했던 사이트 (현재 파이어폭스에서는 팝업이 뜨지 않는 문제가 있다....)  익스플로러가 아니신 분은 http://dicaland.cafe24.com/nc_project/main.html 여기로

http://www.dcaland.com
이건 가장 최근에 만들었던 사진 갤러리 사이트인데 어느정도 제작을 하고 추후에 수정 보완한다는 것이 손을 대지 못하고 있다.

위에 열거한 것들이 개인적으로 작업했던 것들이다. 이 밖에도 만들다 버려진 사이트도 몇개 있다. 컴퓨터를 많이 가지고 놀다보니 시간 날때마다 구상하고 작업하는 것들이 많았던 것 같다. 지금 보면 답답한 디자인과 어설픈 플래시 효과들이지만 그래도 나만의 놀이로 나를 즐겁게 한 녀석들이기 때문에 앞으로도 계속 계정을 유지할 생각이다.

내일은 일찍 회사에 가서 내일까지 마무리해야 하는 작업들을 해야한다... 해야 하는 일이 많아서 힘들기 보다는 작업하고 보람을 느끼지 못하는 아쉬운 프로젝트가 하나둘 늘어나는 것이 더 힘들게 하는 듯 하다. 앞으로는 나아지겠지....^^

이번에는 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을 통한 재미있는 네비게이션이 만들어진듯 하다.

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