플래시 네비게이션 맨땅에 헤딩하기 -10- 한단계 진화하는 네비게이션

10강 입니다.

지난 강좌까지의 내용만으로도
자신에게 필요한 네비게이션을 만드는 데에는 전혀 어려움이 없으실 것 입니다.
응용만 하신다면 다양한 네비게이션을 만들수 있고 응용할 수 있는 실력도 갖추게 되었습니다.
이번 강좌부터는
만들어진 기본 네비게이션을 좀더 멋있게 다듬어 보겠습니다.

1.
현재까지 만든 플래시 파일을 저장합니다.

2.
다른 이름으로 저장을 하여 파일을 하나 더 만듭니다.
File-Save As에서 파일이름을 원본으로 저장하여 줍니다.
파일이름이 원본으로 바뀌었습니다.
원본 파일을 닫고 앞서 저장한 f01을 불러 옵니다.

3.
앞서 작업한 파일을 쉽게 불러 오려면
Fike 메뉴를 열었을 때 하단에서 보여주는 파일이름을 클릭하면 됩니다.


4.
먼저 무비가 실행되자마자 나타나는 메인버튼들을 그럴듯하게 등장 시켜 보겠습니다.

5.
무비의 속도를 조금만 높여 보겠습니다.
Modify-Document 창을 열고 Frame rate를 22로 고칩니다.


6.
메인버튼 폴더를 엽니다.
모든 레이어의 시작 키프레임이 2번프레임에 있습니다.
시작 키프레임을 1번 프레임으로 옮겨 줍니다.
1번레이어의 키프레임을 선택한 뒤
쉬프트를 누른 상태에서 7번레이어의 키프레임을 누르면 일괄선택이 됩니다.
모두 선택이 되었으면 마우스로 옮기면 됩니다.
그림처럼 되었습니다.


7.
메인버튼1을 선택합니다.
액션창을 열고 전문가 모드로 바꿉니다.
액션스크립트 창의 gotoAndPlay(14); 구문에서 14를 25로 바꾸어 줍니다.
이렇게 바꾸어 주는 이유는 보다 동적인 에니메이션을 위해서 키프레임을
수정할 것이기 때문입니다.
눈치가 빠른 분은 아셨겠지만
조금 있다가 서브무비1의 키프레임을 25프레임으로 수정할 것입니다.

8.
메인버튼2의 액션창에서 프레임넘버를 29로 바꿉니다.
메인버튼3의 액션창에서 프레임넘버를 33으로 바꿉니다.
메인버튼4의 액션창에서 프레임넘버를 37로 바꿉니다.
메인버튼5의 액션창에서 프레임넘버를 41로 바꿉니다.
메인버튼6의 액션창에서 프레임넘버를 45로 바꿉니다.
메인버튼7의 액션창에서 프레임넘버를 49로 바꿉니다.

9.
저장합니다.
언급이 있을 때 까지 퍼블리시는 하지 않습니다.


**** 여기서 잠깐 *****
서브무비의 프레임을 옮기기 전에 메인버튼의 액션을 먼저 수정하는 것에 대해
의아해 하는 분들도 있을 것입니다.
지금은 메인버튼에 모션트위닝을 적용하려고 하는 중입니다.
모션트위닝을 적용하게 되면 시작키프레임과 종료키프레임으로 키프레임이 두배로 늘어납니다.
액션수정시 시작과 종료키프레임에 있는 버튼마다 다 수정해야 하기 때문에 번거롭습니다.
액션을 먼저 수정한 뒤에 모션 트위닝을 적용하면 번거로움을 덜수 있습니다.


10.
서브무비폴더를 닫고 메인버튼폴더를 엽니다.
모든 레이어의 1번키프레임을 모두 선택합니다.


11.
그 상태에서 오른쪽 마우스를 열고
맨 위에 있는 Create Motion Tween을 적용합니다.
그림처럼 되었습니다.


12.
모든 레이어의 10번프레임에 키프레임을 추가합니다.



13.
왼쪽 세로 눈금자의 30에 가로 가이드라인을 만듭니다.



14.
가이드라인이 안보이면 그림처럼 메뉴에서 View-Rulers를 누르시면 됩니다.
단축키는 Ctrl+Alt+Shift+R입니다.


15.
중요한 부분입니다.
레이어1의 1번키프레임을 누릅니다.
그 상태에서 스테이지의 모든 메인버튼을 드래그하여 선택합니다.
선택이 되었으면 키보드를 위로 움직여서 버튼들의 상단이
가이드라인에 맞게 위치시킵니다.


16.
그 상태에서 Properties 창을 엽니다.
창이 열리면 스테이지의 메인버튼중 아무거나 살짝 클릭하면
Sound 옵션 창의 위치에 Color 옵션창이 나타납니다.
Alpha를 선택합니다


17.
우측박스에 0을 입력합니다.
스테이지의 메인버튼들이 모두 안보이게 되었습니다.
저장을 합니다.


18.
레이어2~7 까지의 모든 프레임을 선택합니다.
다중선택이 되었으면 마우스를 움직여서 시작 키프레임이 3번프레임에 오도록 이동합니다.(매우중요)
그림과 같이 되었습니다.
저장합니다.
<

19.
3~7레이어의 빈 프레임 모두를 선택합니다.


20.
선택된 상태에서 오른쪽 마우스를 열어서 Insert Frame를 누릅니다.
그림과 같이 되었습니다.


21.
이번에는 4~7레이어의 3번에서 4번프레임을 선택합니다.


22.
선택된 상태에서 오른쪽 마우스를 열어 Insert Frame 합니다.
그림처럼 되었습니다.


23.
위의 방법으로 7레이어까지 모든 레이어의 키프레임을
위로 올라갈 수록 오른쪽으로 두프레임씩 밀려나는 계단형태를 만듭니다.
그림처럼 되었다면 저장합니다.
아직 퍼블리시는 하지 않습니다.



**** 여기서 잠깐 ****
중요한 팁입니다.
프레임 액션을 구현할 때 위에서 해본 것 처럼
일정한 간격으로 레이어 전체의 프레임을 오른쪽으로 움직여야 할 때는
위의 방법을 쓰면 편리합니다.
마우스로 움직인다면
종료 키프레임을 움직이고 다시 시작 키프레임을 움직여야 하고
그 중간의 간격을 유지하기가 어렵습니다.
기억하시기 바랍니다.
그리고, 여기까지 하신 분들은 앞에서 왜 메인버튼의 액션을 미리 수정했는지
이해가 가실 것으로 믿습니다.


24.
메인버튼 폴더를 닫고 서브무비 폴더를 엽니다.

25.
아주 중요한 부분입니다.
폴더속에 있는 모든 레이어의 프레임을 메인버튼 액션에 넣어준 프레임으로 이동시켜야 합니다.
번거로울 것 같지만 아까 방법을 알려 드렸습니다.
메인버튼1의 액션에서 우리는 프레임 넘버를 25로 수정하였습니다.
그런데 지금 현재 폴더내의 최초 프레임넘버는
그림에서 보는 바와 같이 버튼무비1레이어의 14번프레임입니다.
그러므로 폴더내의 전체 프레임 앞에
11개의 빈프레임을 넣어주면 모든 프레임이 일괄적으로
11프레임 우측으로 이동하여 매인버튼의 액션에서 지정한 프레임 넘버와 정확하게 맞아 집니다.


26.
위의 그림처럼 선택하고 인서트프레임을 하여
모든 레이어의 프레임을 11프레임씩 일괄적으로 늘려 줍니다.
아래 그림처럼 되었다면 프레임 수정이 한꺼번에 다 되었습니다.


27.
위의 그림에서 최초 시작 키프레임이 25로 변경 되었습니다.
프레임수정의 팁이므로 꼭 기억 하시기 바랍니다.
저장합니다.

28.
타임라인 창을 넓게 하고 모든 레이어 폴더와 레이어를 봅니다.
프레임이 들쭉날쭉합니다.
정리하겠습니다.


29.
그림에서 보면 서브무비 폴더 내의
설명3레이어 52번프레임에 스톱이 걸려 있습니다.
프레임이 52번에 못미치는 레이어는 늘려주고
넘어가는 레이어는 줄여 줍니다.
서브무비 폴더내의 레이어는 건드릴 필요가 없습니다.
그림처럼 되었으면 저장합니다.



**** 여기서 잠깐 ****
예전에 플래시를 조금이라도 해보신 분은 제 강좌를 따라 하는 과정에서
레이어와 프레임, 라이브러리, 레이어 폴더 등의 정리에 신경을 많이 쓴다는 것을 느꼈을 것입니다.
위의 사항들은 속도와도 연관이 있을 뿐만 아니라
차후에 수정할 경우에도 정리가 잘 되어 있으면 매우 편리합니다.
유념하시기 바랍니다.

30.
저장을 하고 퍼블리시합니다.
무비가 한결 부드러워졌습니다.
퍼블리시 하였을 때 메인버튼이 범위 바깥에서 나타나는 부분이 거슬리지만
신경쓰지 않으셔도 됩니다.
실제 플래시 파일에서는 도큐멘트 범위밖의 오브젝트는 안보입니다.

10강은 여기까지입니다.

수고하셨습니다.
11강에서는 서브버튼 무비클립을 단장 하여 보겠습니다.