지금까지 여러분은 네비게이션이란 말을 다양한 방법으로 접하셨을것입니다.
우선 네비게이션이란 단어는 정확히 웹 네비게이션이란 말을 줄여서 일컫는 것으로 우선
말씀드리고 싶습니다.
웹 네비게이션이란 말 자체가 웹사이트내에서의 페이지 이동이나 스크롤을 포함한 정보를
찾기 위해 이루어지는 행동을 일컫는 것이라 정의할 수 있을 것 같습니다.
예전에는 단순한 html페이지를 만들고 이미지 맵을 이용한다거나 롤오버이미지, show.hide layer기능을 이용하여 웹페이지를 만드는 방법등 여러가지 방법이 웹 네비게이션의 주축이 되어왔습니다. 그러나 플래시가 출현하게 되고 올플래시 사이트내에서의 페이지 이동등을 "xx라 지정된 프레임 레이블로 이동하라" 하는 액션등을 버튼으로 만들던 것이 flash MX로 넘어오면서 이제는 무비클립에도 버튼처럼 액션을 준다던지 하는 여러가지 방법으로 사용되어지게 되었습니다.
한 때 gabocorp, eye4u, 2advanced, nagafuji, prastation등의 웹사이트들의 메뉴, 혹은 액션들을 보면서 정말 가슴 두근거리며 밤잠 못 이루며, `과연 어떻게 만들었을까?` 하는 의문에 빠져들곤 했습니다. 그러한 사이트들의 비법들을 플래시 커뮤니티들을 통해 조금씩 익혀가고 알게 되면서 또한
플래시의 매력에 빠져들곤 했습니다. 여러분 또한 저마다의 플래시에 대한 첫인상들이 있으시겠죠? 이제 그러한 매력을 가진 플래시로 네비게이션을 설계하고 응용하는 것에 대해 설명을 들으시겠습니다.
제가 맡은 강의의 주안점은 플래시 네비게이션 기본적인 구조들에 대해 알고 그러한 구조를 어떻게 만드는가에 관한 것입니다.
그럼 이제부터 기본적인 네비게이션에 사용되는 메서드를 작성하는 요령에 대해 예를 들어보도록 하겠습니다.
우선 소스 파일을 다운로드 받으시기 바랍니다.
무단 배포나 상업적 사용은 금합니다.(그러실만한 소스는 아닐것 같습니다. ^-^;;)
slide_menu.zip
----------------------------------------------------------------------------------------
메뉴를 누르시면 하위의 서브메뉴가 나오는 방식입니다.
막상 착상을 해보자 하니 조금 의아하실줄로 압니다.
저도 처음 이러한 형태의 메뉴를 보고 어떻게 만들지 많은 고민의 과정을 겪었습니다. "우선 만들어보겠습니다." 하는 방식이 가진 문제점을 저도 배우는 입장에서 잘 알고 있기 때문입니다. 그럼 이러한 고민하는 과정을 거치면서 설계에 들어가 보겠습니다.
1.상위 메뉴(주 메뉴)를 누르면 하위 메뉴가 나오도록 되어 있습니다
2.롤오버시와 롤아웃시에 버튼은 형태가 바뀌가 되어있습니다. 짙은 회색의 사각형이 바탕을 이루어 구별되도록 했습니다.
3.버튼을 다시 한번 누르면 다시 서브메뉴가 없어지면서 줄어들게 되어 있습니다.
우선 상위메뉴와 하위 메뉴와의 관계 설정이 필요하겠네요.
상위버튼안에 하위버튼이 포함되는 형태를 생각해 보겠습니다. 하지만 주메뉴를 버튼으로 만들면 롤오버 롤아웃시의 움직임은 자유롭지만 그 버튼안에 하위메뉴를 넣으면 클릭했을 때의 하위메뉴가 나오는 것은 힘들다는 결론에 이르게 되네요.
흔히 만들어 오던 롤오버 롤아웃 버튼이 아니기 때문입니다.
그래서, 여기서 무비클립 심벌로 만드는 방법으로 전환해 보겠습니다.
무비클립 심벌안에는 모든 종류의 심벌이 삽입 가능하니, 보통 심벌 만들 때 선호하게 되는 심벌이죠.
그럼 이러한 것들을 모두 포함할 무비클립을 만드는 것에서부터 출발해야 될 것 같습니다.
저는 작업시에 항상 그림을 그리면서 연상을 하는 방법을 쓰고 있습니다.
우선 플래시에서 작업하는 것보다 빠르게 그림을 그릴 수 있고, 그때 그 때 생각나는 것을 옆에다 적어놓으면 이런 저런 액션들을 상상하는 것보다 훨씬 효과적으로 설계할 수 있기 때문이기도 합니다.
----------------------------------------------------------------------------------------
글씨를 알아보시기가 힘들것 같네요.ㅡㅡ;; (이런 방식으로 메모를 한답니다.)
위와 같이 그림을 그려보니 조금은 정리가 되는 느낌인 것 같습니다.
상위 메뉴버튼은 롤오버시와 롤아웃시에 색상 변화가 있어야 하는데 버튼의 up프레임과
over프레임에 변화를 주면 되겠군요.
상위버튼과 하위버튼의 관계는 무비클립안의 버튼들로 주메뉴를 누르면 서브메뉴가
보여져야 하겠죠. 무비클립 mc_1에 들어갈 것이 주메뉴 버튼, 하위메뉴 버튼인데,
클릭판정에 따라 보였다가 안보였다 해야 하니, 클릭판정에 Flag을 사용하겠다고 한 것입니다.
Flag이라는 말은 주로 플래셔들이 어떤 상태 판정에 주로 사용하는 단어입니다.
다른 말로 쓰셔도 상관없습니다. stat나 point등등 해외 플래시 소스나 많은 소스들에서는
다른 말로도 많이 표현하지만, 자신이 가장 알기 쉬운 단어로 사용하시면 됩니다.
제 자신의 경우는 Flag이 구분하기 가장 편한 것 같습니다. 1과 0이 여기서는 참 거짓이 아니며,
현재 무비에서의 상태를 이야기할 때 주로 1과 0으로 구분하는 것입니다.
원래 상태는 0, 한번 누르면 1, 또 한번 누르면 0……. << 이런 방식으로 상태를 표현할 때
쓰는 방법입니다. 유용하게 쓰실 팁이기 때문에 꼭 익혀 두시기 바랍니다.
그러면 클릭 판정에 대한 부분은 정리가 되었구요.
<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><?XML:NAMESPACE PREFIX = O />
클릭하면 하위메뉴가 나오게 다시 클릭하면 안보이게 하는 것은 어떻게 하면 표현할 수
있을지 생각해 보겠습니다. 주로 플래시에서 안보이던 물체가 보이게 하려면 어떤 액션을
사용하면 될까요? 단순히 프레임간을 이동하면서 보여주지 않을 물체가 없게 하면 됩니다.
보여줄 물체는 서브메뉴 계속해서 있어야 할 것은 주메뉴. 이렇게 정리하시면 됩니다.
여러 프레임을 사용할 필요도 없습니다. 단지 두 프레임만 가지고 작성해 보겠습니다.
1프레임에는 주메뉴만 2프레임에는 주메뉴와 서브메뉴를 놓으시면 됩니다.
---------------------------------------------------------------------------------------
| |||||||||||
----------------------------------------------------------------------------------------
이제 주 메뉴들간의 위치에 대한 액션을 설계해야 합니다.
우선 여기서 착상 이전에 slide에 쓰이는 공식을 짚고 넘어가겠습니다.
Slide에 일반적으로 쓰이는 공식은 아래와 같습니다.
무비클립의 onClipEvent(enterFrame) 을 사용하게 됩니다.
이것은 무비클립이 매프레임마다 이벤트가 발생되도록 하는것으로서 {}안의
명령문이 실행됩니다.
onClipEvent(enterFrame){
this._x = this.x + (targetX- this._x)/3;
}
onClipEvent(enterFrame){
this._x += (targetX- this._x)/3;
}
위의 두가지 액션은 같은 액션입니다.
this(지금 액션이 쓰인 무비클립을 지칭합니다.) = (현재 무비클립의 x좌표)와
(targetX(목표지점) –(무비클립의 x좌표)/3)를 더한 것을 다시
현재 무비클립의 x좌표에 대입하라는 뜻입니다.
목표지점의 x좌표에서 현재좌표를 뺀 것을 3으로 나누면 매프레임마다 서서히 그값을
계산해서 부드럽게 이동하게 됩니다. 0의 값이 될때까지 계속 작아지면서 반복해서
그 값을 대입하고 대입하고… 물론 컴퓨터가 대신 계산해 주는 것이죠.^-^;
이러한 원리로 부드러운 이동을 하는 슬라이드가 가능하게 됩니다.
위의 공식은 가장 많이 쓰이는 슬라이드 네비게이션의 공식입니다.
외워두실 필요는 없습니다.
단지 비슷한 공식을 보시면 ‘아, 이 무비는 슬라이드를 이용했군!’ 하는 정도로 떠오르기만
하시면 됩니다. 아니면 슬라이드 네비게이션이라는 이름의 텍스트 문서를 만들어 카피해
놓으시고 무비를 만들 때 붙여서 쓰시기만 하면 됩니다.
갑자기 슬라이드 공식은 왜 나온것인지 궁금하시죠?.^-^;;
아래 그림과 같은 도출 단계 이전에 이미 슬라이드 공식을 알고 있어야
그 다음 단계의 연상이 되기 때문입니다.
---------------------------------------------------------------------------
주메뉴들간의 관계는 위에 메모한것과 같이 무비클립의 height 속성과 y좌표를
이용하는것으로 하였습니다. 위치에 대한 값으로는 이러한 속성들을 이용하면 쉽게
액션을 도출해 낼수 있을것입니다.
그럼 이것을 지금 작성하고 있는 무비에 적용하는 것이 남았네요.
위의 메모를 기초로 실제 무비클립에 적용된 액션을 설명드리겠습니다.
OnClipEvent(load){
flag =0;
speed=0.5;
}
onClipEvent (enterFrame) {
this._y += (((_parent.mc_1._y + _ parent.mc_1._height) - this._y) * this.speed);
}
슬라이드 공식의 내용을 조금 수정한 것뿐인데도 굉장히 복잡해 보이네요.
이 액션은 mc_2무비클립에 적용된 액션입니다. mc_1무비클립은 상대적인 위치를 계산할 필요가 없는 기준 높이가 되므로 mc_2, mc_3, mc_4에만 이러한 공식을 대입해 주면 되겠죠.^-^;;
x값이 y값으로 변한 것 뿐이며 기본 공식에서의 targetX값이
(_parent.mc_1._y + _ parent.mc_1._height)로 변했습니다. 이것은 목표지점이 될 targetX의 값이 바로 mc_1의 전체 크기가 되어야 하기 떄문입니다. 바로 mc_1의 전체크기와 mc_2의 y좌표의 차에 speed값을 곱해준 것입니다.
곱하기 0.5는 나누기 2와 같습니다. (플래시 액션 스크립트에서는 보통 나누기 보다는 곱하기를 사용하는 것이 조금더 유연하게 재생된다는 말이 있습니다.)
이 액션을 mc_2, mc_3로만 바꿔서 적용해 주시면 슬라이드가 완성되는 것이네요.^-^;;
부가적으로 설명 드리자면 speed값을 변경하시면 부드럽거나 딱딱하고 빠르게 보이는 모션을 보실 수 있습니다.
[그림 참조]
----------------------------------------------------------------------------------------
지면의 한계 덕분에(?) 세부적인 설명이 되지 못한 점 아쉬움이 많이 남습니다. ^-^;;
지금까지 세로 네비게이션의 기본 슬라이드 네비게이션에 대해서 알아봤는데요.
이외에도 일라스틱을 이용한 움직임, 세로-가로 펼침 메뉴, 스케일팩터를 이용해서
메뉴글씨의 크기를 돋보이게 하는 법, 등등 여러가지의 세로 네비게이션이 있습니다.
가로 네비게이션의 경우 세로 네비게이션보다 사이트 구성상의 한계가 적은 이유로 더욱
다양한 제작 기술들이 있습니다. 세로 네비게이션외에도 가로 네비게이션의 기본적인
내용도 근간에 정리해서 기고하겠습니다. 강의 계획서 내용 이외에도 추가적으로 다뤘으면
하는 내용은 강의 게시판을 이용해 주시면 참고하겠습니다.
처음 시작하기가 어렵고, 시간이 갈수록 그 시작이 늦었던 것에 대해 후회하는 마음이
깊어지는 그런 플래셔가 되시기를 바라며, 강의 중간 중간에 억지스럽게 빨리 넘어간 부분이
있었더라도 넓은 마음으로 이해해 주시기 바랍니다. 그럼 다음 강의에서 뵙겠습니다.
유용한 활용 되셨기를 바랍니다. ^-^*
*출처:디자인 정글
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기, 각종 광고, 영업, 판매, 제안서, 전단지 반응율 3배×10배 이상 높이는 마법의 8단계 공식" |
|
| ☞자세히보기 |
|
|
|
