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

11강입니다.

이번 강좌부터는
약간의 수정으로 느낌 다른 무비를 다루기 때문에 진행하는 사람의 입장에서도 재미있을 것 같습니다.
말 그대로 수정하여 바로 결과를 확인 할 수 있으므로 흥미가 배가 되고
지금까지 배운 기본지식을 활용하므로 술술~ 잘 따라 하실 것으로 믿습니다.

1.
먼저 화면을 보면서 레이어의 순서를 점검 해보겠습니다.
레이어의 그림처럼 되어 있아야 합니다.
순서가 바뀐 분들은 지금 바로 정렬합니다.



2.
서브무비 폴더를 엽니다.
버튼무비1의 시작키프레임을 선택합니다.
스테이지의 무비클립을 더블클릭하여 편집모드로 갑니다.

3.
편집모드에서 레이어 4개를 추가합니다.


4
서브버튼2를 잘라내어 레이어2에 위치포함 붙여 넣기 합니다.
서브버튼3를 잘라내어 레이어3에 위치포함 붙여 넣기 합니다.
서브버튼4를 잘라내어 레이어4에 위치포함 붙여 넣기 합니다.
그림처럼 되었습니다.


5.
모든 레이어의 1번 키프레임을 다중 선택합니다.

6.
선택된 상태에서 오른쪽 마우스를 열어서 모션트위닝을 적용합니다.

7.
모든 레이어의 5번 프레임을 다중선택한 뒤
키프레임을 추가합니다.
그림처럼 되었습니다.


8.
메모지를 꺼내세요..
메모지에 -55를 적어서 눈에 잘 띄는 곳에 둡니다.
앞으로 서브버튼 무비를 수정하는데 쓸 Y좌표입니다.

9.
서브버튼 1을 클릭합니다.
Info창을 열어서 X좌표를 봅니다.
그 좌표를 선택한 후 Ctrl+C로 복사합니다.


10.
레이어의 순서를 위에서 부터
내림차순으로 정리합니다.


11.
2번에서 4번레이어의 모든 프레임을 선택하여 마우스를 움직여
시작 키프레임이 8번에 오게 이동 합니다.


12.
1번 레이어의 종료 키프레임을 7번으로 이동시킵니다.
이동시키는 방법에 대한 설명입니다.
Ctrl 키를 누른 상태에서 마우스가 키프레임에 접근하면 포인트가 변합니다.
마우스를 누른 상태에서 움직이면 키프레임을 이동시킬수 있습니다.
그림처럼 되었습니다.


13.
레이어2 시작키프레임을 다중선택한 후 Info 창을 엽니다.
X좌표에 앞서 복사했던 1번 레이어 시작키프레임의 좌표를 붙여 넣습니다.
레이어3의 시작키프레임을 선택하고 복사했던 X좌표를 붙여 넣습니다.
레이어4의 시작키프레임을 선택하고 복사했던 X좌표를 붙여 넣습니다.


14.
모든 서브버튼들이 그림처럼 한곳으로 몰렸다면 제대로 된 것입니다.


15.
레이어1의 시작 키프레임을 선택하고
Y좌표에 아까 메모해둔 좌표값을 적어 줍니다(이 좌표값은 계속 활용됩니다.)
서브버튼1이 영역밖의 높이로 이동 되었습니다.
저장합니다.


16.
레이어2와 3의 프레임을 그림처럼 이동시킨 후
레이어2의 종료 키프레임에 스톱액션을 적용합니다.


17.
그림처럼 모든 레이어의 프레임을
스톱액션이 걸린 레이어2의 종료키프레임까지 늘려 줍니다.
저장 한 후 퍼블리시하여 무비를 확인합니다.
서브무비 1번이 재미있게 등장합니다.


18.
서브버튼2를 더블클릭하여 편집모드로 갑니다.
레이어 네개를 만들고 서브버튼들을 하나씩 잘라내어
번호가 같은 레이어로 각각 붙여 넣습니다.

19.
레이어의 순서를 내림차순으로 정렬합니다.

20.
모든 레이어의 1번키프레임에 모션트위닝을 적용합니다.
모든 레이어의 5번프레임에 키프레임을 추가합니다.


21.
2번~4번 레이어의 시작키프레임을 7번 프레임으로 옮깁니다.
Info 창을 열고 레이어1의 1번 프레임 Y좌표에 메모해 두었던 -55를 입력합니다.

22.
레이어1의 종료 키프레임을 선택한 후 X 좌표를 복사하여
레이어2~4번의 시작프레임 X좌표에 붙여 넣기합니다.
지금까지의 작업결과로 그림처럼 되었습니다.



23.
모든 프레임을 그림처럼 만든 뒤에 레이어2의 종료 키프레임에 스톱액션을 겁니다.
저장합니다.
퍼블리시 하여 재대로 동작하는지 확인합니다.

24.
서브버튼3의 편집모드로 가서 레이어 네개를 만듭니다.
서브버튼들을 번호가 같은 레이어로 각각 잘라 넣습니다.

25.
레이어의 순서를 내림차순으로 정렬합니다.
모든 레이어의 1번키프레임에 모션트위닝을 적용합니다.
모든 레이어의 5번프레임에 키프레임을 추가합니다.

26.
2번~4번 레이어의 시작키프레임을 7번 프레임으로 옮깁니다.
레이어1의 1번 프레임 Y좌표에 -55를 입력합니다.

27.
레이어1의 종료 키프레임 X 좌표를 복사하여 레이어2~4번의 시작프레임 X좌표에 붙여 넣습니다.
지금까지의 작업결과로 그림처럼 되었습니다.



28.
모든 프레임을 그림처럼 만든 뒤에 레이어2의 종료 키프레임에 스톱액션을 겁니다.
저장합니다.
퍼블리시 하여 재대로 동작하는지 확인합니다.



29.
서브버튼4의 편집모드로 가서 레이어 네개를 만듭니다.
서브버튼들을 번호가 같은 레이어로 각각 잘라 넣습니다.

30.
레이어의 순서를 내림차순으로 정렬합니다.
모든 레이어의 1번키프레임에 모션트위닝을 적용합니다.
모든 레이어의 5번프레임에 키프레임을 추가합니다.

31.
2번~4번 레이어의 시작키프레임을 7번 프레임으로 옮깁니다.
레이어1의 1번 프레임 Y좌표에 -55를 입력합니다.

32.
레이어1의 종료 키프레임 X 좌표를 복사하여 레이어2~4번의 시작프레임 X좌표에 붙여 넣습니다.
지금까지의 작업결과로 그림처럼 되었습니다.


33.
모든 프레임을 그림처럼 만든 뒤에 레이어2의 종료 키프레임에 스톱액션을 겁니다.
저장합니다.
퍼블리시 하여 재대로 동작하는지 확인합니다.



** 여기서 잠깐 **
이제 서브버튼이 아닌 설명글들을 수정합니다.
설명글은 무비클립이 아니므로 무비클립으로 바꿔 주어야 합니다.
개체가 하나뿐이어서 아주 쉬우므로 그림없이 설명합니다.

34.
서브무비폴더에 있는 설명1, 설명2, 설명3 레이어의 스톱액션이 걸려 있는
종료 키프레임을 Remove Frames로 지웁니다.

35.
설명1 레이어의 시작 키프레임을 누릅니다.
스테이지에서 오브젝트를 선택한 후 F8을 눌러서 심볼대화상자를 엽니다.
무비클립에 체크한 후 심볼명을 설명1이라고 적습니다. 한글이라도 상관없습니다.
무비클립심볼로 바뀐 설명1을 더블클릭하여 편집모드로 갑니다.
레이어가 하나 뿐입니다.
1번 키프레임에 모션트위닝을 적용하고 5번프레임에 키프레임을 추가하여 스톱액션을 줍니다.
1번 키프레임의 Y좌표에 -55를 입력합니다.
스테이지로 와서 44번 프레임에 키프레임을 추가하고 스톱액션을 겁니다.

36.
설명2 레이어의 시작 키프레임을 누릅니다.
스테이지에서 오브젝트를 선택한 후 F8을 눌러서 심볼대화상자를 엽니다.
무비클립에 체크한 후 심볼명을 설명2이라고 적습니다.
무비클립심볼로 바뀐 설명2의 편집모드로 가서 1번 키프레임에 모션트위닝을 적용합니다.
5번프레임에 키프레임을 추가하여 스톱액션을 줍니다.
1번 키프레임의 Y좌표에 -55를 입력합니다.
스테이지로 와서 48번 프레임에 키프레임을 추가하고 스톱액션을 겁니다.

37.
설명3 레이어의 시작 키프레임을 누릅니다.
스테이지에서 오브젝트를 선택한 후 F8을 눌러서 심볼대화상자를 엽니다.
무비클립에 체크한 후 심볼명을 설명3이라고 적습니다.
무비클립심볼로 바뀐 설명2의 편집모드로 가서 1번 키프레임에 모션트위닝을 적용합니다.
5번프레임에 키프레임을 추가하여 스톱액션을 줍니다.
1번 키프레임의 Y좌표에 -55를 입력합니다.
스테이지로 와서 52번 프레임에 키프레임을 추가하고 스톱액션을 겁니다.

***** 여기서 잠깐 *****
설명레이어1~3의 수정 작업중 스톱액션이 걸린 종료키프레임을
지웠다가 다시 만든 것에 대해 설명합니다.
앞에서도 말씀드린바 있지만
어떤 프레임의 뒷 프레임에 키프레임을 추가하면 생성된 키프레임은
앞에 있는 프레임의 속성을 그대로 이어 받습니다.
만약에 뒤에 생성된 키프레임은 그냥 두고
앞에 있는 시작 키프레임의 내용만 바꾸게 되면 어떻게 될까요?
상호 연관성이 없어서 앞과 뒷 프레임이 다른 내용을 보여 주게 됩니다.
무슨 의미인지 설명1 레이어의 예를 들어 설명하면
시작 키프레임에는 무비클립이 존재하고
종료 키프레임이 버튼바탕과 텍스트가 그룹으로 묶인 단순 오브젝트가 존재하게 됩니다.
여기서 다시 왜 버튼무비 1~4는 그대로 두는가 하는 의문이 생길수 있습니다.
그 답은 간단합니다.
버튼무비 1~4는 오브젝트가 아닌 무비심볼이 들어 있었기 때문에
어느 한쪽을 수정하면 같이 바뀌기 때문입니다....
이 개념을 꼭 기억 하시기 바랍니다.


38.
저장한 후 퍼블리시 하여 무비를 확인합니다.
전체 무비의 움직임이 한결 세련되고 부드러워졌습니다.
만약 버튼이 이상하게 작동한다면 메인버튼의 액션스크립트 창을 확인하십시오.
액션스크립트에 적힌 프레임넘버와
서브무비의 시작키프레임넘버가 다르면 액션스크립트 창의 프레임 넘버를
시작키프레임넘버와 맞게 고쳐 주시면 됩니다.
메인버튼에는 모션트위닝이 적용되어 있으므로
액션 스크립트를 수정할 경우
시작키프레임의 버튼과 종료키프레임의 버튼에 모두 수정하여야 합니다.

11강은 여기까지입니다.

다음강좌에서는
여태까지 만든 네비게이션을 더욱 생동감 있게 해주는
텍스트 에니메이션을 만들어 보겠습니다.
수고 하셨습니다.