[플래시 강좌] 플래시 기본 모션 (flash Motion)

안녕하세요~

설치는 다들 잘 하셨죠?ㅎ

이번에는 간단한 모션을 해보겠습니다.....단순한 원을 그려 무비클립으로 지정합니다.

1프레임에서 키프레임을 생성하고 원하는 위치의 프레임에서 키프레임을 추가한후 무비클립을 이동하고 싶은 위치로 이동시켜줍니다. 이동시켰으면 트윈 모션을 추가해주는 모션입니다.

1. ActionScript 3.0을 클릭하셔도 되고 단축키(Ctrl + N) 을 사용하셔서 페이지를 만드시면 됩니다.(Flash Document로 된 버전도 있습니다.)

2. 타임라인을 이용해 간단한 플래시 모션을 줘 보겠습니다.

우측 하단에 보시면 24.00fps라고 있습니다. 

이건 초당 표시할 애니메이션 프레임의 개수를 뜻합니다.(초당 24프레임을 표현할 수 있습니다.)

3.화면 크기 수정은 Properties 창에서 Size : 에있는 숫자를 클릭후 수정하시면 됩니다.

4.우선 도구창에서 동그라미 Oval Tool을 선택합니다.

5. 아래 화면과 한쪽 왼쪽 가운데쯤 동그라미를 그려줍니다...

!!!팁 

:: Alt 키를 누른 상태에서 원을 그리면 처음 클릭점을 기준으로 원이 그려집니다

:: Shift 키를 누른 상태에서 원을 그리면 일정 비율로 원이 그려집니다

:: Alt + Shift키를 동시에 누르면 두 가지 효과가 나타납니다.. 

6. 모션을 주기 위해 동그라미를 무비클립으로 만들어보겠습니다.

Name을 ball로 주고 Type에서 Movie  Clip를 선택후 Ok를 누릅니다.

(!무비클립 = 메인스테이지와 별개로 독립적인 타임라인이 있어 별도의 모션구현이 가능)

7.원을 무비클립으로 생성후 타임라인에서 적정한 곳(저는 30으로 하겠습니다) 에서 

마우스 오른쪽 버튼을 한번 클릭해줍니다.

8. 클릭해주시면 다음과 같은 창이 나타납니다.

여기서 Insert Keyframe를 선택합니다..

(30프레임에 키프레임을 주면서 원을 하나더 생성했다고 보시면 됩니다.)

9.Insert Keyframe를 선택해주시면 1프레임에 동일하게 검은 동그라미에 생기는 걸 볼수 있습니다..

그 검은점이있는 30프레임을 선택하시고 원을 아래 화면과 같이 우측으로 드래그해서 이동시켜 줍니다.

10. 원을 이동시키셨으면 

아래 사진과 같이 1~29사이 아무곳에  마우스 우 클릭후 Create Classic Tween 을 선택해 모션을 줍니다.

11. 그럼 아래와 같이 색이 변하신걸 확인할 수 있습니다..

12.여기까지 잘 따라하셨으면 결과물을 확인해 보겠습니다.

좌측에 있는 원이 우측으로 이동하시는걸 확인할 수 있습니다..

(확인은 플래시 화면에서 Enter(엔터)키를 누르셔도 되고 Ctrl + Enter을 눌러서 확인해 주시면됩니다.

==첨부파일중 motion1.fla는 같이 따라해본 작업입니다. 

그리고 moiton2.fla는 스크립트를 주어 모션을 제어해봤습니다.(이런게 있구나 정도로 알고 계시면 되겠습니다.^^)

==상위버전으로 제작된 플래시 파일은 하위버전에서 열어볼 수 없어서 첨부파일은 Flash 8로 만들었습니다.

motion1.fla

motion2.fla