플래시 네비게이션 맨땅에 헤딩하기 -9- 기본 골격 완성하기

9강입니다.

여기까지 오면서 우리는 그야말로 맨땅에 해딩하는 입장에서
돌을 치우고 땅을 고른 뒤에 주춧돌을 놓았으며 그위에 하나씩 골격을 세웠습니다.
그리고 8강의 마무리 즈음에서는 뼈대를 완성하였습니다.
저 나름대로는 한분의 낙오도 없이 끝까지 함께 가기 위하여 최대한 쉽게 한다고 하면서도
걱정스러웠는데 많은 분들이 8강을 함께 마쳤습니다.
여기까지 함께 하여 주신 분들께 감사드립니다.

이제 세워진 골격을 다듬어서 보기좋게 완성할 순서입니다.
기본강좌의 고비는 8강의 끝부분에서 만났던 프레임 액션이었습니다.
그 고비를 넘고 여기에 함께 계시는 분은 이제 중급이십니다.
다양한 응용력은 아직 부족하지만 기본체질은 분명 중급이 되셨습니다.
가장 큰 산을 넘었으므로 기본강좌에서는 더 이상 어려울 것 없습니다.
응용에 관한 부분이므로 재미있게 따라만 하시면 됩니다.


현재 진도의 결과물로도 풀다운 메뉴가 구현되지만 어딘가 좀 미진한 면이 있습니다.
우선 무비를 실행시켜 봅니다.
버튼1~4까지는 자연스럽게 작동합니다.
그런데 5~7으로 이동하면
5~7 버튼과 상관없는 1~4의 서브메뉴가 그대로 남아 있습니다.
5~7의 메인버튼은 직접 웹 페이지를 연결하므로 호출할 서브메뉴가 없습니다.
그러므로 마우스가 오버 되어도 앞에서 호출된 다른 버튼의 서브메뉴가
교체되지 않고 남아 있습니다.
정리하면 5~7 버튼의 서브메뉴영역은 비어 있습니다.
여기서 잠시 생각해보겠습니다.
불러 올 서브메뉴는 없는데 타 버튼의 서브메뉴가 남아 있는 현상을 어떻게 처리하면 될까요?
서브메뉴가 없으면 불러올 웹페이지의 설명문을 넣으면 됩니다.
참고로 플래시는 버튼 하나에 다중 명령을 주어서 여러개의 개체를 불러 올수 있습니다.
5~7 버튼에 웹페이지 URL과 페이지 설명문을 함께 넣어 보도록 하겠습니다.
그러기 위해서는 서브무비레이어 폴더에 세개의 레이어를 더 만들어 주어야 합니다.


1.
서브무비 폴더에 레이어 세개를 추가합니다.
레이어의 이름을 설명1. 설명2. 설명3으로 합니다.


2.
설명글이 담긴 무비클립심볼을 만들 차례입니다.
메인버튼5에는 Home에 대한 설명글..........go to main page
메인버튼5에는 Site map에 대한 설명글......go to site information
메인버튼5에는 Mail 보내기에 대한 설명글...go to outlook express 라는 문장이 담긴
무비클립을 만들어 보겠습니다.
영문으로 넣으려는 것은 폰트와 서브버튼 바탕의 통일성을 기하기 위해서 입니다.
다른 서브무비클립들과 같은 모양의 버튼바탕 글씨를 넣고
버튼바탕 색상만 다르게 하여 클릭되지 않는 영역임을 표시 해 보겠습니다.

3.
설명1레이어의 30번프레임에 키프레임을 추가합니다.


4.
무비바탕을 만듭니다.
직접 새로 만들지 않고 다른 무비에서 복사하여 수정하겠습니다.
버튼무비1에서 복사하여 가져 오겠습니다.
버튼무비1레이어의 15번키프레임을 선택합니다.
스테이지에서 버튼1을 더블클릭하여 sm1무비심볼 편집모드로 갑니다.
다시 더블클릭하여 자녀심볼인 s1-1 버튼심볼 편집모드로 갑니다.
버튼바탕 이미지만 복사합니다.


5.
스테이지로 돌아와서 설명1레이어의 30번 빈 키프레임에 붙여 넣습니다.
심볼에서 복사한 것이기 때문에 위치포함 붙여넣기는 효과가 없으므로 그냥 붙여 넣습니다.


6.
텍스트 툴을 클릭하고 go to main page를 입력합니다.

7.
Properties 창을 열고
폰트는 Zrnic, 자간은 1, 폰트크기는 13으로 지정하고
색상값에서 다소 흐린 색인 #999999로 지정합니다.
폰트색을 흐리게 지정한 것은 실행영역이 아니라는 것을 시각적으로 나타내기 위해서입니다.


8.
텍스트에 비해 바탕이미지의 폭이 좁으므로 노드편집툴로 수정하겠습니다.
그림의 붉은색 표시부분이 노드편집툴입니다.(Subselection Tool)
일반적으로 오브젝트의 크기를 변형할 때 쓰는
녹색부분의 형태변형 툴로 폭만 넓혀 줄 경우 버튼바탕의 형태가 기형이 되므로
노드편집툴로 양끝의 라운드형태는 그대로 유지하면서 폭만 넓혀 주겠습니다.


9.
우선 텍스트를 버튼바탕 위에 올려 놓고 수평으로 보기좋게 정렬합니다.
노드툴로 버튼바탕의 중앙에서 오른쪽 끝으로 넓게 드래그합니다.
확대한 화면을 그림으로 보며 설명하겠습니다.


10.
왼쪽 끝엔 선택되지 않은 포인트들이 보이고
오른쪽의 선택된 포인트들은 다른 모양이 되어 있습니다.
그 상태에서 우측방향 화살표 키를 누르면
선택된 포인트가 오른쪽으로 이동하면서 폭이 넓어 집니다.


11.
이번에는 왼쪽 끝을 선택하고
왼쪽 방향키를 눌러서 폭을 넓힙니다.


12.
버튼바탕과 텍스트를 보기 좋게 정렬합니다.
수평정렬의 기준으로 삼기 위하여 버튼무비4의 30번 프레임을 선택합니다.
돋보기 툴로 확대합니다.
버튼바탕의 상단 끝부분에 가이드라인을 위치시킵니다.


13.
설명1레이어를 눌러서 새로만든 버튼바탕과 텍스트를 같이 선택한 후
버튼바탕의 윗쪽 끝부분을 가이드라인에 맞게 정렬합니다.
이동하기 편하게 그룹으로 묶어줍니다.


14.
메인버튼5의 버튼바탕 오른쪽 끝과 설명1의 바탕 오른쪽 끝을 정렬합니다.


15.
저장한 후 설명1을 그룹째 복사합니다.

16.
설명1레이어의 눈동자를 끄고 잠급니다.
설명2레이어의 34번프레임에 키프레임를 추가한 후 위치포함 붙여 넣기 합니다.
그림처럼 복제가 되었습니다.


17.
그룹을 해제합니다.
스테이지의 텍스트를 더블클릭한 후 go to site information로 바꿔 적습니다.



**** 여기서 잠깐 ****
15~17번 문항처럼 텍스트를 복사해서 사용하게 되면
복사된 텍스트 오브젝트는 글자를 수정하여도 원본의 자간과 색상 폰트 등의
속성을 그대로 가지고 있습니다.
그러므로 별도로 설정하지 않고 글자만 고치면 되므로 편리합니다.


18.
노드편집툴로 글자의 폭에 맞게 바탕이미지의 폭을 넓혀 줍니다.
왼쪽은 속성을 이어받아서 맞게 되어 있으므로 오른쪽 폭만 넓혀 주면 됩니다.
그룹으로 묶어준 후
가이드라인을 이용하여 메인버튼6의 오른쪽 끝에 맞게 정렬합니다.


19.
그룹째 복사합니다.
설명2레이어의 눈동자를 끄고 잡급니다.
설명3레이어의 38번프레임에 키프레임을 추가하고 위치포함 붙여 넣기 합니다.


20.
그룹을 해제하고 텍스트를 go to outlook express으로 바꿔 적습니다.
바탕이미지의 폭은 같습니다. 조절하지 않아도 됩니다.
그룹으로 묶은 후 메인버튼7의 오른쪽 끝에 맞춰 정렬합니다.


저장합니다.

21.
설명1레이어의 33번프레임에 키프레임을 추가하고 스톱액션을 적용합니다.
설명2레이어의 37번프레임에 키프레임을 추가하고 스톱액션을 적용합니다.
설명3레이어의 41번프레임에 키프레임을 추가하고 스톱액션을 적용합니다.


22.
각 설명 레이어마다
스톱액션이 걸린 키프레임 이후의 프레임을 선택한 후 Remove Frame으로 지워 줍니다.
저장합니다.


23.
이제 메인버튼5~7에 액션명령을 줍니다.
메인버튼5를 선택한 후 액션창을 엽니다.
매우 복잡한 다중 액션스크립트를 써야 하므로
메인버튼 5에서 일반모드로 완성시킨 후 나머지 버튼에서는 복사하여 수정하겠습니다.

24.
주소는 제 사무실 홈페이지 주소를 넣겠습니다.
1) GetURL을 더블클릭합니다.
2) 주소창에 http://aechae.com/board/rci.php을 입력합니다.
3) 다시 왼쪽의 액션 메뉴창에서 액션창에서 goto를 더블클릭합니다.
4) 프레임넘버에 설명1의 시작키프레임인 30을 적습니다.
5) gotoAndPlay(30);라인의 바로 위에 있는 on (release)줄을 클릭합니다.
6) Roll Over를 선택합니다.
박스안의 액션스크립트가 반드시 그림처럼 되어 있어야 합니다.


25.
그 상태에서 모드를 전문가용으로 바꿉니다.
Ctrl+A나 드래그로 액션스크립트를 전부 선택합니다.


26.
전체를 복사합니다.
메인버튼 6을 선택합니다. 액션스크립트창을 선택하고 붙여넣기를 합니다.
주소를 http://aechae.com/board/pci.php로 고칩니다.
gotoAndPlay(30);의 30을 설명2의 시작키프레임인 34로 고칩니다.

27.
메인버튼7을 선택합니다. 액션스크립트창을 선택하고 붙여넣기를 합니다.
주소는 메일방송용으로 고쳐 보겠습니다.
플래시에서 는 메일버튼의 링크를 mailto:abcd@abcd.com으로 사용합니다.
즉 mailto:자신의 주소가 됩니다.
gotoAndPlay(30);의 30을 설명3의 시작키프레임인 38로 고칩니다.

28.
저장합니다.
퍼블리시 하여 테스트 해봅니다.
잘 따라 하셨으면 모든 버튼이 잘 작동될 것입니다.


**** 여기서 잠깐 ****
위의 액션에 대한 설명입니다.
메인버튼5~7은 하나의 버튼에 두개의 호출명령이 들어 있습니다.
즉, 마우스가 오버되면 설명문구를 보여주고
클릭하면 해당 웹페이지를 불러 오라는 명령이 같은 버튼안에 들어 있습니다.
그 개념을 잘 이해 하시기 바랍니다.


9강은 여기까지입니다.

수고하셨습니다.