4강입니다.

지난 강좌에서 우리는 기초적인 무비클립을 만들어 보았습니다.
지금부터는 본격적인 무비클립의 세계로 들어 갑니다.

1.
서브버튼레이어의 잠금을 해제합니다.

2.
서브무비레이어의 무비클립을 Ctrl+X로 잘라내어
서브버튼레이어를 선택한 후 Shift+Ctrl+V로 붙여 넣습니다.


********* 여기서 잠깐 *********
이제 충분히 인지하신 단축키에 대해서는 설명을 생략합니다.
잠시 정리하여 봅니다.
복사하기....................Ctrl+C
잘라내기....................Ctrl+X
붙여넣기....................Ctrl+V
위치포함 붙여넣기.......Shift+Ctrl+V
그룹지정....................Ctrl+G
그룹해제....................Shift+Ctrl+G
Import......................Ctrl+R
Align 호출...................Ctrl+K
Info 호출....................Ctrl+I
라이브러리 호출...........Ctrl+l
심볼대화상자 호출........F8
돋보기 축소.................Alt+오브젝트 클릭
다중선택.....................Shift+오브젝트 선택
심볼편집모드...............1) 스테이지에서 더블클릭
.................................2) 라이브러리에서 더블클릭
위의 단축키는 반드시 외우시기 바랍니다.

3.
서브버튼레이어를 클릭하여 모든 오브젝트를 선택합니다.

4.
심볼대화상자를 엽니다.
버튼에 체크하고 심볼명을 's1-1'로 적어준 후 OK합니다.
무비클립심볼을 포함한 버튼심볼 s1-1이 만들어 졌습니다.


5.
버튼심볼을 더블클릭하여 심볼편집화면으로 갑니다.
그림같은 화면이 보일 것입니다.
그림에서 보는 것처럼 버튼심볼에도
메인스테이지나 무비클립처럼 레이어가 있으며 추가할 수도 있습니다.
또한 키프레임이 있어서 각 키프레임 마다
마우스의 동작에 따라 다르게 반응하는 무비클립이나 이미지를 호출할 수 있습니다.

6.
레이어를 하나 추가합니다.
2번레이어를 아래로 내려서 그림과 같은 형태가 되게 합니다.


7.
1번레이어에 들어 있는 십자모양의 무비만 선택합니다.
잘라 내어 2번레이어의 1번프레임에 위치포함 붙여 넣기를 합니다.
그림처럼 정확하게 붙여 넣어야 합니다.
2번레이어를 잠급니다.


8.
1번 레이어의 Over프레임에 키프레임을 추가합니다.
그림에 나와 있는 레이어의 화면에 대한 설명은 반드시 숙지하셔야 합니다.
Hit영역은 마우스를 감지할 수 있는 범위영역을 말합니다.
간혹 플래시 사이트를 방문하다가 보면
글자로만 된 버튼선택이 잘 안되는 경우를 보셨을 것입니다.
글자의 여백을 마우스가 인식하지 못하여 생기는 현상입니다.
그것을 방지하기 위하여 범위를 지정해주는 영역입니다.


9.
1번 레이어의 Over프레임에서 버튼바탕오브젝트를 선택한 후 색상채움 툴을 클릭합니다.
색상대화상자에 #C8FFA4를 입력하고 엔터합니다.

10.
Down프레임을 선택하고 키프레임을 추가합니다.
Hit프레임에 키프레임을 추가합니다.
그림처럼 되었을 것입니다.
Hit키프레임의 초록색 버튼바탕은 마우스 감지 범위가 됩니다. (아주 중요)


11.
2번레이어의 잠금을 해제합니다.

12.
2번레이어의 Up프레임에 있는 십자모양의 무비클립을 Over프레임으로 옮겨 줍니다.
심볼을 선택한 후 마우스를 누른 상태에서 이동하면 됩니다.
그림처럼 되었으면 저장합니다.


13.
이제 다운받은 사운드를 Import 할 순서입니다.
1번레이어의 Over를 선택한 후 Ctrl+R로 Import 대화상자를 불러 옵니다.
대화상자에서 다운받은 사운드 파일 중 S1.mp3을 더블클릭하여 불러 옵니다.

14.
Properties 창을 열고 Sound에서 임포트 된 S1.mp3을 선택합니다.
1번 레이어의 Over프레임에 사운드입력 표시가 보일 것입니다.
마우스가 닿으면 소리가 들린다는 표시입니다.


15.
1번레이어의 Hit프레임을 선택한 후 Import 대화상자를 불러 옵니다.
다운받은 S2.mp3을 더블 클릭하여 불러 옵니다.

16.
Properties 창을 열고 Sound에서 S2.mp3을 선택합니다.
1번레이어의 Hit프레임에 사운드입력 표시가 보일 것입니다.
버튼을 클릭하면 소리가 들린다는 의미입니다.
그림처럼 되었으면 저장합니다.


17.
퍼블리시를 해봅니다.
마우스가 닿기 전에는 버튼에 변화가 없습니다.
마우스가 닿으면 맑은 소리와 함께 십자무비가 깜박거립니다.
버튼을 클릭하면 다른 소리가 들립니다.

18.
서브버튼레이어를 잠급니다.
이제 메인버튼을 완성 시켜 보겠습니다.

19.
조작을 쉽게 하기 위하여
비어 있는 서브타이틀레이어를 메인버튼의 바로 위에 오게 내린 뒤
'메인타이틀'로 이름을 바꿉니다.

20.
메인타이틀레이어를 선택한 후 텍스트 툴을 클릭합니다.
mainbuttn1 이라고 입력합니다.

22.
mainbuttn1 텍스트오브젝트를 선택한 후 Properties 창을 엽니다.
대화상자에서 아래의 그림처럼 설정합니다.


23.
각 메인버튼이미지에 맞게 텍스트오브젝트를 여섯개 복제합니다.
복제하는 방법은 Ctrl키를 누른 상태에서 오브젝트를 이동시키면 됩니다.
복제 방법에 대해서는 이제 설명을 생략하겠습니다.

24.
복제된 텍스트오브젝트마다 텍스트를 mainbuttn2~mainbuttn7로 수정하여 줍니다.


25.
모든 텍스트오브젝트를 선택한 후 Align 창을 불러와서 수평정렬을 합니다.
수평정렬이 끝났으면 모든 오브젝트가 선택된 상태에서
메인버튼이미지 위에 보기 좋게 수평위치를 일괄적으로 잡아 줍니다.
수평위치가 적당하게 되었으면 저장을 합니다.
저장 후 퍼블리시 하여 실제 무비를 보면서 미세조절을 합니다.

26.
수평조절이 되었으면 각 개체를 움직여서 메인버튼 위의 수직 중앙에 오게 수직 조절을 합니다.
퍼블리시하여 실제 무비를 보면서 미세 조절을 합니다.

27.
그림처럼 정렬이 되었습니다.


28.
정렬이 되었으면 저장합니다.
실시간 저장은 아무리 강조해도 부족함이 없을 것입니다.
그리고 작업중에 실수를 했을 경우엔
다른 그래픽 프로그램과 마찬가지로 Ctrl+Z 하시면 Undo 기능이 작동되어
수정이전 모드로 돌아 갑니다.
Undo를 반복하시면 작업단계를 순차적으로 돌려 줍니다.
무비클립 편집모드에서 수정한 작업의 Undo는 그 무비클립 안에서 하고
스테이지의 Undo는 스테이지에서 해야 합니다.

30.
모든 메인타이틀오브젝트를 선택하여 잘라 냅니다.
메인버튼의 잠금을 해제합니다.
메인버튼레이어의 1번키프레임을 선택한 후 위치포함 붙여넣기를 합니다.

31.
마우스 드래그로 메인버튼1과 메인버튼 타이틀1을 같이 선택합니다.


32.
선택된 상태에서 심볼 대화상자를 엽니다.
단축키는 F8입니다.

33.
버튼에 체크하고 심볼명을 'mt1'로 적고 OK합니다.

34.
나머지 메인버튼과 메인타이틀도 31번에서 33번까지의 방법으로
mt2~mt7의 버튼심볼을 만듭니다.
일곱개의 메인버튼심볼이 만들어 졌습니다.
주의하실 점은 숫자가 같게 해주셔야 한다는 점 입니다.
즉..
메인버튼이미지와 main buttn2 메인버튼 타이틀 오브젝트로 만든 메인버튼 심볼의 이름은
mt2가 되어야 한다는 의미입니다.


35.
저장을 합니다.

36.
메인버튼을 예쁘고 멋있게 화장할 차례입니다.
스테이지에서 메인버튼1을 더블 클릭하여 심볼 편집모드로 갑니다.
그림처럼 심볼편집창이 열렸습니다.


37.
Over프레임에 키프레임을 만듭니다.
그림처럼 Up프레임에 있던 오브젝트가 Over프레임에 복사되었습니다.
키프레임을 추가하면
새로 생긴 키프레임은 앞에 있는 키프레임이나 프레임의 오브젝트를 그대로 넘겨 받습니다.
꼭 기억하시길...


38.
아주 중요한 부분입니다.
처음으로 모션트위닝을 만나시게 됩니다.
모션트위닝은 플래시 에니메이션의 가장 핵심입니다.
Over프레임에서 텍스트만 선택합니다.

39.
선택한 상태에서 심볼 대화상자를 엽니다.
단축키는 F8입니다.
무비클립으로 체크하고 심볼명을 'mt11'로 적어준 뒤 Ok합니다.


40.
무비클립mt11로 지정된 텍스트를 더블클릭하여 무비클립 편집모드로 갑니다.
화면에 대해 설명합니다. 잘 보시기 바랍니다.
심볼의 이름이 나와 있는 곳을 보면
자신은 가장 오른쪽에 있고 왼쪽으로 갈수록 자신이 포함된 부모심볼의 이름이 있습니다.
즉..왼쪽으로 갈수록 상위심볼이 되는 것입니다.


41.
이제 본격적인 에니메이션을 해보겠습니다.
레이어의 1번키프레임을 선택한 후 오른쪽 마우스를 열어서 Create Motion Tween을 누릅니다.
여기서부터 에니메이션을 시작한다고 지시하는 기능입니다.


42.
6번 프레임을 선택한 후 오른쪽 마우스를 열어 Insert Keyframes 합니다.


43.
그림과 같이 되었을 것입니다.
연한 보라색 부분은 에니메이션이 실행되는 영역입니다.
앞에서도 설명하였지만 타임라인이 길수록 무비가 느려지고 타임라인이 짧을 수록 빨라집니다.


44.
1번 키프라임을 선택한 상태에서
메뉴-Modify-Transform-Flip Virtical을 눌러서 텍스트를 뒤집어 줍니다.
Flip Virtical은 수직 거울영상이고
Flip Horizontal 수평 거울 영상입니다.
정말 중요한 부분이므로 꼭 외워 두시기 바랍니다.



**** 여기서 잠깐 ****
각 기능과 툴을 불러 오는 방법과 단축키를 설명하면서 나가려니 진도가 더뎌서
두번이상 설명한 부분에 대해서는 설명을 생략하겠습니다.
여기까지 따라 오신 분이라면 이제 초보의 문턱은 넘어 서셨으므로
강좌도 그 수준에 맞게 진행하겠습니다.
44번의 예를 들면,
[메뉴-Modify-Transform-Flip Virtical을 눌러서 텍스트를 뒤집어 줍니다.] 라고 하지 않고
[텍스트를 수직거울영상이 되게 되집습니다]로 설명하겠습니다.
이렇게 해놓고도 마음이 약한 강사는 혹여 거기서 막히는 분이 계실까봐
다시 단축키나 호출방법 주절주절 늘어 놓을게 뻔하지만 사족을 약간씩 줄여 보겠습니다.
물론, 중요하다고 생각되는 부분에서는 충분히 설명하겠습니다.

45.
44번을 적용한 그림입니다.
1번프레임의 글자가 뒤집어져 보여야 제대로 된 것입니다.


46.
그림처럼 마우스로 3번프레임을 선택합니다.


47.
Properties 대화상자를 엽니다.
Tween 옵션에는 Motion을 Ease에는 1을 선택합니다.
Rotate에는 Auto를 선택합니다.
현재창의 나머지 기능에 대해서는 필요할 때 다시 자세하게 설명합니다.


48.
스테이지 상단 왼쪽의 mt1 심볼을 클릭합니다.
그림을 참고 하십시오.


49.
mt1의 편집화면입니다.
47번에서 수정한 텍스트 무비클립이 뒤집어져 있습니다.


50.
1번 프레임에서 오른쪽 마우스를 열어 Copy Frames로 스테이지의 오브젝트들을
복사합니다. 물론 Ctrl+C로 복사하셔도 됩니다.


51.
Down프레임에서 오른쪽 마우스를 열어 Paste Frames을 눌러 줍니다.
Paste Frames은 키프레임 까지 붙여 넣는 명령어 입니다.


52.
51문항의 명령으로 그림처럼 되었습니다.


53.
이번에는 Over프레임을 Copy Frames로 복사하여 Hit 프레임에 Paste Frames으로 붙여 넣습니다.
그림처럼 되었습니다.


54.
Up, Over, Down, Hit 프레임을 차례대로 눌러 봅니다.
Up, Down의 형태가 같고 Over, Hit의 형태가 같으면 제대로 된것 입니다.

55.
Over프레임을 선택한 후 사운드 s1.mp3를 삽입합니다.
Hit프레임을 선택한 후 사운드 s2.mp3를 삽입합니다.
사운드를 삽입하는 대화창은 Properties에 있습니다.

56.
그림처럼 해당 프레임에 사운드 표시가 보입니다.
저장합니다.


57.
퍼블리시하여 무비의 결과를 확인합니다.

58.
마우스가 오버되면 사운드와 함께 텍스트가 회전하고 마우스가 벗어나면 멈춥니다.
그런데 뭔가 좀 어색해 보입니다. 텍스트가 계속 돌아 가므로 산만해 보이기도 합니다.
수정이 필요한 것 같습니다.

59.
다시 mt1 편집화면으로 갑니다.
오버나 히트 프레임에서 텍스트 무비를 더블클릭하여 mt11 무비클립의 편집화면을 엽니다.


60.
이제 정말 중요한 순간입니다.
플래시의 마지막 명령어인 Action과 만나게 됩니다.
어려울건 하나도 없습니다. 따라만 하시면 됩니다.

61.
레이어의 6번프레임을 선택합니다.
프레임 넘버는 그림의 빨갛게 칠한 위치에서 표시됩니다.


62.
6번프레임을 선택한 상태에서 오른쪽 마우스를 연 뒤 Action을 누릅니다.


63.
그림과 같은 화면에서 Stop을 찾아서 더블 클릭합니다.


64.
그림처럼 우측에는 적용된 액션명령어가 보이고
레이어의 6번 키프레임에는 액션이 적용되었다는 표시가 보입니다.
6번의 stop 액션은 여기까지만 진행하고 멈추라는 의미입니다.
액션판넬 상단의 역삼각형 표시를 눌러서 액션판넬을 닫습니다.


65.
마우스가 닿을 때 변화를 더 많이 주기 위하여 폰트의 색상을 변경해보겠습니다.

66.
1번이나 6번키프레임을 더블클릭합니다.
모션트위닝이 적용된 상태에서 키프레임이 아닌 프레임을 더블 클릭하시면
새로운 키프레임이 생기므로 주의 하시기 바랍니다.

67.
그림처럼 트위닝오브젝트 편집화면으로 바뀌었습니다.


68.
위의 트위닝오브젝트 편집화면을 살펴 보겠습니다.
심볼네임이 하나 더 늘었습니다.
다시 말하면 트위닝오브젝트도 심볼의 범주에 들어 간다는 의미입니다.
그리고
뒤집어져 있던 텍스트오브젝트가 모션트위닝을 적용하기 전의 상태가 되어
뒤집어져 있지 않습니다.
정리하자면
[트위닝오브젝트는 모션트위닝 안에 포함 되어서 트위닝 명령어에 따라 동작하면서도
자신의 본래 속성을 잃지 않는다는 의미입니다.]


************ 여기서 잠깐이 아닌...주목하시고 필기하세요..************
위에서 언급한
[트위닝오브젝트는 모션트위닝 안에 포함 되어서 트위닝 명령어에 따라 동작하면서도
자신의 본래 속성을 잃지 않는다] 라는 설명은...
반드시..무슨일이 있어도..
자신의 나이를 까먹는 한이 있더라도 무조건 외우셔야 합니다.

jepae표 플래시의 핵심중에서도 핵심입니다.

이 의미를 기억하시면 상급의 플래셔들도 애를 먹는
[움직이는 에니메이션 버튼에서 글꼴을 칼날처럼 선명하게 처리하는 법]을
너무도 손쉽게 처리할 수 있습니다.
고급강좌에서 이 부분이 나오면 그때 다시 자세히 설명하겠지만
지금은 위의 개념을 꼭 기억하시기 바랍니다.

69.
폰트의 색상 대화상자를 열고
색상값을 #660099로 입력하고 엔터합니다.
색상 변경은 Properties나 왼쪽 툴박스의 색상채움에서 하실 수 있습니다.
이 부분에 대해서는 이제 더이상 설명하지 않습니다.

70.
여기 까지 하셨으면 저장을 합니다.

71.
mt1 심볼 편집모드로 돌아 갑니다.
돌아가는 방법은 심볼명이 나란히 있는 곳에서 mt1을 클릭하시면 됩니다.

72.
Up, Over, Down, Hit 프레임을 차례로 클릭하여 보세요.
두가지 색상과 형태가 차례로 나타날 것입니다.

73.
퍼블리시 하여 무비를 확입합니다.
마우스가 오버되거나 클릭을 할때만 무비클립이 동작합니다.
저장합니다.

4강은 여기까지입니다.
수고 많으셨습니다.