플래쉬로 카테고리를 꾸며보자. [Category Menu Flash Bar]

주말에 할일(?)이 없어서 필자 블로그의 메인화면을 조금 수정해보기로 하였다.
그러던중 플래쉬로 아이콘을 조금 추가해보기로 했다.
아이콘들은 필자블로그의 성향중, 취급하는 분야들을 아이콘으로 세우고,
클릭시 해당 카테고리로 이동하도록 설정하였다.

(Study 분야는 접속자들이 부담스럽고 찾을 일들이 없기때문에 제외시켰다. Study는 가끔 사람들이 검색엔진을 통해서나 들어온다. ^_^)

완성된 작품을 사진으로 보면 위와 같다. (결과물 swf는 하단에 위치시켜놓았다.)
기본 원리는 마우스의 위치에 따라서 좌/우로 움직이는 것이다.
(약간 3D개념으로 x,y,z 좌표값을 설정하여 이동한다. - 필자가 다 만든건 아니고 기본소스를 구해서 수정하였다.)

위 카테고리 Bar를 만들기 위해서는 2가지 기본 틀이 필요하다.

1. 아이콘을 만들기 위한 포토샾 PSD 파일
2. 플래쉬의 움직임을 구현하기 위한 FLA 파일

1. CARBON GLOSS를 이용한 ICON 만들기.

위의 소스는 약간의 간지 느낌이 나는 아이콘으로 사이버틱한 분위기를 풍긴다.
그래도 여러 아이콘 소스들중에 수정가능하며 멋있는 것들중 심사숙고해서 골라보았다. ^_^

[DownLoad]

CarbonSOURCE.zip

사용법은 간단하다.(간단한 포토샾을 사용할 줄 안다면~)
PSD파일이기 때문에 크기나 부분적인 디자인, 색감 등은 조율이 가능하다.
아이콘의 이름은 아래 사진과 같이 편집할 수 있다.

Carbon Glosss는 위와 같은 위와같은 Layer로 구성되어 있다.
Text부분과 Inverted Text부분을 원하는 문자로 바꿔주기만 하면 OK~!
추가로 상단부의 Stripes의 색깔을 조정하여 아이콘상의 우측하단의 색을 바꿀 수 있다.

2. Flash를 이용하여 움직이는 동작 구현하기.

Flash를 이용하는 마우스의 위치에 반응하여 좌우로 움직이게 하기 위한 것이다.
또한 위치에 따라 원근감을 표시하기 위함이기도 하다. (결국 약간 3D적인 움직임 구현을 위함)

[DownLoad]

category.zip

이것 또한 사용법은 간단하다.(플래쉬 간단하게 사용이 가능하다면~)
category.fla 파일을 연후 우측 하단의 라이브러리 항목을 열어본다.

그러면 위와 같이 1~8.jpg파일이 보일 것이다.
이때 위에서 만들었던 아이콘으로 덮어씌어 준다.
[바탕화면에서 마우스로 끌어다 가져다 놓으면 된다. - 단, 기존항목 교체를 체크 해주어야 한다.]

여기 까지하고 만든 플래쉬 파일을 실행하면(Ctrl+Enter) 자신의 아이콘이 돌아가는 모습이 확인 가능하다.
이때, 각 버튼 클릭시해당 카테고리로 이동하고 싶다면 아래와 같이 수정하면 된다.

플래쉬에서 상단부분을 보면 TimeLine이 존재한다 그중 첫번째 프레임에 위와같이 a표시가 되어 있는 것을 볼 수 있다.
프레임을 클릭한후 F9(스크립트창 열기)를 누르면 위 사진과 같은 간단한 코드가 등장한다.
이때 녹색으로 된 주소를 각자의 블로그상의 원하는 주소를 넣으면 된다.

완성이 된다면 아래에서처럼 마우스 위치에 따라 돌아가는 효과를 볼 수 있다.
(마우스를 올리면 알파값이 100이되어 전체 모습이 볼 수 있고, 클릭시 해당 카테고리로 이동)

덧 1. Plug-in으로 카테고리를 자동으로 읽어와서 아이콘 생성하는 것을 만들까 했는데,
    치명적으로 필자가 php나 치환자를 이용해 플래쉬와 연동하는 것이 경험도 없고, 책보면서 하면 왠지 시간대비용이 낮을 것 같아서, 그냥 필자 블로그용으로 만들어 보았다. ^_^

덧 2. 플래쉬 설치시 Explorer계열에서는 웹상에서 플래쉬 부분이 활성화되지 않는 경우가 있는데, 이때는 스크립트 코드를 skin.html에 추가해주면 된다. 이것도 추후 해볼 예정이다 ^_^