6강입니다.

여기까지 함께 오신 분들이라면 이제 초보딱지는 떼셨습니다.
플래시와 많이 친해지셨을 것입니다.
웬만한 단축키와 툴, 그리고 명령어들과는 꽤 안면을 익혀 서먹하지 않은 사이가 되었을 것입니다.
6강부터는 여태까지 단련하여 튼튼해진 기본체력을 바탕으로
플래시의 세계에 더 깊이 들어 가겠습니다.
이번 강좌는 서브버튼을 완성시킨 뒤
메인버튼에 마우스가 오버 되었을 때 서브 버튼이 나타나는 에니메이션을 구현하여 보겠습니다.

1.
메인버튼레이어를 잠급니다.

2.
서브버튼레이어의 잠금을 해제합니다.

3.
라이브러리 창을 엽니다.
단축키는 Ctrl+L입니다.


4.
라이브러리 화면입니다.
심볼과 오브젝트가 많아서 복잡해 보입니다.
정리를 해보겠습니다.

5.
종류가 같은 것 끼리 정리합니다.
종류를 보겠습니다.


6.
위의 심볼들을 같은 종류끼리 폴더에 담아서 정리합니다.

7.
리이브러리 창의 왼쪽하단에 있는 폴더생성 아이콘을 누릅니다.


8.
폴더가 생성되면 폴더이름에 오브젝트의 종류를 적어 줍니다.
종류만큼 폴더를 만들어서 폴더이름을 적어 줍니다.

9.
심볼이나 오브젝트를 해당폴더로 집어 넣습니다.
마우스로 옮기면 됩니다.

10.
정리된 화면입니다.
폴더안에 다시 폴더를 만들 수 도 있으므로
작업이 어느정도 진행된 상태에서는 라이브러리를 정리하시기 바랍니다.


11.
이제 서브버튼 무비클립을 만들겠습니다.

**** 여기서 잠시 ****
메인버튼은 버튼심볼 안에 무비클립이 들어 가 있지만
서브버튼은 무비클립 안에 위치하여 숨겨져 있다가 메인버튼의 호출에 의해 나타납니다.
만드는 방법도 메인버튼과는 다른 기법을 쓸 것입니다.
좀 복잡하지만 여러분은 기초체력 훈련을 하셨으므로 재미있게 따라 하실 수 있습니다.

12.
라이브러리 창을 엽니다.
버튼을 모아둔 폴더를 엽니다.
버튼 폴더 안에서 폴더를 하나 더 만들고 이름을 '서브버튼'이라고 적습니다.


13.
버튼심볼 중 s1-1을 서브버튼폴더로 옮겨 넣습니다.


14.
s1-1심볼을 선택한 후
오른쪽 마우스를 열어 Duplicate를 누릅니다.


15.
Duplicate Symbol 대화창이 나오면
버튼을 선택하고 이름을 s1-2로 적은 후 OK합니다.


16.
14-15번의 방법으로 s1-3, s1-4 버튼을 만듭니다.


**** 여기서 잠깐 ****
위와 같은 방법으로 서브버튼을 만드는 이유는
버튼안에 무비클립을 이미 포함하고 있는 s1-1 버튼의 속성을 적극 활용하기 위해서 입니다.

우리가 만드는 네비게이션은 현재 7개의 메인메뉴가 있습니다.
그 중에서 4개의 메인메뉴에서 서브메뉴 4개가 포함된 무비클립을 호출하여 제어할 것입니다.
그러므로 총 16개의 서브버튼이 필요합니다.
그렇지만 우선 4개의 서브버튼으로 메인버튼1에 연결할 1개의 무비클립을 만듭니다.
그 다음에는
그 무비클립을 Duplicate로 복제하여 나머지 3개의 무비클립을 만듭니다.
중급이상의 난이도 이지만
열심히 따라 하셨다면 여러분은 이미 초보가 아니므로 충분하게 만드실 수 있습니다.
그리고 이 과정을 마치고 나면 무비의 계층구조를 확실하게 파악할 수 있기 때문에
응용력이 크게 향상 될 것입니다.

17.
서브버튼레이어를 선택하고 s1-2~s1-4 버튼 심볼을 모두 스테이지로 꺼냅니다.
s1-1 버튼은 이미 스테이지에 있으므로 꺼내지 않아도 됩니다.


18.
저장을 하고 퍼블리시를 하여 무비를 확인합니다.
모든 서브버튼이 s1-1의 속성을 그대로 이어 받았기 때문에 마우스가 닿으면 무비클립이 작동합니다.


***** 여기서 잠깐..이 아니고 극히 중요한 부분입니다...*****
가) 컨트롤 키를 누르고 마우스로 이동하면 심볼을 복제할수 있습니다.
나) 라이브러리에서 Duplicate로 심볼을 복제할 수 있습니다.
다) 라이브러리에서 스테이지로 꺼내기만 해도 심볼이 복제 됩니다.
그러나,
가)와 다)의 방법과 나)의 방법은 큰 차이가 있습니다.
단순 오브젝트나 움직임만 있는 간단한 심볼의 경우에는 가)와 다)의 방법으로 복사해도 되지만
무비클립을 복제하여 그 속성을 변경하여 사용하고자 할 때는 가)와 다)의 방법을 쓰면 안됩니다.
복제된 심볼과 원본심볼의 속성은 같은 성격에 종속되어 있기 때문에
복제된 심볼의 속성을 바꾸면 원본심볼의 속성도 같이 바뀌어 버립니다.
SiR의 질문답변코너에서 플래시 수정에 관한 질문 중
수정을 하니까 같이 바뀐다는 이야기는 위에서 설명한 현상을 말하는 것입니다.

반드시 외워 두셔야 할 사항입니다.
다단무비클립의 속성을 그대로 쓰면서 내용만 바꾸고자 할 때는
Duplicate를 이용하여 복제하여야 합니다.

서브메뉴 무비클립을 다 만들고 나면 보다 명확하게 이해가 되실 것입니다.
그리고 이 과정 이후엔 질문답변 코너에 있는 그 질문에 대해서 여러분이 해답을 제시할 수 있습니다.

19.
스테이지의 서브버튼들을 정렬합니다.
서브버튼 안에 무비클립이 포함되어 있기 때문에 육안이나 Align만으로는 정렬이 안됩니다.
모든 서브버튼을 선택하여 수평정렬을 합니다.

20.
수평정렬이 되었으면 서브바탕이미지의 중간에 위치하도록 다시 정렬합니다.

21.
저장을 하고 퍼블리시로 실제무비를 보면서 미세조절을 합니다.
수직정렬은 아직 하시면 안됩니다.
미세정렬이 끝났으면 다시 저장을 합니다.

22.
서브버튼 중 아무거나 더블클릭 하여 버튼심볼 편집모드로 갑니다.
1번레이어를 잠급니다.


23.
2번레이어의 Over프레임에 있는 십자무비클립이 들어 있는 키프레임을
Up프레임으로 옮겨 줍니다.


24.
메인스테이지로 돌아 옵니다.
숨겨져 있던 십자무비클립이 프레임이동으로 인해 보이게 되었습니다.


25
22문항과 23문항의 방법으로 스테이지에 있는 모든 서브버튼들을 수정합니다.
모든 십자무비클립이 다 보이면 저장을 합니다.


26.
서브버튼1의 십자무비 오른쪽+와 서브버튼2의 왼쪽+가 정확하게 겹치도록
위치를 수직조절 합니다.
1) 돋보기 툴을 이용하여 확대상태에서 조절합니다.
2) 위치가 조절된 서브버튼들은 다중선택하여(쉬프트+선택) 다른 서브버튼과 조절하거나
3) 조절된 서브버튼들 끼리 그룹으로 묶어서 조절하고 조절이 끝나면 그룹을 해제해도 됩니다.
그림처럼 가운데의 겹치는 부분이 하나의 십자처럼 보일 때 까지 조절합니다.


27.
조절이 끝났으면 저장한 후 퍼블리시하여 실제 무비를 보며 미세조절을 합니다.
미세조절이 끝났으면 각 버튼심볼 속에서 앞서 이동시킨 무비클립 위치를 다시 원위치 시킵니다.
방법은 간단합니다.
버튼심볼 편집모드로 가서 2번레이어의 업프레임을 선택한 후 컷프레임으로 잘라내어 버리면 됩니다.

다시 저장합니다.

28.
이제 서브버튼의 타이틀을 바꿀 순서입니다.
그림처럼 왼쪽에서 부터 subbuttn1, subbuttn2, subbuttn3, subbuttn4로 바꿀 것입니다.


29.
바꾸는 방법은 아주 쉽습니다.
두번째 서브버튼을 클릭하여 버튼심볼 편집모드로 갑니다.

30.
1번레이어의 Up프레임을 선택합니다.


31.
텍스트부분에 더블클릭을 하면 그림처럼 텍스트 편집모드가 됩니다.
subbuttn1의 1만 2로 바꿔주면 됩니다.



**** 여기서 잠깐****
각 폰트들은 글자마다 고유의 장평이 있습니다.
하나의 글자라 하더라도 1보다는 8이 장평이 넓고 3보다는 2가 더 넓습니다.
따라서 1을 2로 바꾸면 중앙정렬이 되어 있던 위치도 중앙에서 벗어나게 됩니다.
숫자를 바꾼 뒤엔 반드시 중앙정렬을 다시 해줘야 합니다.

32.
숫자를 바꾸고 정렬을 다시 하였으면 텍스트만 선택하여 Ctrl+C로 복사합니다.


33.
오버, 다운, 히트프레임을 차례로 눌러서 텍스트만 선택한 뒤 지웁니다.
오버, 다운, 히트프레임에 차례대로 위치포함 붙여넣기를 합니다.

34.
같은 방법으로 subbuttn3과 subbuttn4도 수정하여
그림과 같이 되게 합니다.



**** 여기서 잠깐 ..중요한 팁입니다.****
가까이에 나란히 있는 심볼을 전부 수정해야 할 경우의 팁입니다.
해당심볼의 수정이 끝났으면 희미하게 보이는 옆의 심볼을
연속으로 클릭하면 쉽게 옆 심볼의 편집화면으로 이동합니다.


35.
메인스테이지로 갑니다.
1번서버버튼을 선택하고 오른쪽 마우스로 액션창을 엽니다.
GetURL 메뉴를 더블클릭하여 그림과 같은 창이 나오게 합니다.
드디어 본격적인 액션스크립트입니다.
그렇지만 어려울 것은 하나도 없습니다.


36.
URL 창에 그누보드의 주소인 http://www.sir.co.kr를 넣습니다.
Window에서 _blank를 선택합니다. 새창으로 열리는 설정입니다.
그림처럼 되었습니다.


액션스크립트 입력창에서는 상단의 창에 입력을 하면
아래박스에서 자동으로 액션스크립트를 완성시켜 줍니다.
이 화면이 안 나온다면
액션스크립터 판넬의 오른쪽 상단에 있는 삼각형을 눌러서 나오는 모드가
전문가용인 Expert Mode로 되어 있기 때문입니다.
모드를 Nomal Mode로 바꿔 주면 됩니다.

37.
저장을 합니다.
퍼블리시하여 무비에서 버튼을 눌러 봅니다.
그누보드 사이트가 열리면 성공한 것입니다.

38.
2번버튼의 액션입니다.
주소에는 제 사무실의 풀플래시 사이트인 http://aechae.com/findex.html을 넣습니다.
윈도우는 다양한 기능을 알아 보기 위하여, 이번에는 _self를 선택합니다.

^^ 쉬어가는 공간입니다.
슬라이드로 열리는 모든 서브버튼의 주소에는
저와 관련된 사이트 주소를 넣으시라고 강요(?)합니다.
수업료라고 생각하고 따라 하시길....

39.
3번버튼의 액션입니다.
주소에는 역시 제사무실 사이트의 표준버전인 http://aechae.com/board/index.php을 넣습니다.
윈도우는 _parent를 입력합니다.

40.
3번버튼의 액션입니다.
주소에는 역시 제사무실 사이트의 인트로인 http://aechae.com을 넣습니다.
윈도우는 _top입니다.

6강은 여기서 마칩니다.

수고하셨습니다.