플래시 네비게이션 맨땅에 헤딩하기 -14- 네비게이션에 날개달기..

14강입니다.

이번 강좌에서는 13강에서 완성한 네비게이션에 배경 에니메이션을 만들어 보겠습니다.
글자에니메이션이 반복 실행되기는 하지만 뭔가 좀 미진해 보이므로
시간차를 두지 않고 실행되는 에니메이션을 만들어 넣겠습니다.
14강에서는 아직 만나 보지 못한 모션가이드라는 새로운 녀석과 상견례를 하게 됩니다.
만들 에니메이션의 형태는 꽃 무늬 오브젝트가 가이드를 따라 동적으로 흐르는 무비입니다.
꽃무늬 오브젝트는 직접 만들지 않고 첨부한 파일의 메인스테이지에
제가 다섯개를 만들어 두었습니다.

진도 나가겠습니다.

1.
다운 받은 파일을 열어 보시면 다섯개의 그래픽 심볼이 있습니다.
드래그 하여 전부 선택한 후 복사합니다.

2.
네비게이션의 메인 스테이지로 돌아 옵니다.
글1레이어 위에 레이어를 추가한 후 '꽃'으로 이름을 적습니다.
꽃레이어에 붙여 넣기를 합니다.
복제가 되었으면 꽃.Fla 파일을 닫습니다.

3.
그래픽 심볼들을 전부 선택한 후 '꽃무비'라는 이름의 무비클립을 만들어 줍니다.

4.
꽃무비를 더블클릭하여 무비클립 편집모드로 갑니다.

5.
심볼들을 전부선택한 상태에서 오른쪽 마우스를 열고 Distribute to Layers를 누릅니다.


6.
그림처럼 각각의 레이어가 생성되고 오브젝트가 분배되었습니다.


7.
인식을 편리하게 하기 위하여 심볼의 크기에 맞춰 레이어의 이름을 바꿔줍니다.
제일 작은 심볼이 있는 레이어가 '꽃1'이며 가장 큰 심볼의 레이어는 '꽃5'입니다.
정리가 되었으면 꽃1레이어 부터 내림 차순으로 레이어를 정렬합니다.
비어있는 레이어는 일단 지웁니다.
저장합니다.


8.
이제 모션가이드를 만들겠습니다.
각 레이어마다 하나씩의 가이드를 써도 되고 하나의 가이드에
몇개의 레이어가 가이드 한개를 같이 쓸수도 있습니다.
여기서는 각 레이어마다 한개씩의 모션가이드를 씁니다.

9.
꽃1레이어 위에 레이어를 추가하고 이름을 '1'로 적어 줍니다.
같은 방식으로 각 꽃 레이어 위에 레이어를 추가합니다.
이름은 아래의 꽃 레이어 번호과 같게 합니다.
그림과 같이 되었습니다.


10.
1레이어만 남겨 놓고 모든 레이어어의 눈동자를 끄고 잠급니다.

11.
오른쪽 툴박스에서 Pen Tool을 클릭합니다.


12.
펜툴을 이용하여 그림과 같은 곡선을 그립니다.
곡선의 형태는
오른쪽에서 왼쪽으로 진행되는 형태입니다.
아래에서 완만하게 올라가서 급경사로 내려 왔다가 다시 완만히 올라가는 모양입니다.
곡선의 시작과 끝 지점은 도큐멘트영역보다 여유있게 바깥에 있게 합니다.
곡선을 그렸으면 저장합니다.


13.
곡선이 그려졌으면 복사한 후 1레이어를 잠급니다.
2레이어의 눈동자를 켜고 잠금을 해제합니다.
2레이어에 붙여 넣기를 합니다.
복사가 되었으면 곡선의 색상을 1레이어의 색과 다른 것으로 바꿉니다
그림처럼 되었습니다.


14.
Free Transform 툴로 곡선을 회전시켜서 그림과 같은 모양이 되게 합니다.


15.
위의 방법대로 하여 그림처럼 모양이 다른 다섯개의 가이드라인을
각각 해당 레이어에서 그려줍니다.


16.
1~5 레이어의 잠금을 해제하고 민들어진 가이드라인의 시작과 끝점이 전부 같게 잘라줍니다.


17.
레이어1을 누른 상태에서 Free Transform을 클릭합니다.
포인트가 나오면 정중앙의 포인트에 세로 가이드라인을 끌어다 놓습니다.


18.
중앙 가이드라인을 기준으로 하여 양쪽에 같은 간격의 가이드라인을 가져다 놓습니다.


19.
1레이어와 꽃1레이어만 남기고 모든 레이어의 눈동자를 끄고 잠급니다.
꽃1의 심볼을 모션가이드라인의 오른쪽 끝으로 옮깁니다.


20.
1레이어를 선택한 상태에서 레어어 생성버튼과 레이어폴도 생성사이에 있는
모션가이드생성버튼(Add Motion Guide)을 누릅니다.
그림처럼 레이어1 위에 모션가이드 레이어가 생겼습니다.


21.
1레이어를 클릭하고 오른쪽 마우스를 열어서 Cut Frames로 잘라 냅니다.
가이드1레이어를 선택하고 Pasre Frames로 붙여 넣습니다.
비어있는 1레이어를 지웁니다.
꽃1레이어를 Guide레이어에 가져다 넣습니다.
그림처럼 되었습니다.


22.
같은 방법으로 Guide2~5를 생성하고 2~5레이어의 곡선들을 잘라내서 붙여 넣은 뒤
꽃2~5 레이어를 해당 가이드 레이어 안에 넣어 줍니다.
그림처럼 되었습니다.


23.
모든 레이어의 눈동자를 켜고 잠금을 해제합니다.
레이어를 클릭하면 해당레이어의 심볼이나 곡선이 표시가 됩니다.
레이어를 클릭해가면서 각 심볼을 해당 모션가이드의 오른쪽 끝으로 정렬합니다.
곡선과 오브젝트가 많아서 헷갈릴 수 있지만 레이어를 클릭하면서 정리합니다.
그림처럼 되었습니다.


24.
Ctrl키를 누른 상태에서 마우스로 레이어를 선택하면 인접하지 않은 레이어도
다중선택할 수 있습니다.
모든 꽃레이어의 1번 키프레임을 선택합니다.


25.
선택이 되었으면 모션트위닝을 적용합니다.
모션 트위닝이 적용되었으면 모든 심볼의 위치를
해당 모션가이드 오른쪽 시작점에 정확하게 위치시킵니다.


**** 여기서 잠깐 ****
만약 심볼을 아무리 움직여도 가이드모션의 시작점과 정확하게 일치하지 않으면
심볼을 선택한 상태에서 Free Transform을 눌러 봅니다.
중심포인트가 중앙에서 벗어나 있을 것입니다.
중심포인트를 중앙으로 이동시킨 후에 다시 심볼의 위치를 다시 조절하면 정확하게
시작점에 달라 붙는 느낌으로 정렬됩니다.


26.
위치가 정렬이 되었으면 저장합니다.

27.
꽃1레이어만 남기고 모든 레이어를 잠급니다.
가이드1의 프레임을 160까지 늘려 줍니다.
꽃1레이어의 40번프레임에 키프레임을 추가합니다.
심볼을 첫번째 세로가이드라인과 모션가이드곡선이 만나는 곳으로 옮깁니다.
그림처럼 되었습니다.


28.
꽃1레이어의 1번프레임과 40번프레에임의 중간지점을 마우스로 선택합니다.
Properties 창을 열고 Rotate를 Cw로 선택합니다.
다른 것은 만지실 필요없습니다.



*****여기서 잠깐 *****
Rotate는 모션트윈의 회전형태를 결정합니다.
가이드라인의 곡선을 따라 움직이는 심볼은 키프레임이 추가될 때 마다 회전형태를 설정해줍니다.
그 설정은 원래있던 키프레임과 생성된 키프레임 사이의 아무 프레임에서나 설정할 수 있습니다.
그리고,
한 레이어에서 이뤄지는 회전은 끝까지 같은 형태를 유지하는 것이 어색하지 않고 안정감 있습니다.

29.
80번프레임에 키프레임을 추가하고 심볼을
두번째의 세로 가이드라인과 곡선이 만나는 곳으로 이동시킵니다.
Properties 창에서 Rotate를 Cw로 선택합니다.

30.
120번프레임에 키프레임을 추가하고 심볼을
세번째의 세로 가이드라인과 곡선이 만나는 곳으로 이동시킵니다.
Properties 창에서 Rotate를 Cw로 선택합니다.

31.
160번프레임에 키프레임을 추가하고 심볼을 모션가이드라인의 왼쪽끝으로 이동시킵니다.
Properties 창에서 Rotate를 Cw로 선택합니다.
저장하고 무비를 확인합니다.

32.
가이드1레이어와 꽃1레이어의 눈을 끄고 잠급니다.
가이드2와 꽃2레이어를 활성화 시킵니다.
가이드2의 프레임을 160번프레임까지 늘려 주고 잠급니다.
꽃2레이어의 40번프레임에 키프레임을 추가하고 심볼을
첫번째의 세로 가이드라인과 곡선이 만나는 곳으로 이동시킵니다.
Properties 창에서 Rotate를 Cw로 선택합니다.

33.
꽃2레이어의 80번프레임에 키프레임을 추가하고 심볼을
두번째의세로 가이드라인과 곡선이 만나는 곳으로 이동시킵니다.
Properties 창에서 Rotate를 Cw로 선택합니다.

34.
꽃2레이어의 120번프레임에 키프레임을 추가하고 심볼을
세번째의 세로 가이드라인과 곡선이 만나는 곳으로 이동시킵니다.
Properties 창에서 Rotate를 Cw로 선택합니다.

35.
꽃2레이어의 160번프레임에 키프레임을 추가하고
심볼을 모션가이드라인의 왼쪽끝으로 이동시킵니다.
Properties 창에서 Rotate를 Cw로 선택합니다.
저장하고 무비를 확인합니다.

36.
위와 같은 방법으로
가이드3~5의 프레임을 160프레임까지 늘려 줍니다.
꽃3~5 레이어에 40프레임의 간격으로 키프레임을 추가하고 심볼을 이동시킵니다.
키프레임마다 Properties 창에서 Rotate를 Cw로 선택합니다.

37.
각 레이어의 키프레임과 심볼의 이동이 다 되었으면 저장합니다.
무비를 실해하여 봅니다.
오브젝트들이 한번에 이동하므로 별 재미가 없습니다.
이제 프레임에 변화를 주어서 자연스럽게 해보겠습니다.

38.
가이드1과 꽃1레이어를 다중선택하고 시작키프레임을 30프레임으로 이동시킵니다.
가이드2와 꽃2레이어를 다중선택하고 시작키프레임을 10프레임으로 이동시킵니다.
가이드3과 꽃3레이어를 다중선택하고 시작키프레임을 50프레임으로 이동시킵니다.
가이드4와 꽃4레이어를 다중선택하고 시작키프레임을 90프레임으로 이동시킵니다.
가이드5와 꽃1레이어를 다중선택하고 시작키프레임을 120프레임으로 이동시킵니다.
저장한 후 무비를 실행시킵니다.


**** 여기서 잠시 ****
다중 가이드모션과 여러개의 심볼이 동시에 움직이는 효과를 줄때는
적절한 프레임조절과 포인트가 매우 중요합니다.
한지점에서 심볼들이 겹쳐지는 장면이 많이 나오면 산만하게 보일 수 있으므로
가이드모션으로 사용할 곡선을 그릴 때에도 세심한 주의가 필요합니다.
지금 만든 에니메이션의 경우 키프레임간의 간격조절과 프레임의 변화 등을
무비로 테스트하면서 더 많이 적용하면 전혀 다른 느낌의 효과를 줄수도 있습니다.


39.
가이드모션 효과의 제작은 끝났으므로 메인 스테이지로 갑니다.

40.
꽃레이어를 누르면 무비클립 표시가 나타납니다.


41.
Properties 창을 열고 스테이지의 무비클립표시를 클릭합니다.
Properties 창에서 Color옵션 창이 나오면 알파를 선택하고 50을 입력합니다.

42.
꽃 레이어를 서브바탕레이어의 바로 아래에 오게 내립니다.
저장하고 무비를 테스트 합니다.


여기까지 14강이 마무리 되었습니다.
이제 마지막 강좌인 15강만 남았습니다.
15강에서는 지금까지 만든 네비게이션에 사운드컨트롤러를 넣는 방법을 공부하겠습니다.

수고하셨습니다.