blog를 접하면서....

Miscellaneous/Story 2007. 2. 21. 11:05

블로그를 시작하면서 그동안 내가 너무 모르는 것들이 많았구나 하는 생각을 하게 된다. css, html.. 사실 html은 대학교를 다니면서 홈페이지를 만들기 위해서는 몇백개 되는 코드를 이용해서 만들 수 있다는 것에서 처음 접하게 되었는데 실무에서 직접 html을 다루지 않다보니 아는게 별로 없는 듯 싶다...

css도 예전보다 많이 변한 듯 싶다. class 개념으로 지금은 예전보다 사용하기 편하고 관리하기 편한 구조화가 가능해 진 듯 싶다. 쿠쿠 이게 언제때 이야기인데 그러나 하시는 분들도 있지 않을까 싶은데 나는 모든게 새롭게 다가오니, 내 분야가 아니더라도 평소에 조금의 관심은 갖고 있어야 무식하다는 소리를 듣지 않을 듯 싶다...

트랙백, 개념적으로는 다른 사람이 쓴 글을 다른 곳에서 댓글을 달 수 있고 상호 커뮤니케이션이 이루어 질 수 있도록 하는 개념이라고 들은 것 같은데...쿠쿠 실제로 블로그를 하다보니 당췌 어찌 써야 하는 것인지 모르겠다. 트랙백 주소를 클릭하면 복사가 되긴 하는데 그걸 어디다가 써먹는지 모르겠다는... 며칠 낑낑대며 찾아다니다보면 알게 되겠지만 이 또한 생소한 용어다.

IT는 내가 잠시 다른 것에 한눈을 팔때 사과가 수박이 되기도 하는 것 같다. 차례 때문에 수박 1/4쪽을 1만5천원에 샀다고 했는데... 냉장고에 있는 수박을 급습해야 겠다... 갑자기 먹고 싶네~ 쿠쿠


    

설정

트랙백

댓글

RGB Color Cop(컬러피커)

Design/Etc 2007. 2. 21. 11:04
  1. 사용자 삽입 이미지
    Eyedropper
    Just click and drag the eyedropper anywhere on the screen to select a new color. Single pixel or 3x3/5x5 average sampling options are available.
  2. Magnifier This control works exactly like the eyedropper. It can be used to zoom in on an area of the screen. After zooming, you can click in the magnifier view to select a color. The plus and minus buttons can be used to change the magnification level before or after magnifiying an area.
  3. Auto-copy to clipboard With this option enabled, the output value will automatically be copied to the clipboard.
  4. Multiple output options
    HTML hex, Delphi hex, Powerbuilder, Visual Basic, Visual C++, RGB float, RGB int
  5. Color options
    Snap to WebSafe, Detect WebSafe, Reverse, Random, Convert to Grayscale
  6. Relative position measuring Press the Control key while eyedropping and the coordinates will be set to zero (0,0). When you drag the mouse to a new location, the coordinate values will be relative to the point.
  7. Color History The last 7 colors selected will appear in the color history. To select a previous color, simply click on it. Colors can be pushed into the color history by right clicking while eyedropping.
  8. Complementary color palette 42 colors that complement the current color will be generated on the fly.
  9. System tray support The application can be minimized to the system tray.
  10. Mouse wheel support Spin the mouse wheel while magnifying to change the magnification level. Spinning the mouse wheel while focus is on either of the Red, Green, or Blue edit controls will increment or decrement by 1(hold shift for +/- 2, hold control for +/- 5).
  11. Other minor features RGB Float mode will output the color as 0.50,0.25,0.00 Alt+[ will decrease floating point precision and Alt+] will increase floating point precision.
    The standard windows cross hair cursor can be used in lieu of the eyedropper cursor.
    Omit the # or $ symbols from the hex codes
    Upper or Lowercase hex output


사용자 삽입 이미지
Color Cop은 3.0 부터 사용해 왔다. 지금은 5.4.2버전까지 나와 있다. 웹 작업을 하다보면 자주 컴퓨터 화면의 특정 부분의 컬러를 축출하여 사용하는 경우가 많은데 이럴때 유용한 유틸이다.

컴퓨터 화면에서 보여지는 특정 픽셀의 컬러를 바로 축출할 수 있고 프로그램 자체도 가볍기 때문에 웹과 관련된 작업하는 분들에게는 작지만 아주 유용한 프로그램이 아닐까 생각된다.

프로그램은 http://prall.net/ 에서 다운로드 가능하며 필요한 분들은 아래 파일을 첨부하니 다운로드 하시면 된다.
사용법은 첨부한 압축파일을 풀고 exe파일을 실행.

invalid-file

버전 4.0

invalid-file

버전 5.4.3



 

    

설정

트랙백

댓글

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

설정

트랙백

댓글

무비클립 60만개로 만든 바탕화면

Design/Etc 2007. 2. 21. 11:02
사용자 삽입 이미지
    

설정

트랙백

댓글