플래시 네비게이션 맨땅에 헤딩하기 -2- 버튼과 기본 에니메이션(1)

1강에서 우리는 네비게이션의 기본바탕을 디자인 하여 보았습니다.
바로 플래시로 들어가지 않고 긴 시간을 디자인에 할애한 것은
화려한 플래시기법을 사용하였어도 디자인이 받쳐 주지 못하면 조잡하게 보이기 때문입니다.

플래시는 유저에 따라 그 기법이 헤아릴수 없이 많습니다.
그 많은 기법들을 다 배워야만 하는가 하고 물으신다면 그렇지 않다고 말씀드릴 수 있습니다.
기본적인 기법만 정확하게 파악 하셔도 자신만의 색깔로 다양하게 응용할 수 있습니다.
몇강까지 이어질지는 미리 알수 없습니다만 저와 함께 다시 각오를 새롭게 하셨으면 합니다.
이 강좌가 끝났을 때 쯤엔 분명히 자신만의 표현기법을 찾아 내어 다양하게 응용할 수 있을 것입니다.
강좌를 시작하기 전의 설문에서도 언급한 바 있지만 어려운 액션스크립트를 최대한 쓰지 않고도
자신이 원하는 네비게이션을 만들 수 있을 뿐만 아니라
최고급 기법인 겹침전환효과 까지도 만들 수 있는 플래셔가 되실 수 있습니다.

2강 부터는 새로운 플래시 용어들이 많이 등장 할 것입니다.
1강에서 충분히 설명 된 부분에 대해서는 그림을 생략하겠습니다.
그러나 중요한 부분은 반복되는 경우라도 그림을 곁들여 충분히 설명하겠습니다.


이번 강좌부터는 본격적인 플래시의 세계로 접어 듭니다.
기본 강좌의 내용입니다.
1) 플래시 만으로 메인버튼을 예쁘게 만들어 봅니다.
2) 메인버튼에 모션트위닝을 주어 동적인 움직임을 만듭니다.
3) 메인버튼에 마우스가 닿았을 때 멋있게 등장하는 서브메뉴를 만듭니다.
4) 네비게이션의 배경 위에 반복되는 에니메이션을 만들어 생동감을 줍니다.
5) 버튼에 액션을 걸어서 그누의 자유게시판을 호출하여 봅니다.

2강에서 만들 네비게이션은 기본적인 형태이므로 플래시의 폰트처리에 대해서는 언급하지 않습니다.
그러나, 기본 강좌가 끝난 뒤 진행할 예정인 고급 네비게이션과 겹침 장면전환 효과를 만들기 위해서는
절대로 건너 뛰어서는 안될 내용이므로 개념 파악에 신경 써 주시기 바랍니다.

진도에 앞서
첨부된 글꼴을 다운 받으셔서 윈도우의 폰트에 추가 하십시오.
영문폰트로써 메인버튼과 서브버튼에 사용할 것입니다.

버튼을 만들어 보겠습니다.

1.
기존 레이어를 모두 잠근 후 눈동자 표시를 꺼서 보이지 않게 합니다.
새 레이어를 하나 만들어서 레이어 이름을 '메인버튼'으로 바꿉니다.

2
사각형을 선택한 상태에서 메뉴창의 Windows-Color Mixer 창을 엽니다.
그림과 같은 대화상자가 나올 것입니다.


3.
선택상자에서 Linear를 선택하세요.
1)왼쪽 포인트를 선택한 후
2)색상선택 아이콘을을 클릭합니다.
3)색상을 직접 선택하지 말고 입력상자에 #C2C8D3를 입력합니다.
자신이 원하는 색을 직접 선택할 수도 있지만 지금은 색상값을 입력합니다.


4.
이번에는 오른쪽 포인트을 선택한 후
색상선택 아이콘을 클릭하여 입력상자에 #C2C8D3를 입력합니다.

5.
이번에는 마우스를 왼쪽포인트와 오른쪽 포인트의 중간부분에 가져 가봅니다.
마우스 포인터 옆에 +표시가 보일 것입니다.
클릭을 합니다.
포인트 하나가 더 생겼습니다.

6.
가운데 포인터를 선택한 후 색상선택 아이콘을 누른 후 입력상자에서 #666699을 입력합니다.

7.
칼라믹서 창의 오른쪽 최상단에 있는 화살표를 클릭합니다
메뉴에서 Close Panel을 눌러 창을 닫습니다.

8.
메인버튼레이어를 선택한 후 사각툴로
가로 15픽셀, 세로 15픽셀의 테두리 없는 사각형을 만듭니다.
테두리가 생겼으면 테두리만 더블클릭하여 제거 합니다.
앞에서 설정한 Color Mixer의 그라디언트 값이 적용되어 그림과 같은 색상이 되었을 것입니다.


9.
돋보기 툴을 클릭한 후 돋보기로 사각형을 드래그하여 확대하여 봅니다.


10.
사각오브젝트를 선택한 상태에서 Free Transform Tool을 선택합니다.
그림과 같은 조작포인트와 함께 그림에서는 안보이지만 회전포인트도 보일 것입니다.


11.
Ctrl키를 누른 상태에서 회전포인트를 움직여서 그림처럼 회전시킵니다.


12.
Info 창의 옵션에서 폭을 80픽셀, 높이를 15픽셀로 설정합니다.

13.
모든 레이어의 눈동자 표시를 켜서 보이게 합니다.
아래와 같은 모양이 되었을 것입니다.
메인버튼 이미지의 위치는 아직 상관없습니다.


14.
메인버튼 이미지를 선택한 후 F8을 누릅니다.
심볼 대화상자가 나오면 그래픽에 체크한 후 심볼명을 'maba'로 적습니다.

15.
메인버튼심볼(이제부터는 심볼입니다.)의 색깔 농도를 너무 튀지 않게 조절하겠습니다.
메인버튼심볼을 선택한 후 스테이지 왼쪽 하단의 Properties 버튼을 눌러서 대화창을 엽니다.

16.
그림처럼 대화상자의 Brightness를 선택한 후 50%를 입력합니다.


17.
Ctrl+L 버튼을 눌러서 라이브러리 창을 엽니다.

18.
maba그래픽심볼을 선택한 후 오른쪽 마우스를 엽니다.
풀다운 메뉴 중에서 Duplicate를 클릭합니다.


19.
대화창에서 그림처럼 그래픽을 체크하고 'maba2'를 입력한 뒤 OK버튼을 누릅니다.


20.
18-19의 방법으로 maba3, maba4, maba5, maba6, maba7을 복제합니다.

21.
복제된 maba2~maba7 그래픽심볼을 순서대로 스테이지에 꺼냅니다.
그냥 마우스로 가져다 놓으면 그림처럼 복사가 되었을 것입니다.


22.
이제 심볼들을 정렬합니다.
선택툴을 누른 후 심볼들을 그림처럼 드래그 합니다.


23.
단축키 Ctrl+K를 눌러서 Align 창을 엽니다.
스테이지 기준 체크를 해체하여 그림처럼 되게 합니다.
수평 가운데정렬 버튼을 누릅니다.


24.
왼쪽에서 첫번째 심볼을 선택한 후 Ctrl+I를 눌러서 Info 창을 엽니다.
아래의 그림처럼 X에는 62, Y에는 7.5를 입력합니다.


25.
오른쪽 끝의 심볼을 선택한 후 24번의 방법으로
X에는 612, Y에는 7.5를 입력합니다.


26.
이제 심볼들의 간격을 정렬할 순서입니다.
심볼들이 전부 선택되게 드래그 한 후
Align 창에서 아래 그림의 빨갛게 표시된 부분을 눌러서 수평간격 정렬버튼을 누릅니다.
노랗게 표시된 부분은 수직간격 정렬버튼입니다.
Align 창의 단축키는 Ctrl+K입니다.


27.
maba2~maba7을 드래그 하여 전부 선택합니다.
선택된 상태에서 Properties 버튼을 눌러서 대화창을 엽니다.
대화상자의 Brightness를 선택한 후 50%를 입력합니다.
색상과 밝기가 원본 maba와 같아졌습니다.


28.
메인버튼 심볼전체를 선택하여 버튼바탕에 보기 좋게 정렬하겠습니다.
이번에는 드래그로 선택하지 않고 메인버튼 레이어를 클릭하여 선택합니다.
레이어를 클릭하면 해당 레이어의 모든 오브젝트가 선택 됩니다.

29.
메인버튼 심볼전체가 선택 되었으면 버튼바탕의 오브젝트 위에 보기 좋게 위치를 잡아 줍니다.
위치를 이동시키는 방법으로는
1) 마우스를 움직여서 이동하는 방법과
2) 키보드르 움직여서 이동하는 방법
3) Info 창을 활성화 시켜서 좌표를 입력하여 이동시키는 방법이 있습니다.

**** 여기서 잠깐 ****
돋보기 툴로 오브젝트나 스테이지를 확대하여 보면서 이동할 때와
Alt 키를 누른 상태에서 오브젝트를 클릭하여 축소한 상태에서 이동 할 때의이동 범위는
큰 차이가 있습니다.
무슨 의미인지는 Info 창을 활성화 시켜놓고 확대하거나 축소되어 보이는 오브젝트를
키보드로 움직이면서 좌표값의 변화를 보시면 금방이해할 수 있습니다.
확대한 상태에서 이동하면 이동폭이 좁아지고
축소한 상태에서 이동하면 이동폭이 넓어집니다.

30.
육안으로 보아 보기 좋게 정렬 되었다고 생각되면 Publish하여
쇽웨이브(swf..플래시 실행파일)을 생성하여 실제로 보여지는 상태를 보면서 미세조절을 해야 합니다.
플래시는 포토샾이나 일러스트레이터, 코렐드로우 등의 그래픽 전문 프로그램 처럼
인쇄를 위한 프로그램이 아니기 때문에 위치좌표와는 다르게 보일 수도 있으므로
Publish 하면서 웹에서 실제 보여지는 위치를 조정하여 주어야 합니다.
특히 단색으로 된 평면 오브젝트 위에서 위치를 잡을 때는
반드시 실행파일을 육안으로 보면서 조절하여 줍니다.

31.
생성되는 실행파일의 옵션과 변수를 설정하기 위하여 Publish Setting을 합니다.
메뉴에서 Publish Settings를 클릭합니다.


32.
그림처럼 대화상자가 나왔을 것입니다.
Flash 박스는 체크한 채로 둡니다.
Html의 체크를 해제합니다.
Html의 체크를 해제하면 위의 Html 메뉴가 사라집니다.
확인을 누릅니다.


33.
메뉴에서
File- Publish Free Preview-Flash를 누릅니다.
진행바가 나오고 플래시 무비가 실행됩니다.



*** 여기서 잠깐 ***
퍼블리시 된 플래시무비의 이미지와 화질은 Html로 불러 왔을 때와 선명도에 차이가 있습니다.
이미지가 흔들리거나 흐려 보일 수도 있으나 Html에서 불러왔을 때는 그런 현상이 없어 집니다.

만약 Html 상의 퀄리티로 보기를 원하신다면 32번에서 체크 해제된 Html을 체크 하고
Html 버튼을 눌러서 Loop의 체크를 해제합니다.
확인을 누른 후 작업창으로 돌아와서 Ctrl+F12를 누르면
자동으로 Html 파일을 생성하면서 실제로 웹에서 보여지는 실행파일을 보여 줍니다.
진행바가 끝난 뒤 엑티브 보안 어쩌구 하면 오른쪽 마우스를 열고 허용을 누르면 됩니다.
주의 하실 점은 Ctrl+F12를 눌러서 퍼블리시하면
현재 열려 있는 익스플로러가 닫히고 플래시에서 만든 Html 화면으로 바뀝니다.

그리고
자동 생성된 Html 파일의 이름은 플래시 원본파일과 같습니다.
현재 플래시 원본 파일이 01.Fla라면 Html 파일 이름은 01.Html로 자동 생성됩니다.

여기까지 2강을 마치겠습니다.
3강에서는 2강에서 다 못다룬 기본강좌 내용을 이어 갑니다.
수고 하셨습니다.

* 글꼴을 다운 받지 않으신 분들은 지금 다운 받아서 설치하시기 바랍니다. *