플래시 네비게이션 맨땅에 헤딩하기 -13- 세단계 진화하는 네비게이션(2)

13강입니다.

12강에서 이어지는 내용입니다.
무비의 내용이 복잡해서 설명이 길어지고 있습니다.
프레임무비의 난이도를 1에서 100으로 나누자면 현재의 무비는 약 95정도에 해당하는
상당히 상급의 에니메이션으로 이번 강좌가 끝나면 여러분의 체질은 더욱 강화될 것입니다.

만들고자 하는 형태를 설명드리면
1) '천리길도 한걸음 부터'라는 문장이 탄력적으로 나타납니다.
2) 문장이 한번 물결처럼 굽이치고 나면
3) '내일의 꿈을 위하여' 라는 문장이 오른쪽으로 부터 나타나면서
4) 앞의 문장을 꿰뚫으며 아래 위로 글자를 튕겨 냅니다.
5) '내일의 꿈을 위하여' 라는 문장이 확대 되었다가 사라집니다.
6) 시간차를 두고 위의 액션들이 반복되면서 네비게이션에 생동감을 줍니다.


지금부터는 프레임액션과 타이밍액션, 키프레임액션을 복합적으로 다룹니다.
약간 긴장하시기 바랍니다.

1.
종합레이어의 1번프레임을 Copy Frames로 복사합니다.

2.
글2레이어 위에 레이어를 추가합니다.
Paste Frame으로 새 레이어에 붙여 넣습니다.
레이어 이름을 '상'으로 적어 줍니다.
상 레이어의 키프레임을 글무비 폴더의 마지막 프레임인 85번프레임으로 옯겨 줍니다.
그림과 같은 형태가 되었습니다.


3.
상레이어의 125번 프레임을 선택하고 Insert Frame으로 늘여 줍니다.


4.
글무비 폴더의 레이어들은 이제 더 이상 사용하지 않습니다.
폴더를 닫습니다.

5.
글2레이어의 눈동자를 켜고 잠금을 해제 합니다.
레이어 이름을 '중'으로 바꿉니다.

6.
중 레이어의 키프레임을 상 레이어의 시작 키프레임과 일치하게 85번프레임으로 옮겨 줍니다.


7.
중 레이어의 키프레임에 모션트위닝을 적용합니다.
190번프레임에 키프레임을 추가합니다.
상레이어를 잠급니다.


8.
중레이어를 선택하고 상레이어가 끝나는 125번프레임에 키프레임을 추가합니다.


9.
상 레이어와 글무비 폴더의 눈동자를 끕니다.
중레이어 위에 레이어를 추가하고 레이어 이름을 '중마스크'로 바꿉니다.
85번프레임에 키프레임을 삽입합니다.
저장합니다.


10.
사각도형툴을 선택하고 그림처럼 넓은 범위의 선없는 사각형을 그려 넣습니다.
반드시 실선으로 표시된 크기와 비슷한 사각형을 그려 넣습니다.
글자가 들어 오면서 보이는 영역이므로 글자를 덮을 만큼만의 넓이보다 더 넓게 그려 줍니다.


11.
중마스크레이어를 선택한 후 오른쪽 마우스를 열어서 Mask를 적용합니다.
사각형이 사라져서 글자만 보입니다.

12.
중마스크레이어의 오른쪽 끝에 세로 가이드라인을 끌어다 놓습니다.
중마스크 레이어의 눈동자를 끄고 잠급니다.
이미 그렇게 설정되어 있으면 그대로 둡니다.

13.
중레이어의 시작키프레임인 85번프레임을 누릅니다.
오른쪽에 설정한 가이드라인 바깥으로 키보드를 이용하여 텍스트를 이동합니다.
가이드라인과 텍스트의 왼쪽 긑에 약간의 여유공간이 있게 합니다.


14.
저장하고 무비를 실행하여 봅니다.
내일의 꿈을 위하여 라는 문장이 서서히 나타나서
내일의 꿈을 위하여 라는 문장과 겹쳐집니다.

15.
중레이어를 잠급니다.
상레이어의 눈동자를 켭니다.
지금부터 별도의 언급이 있을 때 까지는 상레이어에 관한 설명입니다.

16.
90번프레임에 키프레임을 추가합니다.


17.
그림처럼 우측으로 2프레임 간격으로 키프레임을 추가합니다.


18.
저장합니다.
상레이어의 잠금을 해제하고 레이어를 선택한 뒤
오른쪽 마우스를 열고 Copy Frame합니다.
상레이어 아래에 새 레이어를 추가하고 이름을 '하'로 합니다.

19.
하레이어를 선택합니다.
오른쪽 마우스를 열고 paste Frame으로 붙여 넣습니다.
그림처럼 되었습니다.
저장합니다.


20.
이제부터는 감각적인 부분입니다.
설명을 잘 보시고 원리를 파악 하시기 바랍니다.
중레이어 상단의 눈금자와 함께 있는 빨간 사각바를 오른쪽으로 움직여 봅니다.
오른쪽으로 움직여 갈수록 내일의 꿈을 위하여 라는 문장이
천리길을 한걸음 부터 라는 문장 쪽으로 접근합니다.
천리길..문장이 닿는 부분의 상,하 레이어에 있는 글자들이 아래 위로 튕겨 나가는 효과를
만들 것입니다.
그러므로 시각적으로 설득력 있는 위치 이동이 중요합니다.

21.
상레이어의 96번프레임을 선택합니다.
중레이어의 글자가 접근하고 있습니다.
여기서 부터 상, 하 레이어에서 변화가 있어야 자연스럽습니다.


22.
그림을 보면서 설명합니다.
상, 하 레이어의 , '부' '터' 라는 글자가 아래 위로 조금씩 벌어지는 듯한 동작이 이루어져야 합니다.
글자의 위치를 이동하실 때 특히 조심하셔야 할 부분입니다.
1) 상레이어의 글자를 먼저 움직입니다.
2) 하레이어의 글자를 움직일 때는 상레이어는 반드시 잠가야 합니다.
3) 레이어를 선택하여 움직이는게 아니라 글자를 선택하여 움직여야 합니다.
4) 각 키프레임마다 글자들의 움직임을 전체적으로 다시 조절하여야 합니다.


저장하고 어떻게 움직임을 주어야 할지
타임라인의 빨간 진행막대를 움직이며 구상하여 보시기 바랍니다.


***** 여기서 잠깐 *****
상, 하 레이어의 키프레임 안에서 모든 글자들의 위치는 자유롭게 이동됩니다.
그러나,
이미 키 프레임이 나누어져 있는 상태이기 때문에
앞의 키프레임에서 글자를 움직였다고 하더라도 바로 뒤의 키프레임에서는
앞의 키프레임에서 조절한 위치가 반영되지 않습니다.
즉, 모든 글자들의 움직임을 처음부터 다시 설정하여야 한다는 의미입니다.
하나의 키프레임에서 글자들의 위치를 변경 한 후
다음 키프레임에서 그 위치를 바탕으로 하여 다시 새로운 변화를 추가하려면 어떻게 해야 할까요?
현재의 키프레임 구조로는 어렵습니다.
상, 하 레이어의 키프레임 구조를 다시 설정할 필요가 있습니다.
여기서 부터는 하나의 키프레임에 변화를 준 뒤
다음 키프레임에서 그 변화를 이어 받아서 다시 변화를 추가하는 방법을 찾아 봅니다.

23.
상, 하 레이어의 98번키프레임에서 125번프레임까지를 선택한 후
Remove 프레임으로 모두 지웁니다.
96번키프레임에는 이미 변화를 주었으므로 남겨 둡니다.


24.
그림처럼 프레임이 지워졌습니다.


25.
이제부터는 변화를 준 뒤 새로운 키프레임을 추가하는 방법을 쓰겠습니다.
[새로 추가한 키프레임은 바로 앞 키프레임의 모든 속성을 상속한다]..
매우 중요한 부분이기에 그 개념을 상기 시키기 위하여
지름길을 두고 둘러서 걸어 보았습니다.

26.
상, 하 레이어의 98번 프레임을 동시에 선택하고 인서트 키프레임 합니다.
앞에서 준 변화가 그대로 이어졌습니다.


27.
새로 만든 키프레임에 새로운 변화를 줍니다.
중레이어의 문장이 다가설수록 튕겨져 나가는 효과를 크게 합니다.
좌측 툴 박스의 Free Transform을 이용하여 리얼한 효과를 줍니다.
이제부터는 그림으로만 설명합니다.
키프레임 번호와 글자들의 모양을 보면서 따라 하시기 바랍니다.
상,하의 글자가 뒤섞이지 않게 잠그면서 변화를 주시기 바랍니다.


28.
100번 키프레임의 변화입니다.


29.
102번 키프레임의 변화입니다.


30.
104번 키프레임의 변화입니다.


31.
106번 키프레임의 변화입니다.


32.
108번 키프레임의 변화입니다.


33.
110번 키프레임의 변화입니다.


34.
112번 키프레임의 변화입니다.


35.
114번 키프레임의 변화입니다.


36.
116번 키프레임의 변화입니다.


37.
118번 키프레임의 변화입니다.


38.
120번 키프레임의 변화입니다.


39.
122번 키프레임의 변화입니다.


40.
124번 키프레임의 변화입니다.


41.
프레임을 125번까지 늘려 줍니다.

42.
튕겨져 나가는 글자가 버튼바탕이나 버튼의 영역을 침범하지 않게 하기 위하여
마스크로 영역을 만들어 줄 것입니다.
상, 하 레이어 속의 글자들은 마스크의 범위 만큼만 보입니다.


43.
상 레이어 위에 레이어를 새로 만든 뒤에 이름을 '상하마스크'로 적어 줍니다.

44.
상하마스크 레이어의 85번에 키프레임을 추가합니다.


45.
마스크영역으로 쓸, 그림과 같은 테두리 없는 사각형을 그립니다.
넓이는 아무리 넓어도 관계없지만
높이는 윗쪽의 버튼바탕과 아래쪽의 테두리 경계선까지 정확하게 그립니다.


46.
상하마스크레이어를 마스크로 만들어 줍니다.
상레이어가 마스크에 포함 되었습니다.
하레이어도 옮겨서 마스크 속으로 넣습니다.
그림과 같이 되었습니다.


이제 거의 마무리가 다 되었습니다.
상, 하 레이어의 글자가 사라지고 난 뒤에
중 레이어의 문장이 또 한번 역동적인 에니메이션을 보인 뒤에 멋있게 사라지게 하고
시간차로 나타나게 설정 한 뒤에 메인 스테이지의 프레임을 조정하는 과정만 남았습니다.

47.
중레이어 하나만 남기고 모든 레이어의 눈동자를 끄고 잠급니다.
중레이어의 125번 키프레임을 선택합니다.
오른쪽 마우스를 열어서 Copy Frame 합니다.

48.
중레이어 바로 위에 레이어를 추가하여 이름을 '중2'로 적어 줍니다.
중2레이어의 135번프레임을 선택하고 키프레임을 추가합니다.
오른쪽 마우스를 열어서 프레임을 Paste Frame으로 붙여 넣습니다.
그림처럼 되었습니다.
같은 문장이 동일한 위치에 잇으므로 화면에서는 하나로 보입니다.


49.
중레이어의 131번프레임을 선택한 후 오른쪽 마우스를 열어서 Cut Frame합니다.
중레이어의 133번프레임을 선택한 후 오른쪽 마우스를 열어서 Cut Frame합니다.
중레이어의 135번프레임에 키프레임을 추가합니다.
그림과 같은 형태가 되었습니다.
문장이 에니메이션을 시각하기 전에 두반 깜박이게 하는 효과입니다.


50.
중레이어와 중2레이어의 150번과 161번프레임에 키프레임을 추가합니다.
그림처럼 되었습니다.


51.
중레이어의 눈동자를 끕니다.
중2레이어의 150번 키프레임을 선택합니다.
왼쪽 툴박스의 Free Transform 툴을 불러옵니다.
쉬프트 키를 누른 상태에서 안쪽으로 당겨 크기를 줄여 줍니다.


52.
중2레이어를 잠급니다.
중레이어의 눈동자를 켜고 150번 키프레임을 선택합니다.
Free Transform 툴로 쉬프트 키를 누른 상태에서 바깥쪽으로 당겨서 정비례로 키워 줍니다.



53.
늘어난 오브젝트에 50의 알파값을 지정합니다.
저장합니다.


54.
중 레이어와 중2레이어의 170, 172번 프레임을 그림처럼 Cut Frame로 잘라 줍니다.
스테이지의 문장이 사라지는 효과를 주기 전에 한번 더 깜박임을 주려는 것입니다.


55.
두 레이어의 176번 프레임에 키프레임을 추가합니다.


56.
중레이어의 종료 키프레임을 200번프레임으로 옮깁니다.
중2레이어의 200번프레임에 키프레임을 추가합니다.
그림처럼 되었습니다.
저장합니다.


57.
중2 레이이어의 종료프레임을 선택하고 Shift키를 누른 상태에서
글자를 그림처럼 화면이 꽉찰만큼 크게 키워줍니다.


58.
그 상태에서 알파값을 0으로 지정합니다.
글자가 사라졌습니다.

59.
중2레이어의 눈동자를 끄고 잠급니다.
중레이어의 종료 키프레임에서
Shift키를 누른 상태로 오브젝트를 극도로 줄여줍니다.



60.
이제 모든 레이어의 프레임을 정리합니다.
상하마스크 레이어의 프레임을 190번 이후부터 전부 선택하여 Remove Frames로 지웁니다.
저장합니다.

61.
이번에는 중마스크 레이어를 선택합니다.
260번 프레임에서 오른쪽 마우스를 열어서 Insert Frame으로 프레임을 늘여 줍니다.
저장합니다.



****** 여기서 잠깐 ******
무비클립은 종료키프레임에 스톱액션이 없으면 끝없이 무한 반복됩니다.
시간차를 설정하여 주지 않으면 에니메이션이 끝나자 마자 다시 시작되기 때문에
조잡하고 산만한 느낌을 줄수 있습니다.
무비클립이 한번 실행되고 난 뒤에 한참 있다가 다시 나타나게 하려면 빈 프레임을 넣어 주거나
화면에 나타나지 않는 레이어의 프레임을 필요한 만큼 늘여 주게 되면
그 레이어의 끝 까지 갔다가 다시 반복 되므로 시간차가 생깁니다.
중마스크 레이어의 프레임을 늘린 이유입니다.

62.
이제 글자무비는 완성되었습니다.
Scne1 버튼을 눌러 메인스테이지로 갑니다.

63.
서브무비 폴더를 엽니다.
최초의 스톱액션이 걸려 있는 프레임을 봅니다.
버튼무비1의 28번 프레임에 스톱이 걸려 있습니다.
즉 무비의 자동 실행이 여기에서 멈추고 명령을 기다린다는 의미입니다.


64.
조금전에 완성한 글자무비가 들어 있는 글1레이어의 시작키프레임을
스톱액션이 걸려 있는 바로 앞의 프레임인 27번프레임으로 옮겨줍니다.
그림처럼 되었습니다.
시작 프레임을 옮겨주는 것은 무비가 시작되자마자 메인버튼 무비와
메인버튼1의 서브무비가 실행될 때 글자무비까지 동시에 실행되면
속도가 떨어질 뿐만 아니라 산만한 느낌을 주기 때문입니다.


65.
글1레이어의 시작키프레임을 누릅니다.
스테이지에 보면 무비클립표시가 보입니다.
마우스로 선택합니다.


66.
선택한 후 알파값을 80%의 알파값을 줍니다.
저장합니다.
알파값을 주는 이유는 무비에서 흰색글씨가 너무 선명하면 투박한 느낌을 주기 때문에
맑고 세련된 느낌을 주기 위해서입니다.

67.
무비를 실행시켜 봅니다..

어떻습니까?
고생하며 여기까지 오신 보람이 느껴지시죠?

13강은 여기까지입니다.
14강에서는 오브젝트과 가이드를 이용한 에니메이션으로
네비게이션에 생동감을 불어 넣는 방법에 대해서 공부합니다.
13강에 비해서는 너무 쉬워서 우스운 표현을 빌어 표현 하자면 누워서 식은 죽먹기 일것 입니다.

수고하셨습니다.