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

12강입니다.

여기까지 따라 하신 분들은 지금쯤 플래시의 재미에 푸욱 빠지셨을 것으로 믿습니다..
누가 말 붙이면 소리 버럭 지를 정도로 무아지경의 경지에 드셨을 것입니다.
그리고 12강의 내용을 마스터 하셨으면 중급의 실력을 갖추셨습니다.
어떤분이 제가 정의한 그 중급이라는 기준이 타당성 있느냐고 물으시더군요.
타당성 있다고 말씀 드릴 수 있습니다.
제 사무실 홈페이지에 가보신 분들은 무슨 의미인지 아실 거라고 믿으며 진도 이어 갑니다.

12강은 완성된 네비게이션에 생동감을 불어 넣는 텍스트 에니메이션을 구현하여 보겠습니다.
여태껏 배운 기법 외에 마스크라는 낯선 존재와 만나게 되지만 어려울 것 없습니다.
복잡한 액션스크립트를 안쓰면서도 프레임액션만으로
깜짝 놀랄만한 텍스트 에니메이션을 만들어 보겠습니다.
장담합니다만 이 에니메이션을 완성시키고 나면 스스로 축배를 들고 싶은 마음이 생기실 것입니다.

에니메이션에 사용할 문장은 "천리길도 한걸음 부터" 와
"내일의 꿈을 위하여"의 두가지 입니다.


1.
모든 레이어폴더를 닫고 레이어를 잠급니다.
눈동자는 켜놓아도 됩니다.

2.
메인버튼레이어 폴더 위에 새로운 레이어 두개를 만들고 이름을 '글1'과 '글2'로 합니다.

3.
글1레이어에 '천리길도 한걸음 부터'를 입력합니다.
글2레이어에 '내일의 꿈을 위하여'를 입력합니다.
폰트는 굵은돋움체입니다.
해당 폰트가 없을 경우 고딕 등 정자형태 굵은 서체를 선택하면 됩니다.
폰트사이즈는 굵은돋움체 기준으로 24입니다.

4.
폰트색상을 전부 흰색으로 채웁니다.
글2레이어의 눈동자를 끕니다.
글1레이어의 텍스트에서 '한'이라는 글자만 선택합니다.
색상을 노랑으로 채우고 폰트크기를 34로 지정합니다.
그림과 같은 모양이 되어야 합니다.


5.
글1레이어의 눈동자를 끕니다.
글2레이어의 텍스트에서 '꿈'자만 선택한 후
색상을 노랑으로 채우고 폰트 크기를 34로 지정합니다.


6.
글1레이어의 눈동자를 켭니다.
두 텍스트를 전부 선택한 후 Align 툴로 수평과 수직정렬을 합니다.


7.
두 텍스트를 동시에 선택하고 그림처럼 위로 늘여줍니다.
참고로 플래시에서 옆으로 퍼진 한글폰트는 둔탁해보입니다.


8.
선택을 풀지 않은 상태에서 Braek Apartfh 글자를 분해합니다.
단축키는 Ctrl+B입니다.
한번 누르면 글자가 낱말로 분해되고 두번 누르면 완전분해됩니다.
한번만 눌러서 낱말로 분해합니다.
저장합니다.

9.
글2 레이어의 눈동자를 끕니다.
그림처럼 글자의 간격을 수동으로 보기좋게 정렬한 후 그룹으로 묶어 줍니다.


10.
글1레이어의 눈동자를 끄고 글2 레이어의 눈동자를 켭니다.
역시 글자의 간격을 보기 좋게 수동으로 정렬한 후 그룹으로 묶어 줍니다.


11.
글1레이어의 눈동자를 켭니다.
두개의 그룹을 다 선택한 뒤 다시 수직과 수평정렬을 합니다.
수직과 수평정렬이 끝났으면 그룹을 모두 해제합니다.
저장합니다.

12.
글2레이어의 눈동자를 끄고 잠급니다.
글1레이어를 선택하고 F8을 눌러서 '글자'라는 이름을 가진 무비클립으로 만들어 줍니다.

13.
글자무비를 더블클릭하여 편집창으로 갑니다.
이제부터 아무도 가르쳐 주지 않는 기법속으로 들어갑니다.
정말 잘 보셔야 합니다.

14.
편집창에서 1번 키프레임을 선택하고 Copy Frame 합니다.
복사하였으면 레이어의 이름을 '종합'으로 바꾼 뒤에 눈동자를 끄고 잠급니다.


15.
레이어를 추가합니다.
이름은 아직 적어주지 않습니다.
추가된 레이어의 1번프레임에서 오른쪽 마우스를 열고 Paste Frame으로 붙여 넣습니다.


16.
그림처럼 복사가 되었습니다.
유심히 보시면 레이어의 이름까지 복사가 되었음을 알수 있습니다.
즉 위의 방법처럼 Copy Frame 으로 복사하여 Paste Frame으로 붙여 넣게 되면
레이어의 이름까지 복사되는 것을 알수 있습니다.
저장합니다.


17.
이제 플래시의 놀라운 기능 하나를 경험해 봅니다.
윗쪽 레이어를 누릅니다.
스테이지의 오브젝트를 선택한 후 오른쪽 마우스를 열어서
Distribute to Layers를 누릅니다.


18.
타임라인 창을 늘려서 봅니다.
놀라운 변화가 일어났습니다.
분해되어 있던 글자들이 전부 각각의 레이어 이름을 만들어서 들어 갔습니다.
이 기능은 중급이상의 플래셔들도 잘 모르는 사람들이 많습니다.
반드시 기억하셨다가 텍스트 에니메이션을 만들 때 유용하게 쓰시기 바랍니다.


19.
꼭대기의 비어 있는 종합레이어를 지웁니다.
레이어폴더 하나를 만들고 '글무1'로 적습니다. 글자무비1의 준말입니다..
만들어진 폴더에 천~터 까지의 레이어를 순서대로 옮겨 줍니다.
반드시 글자순으로 옮기셔야 합니다.


20.
글무1레이어폴더를 닫습니다.
저장을 합니다.

21.
메인스테이지로 갑니다.
메인스테이지 타임라인의 글1레이어의 눈동자를 끕니다.
글2레이어의 눈동자를 켜고 잠금을 해제합니다.
글2레이어를 선택한 후 오른쪽 마우스를 열어서 Cut Frames로 잘라 냅니다.
글2레이어를 삭제합니다.


22.
글1레이어의 눈동자를 켭니다.
스테이지의 무비클릭을 선택한 상태로
좌측의 툴박스에서 Free Transform Tool을 클릭합니다.
그림처럼 조작 포인트들이 나타났습니다.


23.
그림처럼 수직과 수평의 정중앙 포인트에 가이드라인을 끌어다 놓습니다.

24.
무비클립을 더블클릭하여 편집화면으로 갑니다.
무비클립편집 화면에서도 메인스테이지의 가이드라인이 그대로 보입니다.


***** 여기서 잠깐 *****
메인 스테이지에서 설정한 가이드라인은 심볼속으로 몇 단계를 들어가더라도
계속 나타납니다. 그러나 심볼속의 가이드라인은 메인 스테이지에 나타나지 않습니다.


25.
글무비 폴더의 눈동자를 끕니다.
레이어 하나를 추가한 뒤 오른쪽 마우스를 열어서 Paste Frames로 붙여 넣습니다,
글2라는 레이어까지 복사 되었지만 메인스테이지에서 가져 왔기 때문에
자신의 좌표값을 잃고 다른 위치에 복사 되었습니다.


26.
글2레이어를 선택한 뒤 좌측의 툴박스 중에서 Free Transform Tool을 클릭하여
조작 포인트들이 나타나게 합니다.
키보드를 움직여서 메인스테이지에서 설정한 가이드라인의 중앙에 위치를 잡아 줍니다.


27.
글무비 폴더와 글2레이어의 눈동자를 끄고 잠급니다.
종합레이어를 잠근 상태에서 눈동자만 켭니다.
이제부터 마스크 기능을 배울 것입니다.


**** 여기서 잠깐 ****
마스크란 자신의 영역을 가지고 그 영역만큼만 하부 레이어의 개체를 보여 주는 효과를 말합니다.
쉽게 말해서
마스크가 동그라란 모양이면 하부 레이어의 그림이 어떤 것이든지 간에
그 동그라미 안에 들어온 영역만큼만 보여주는 것입니다.
또한 마스크 자신이 에니메이션을 가질 수 있습니다.
이번 강좌에서는 마스크의 개념과 약간의 응용만 활용할 것입니다.
플래시 에니메이션에서 상당히 중요한 위치에 있으므로 그 개념을 잘 이해 하시기 바랍니다.

28.
레이어 하나를 추가 한뒤 이름을 '종합마스크'로 바꿉니다.
종합레이어의 바로 위에 위치하게 합니다.

29.
종합마스크레이어를 선택한 뒤
그림처럼 글자를 다 덮고도 남을만큼 넉넉하게 테두리 없는 사각형을 그려 줍니다.
색상은 아무거나 써도 전혀 상관 없습니다.


30.
그림처럼 사각형이 글자를 완전히 덮었습니다.


31.
종합마스크의 1번 키프레임에 모션트위닝을 적용합니다.

32.
1번키프레임을 선택한 상태에서 Free Transform Tool을 클릭하여
조작포인트들이 나타나게 합니다.


33.
위의 그림에서 빨갛게 표시된 정중앙의 포인트가 트위닝의 기준점입니다.
마우스로 석택하여 누른 상태에서 오브젝트의 왼쪽 끝 수평중앙으로 옮깁니다.


34.
종합마스크의 40번프레임에 키프레임을 추가합니다.
1번의 시작키프레임을 선택합니다.
그 상태에서 오브젝트의 오른쪽 포인트를 왼쪽으로 움직여서
노란 삼각형이 글자의 왼쪽 바깥까지 완전히 벗어나게 줄여 줍니다.


35.
종합레이어의 프레임을 40으로 늘려주고
종합마스크 레이어에는 20번프레임에 키프레임을 추가합니다.


36.
20번 프레임에서 노란사각형의 오른쪽 끝을 '걸'자와 '음'자의 사이에 오게 늘여 줍니다.
글자와 겹치지 않게 합니다.


37.
30번프레임에 키프레임을 추가합니다.
사각형의 오른쪽 끝을 그림처럼 '도'자와 '한'자의 중간에 오게 줄여 줍니다.


38.
40번프레임을 눌렀을 때는 그림처럼 노란사각형이 글자를 완전히 덮어야 합니다.


39.
종합마스크레이어를 마스크로 만들어 줍니다.
레이어를 선택한 후 오른쪽 마우스를 열어서 Mask를 누르시면 됩니다.


40.
그림처럼 마스크가 적용되었습니다.


41.
글2레이어와 종합마스크레이어, 종합 레이어를 모두 잠그고 눈동자를 끕니다.
글무비폴더를 엽니다.

42.
글무비폴더 속의 모든 프레임을 선택한 후 시작 키프레임을 그림처럼
40번프레임으로 옮겨 줍니다.


43.
아주 중요한 부분입니다. 반드시 그대로 하셔야 합니다.
1) 글무비 폴더 속의 모든 40번 시작키프레임에 모션트위닝을 적용합니다.
2) 모든 46번프레임에 키프레임을 추가합니다.
3) 모든 53번프레임에 키프레임을 추가합니다.
그림과 같은 모양이 되어 있어야 합니다.
매우 중요하므로 다시 한번 확인하시기 바랍니다.


44.
폴더내 모든 레이어의 46번 키프레임을 선택합니다.


45.
선택된 상태에서 왼쪽툴박스의 Free Transform Tool을 클릭합니다.


46.
포인트의 상단에 가이드라인을 끌어다 놓습니다.


47.
쉬프트키를 누른 상태에서 오른쪽 상단 포인트를 오른쪽으로 끌어 당겨서
가이드라인과 텍스트의 흰색글자들의 상단이 맞을 때 까지 늘여 줍니다.


48.
글무비 폴더내 각 레이어의 46번프레임을 선택하여 키보드로
글자들의 배열이 아래의 그림처럼 되도록 조절합니다..
같은 폰트를 쓴다면 크기와 간격을 수치로 말씀드릴 수 있지만
저마다 사용하는 폰트가 다르므로 육안으로 그림과 같은 형태가 나오도록 조절합니다.
그림을 잘 보시면서 간격이 그림과 최대한 비슷하게 조절 합니다.
왼쪽으로 갈수록 조금씩 넓어지고 오른쪽으로 갈수록 좁아집니다.


49.
크기를 조절하셨으면
모든 46번프레임을 선택한 후 스테이지의 아무글자나 선택합니다.
Properties창을 열어서 알파값을 0으로 해줍니다.
저장합니다.

50.
글 무비 폴더내의 모든 프레임을 그림과 같이 옮겨 줍니다.
천레이어에서 부터 내림차순으로 4프레임씩 오른쪽으로 밀린 형태입니다.
일정한 간격을 가진 프레임의 이동에 대해서는 이미 다루어 보셨습니다.
이동이 끝났으면 모든 레이어의 프레임을 85번까지 늘려 줍니다.
저장합니다.


여기서 12강 마무리 하고 13강에서 이어 갑니다.

수고 하셨습니다.