Flash 4 를 이용한 홈페이지 만들기

8. Flash 4 중급 애니메이션 만들기(2)

1) 경로 애니메이션 만들기 2) 무비클립을 이용한 애니메이션 3) 쉐이프 트위닝 애니메이션 4) 360도 회전 애니메이션 5) 프레임 액션 제어하기 6) 사운드 삽입하기

임시 경로를 지정해 주고 그 경로에 따라 심볼이 움직이는 애니메이션을 만들어 보자.

① 배경색과 화면 크기 설정하기 : 메뉴에서 File ->New, Modify -> Movie에서 원하는 배경색과 화면 크기를 설정한다.(예를 들어 Background:검정색, Width:550px, Height:400px)

② 심볼 만들기 : 간단하게 사각형이나 원형의 모양을 적당한 크기로 만들어 보자. 그런 다음 메뉴에서 Insert -> Convert to symbol을 선택하면 Symbol Properties 화면에서 "Name=원" "Behavior=Graphic"으로 선택한다. 심벌의 이름과 모양을 보고 싶으면 메뉴에서 Window -> Library를 선택하면 된다. 레이어의 이름도 Layer1이라고 써진 곳을 더블 클릭하여 이름을 바꿔준다.(예를 들어 '원')레이어의 이름을 지정하지 않을 경우에 레이어가 많으면 어느 것이 해당 레이어인지 잘 모를 때가 있기 때문이다.

③ 가이드 레이어 추가하기 : 레이어 창에서 Add guide layer 아이콘을 클릭하면 아래 그림과 같이 '원' 레이어 위에 'Guide:원' 이라는 레이어가 생기면 앞에 곡선모양이 생길 것이다.

④ 경로 그리기 : 'Guide:원' 레이어에서 연필툴을 선택하여 원하는 모양의 선(예:곡선)을 그려보자. 이 선은 실제로는 보이지 않습니다.

⑤ 심볼을 선에 부착하기 : 먼저 자석 버튼 이 클릭되어 있는지 확인한다. 화살표 툴로 원 심볼을 클릭하면 가운데 십자가 모양이 보일 것이다. 십자가위 위치에 마우스를 올려 놓고 선의 시작점으로 드래그 한다. 시작점 가까이 가면 심볼의 가운데에 작은 동그라미가 나타날 것이다. 이것은 우리가 먼저 자석 기능이 작용하였기 때문입니다. 이 때 마우스를 놓는다.

⑥ 트위닝 시키기 : 애니메이션을 진행해야 하기 때문에 적당한 위치의 프레임에 Insert Frame을 합니다.(예 : 30번 프레임) 이 때 두 개 레이어 모두 프레임을 삽임합니다. '원' 레이어의 30번 프레임에 Insert Keyframe을 하고 원을 선의 끝점에 ⑤번과 같이 부착한다.(이 때 'Guide:원' 레이어를 잠금상태로 놓는다.) 마지막으로 1번과 30번 프레임 사이에 마우스를 놓고 Create Motion Tween을 한다.

⑦ 무비 재생하기 : 메뉴에서 Control -> Test Movie를 하면 곡선을 따라 움직이는 원을 볼 수 있을 것이다. 이 때 선은 안 보이죠?

⑧ 저장 및 Publish : 앞에서도 익히 설명하였으므로 앞으로 생략하겠습니다. 혼자서 한번 해 보세요.

실행결과 보기 / 소스파일 다운받기(flash_ex13.fla/9kb)

경로 애니메이션 실행결과 보기(2) / 소스파일 다운받기(atom.fla/21kb)

2) 무비클립을 이용한 애니메이션 [맨위로]

무비클립 심벌은 심벌이면서 메인 무비와는 별개로 작동하는 독립적인 무비이다.

무비클립의 특징

1. 메인무비에 한 개의 키프레임만 있어도 재생이 가능하다.
2. 무비 테스트 모드와 브라우저에만 무비클립의 재생을 확인할 수 있다.
3. 메인무비에 포함은 되어 있지만 독립적인 무비이므로 활용도가 무궁무진하다.
4. 무비클립 안에 그래픽 심벌이나 버튼 심벌, 또 다른 무비클립 자체를 포함할 수 있다.

『flash4 애니메이션 홈페이지 만들기』출처

① 심벌 만들기 : 메뉴에서 Insert -> New symbol을 선택하면 Symbol Properties가 나오는데 여기에서 Behavior를 Movie Clip 으로 선택하고 이름으로 적고 OK를 누른다.

② 무비편집하기 : 무비 편집 모드에서 원하는 글자나 그림을 그려본다. 아래 그림은 원을 그린 것이다. 여기서 원을 선택하여 메뉴에서 Insert -> Convert to Symbol에서 Behavior는 Graphic으로 지정해 주고 이름을 적는다.

③ 트위닝 시키기 : 10번과 20번 프레임에 각각 Insert Keyframe을 하고 10번 플레임에서 심벌을 두번 클릭하여 Color Effect를 Alpha 0%로 설정한다. 마지막으로 0과 10번사이, 10번과 20번 사이에 Create Motion Tween을 한다.

④ 메인무비에 삽입하기 : 메인무비 Scene1으로 돌아와서 메뉴에서 Window->Library를 선택하면 아래 그림과 같이 보일 것이다. 그림에서처럼 무비클립을 선택하고 위에 재생 단추를 클릭하면 무비클립이 재생되는 것을 볼 수 있다. 무비클립을 그대로 드래그 하여 스테이지에 끌어다 놓습니다.

⑤ 무비 테스트 하기 : 스테이지 상에서는 무비클립이 움직이는 것은 보이지 않습니다. 보이게 하려면 메뉴에서 Control -> Test Movie를 하세요. 메인 무비에서는 하나의 키 프레임만 설정되었어도 독립적으로 계속 움직이죠?

⑥ 저장 및 Publish : 앞에서도 익히 설명하였으므로 앞으로 생략하겠습니다. 혼자서 한번 해 보세요.

실행결과 보기 / 소스파일 다운받기(flash_ex14.fla/9kb)

무비클립 실행결과 보기(2) / 소스파일 다운받기(bg.fla/24kb)

3) 쉐이프 트위닝 애니메이션 [맨위로]

쉐이프 트위닝은 모션 트위닝을 이용하여 구현할 수 없는 독특한 기능의 몰핑 효과 애니메이션을 구현한다. 쉐이프 트위닝이 일어나기 위해서는 오브젝트의 속성이 분해되어 있어야 한다.(Modify -> Break Apart) 만약, 오브젝트의 속성이 그룹지어 졌거나 심벌로 되어 있다면 쉐이프 트위닝은 일어나지 않는다.

① 배경색과 화면 크기 설정하기 : 메뉴에서 File ->New, Modify -> Movie에서 원하는 배경색과 화면 크기를 설정한다.(예를 들어 Background:연한 노랑색, Width:550px, Height:400px)

② 사각형 그리기 : 사각형 툴을 선택하여 스테이지의 왼쪽에 사각형을 그린다.

③ 키프레임 삽입하기 : 10번 프레임에 Insert Blank Keyframe을 하여 스테이지의 오른쪽에 선 툴을 선택하여 삼각형을 그리고, 페인트 통 툴을 사용하여 삼각형 안을 채워넣는다.

④ 쉐이프 트위닝 시키기 : 1번과 10번 프레임 사이에 마우스를 놓고 더블클릭하여 아래와 같이 Tweening에서 Shape를 선택하고 확인을 누른다. 그러면 변화를 볼 수 있을 것이다.

⑤ 텍스트 쉐이프 트위닝 시키기 : 레이어를 하나 추가 하여 앞에서와 같은 방법으로 텍스트를 쉐이프 트위닝 시켜보자. 이 때 텍스트는 그룹으로 되어 있기 때문에 Modify -> Break Apart를 해주어야 한다.

⑥ 무비 재생하기 : 메뉴에서 Control -> Test Movie를 하면 도형과 글자가 트위닝 된 것을 볼 수 있습니다. 이러한 효과를 몰핑 효과라고 하며 Shape 트위닝으로 효과를 줄 수 있습니다.

⑦ 저장 및 Publish : 앞에서도 익히 설명하였으므로 생략하겠습니다. 혼자서 한번 해 보세요.

실행결과 보기 / 소스 파일 다운 받기(flash_ex15.fla/31kb)

4) 360도 회전 애니메이션 [맨위로]

별이 360도 회전하는 것을 만들어 보자.

② 심벌 만들기 : 먼저 선 툴을 사용하여 세로로는 길고, 가로로는 아주 짧은 삼각형을 만들고, 내부는 흰색과 검정색의 그라디언트 색을 넣는다. 이때 테두리 선은 지우는 것이 보기 좋다. 이것을 그래픽 심벌로 만든다.

③ 별 모양 만들기 : 그래픽 심벌로 만든 것을 Widows -> Library 창을 띄워서 별 심벌을 스테이지로 그대로 드래그 한 후 회전툴을 사용하여 90도, 180도, 270도 등 회전을 하여 별 모양을 만들어 보자. 모두 만든 다음엔 화살표 툴로 전체를 선택하여 Modify -> Group을 지정해 준다. 그러면 모두 그룹으로 묶여 있을 것이다. 이것을 그래픽 심벌로 만든다.

④ 키프레임 삽입하기 : 20번 프레임에 Insert Keyframe을 하고 회전툴을 선택한 후 오브젝트를 드래그 하여 시계 반대 방향으로 약간 회전시켜준다.

⑤ 트위닝 시키기 : 1번과 20번 프레임 사이에 더블 클릭하여 Tweening에서 Motion을 선택하고 Rotate 항목의 값은 Clockwise로 하고 확인버튼을 누른다.

⑥ 무비 재생하기 : 메뉴에서 Control -> Test Movie를 하면 별이 제자리에서 360도 회전하는 것을 볼 수 있을 것이다.

⑦ 저장 및 Publish : 앞에서도 익히 설명하였으므로 생략하겠습니다. 혼자서 한번 해 보세요.

실행결과 보기 / 소스파일 다운받기(flash_ex16.fla/10kb)

5) 프레임 액션 제어하기 [맨위로]

버튼 위에 마우스를 올려 놓았을 때 다른 프레임에서 마우스 이벤트 효과가 나타나는 것.

① 배경색과 화면 크기 설정하기 : 메뉴에서 File ->New, Modify -> Movie에서 원하는 배경색과 화면 크기를 설정한다.(예를 들어 Background:분홍색, Width:550px, Height:400px)

② 버튼 만들기 : 간단한 사각형 버튼을 만들어 보자. 심벌은 버튼 심벌로 지정한다. Windows -> Library 창에서 버튼 심벌을 드래그 하여 스테이지에 두 개 더 가져다 놓는다. 텍스틀 툴을 이용하여 사각형 버튼 안에 각각 텍스트를 입력한다.

③ 레이어 추가 : 레이어를 추가하여 10번 프레임에 Insert Blank Keyframe을 만들고 텍스트 툴을 이용하여 텍스트를 입력한다. 마찬가지로 레이어를 추가하여 20번과 30번 프레임에 Insert Blank Keyframe을 만들고 텍스트 툴을 이용하여 텍스트를 입력한다.

④ 액션 주기 : 무비의 재생을 멈추기 위해서 1번 레이어의 1번 프레임을 더블 클릭한 후 액션 창에서 Stop 액션을 준다. 스테이지에 있는 첫번째 버튼을 더블 클릭하여 버튼 액션을 주는데 그 값은 Go to and Stop 액션을 주고 Frame에 10번을 지정한다. 나머지 버튼도 마찬가지로 Frame 번호를 20번, 30번으로 하여 액션을 준다. 이것은 마우스로 클릭했을 때 각각 10번, 20번, 30번 프레임이 나타날 것이다. 그러나 마우스가 위로 올라갔을 때 나타나게 하려면 On(Release) 부분을 클릭 하여 Roll Over만 선택하면 된다.

⑤ 무비 재생하기 : 메뉴에서 Control -> Test Movie를 하면 버튼에 마우스를 가져가면 해당 프레임이 보일 것이다.

⑥ 저장 및 Publish : 앞에서도 익히 설명하였으므로 생략하겠습니다. 혼자서 한번 해 보세요.

실행결과 보기 / 소스 파일 다운 받기(flash_ex17.fla/11kb)

6) 사운드 삽입하기 [맨위로]

플래시 무비에 사운드 삽입하기. 플래시에서 사용할 수 있는 사운드 파일은 wav 파일입니다.

① 사운드 불러오기 : 먼저 예전에 사용했던 예제를 하나 불러온다. (아니면 본인이 직접 멋진 플래시를 하나 제작한다. 또는 플래시에 등록된 그림을 사용해도 된다. Library -> Graphics를 선택하여 원하는 항목을 선택한다.)

그런 다음 메뉴에서 File -> Import를 선택한 후 파일 형식을 *.wav로 선택하고 원하는 디렉토리에서 사운드 파일을 선택한다. 예를 들어 Windows 폴더의 Media 폴더로 가면 윈도우에서 제공하는 많은 wav 파일들이 있습니다. 그 중에 하나를 선택하세요. 그러면 자동으로 라이브러리에 등록됩니다. 메뉴에서 Windows -> Library를 선택하여 확인해 보세요.

② 사운드 삽입하기 : 레이어를 하나 더 추가하여 원하는 프레임에 Library에 있는 사운드를 마우스로 드래그하여 놓는다. 레이어 2개를 모두 30프레임에서 Insert Frame을 해준다.

③ 무비 재생하기 : 메뉴에서 Control -> Test Movie를 하면 버튼에 마우스를 가져가면 해당 프레임이 보일 것이다.

④ 저장 및 Publish : 앞에서도 익히 설명하였으므로 생략하겠습니다. 혼자서 한번 해 보세요.

이 사운드 삽입하는 것은 특정 프레임뿐 만 아니라 버튼에도 할 수 있습니다. 버튼 편집 모드에서 Over, Down에 마찬가지로 사운드를 Library에서 마우스로 드래그하여 놓으면 버튼에 마우스를 올려놓을 때 클릭할 때 소리가 날 것이다.

실행결과 보기 / 소스파일 다운받기(flash_ex18.fla/483kb)

[맨위로] [차례] [앞으로]