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

3강입니다.

잠시 플래시에서 벡터이미지로 디자인 할 때의 색상 처리에 대해서 말씀 드립니다.
플래시로 된 사이트의 대부분이
테두리나 버튼바탕을 거의가 흰색이나 연한 회색으로 처리한 것을 보셨을 것입니다.
회색은 자신의 고유색이 없기 때문에 어떤색과 함께 있어도 잘 어울립니다.
특히, 강한 보색사이에 회색 테두리를 넣으면
화면전체를 눈에 거슬리지 않게 하는 시각적인 중화작용을 합니다.
또한 연한 회색자체가 RGB 모드의 모니터에서는 상당히 고급스럽고 품격있는 느낌을 주기도 합니다.
웹디자인을 할 때 너무 강한 색을 써서 전체 화면이 거슬려 보일 때는
회색을 적극 활용하면 부드러운 느낌의 화면구성을 할 수 있습니다.
참고 하시기 바랍니다.

3강 이어집니다.

2강에서 우리는 여태까지 작업한 내용을 퍼블리시하여 플래시 무비로 보았습니다.
스테이지에 있을 때와 실행파일로 보았을 때의 느낌이 다를 수도 잇을 것입니다.
2강 마지막 부분에서 다루었던 메인버튼의 위치를 실행파일 상에서 확인해가면서
보기 좋게 위치 시키셨다는 가정 하에 진도를 이어 가겠습니다.

1.
각진 메인버튼 사이의 공간이 날카롭게 보여서 시각적적으로 거슬립니다.
그 공간에 예쁜 모양의 오브젝트를 만들어 넣을 것입니다.
메인버튼레이어를 잠근 후 새로운 레이어를 생성하고 이름을 '세로바'로 바꿉니다.

2.
세로바 레이어에 그림과 같은 오브젝트를 만들 것입니다.
만들어진 오브젝트는 각 메인버튼 사이에 위치하게 됩니다.
단순한 공간을 채우는 역할에 그치지 않고
마우스가 닿아서 메인버튼이 동작을 할 때 재미있는 역할을 하게 됩니다.

3.
좌측의 Tool Box에서 Line Tool을 선택합니다.


4.
Info 창을 활성화 시킵니다.
Line Tool을 선택한 상태에서 쉬프트 키를 누르고 아래로 드래그 하여
9픽셀 정도의 수직라인을 그린 후 Info 창의 대화상자에서 H=9를 입력합니다.


5.
새로 만든 수직라인을 선택하고 컨트롤 키를 누른 상태에서 오른쪽으로 드래그 하여 복제합니다.
(간격이 좁아서 오브젝트끼리 붙어 버리지 않게 공간을 여유있게 조절 합니다.
벡터오브젝트는 같은 레이어 안에서 겹칠 경우 겹친 부분이 잘려 집니다.)
복제된 수직라인의 높이를 Info 창을 이용하여 5.7로 지정합니다.


6.
5번에서 복제하여 높이를 지정한 오른쪽 수직라인을 선택한 후
쉬프트 키를 누른 상테에서 왼쪽으로 이동하여 복제합니다.
그림과 같이 되었을 것입니다.


7.
하단의 Properties 창을 엽니다.
세로바레이어를 클릭하거나 수직라인 모두를 드래그 하여 선택합니다.
Properties 창의 라인 대화상자에서 선의 두께를 2로 지정합니다.
그림처럼 선이 굵어 졌습니다.


8.
가운데 오브젝트를 선택합니다.
선색상 버튼을 누른 후 대화상자가 나오면 색상값에 #660000을 입력한 후 엔터를 칩니다.
그림처럼 가운데 오브젝트의 색상이 바뀌었습니다.
색상표에서 직접 색상을 클릭하여 선택할 수도 있지만 지금은 색상값으로 따라 하시기 바랍니다.


9.
쉬프트 키를 누른 상태에서 왼쪽과 오른쪽의 오브젝트를 클릭하여 선택합니다.
선택이 되었으면 색상대화창을 열어서 색상값에 #6666FF를 입력한 후 엔터를 칩니다.


10.
Align(Ctrl+K)의 간격과 수직중앙 정렬을 이용하여
그림처럼 메인버튼과의 간격과 오브젝트간의 간격을 조절합니다.


11.
세로바레이어를 클릭하여 세개의 오브젝트가 선택된 상태에서 F8을 눌러서 심볼 대화상자를 엽니다.

12.
그래픽에 체크를 하고 심볼명을 sero로 입력한 후 확인을 누릅니다.


13.
심볼을 선택한 후 Properties 대화상자를 엽니다.
Color 옵션에서 Brightness를 선택하고 50을 입력합니다.
색상이 밝아지고 약해져서 부드러운 느낌으로 변했습니다.


14.
심볼을 선택한 후 F8을 눌러서 심볼 대화상자를 엽니다.
그래픽에 체크를 하고 심볼명을 'sero2'로 입력한 후 확인을 누릅니다.
이제 스테이지의 심볼은 sero2로 바뀌었습니다.
sero2는 sero그래픽 심볼을 포함하고 있습니다.

15.
Ctrl+L을 눌러서 라이브러리 창을 엽니다.
sero2 그래픽 심볼을 찾아 선택한 후 스테이지로 7개를 꺼내어 그림처럼 위치시킵니다.


16.
Ctrl+K로 Align 창을 엽니다.
세로바 레이어를 클릭하여 레이어 내의 모든 심볼을 선택한 후 수평정렬을 합니다.

17.
각 심볼을 좌우로 움직여서 메인버튼과의 사이에 보기 좋게 위치하게 합니다.
돋보기 툴을 이용하여 확대해서 보시면 미세조정을 할수 있습니다.
그림처럼 보기좋게 정렬을 합니다.


18.
정렬이 끝났으면 파일을 저장합니다.

19.
메뉴에서 File-Publish Preview-Flash로 퍼블리시 합니다.


20.
무비를 보면서 위치가 거슬리는 부분을 체크한 후
다시 작업창으로 돌아와서 미세조절로 위치를 잡아 줍니다.
반복하여 위치를 수정한 후 세로바레이어를 잠급니다.
저장합니다.

21.
이제 서브버튼을 만들어 보겠습니다.
나중에 버튼을 추가하는 방법은 쉬우므로 메인버튼 마다 다섯개 씩의 서브버튼만 만들어 보겠습니다.
아직 글꼴을 다운 받지 않으신 분들은 다운 받으시기 바랍니다.
그 글꼴로 메인과 서브의 버튼을 만듭니다.

22.
레이어를 추가하고 '서브버튼'으로 이름을 변경합니다.

23.
사각도형툴을 클릭하여 색상을 흰색으로 지정합니다.
테두리를 해제합니다.
왼쪽 툴바에서 Round Rectangle Radius 아이콘을 클릭한 후
Coner Radius 값을 10으로 입력한 후 Ok를 누릅니다.
Round Rectangle Radius는 사각도형의 모서리를 둥글게 하는 툴로써
사각도형을 클릭하였을 때만 나타납니다.
그림의 순서를 참조하세요.(이미지가 커서 깨어지므로 클릭하여 새창으로 보세요.)


24.
위의 그림처럼 설정이 되었으면 사각도형을 그려줍니다.
Ctrl+I를 눌러서 info 창을 불러 옵니다.
Info의 정보값을 보면서 가로62, 세로12의 모서리가 둥근 사각형을 그립니다.
그림과 같은 오브젝트가 만들어졌으면 레이어를 잠급니다.


25.
레이어를 하나 더 만든 후 이름을 '서브타이틀'로 바꿉니다.
텍스트 툴로 subbuttn1을 입력합니다.
글꼴은 다운받은 Zrnic폰트입니다.

26.
subbuttn1 텍스트오브젝트를 선택한 상태에서 Properties 창을 엽니다.
폰트정보 값을 그림과 같이 설정합니다.
1) Static Text를 선택합니다.
2) 글꼴을 Zrnic으로 지정합니다.(다운받은 폰트입니다.)
3) 자간을 0.5로 지정합니다.
4) 폰트 사이즈를 13으로 지정합니다.


27.
폰트의 색상을 지정합니다.
100% 블랙은 멍청해 보일 수 있으므로 Properties 폰트색상 대화상자에서
짙은 회색인 #666666값을 입력합니다.
왼쪽 툴박스의 오브젝트 색상에서도 폰트 색상을 변경할 수 있습니다.

28.
잠겨있는 서브버튼 오브젝트 위로 텍스트 오브젝트를 올려 놓은 후 위치를 보기 좋게 정렬합니다.
Align 기능으로는 제대로 정렬이 안되므로 육안으로 정렬합니다.

29.
정렬이 되었으면 저장합니다.
퍼블리시 하여 무비를 보면서 확인한 후 위치를 미세조절 합니다.
정렬이 끝났으면 다시 저장합니다.

30.
서브버튼레이어의 잠금을 해제합니다.
서브타이틀의 텍스트 오브젝트를 선택한 후 Ctrl+X로 잘라 냅니다.
서브버튼 레이어를 선택한 후 위치포함 붙여넣기로(Shift+Ctrl+V) 붙여 넣습니다.
오브젝트가 합쳐졌습니다. 서브버튼레이어를 잠급니다.

31.
비어있는 서브타이틀레이어의 이름을 '서브무비'로 바꿉니다.

32.
서브버튼에 마우스가 닿았을 때 보여줄 무비를 만들어 보겠습니다.

*** 여기서 잠깐 ***
진도 나가기에 앞서 첨부된 사운드 파일을 다운 받으세요.
압축된 파일을 푸시면 버튼용 사운드 파일 두개가 있습니다.
s1은 마우스가 닿았을 때의 효과음이고 s2는 클릭할 때의 효과음입니다.
비록 버튼용 사운드지만 제가 직접 만든 것으로 저작권은 제게 있습니다.
누가 저작권 운운하면서 시비를 걸면 제게 데려 오십시오.

33.
마우스가 서브버튼에 Over(닿았을 때) 되었을 때 반응하는 무비를 만들어 보겠습니다.
돋보기 툴로 스테이지의 서브버튼을 확대합니다.
서브무비레이어를 선택합니다.

34.
사각도형툴을 클릭하여 색상을 흰색으로 지정합니다.
테두리를 해제합니다.
왼쪽 툴바에서 Round Rectangle Radius 아이콘을 클릭한 후
Coner Radius 값에 0을 입력한 후 Ok를 누릅니다.

35.
W=1.5, H=6.0인 흰색사각 오브젝트를 만듭니다.
만들었으면 Ctrl+G로 그룹을 만듭니다.


***** 여기서 잠깐*****
같은 레이어 안의 벡터오브젝트 끼리 겹쳐지면 겹친 부분이 지워 진다고
앞에서 말씀드린 바가 있습니다.
같은 레이어 안의 벡터오브젝트들을 정렬할 때는
그룹으로 묶어준 후 정렬하게 되면 겹쳐져도 지어지지 않습니다.
정렬이 끝난 후에 Shift+Ctrl+G로 그룹을 해제하면 됩니다.
자주 쓰는 기능이므로 꼭 기억하여 두시기 바랍니다.

36.
그룹화된 오브젝트를 Ctrl키를 누른 상태에서 옆으로 드래그 하여 복제합니다.

37.
Ctrl+K로 Align 창을 엽니다.
복제된 오브젝트를 선택한 후 쉬프키를 누른 상태에서
형태변경 툴(Free Transform Tool)로 그림처럼 회전을 시킵니다.


38.
두개의 오브젝트를 선택한 상태에서 Align 창의 수평가운데 정렬과 수직가운데 정렬을 클릭하여
십자모양으로 정렬되게 합니다.
정렬이 되었으면 다시 Ctrl+G로 그룹화 합니다.


39.
십자모양의 오브젝트 하나를 더 복제하여 서브버튼의 좌우에 배치합니다.
Align 툴로 수평을 맞춥니다.
그림처럼 보기 좋게 정렬합니다.
정렬한 후 저장을 합니다.

40.
퍼블리시하여 무비를 보면서 실제로 보여지는 상태를 본 후 다시 미세 조절합니다.

41.
두개의 오브젝트를 선택한 후 Shift+Ctrl+G로 그룹을 해제합니다.
몇번을 그룹화 하였기 때문에 그림처럼 벡터이미지로 보일 때 까지(망점으로)
Shift+Ctrl+G를 반복합니다.
저장합니다.


42.
다시 레이어 내의 모든 오브젝트를 선택합니다.


**** 여기서 잠깐 ****
이제부터 무비클립을 다루므로 강좌의 내용이 한단계 높아집니다.
지금부터는 실제로 동작하는 에니메이션에 들어가게 됩니다.
오브젝트를 움직이게 하는 방법은 다양합니다.
어떤 기능이 어떻게 작동하는지 잘 기억하시기 바랍니다.

43.
선택한 상태로 F8을 눌러서 심볼대화상자를 엽니다.
무비클립에 체크한 후 심볼명을 'sumv'로 적고 OK를 누릅니다.
무비클립이 만들어졌습니다.
무비클립이란 전체 무비 안에서 자체의 에니메이션을 시행하는 심볼을 말합니다.


44.
무비클립을 더블클릭 하여 무비클립 편집모드로 들어갑니다.


**** 여기서 잠깐 ****
무비클립이나 심볼의 편집모드에 대해서 설명하겠습니다.
해당 심볼이 스테이지에 있을 때는
스테이지 안에서 더블클릭을 하여 편집모드로 가거나
라이브러리 안의 해당 심볼을 더블 클릭하여 편집할 수 있고

심볼이 스테이지 안에 없고 라이브러 안에만 있을 때는
라이브러리 안에서 더블클릭으로 편집합니다.

그리고, 복잡하게 움직임이 많은 무비클립은 다른 무비클립을 포함하고 있고
그 무비클립 안에서 다시 무비클립을 포함하고 있기도 합니다.
플래시를 잘 한다는 것은 곧 무비클립을 잘 만든다는 것과 같은 의미로 여길만큼
무비클립은 플래시에서 비중이 큽니다.

45.
무비클립 편집 화면입니다.
배경이미지가 흐리게 보입니다.
심볼의 편집모드에서는 해당 심볼에 포함된 오브젝트 외는 흐리게 보입니다.
자신을 편집하면서도 자신이 들어갈 위치를 조절하기 쉽게 해주는 편의기능입니다.


**** 여기서 잠깐 ****
위의 화면처럼 무비클립 속에도 레이어와 타임라인 및 키프레임이 있습니다.
무비클립 내에서 다시 레이어를 추가하고 오브젝트를 새로 만들 수 있을 뿐만 아니라
새로운 무비클립을 다시 만들수도 있습니다.
무비클립에 대한 중요성은 아무리 강조해도 지나침이 없으므로
개념을 잘 파악하셨으면 합니다.

그리고 같은 무비클립이라도
움직임이 복잡하고 정밀한 무비클립이라면
밑그림은 항상 스테이지에서 먼저 만든 후 무비클립심볼로 해주는게 좋습니다.
동적인 변화가 심할 경우엔 스테이지 안에서 위치를 잡아주기 어렵기 때문입니다.
이 부분은 차후 필요할 때 다시 자세히 설명하겠지만
지금부터의 강좌 내용 중에 키프레임과 프레임에 대해서는
정확하게 알고 넘어 가셔야 합니다.

46.
1번레이어의 타임라인을 봅니다.
현재 1번 키프레임만 있습니다.
키프레임이란 타임라인의 프레임 중에서
현재 보고 있는 1번 키프레임처럼 까만 점 표시가 되어 있는 프레임을 말합니다.
키프레임은 모든 액션과 트위닝의 시작과 끝이 되는 프레임입니다.

47.
그림처럼 3번프레임에 키프레임 하나를 더 만듭니다.
키프레임을 만드는 방법은 해당 프레임을 마우스로 선택한 후
오른쪽 마우스를 열어서 Insert Keyframe을 클릭하시면 됩니다.


48.
5번프레임을 클릭한 후 오른쪽 마우를 열어서 Insert Frame을 눌러 (Insert Keyframe이 아닙니다.)
프레임을 늘여 줍니다.

49.
3번프레임과 4번프레임을 선택한 후
오른쪽 마우스를 열어서 Cut Frames로 프레임을 잘라내어 빈 프레임을 만듭니다.


50.
8번프레임를 선택하고 오른쪽 마우스를 열어서 Insert Blank Keyframe을 누릅니다.


51.
그림과 같은 모양이 되었습니다.


52.
Ctrl키를 누른 상태에서 마우스를 프레임에 가져가면 프레임을 조절할 수 있습니다.
7번프레임을 6번으로 옮겨서 그림과 같은 형태를 만듭니다.



53.
파일을 저장합니다.
퍼블리시하여 실제의 무비가 어떻게 동작하는지 봅니다.
깜빡임이 느려서 생동감이 덜합니다.
여태껏 배운 방법으로 프레임 형태를 그림처럼 만듭니다.



****. 여기서 잠깐 ****
한번에 키프레임을 지정하여 드리지 않고 이리저리 옮겨 보게 한것은
프레임과 키프레임을 능숙하게 다룰수 있게 해드리기 위해서입니다.
프레임과 키프레임은 플래시의 에니메이션을 제어할 뿐만 아니라
속도와도 밀접한 관계가 있습니다.
즉..
무비의 전체속도를 같은 20으로 설정하여 놓아도 트위닝이 주어진 키프레임과 키프레임의
간격이 넓으면 속도가 느리게 되고 간격이 좁으면 속도가 빨라집니다.
또한,
[모든 오브젝트는 자신의 해당 프레임 안에서만 보여지게 됩니다]
아주 정말 아주 중요한 이야기입니다.
특히
액션스크립트를 거의 쓰지 않고도 고급네비게이션을 만들고자 하는 제 강좌의 핵심어입니다.

54.
프레임의 형태를 53번의 그림처럼 만드는 방법입니다.
2번에서 8번까지의 프레임을 선택한 후 오른쪽 마우스를 열어서
Remove Frames를 눌러서 지워 줍니다.
4번프레임을 선택하고 오른쪽 마우스를 연뒤 Insert Frame으로 프레임을 4번까지 늘려줍니다.
2번프레임을 선택한 뒤 Cut Frames으로 잘라 줍니다.
4번프레임을 Cut Frames으로 잘라 줍니다.
53번의 그림처럼 되었습니다.




**** 여기서 다시 ****
꼭 알아 두셔야 할 사항입니다.
1) 무비의 동작범위는 어떤 형태로든 작업자가 명령을 준 프레임까지 입니다.
2) 위의 명령을 준 이라는 의미는 프레임에 오브젝트가 있거나 액션이 걸려 있거나
어떤 형태로든 작업자의 의도가 담긴 프레임이라는 의미입니다.
물론 빈 Cut Frams로 잘라내어 속이 빈 원만 남아 있는 프레임도 거기에 포함됩니다.
3) 작업자가 명령을 준 프레임까지 진행되고 나면 무비는 처음부터 다시 진행합니다.
4) 지금 만든 무비는 그 반복진행의 원리를 이용한 것입니다.

진행을 멈추게 하는 스톱액션은 차후에 다시 설명합니다.


55.
저장을 한 후 퍼블리시 하여 무비의 동작을 확인합니다.
깜빡임이 빨라져서 생동감이 느껴집니다.
현재는 계속 깜박거리지만 버튼심볼에 넣고 설정을 해주면
마우스가 Over 될 때만 나타나서 작동하게 됩니다.


3강은 여기까지입니다.
4강부터는 본격적인 무비클립의 영역으로 들어갑니다.

수고들 하셨습니다.