플래시 네비게이션 맨땅에 헤딩하기 -1- 배경과 버튼 만들기

1강입니다.

우선 네비게이션의 바탕으로 쓰일 이미지를 만들어서 import 한 후
그 위에 플래시로 네비게이션을 디자인 하여 버튼을 만들어 넣고 작동하는데 까지 하여 보겠습니다.

1.
우선 바탕으로 쓸 이미지를 만들어 보겠습니다.
포토샾을 실행시키고 Canvas Size를 가로 750픽셀 세로 180픽셀로 지정합니다.

2.
바탕에 쓸 이미지를 불러 옵니다..
너무 복잡하거나 개체가 많이 담겨 있으면 산만해지므로 주제가 뚜렷하고 단순한 것이 좋습니다.
자유이미지게시판의 비비킹님께서 올려 주신 등대 이미지를 배경으로 만들어 보겠습니다.
http://www.sir.co.kr/bbs/board.php?bo_table=cm_gallery&wr_id=1775&page=14

3.
다운받은 이미지를 포토샾에서 불러 옵니다.

4.
Size를 지정하여 놓은 도큐멘트로 파일을 옮긴 후 크기를 적당히 조절합니다.

5.
Image-Adjustments에서
Color Balance나 Brightness/Contrast 또는 Hue/Saturation을 적절히 보정합니다.

6.
이미지 보정이 끝났으면 고급스런 느낌을 위하여 패턴을 입혀 보겠습니다.

7.
레이어의 눈동자 표시를 모두 꺼서 Canvas가 투명하게 합니다.


8.
돋보기 툴을 이용하여 Canvas를 최대한으로 확대 시킵니다.
돋보기 속의 +표시가 안보일 때 까지 확대합니다.

9.
최대로의 확대가 되었으면 레이어를 하나 더 만든 후
마퀴툴을 이용하여 선택 될수 있는 최소치를 선택하여 아래 그림처럼 흰색을 채웁니다.


10.
다시 마퀴툴을 이용하여 흰색부분 크기만큼의 공간을 포함하여 아래와 같이 선택합니다.


11.
선택된 상태에서 메뉴의 Edit-Define Pattern을 클릭하여 패턴이름을 01로 적은 뒤
OK를 눌러 Pattern으로 등록합니다.


12.
Pattern을 만들기 위하여 나중에 추가한 레이어를 지웁니다.

13.
꺼 놓았던 레이어의 눈동자를 켭니다.

14.
마퀴둘의 선택을 해제합니다. 마퀴툴을 선택한 후 반전된 부분을 클릭하면 해제됩니다.

15.
등록된 패턴을 적용하여 보겠습니다.
레이어를 하나 추가합니다.

16.
새로 만든 레이어를 선택한 후 메뉴에서 Edit-Fill-pattern을 선택합니다.
아래와 같이 대화상자가 나오면 앞서 만들어서 등록한 패턴을 찾아 선택한 후 OK를 누릅니다.


17.
그림처럼 패턴이 적용되었을 것입니다.


18.
레이어의 Opacity 값을 적당히 조절하여 보기 좋게 만듭니다.
25%로 맞추어 아래의 그림처럼 만듭니다.


19.
저장을 합니다.
저장시 JPEG Options에서 퀄리티를 너무 높게 잡지 마시고(용량이 커지므로) 9정도에 맞춥니다.


여기까지 배경이미지를 만들어 보았습니다.
포토샾 강좌가 되어 버렸지만 같은 이미지라도 고급스러운 느낌을 주기 위하여
욕심을 좀 부려서 보정을 하고 패턴을 적용하여 보았습니다.

이제부터는 본격적으로 플래시와 부딪쳐 보겠습니다.
플래시를 실행시킵니다.

20.
메뉴의 Modify-Document에서
wide=750, Height=180으로 설정하고 Frame Rate를 20으로 지정합니다.
wide=750, Height=180픽셀은 앞서 포토샾에서 만든 배경이미지와 같은 사이즈입니다.
Frame Rate는 무비의 속도를 결정하는 부분으로 30fps를 넘어가면
무비에 따라 동작이 자연스럽지 않을수 있습니다.


21.
레이어1을 선택한 후 File-Import를 클릭하여 앞서 만든 배경.jpg파일을 불러 옵니다.

22.
Ctrl+L 키를 동시에 눌러서 라이브러리 창을 엽니다.


23.
배경.jpg 파일 앞의 나무아이콘을 클릭하면(나무모양의 아이콘은 이미지를 나타냅니다.)
이미지 정보가 나옵니다.
현재는 jpg로 체크 되어 있지만 PNG나 GIF파일을 Import 하였으면 그에맞게 변경해 주어야 합니다.

24.
메뉴의 Window에서 Align과 Infodmf을 클릭하여 스테이지로 꺼냅니다.


25.
배경이미지를 선택한 후 Align 창을 아래의 그림처럼 클릭하면
배경이미지가 도큐멘트에 맞게 정렬됩니다.


26.
정렬이 끝났으면 레이어의 이름을 '배경'으로 바꾼 뒤에 레이어를 잠급니다.
아래의 그림처럼 잠그면 움직이지 않고 안전합니다.


여기까지 따라 하신 분들은 일단 저장을 하십시오.
저장이름은 01입니다.
원만한 강좌 진행을 위하여 파일이름은 저와 동일하게 하시기 바랍니다.
계속 진행합니다.

27.
그림처럼 버튼을 눌러서 레이어를 한개 더 만든 후 '버튼바탕'으로 이름을 바꿉니다.


아이콘과 메뉴의 기능에 대해서 쪽지로 물어 오신 분이 계셨습니다.
현재 일반적인 설명은 하지 않고 필요할 때마다 아이콘과 메뉴의 기능에 대하여 설명하고 있습니다.
참고 하시기 바랍니다.

이제 부터는 벡터디자인에 관한 부분입니다.
백터이미지란 비트맵이미지와는 달리 정보값만 가지고 있기 때문에 확대해도 형태가 깨지지 않습니다.
참고로 플래시는 벡터드로잉을 할 수 있으며
직관적 인터페이스이므로 익숙해지면 일러스트레이터 보다 더 편하다는 느낌을 가질 수 있습니다.

28.
버튼바탕레이어를 선택합니다.

29.
아래의 그림처럼 사각도형툴을 선택합니다.


30.
선 색상툴을 선택한 후 색상해제에 체크합니다.
체크하지 않으면 도형에 자동으로 테두리가 생깁니다.


31.
사각도형툴로 가로 750픽셀, 세로 25픽셀의 사각형을 만듭니다.
만약 테두리가 생겼으면 테투리를 더블클릭하면 테두리만 선택됩니다.
Delete 키로 지우시면 선만 지워집니다.


32.
새로 만든 버튼바탕을 배경이미지에 맞춰 수평은 위로 정렬 수직은 가운데로 정렬합니다.
25번의 방법처럼 Align툴로 정렬해도 되지만 이번에는 Info툴을 이용하여 정렬하겠습니다.
Info 툴 박스에 아래 그림처럼 입력합니다.


33.
위의 그림에 대한 설명입니다.
Info 옵션에 보면 현재 도큐멘트의 꼭대기와 왼쪽을 기준점으로 잡고 있습니다.
무슨 의미인가 하면 오브젝트들의 좌표를 입력하였을 때,
스테이지의 맨위와 가장 왼쪽을 기준으로 정렬한다는 이야기입니다.
위의 그림처럼 0을 입력하게 되면 새로 만든 사각형의 가로 시작점과 세로 시작점은 0.0이 되어
도큐멘트 스테이지의 왼쪽 끝과 꼭대기가 일치하므로 정확하게 자리잡습니다.
만약 현재의 옵션이 체크 된 상태에서 Info의 옵션란에 2와 2를 입력하면
왼쪽에서 2픽셀 위에서 2픽셀이 옮겨 갑니다.
Align으로 정렬하지 않고 Info를 이용하는 것은
세밀한 좌표가 필요할 때는 Info를 이용해야 하기 때문에 미리 익혀 두기 위해서입니다.
우선 이 정도만 알아 두시면 필요할 때 다시 설명합니다.

34.
정렬이 되었다면 새로 만든 사각도형을 선택한 후 오브젝트 색상툴을 클릭하여
색상 대화상자에서 아래의 그림처럼 #FFFFFF를 입력합니다.


35.
버튼바탕레이어를 잠금니다.

36.
이제 서브버튼 이미지의 바탕을 만듭니다.
레이어를 새로 하나 만든 후 레이어 이름을 '서브바탕'으로 바꿉니다.

37.
29-30번의 방법으로 가로 750픽셀 세로 20픽셀의 사각형을 만듭니다.
보다 쉽게 만들 수 있는 방법도 있지만 지금은 기초가 중요하므로
29-30번의 방법으로 따라 하시기 바랍니다.

38.
새로 만든 서브바탕레이어와 버튼바탕레이어의 순서를 바꿔서 버튼바탕레이어가 위로 가게 합니다.


39.
서버바탕오브젝트를 선택한 후 Info툴에 X에 0을 입력합니다.
Y는 앞에 만든 버튼이미지의 높이가 25이므로 24를 입력합니다.
25를 입력하여도 되지만 서브버튼이 버튼바탕의 아래로 완전히 들어가게 하기 위하여
24로 입력한 것입니다.

40.
두 레이어의 색상이 같기 때문에 아래의 그림처럼 하나로 보일 것입니다.


41.
서브바탕오브젝트를 선택한 상태에서 F8을 누릅니다.
그림처럼 심볼대화상자가 뜨면
Name에 suba를 입력하고 그래픽 심볼에 체크한 후 OK버튼을 누릅니다.


42.
서브바탕이 그래픽 심볼로 지정되어 아래처럼 +표시가 나타났을 것입니다.
모든 심볼은 스테이지에 위치 하였을 때 중앙에 + 표시가 나타납니다.


43.
서브바탕심볼을(이제부터는 서브바탕심볼입니다.)을 선택한 상태에서
왼쪽 하단의 Properties를 클릭합니다.
Properties는 선택된 모든 오브젝트나 심볼의 정보 및 설정값이 들어있는 툴입니다.

44.
Properties에 대한 설명입니다.
이미지가 깨어지므로 클릭하여 새창으로 원본 이미지를 보십시오.


여기서 잠깐..
플래시의 레이어는 포토샾의 레이어처럼 위에 있는 레이어는 밑의 레이어를 가립니다.
따라서 상위레이어인 버튼바탕은 하위레이어인 서브바탕의 위에 있게 됩니다.

45.
서브바탕심볼을 선택한 후 Properties의 Color 박스에서
Alpha를 선택하고 알파값에 45를 입력합니다.
아래의 그림처럼 서브바탕심볼이 투명해졌습니다.


46.
서브바탕레이어를 잠근 후 새 레이어를 생성하고 레이어명을 '테두리'로 바꿔줍니다.

47.
테두리레이어를 선택한 후 가로 750픽셀, 세로 4픽셀의 길다란 사각형을 만듭니다.
방법은 29-30번과 동일합니다.

48.
새로 만든 테두리오브젝트를 선택한 후
오브젝트 색상툴을 클릭하고 색상대화 상자에서 #E8E8E8를 입력합니다.

49.
이제 복사하는 방법을 알아 보겠습니다.
복사의 방법은 크게 세가지가 있습니다.
1) 거의 모든 프로그램에서 사용되는 Ctlr+C로 복사하여 Ctlr+V로 붙여 넣는 방법
2) 레이어에서 키프레임을 선택한 후 오른 쪽 마우스를 열어서
Copy Frame으로 복사한 후 대상 레이어에 Insert KeyFrame으로 붙여 넣는 방법
3) Ctlr키를 누른 상태에서 마우스로 드래그하여 복사하는 방법이 있습니다.

여기서는 세번째 방법으로 테두리 오브젝트를 복사하여 보겠습니다.
다른 방법은 필요할 때 자세히 설명합니다.

50.
테두리오브젝트를 선택한 후 Ctlr키를 누른 상태에서 스테이지의 아래로 이동합니다.
그림처럼 복사가 되었을 것입니다.


51.
Align 툴을 엽니다.
상단의 원본 테두리오브젝트를 선택한 후 Align 옵션에서 그림 51처럼 체크 하여 정렬을 합니다.


52.
하단의 복사된 테두리오브젝트를 선택한 후 Align 옵션에서 스테이지 기준으로
수평-아래로정렬
수직-오른쪽 정렬을 체크하여 정렬합니다.


53.
레이어를 정리합니다.
지나치게 많은 레이어와 키프레임은 속도저하의 원인이 될수 있습니다.
테두리레이어의 오브젝트들을 버튼바탕과 합쳐 보겠습니다.
49번 항목의 2)번 방법으로 합쳐 보겠습니다.

54.
버튼바탕의 레이어 잠금을 해제합니다.

55.
그림처럼 테두리 레이어의 1번 키프레임을 선택합니다.
Ctlr+G 버튼을 눌러서 그룹으로 묶어 줍니다.
그룹으로 된 오브젝트는 벡터오브젝트보다 위에 위치합니다.
Copy Frame을 눌러 복사 합니다.
Cut Frame으로 잘라 내어도 되지만 안전하게 복사를 합니다.


56.
중요한 부분입니다.
잠금을 해제한 버튼바탕레이어의 첫번째 키프레임을 선택한 후
Shift+Ctrl+V 키를 눌러서 붙여 넣습니다.
Ctrl+V키로 붙여 넣으면 원래 있던 좌표가 바뀌지만
Shift+Ctrl+V로 붙여 넣으면 원래의 위치에 정확하게 붙여넣기가 됩니다.
[위치포함 붙여넣기]라고 부릅니다.

57.
테두리레이어의 눈동자를 끕니다.
복사한 테두리오브젝트가 그림처럼 보인다면 제대로 복사된 것입니다.


58.
이제 테두리레이어는 필요 없으므로 지워줍니다.

59.
저장 합니다.


수고하셨습니다.
여기까지 하여 화면 디자인이 끝났습니다.

강좌를 준비하면서 어떤 방법이 가장 효과적일지에 대해서 생각해 보았습니다.
대부분의 책이나 동영상 강좌들은
미리 이미지나 심볼들을 제공한 후 그것들을 활용하여 강좌를 진행합니다.
강좌를 하는 입장에서는 아주 편리합니다.
그러나 수강하는 입장에서는 강좌를 다 끝내고도
나중에 혼자 플래시를 대할 때 심볼이나 벡터이미지를 만들기가 벅찰 수 있습니다.
저도 이미지를 미리 제공하여 드리고 강좌를 하는 방법에 대한 유혹이 컸습니다.
그러나 이내 생각을 바꿨습니다.
비록 없는 시간을 쪼개서 하는 강좌지만 저를 믿고 처음부터 따라 하신 분들이
스스로 플래시를 능동적으로 다룰 수 있는 위치까지 함께 가보자는 쪽으로 방향을 잡았습니다.
이 방법은 강좌를 진행하는 입장도 힘들지만 따라 하는 분들도 다소 부담스러울 수 있습니다.
그러나 하나 하나 직접 만들어 보면서 한단계씩 나아가는 강좌이므로
그 체질의 강건함은 앞에 언급한 방법과 비교할 바가 아니라고 장담합니다.
시작단계에서는 다소 힘드시겠지만 조금만 더 함께 분발 하셨으면 좋겠습니다.

처음에는 플래시가 어렵게 느껴질 수 있겠지만 알고보면 정말 재미있는 프로그램입니다.
기왕 맨땅에 헤딩하기로 하였으니 게기고 버티고 뒹굴어서 멋진 헤딩골을 넣어야 하지 않겠습니까?
최소한 플래시가 너무너무 재미있는 단계까지 함께 가셨으면 합니다.
2강에서 뵙겠습니다.