8강입니다.
지난 7강까지 우리는 모든 재료를 다 만들고 준비하였습니다.
이제부터는 그 재료를 가지고 재미있게 놀기만 하면 됩니다.

이번 강좌에서는
서브버튼을 포함한 무비클립이 메인버튼이 호출할 때 나타나는 에니메이션을 구현합니다.
중급이상의 내용이지만 원리를 알면 아주 쉬우므로 즐겁게 따라 하시기 바랍니다.

1.
우선 그림을 보겠습니다.


2.
위의 그림을 보면 모든 레이어의 오브젝트들이 1번 키프레임에 몰려 있습니다.
그 키 프레임을 조절하여 멋있게 등장하는 에니메이션을 만듭니다.

3.
레이어 부분의 화면이 복잡해 보입니다.
여기에 레이어 일곱개를 추가해야 하면
작업환경은 더 복잡해질 것이기 때문에 레이어 창을 정리하겠습니다.

4.
서브무비 레이어폴더를 닫습니다.
그림의 빨간 표시가 된 삼각형을 누르면 닫힙니다.


5.
그림과 같이 되었습니다.


6.
레이어폴더를 새로 추가 한 다음 폴더명을 '메인버튼'이라고 적습니다.
추가하는 방법은 좌측하단의 레이어폴더추가 버튼을 누르면 됩니다.


7.
7개의 레이어를 추가합니다.
레이어명은 편의상 1~7의 숫자로만 지정합니다.

8.
추가된 1~7의 레이어를 전부 메인버튼 레이어폴더에 넣습니다.
그림처럼 오름차순으로 1~7번 레이어를 정리합니다.


9.
위의 그림에서 타임라인과 스테이지의 경계부분에(붉은 라인)
마우스가 근접하면 포인트가 바뀝니다.
마우스를 움직여서 타임라인과 스테이지작업창의 높이를 조절할 수 있습니다.

10.
메인버튼 레이어의 잠금을 해제 합니다.
메인버튼1을 선택하여 잘라냅니다.
메인버튼레이어폴더 속의 1번 레이어에 위치포함 붙여넣기를 합니다.

11.
메인버튼2를 선택하여 잘라냅니다.
메인버튼레이어폴더 속의 2번 레이어에 위치포함 붙여넣기를 합니다.

12.
남은 메인버튼3~7도 위의 방법대로 잘라내어
같은 번호의 레이어로 옮깁니다.

13.
제대로 옮겨졌으면 그림처럼 되었을 것입니다.
메인버튼레이어는 비어있고
메인버튼레이어폴더 속의 1~7번 레이어는 1번 프레임이 키프레임으로 바뀌었습니다.


14.
빈 메인버튼레이어를 삭제한 후 저장합니다.

15.
쉬프트 키를 누른 상태에서
메인버튼폴더(메인버튼 레이어폴더) 속의 1번레이어의 1번키프레임을 선택한 후
7번레이어의 키프레임을 1번키프레임을 눌러서 모든 레이어의 1번키프레임이 선택되게 합니다.


16.
그 상태에서 마우스를 누른 후 선택된 모든 키프레임을 2번프레임으로 이동시킵니다.
저장합니다.


17.
위의 그림을 보면 메인 버튼 폴더의 레이어들에 포함된 키프레임들이 5번으로 이동하므로써
1번프레임에 키 프레임만 있는 레이어들의 오브젝트는 사라졌습니다.
모든 레이어의 프레임을 50프레임까지 늘려 주겠습니다.

18.
타임라인과 스테이지의 경계부분을 마우스로 끌어 내려서 타임라인의 영역을 늘립니다.
모든 레이어가 다 드러날 때 까지 내립니다.


19.
메인버튼폴더 속의 50번프레임을 선택합니다.
쉬프트를 누른 상태에서
배경레이어의 50번프레임을 선택합니다.


20.
그 상태에서 오른쪽 마우스를 열어서 Insert Frame을 누릅니다.
그림처럼 모든 레이어가 50프레임으로 늘어나면서 오브젝트들이 다시 나타났습니다.


21.
서브버튼 폴더를 닫아서 타임라인 영역의 공간을 넓힙니다.
스테이지 영역을 넓혀 줍니다.
저장합니다.

22.
메인버튼폴더를 닫은 후 잠급니다.
서브무비폴더를 연 후 눈동자를 켜서 모든 레이어를 활성화 시킵니다.


23.
서브무비폴더 속 모든 레이어의 키프레임을 선택합니다.
키프레임을 14번프레임으로 이동시킵니다.



24.
메인 버튼이 호출할 때만 해당 서브버튼을 담고 있는
서브무비클립이 나타나게 하기 위하여 프레임액션을 만들 것입니다.
기본강좌의 가장 핵심이므로 개념을 이해 하면서 따라 하시기 바랍니다.


25.
버튼무비4번 레이어의 17번프레임을 선택한 후 쉬프트를 누른 상태에서
버튼무비1번 레이어의 50번프레임을 클릭합니다.
그림처럼 반전이 되었습니다.


26.
선택된 상태에서 오른쪽 마우스를 열어서 Remove Frames로 반전된 프레임을 지웁니다.



************ 여기서 잠깐 **************
이제부터는 매우 중요한 부분이므로 정확하게 따라 하셔야 합니다.
1프레임이라도 틀리면 오작동 하거나 에러가 생깁니다.

27.
버튼무비1레이어의 17번프레임에서
버튼무비4레이어의 17번프레임까지를 수직으로 다중 선택합니다.



28.
선택된 상태에서 오른쪽 마우스를 열어서 키프레임을 추가합니다.



29.
버튼무비1레이어의 17번키프레임을 선택한 후 오른쪽 마우스를 엽니다.
Action-Stop을 차례로 클릭합니다.
그림처럼 17번프레임에 스톱액션이 적용되었습니다.


30.
액션판넬을 닫지 않고 나머지 레이어들의 17번프레임에 모두 스톱액션을 적용시킵니다.
액션판넬을 닫습니다.


31.
저장합니다.
퍼블리시에 대한 언급이 없으면 가급적 파블리시는 하지 않습니다.
지금 상태에서는 퍼블리시로 확인할게 없기 때문입니다.

32.
버튼무비2레이어의 키프레임과 프레임을 전부 선택합니다.(쉬프트+선택) 선택된 상태에서
버튼무비1레이어의 키프레임이 끝난 바로 뒤인 18번프레임으로 이동시킵니다.



33.
버튼무비3레이어의 키프레임과 프레임을 전부 선택한 후
버튼무비2레이어의 키프레임이 끝난 바로 뒤인 22번프레임으로 이동시킵니다.

34.
버튼무비4레이어의 키프레임과 프레임을 전부 선택한 후
버튼무비3레이어의 키프레임이 끝난 바로 뒤인 26번프레임으로 이동시킵니다.

35.
정확하게 이동하였다면 그림과 같이 되었을 것입니다.



36.
너무도 중요한 것이기에 다시 한번 그림을 보면서 확인합니다.
자신이 만든 것과 그림을 확인합니다.
여기서는 어떤 응용도 하시면 안됩니다. 무조건 따라하셔야 합니다.

프레임넘버로 다시 확인 해보겠습니다.
버튼무비1레이어의 시작과 끝 프레임은 14, 17번프레임입니다.
버튼무비2레이어의 시작과 끝 프레임은 18, 21번프레임입니다.
버튼무비3레이어의 시작과 끝 프레임은 22, 25번프레임입니다.
버튼무비4레이어의 시작과 끝 프레임은 26, 29번프레임입니다.

그림과 형태가 같다고 하더라도 프레임넘버까지 다시 확인합니다.


***** 여기서 잠깐 *****
지금이 중급으로 넘어가는 분수령입니다.
위의 프레임 위치와 액션의 의미에 대해서 설명합니다.
이해하시기 쉽게 단문형으로 설명하겠습니다.
1) 무비를 실행시키면 무비가 타임라인을 따라 진행됩니다.
2) 17번프레임에 스톱액션이 있으므로 17번에서 무비는 멈추게 됩니다.
3) 멈춰서 있는 부분까지가 메인버튼1에 속한 서브무비1의 영역입니다.
4) 무비는 메인에니메이션과 함께 자동으로 실행되는 서브무비1의 17번프레임에서 멈춥니다.
5) 메인버튼2를 클릭하면 18번프레임에서 21번프레임까지만 진행합니다.
6) 메인버튼4를 클릭하면 26번프레임에서 29번프레임까지만 진행합니다.
7) 29번에서 멈춰 있는 상태에서 메인버튼1을 클릭하면 다시 14번으로 돌아와서 17번프레임까지만
진행하고 멈춥니다.

이해가 안가시면 그림을 보시면서 일단 외웁니다.
위의 그림과 메인버튼에 걸릴 액션을 보면서 몇번 만들어 보시면 개념이 파악될 것입니다.
플래시로 만든 슬라이딩 방식의 풀다운 메뉴들 중에는 마우스로 선택하기가 어렵거나
마우스가 영역을 벗어나지 않았는데도 서브버튼이 사라져 버리거나
메인버튼을 클릭한 후 서브메뉴로 이동중에 제자리로 돌아가 버리는 메뉴들이 많습니다.
소스를 열어보면 복잡하게 얽힌 히트영역들로 인해 자신이 만들고도 수정시 어려움을 겪기도 합니다.

지금 함께 만드는 네비게이션은 마우스가 영역을 벗어나도
다른 버튼에 오버되기 전까지는 절대 서브버튼이 사라지지 않습니다.
또한 개념만 완전히 파악하면 응용형태가 헤아릴 수 없이 많습니다.
지금은 개념이 다소 난해하다 하더라도 일단 끝까지 따라 해보시기 바랍니다.


37.
이제 각 메인버튼에 서브무비를 호출하는 액션을 걸어 줍니다.
메인버튼1을 선택한 후 액션창을 엽니다.
액션창에서 Goto를 더블클릭합니다.



38.
다른 것은 건드릴 필요가 없습니다.
Frame에 무비1의 시작 프레임넘버인 14를 입력합니다.



39.
위의 그림과 같이 되었으면
on (rollOver){ 를 클릭합니다.
바뀐 창에서 Roll Over을 체크합니다.
액션창은 닫지 않습니다.


40.
메인버튼2를 선택합니다.
여기서는 타임라인영역이 필요치 않으므로 극소화시켜서 메인버튼과
액션창이 다 보이게 하면 작업이 편리합니다.
아무 액션도 없는 공백 상태가 보입니다.
이제 좀 쉽고 세련된 방법을 써 보겠습니다.



41.
액션패널은 전문가 모드와 일반모드가 있다고 말씀드린바 있습니다.
액션스크립트가 능숙하지 않은 상태에서는 일반모드가 편리하지만
같은 속성으로 호출되면서 프레임번호만 다를 경우엔
첫 버튼의 액션은 일반모드로 적용한 뒤 전문가용 모드에서
그 액션스크립트를 복사하여 다른 버튼에 붙여 넣기를 하면 작업이 훨씬 수월해집니다.
복사해서 단지 프레임 넘버만 바꿔주면 되기 때문입니다.
같이 해보면 무슨 의미인지 알수 있습니다.
그림에서와 같이 액션창 우측상단의 삼각형을 눌러서 전문가모드로 바꿉니다.


42.
화면이 직접 액션스크립트를 입력하는 모드로 바뀌었습니다.


43.
그 상태에서 앞서 일반모드로 액션스크립트를 완성한 메인버튼1을 선택합니다.



44.
Ctrl+A로 전체를 선택한 후 Ctrl+C로 복사합니다.

45.
메인버튼2를 선택하고 빈 공간을 클릭한 후 Ctrl+V로 붙여 넣습니다.
그림과 같이 복사가 제대로 되었습니다.
괄호안의 프레임넘버 14를 버튼무비2 레이어의 시작 키프레임인 18로 바꿉니다.



46.
메인버튼3을 선택한 후 빈공간을 클릭한 후 붙여 넣습니다.
프레임넘버를 버튼무비3 레이어의 시작 키프레임인 22로 바꿉니다.

47.
메인버튼4을 선택하고 빈공간을 클릭한 후 붙여 넣습니다.
프레임넘버를 버튼무비3 레이어의 시작 키프레임인 26으로 바꿉니다.

48.
나머지 메인버튼 5~7번은 서브버튼이 없고 메인버튼에서
직접 웹페이지를 호출하는 용도입니다.

여기까지 하셨으면 저장을 합니다.
퍼블리시하여 무비를 확인합니다.
메인버튼에 롤오버가 되었을때 서브버튼이 제대로 호출되고 있습니다.
그러나 아직 완성작은 아닙니다.
겨우 골격만 완성하였을 뿐입니다.

여기까지 8강 마칩니다.
9강에서는 골격위에 살을 붙이고 예쁘게 단장하여 보겠습니다.

수고하셨습니다.
따라 하신 분들은 결과물 올려 주시기 바랍니다.