7. Motion _(1) 간단한 모션 만들기

간단한 모션을 한번 만들어보자. 모션을 만들위해서는 MovieClip 클래스를 이용하여 만들어야한다.

 

액션스크립트 1.0, 2.0 에서는 MovieClip을 많이 사용하였다. 하지만 MovieClip을 많이 사용하게 되면 과도한 메모리 과부하가 일어나는 문제가 발생하는 등 여러가지 단점이 많았다.

 

그래서 액션스크립트 3.0 에서는 이를 극복하기 위해 새로운 클래스를 만들었다.

주로 Sprite 클래스를 이용한다. 그렇다고해서 MovieClip을 사용하지 않는다는 것은 아니다.

 

# MovieClip을 사용하는 경우

 

1. 타임라인을 이용하여 무비를 제어할때 : 애니메이션, 모션

2. Scean 및 FrameLabel을 이용하여 작업할때

3. 타임라인 PLAY HEAD를 조작하는 작업을 할때

 

위와 같은 경우에는 MovieClip을 이용하여 작업을 한다.

 

그럼 MovieClip 클래스에 대해 한번 알아보자.

 

 

MovieClip 객체는 Sprite 객체와 다르게 타임라인이 있다.

 

MovieClip은 이렇게 많은 걸 상속받고 있다. 그래서 무겁다고 하는 것이다.

 

그럼 MovieClip 클래스에서 주로 쓰이는 속성과 메서드에는 어떤 것이 있는지 한번 알아보자.

 

속성

 

 

 

메서드

 

 

 

주로 쓰이는 메서드는 gotoAndStop(), gotoAndPlay(), nextFrame(), prevFrame(), stop() 이 있다.

 

자 그럼 이제 예제로 간단한 모션을 만들어 보자.

 

먼저 플래시 파일을 하나 만들자. 새로 만든 파일에서 ctrl + F8번을 눌러 무비클립 심볼을

하나 만든다.

 

 

그런다음 이 무비클립의 인스턴스네임을 rect_mc로 하자.

 

 

그럼 타임라인이 아래와 같이 MovieClip심볼이 생성되어 나타난다.

 

 

 

rect_mc 무비클립을 더블클릭하고 들어가서 사각형을 한번더 무비클립으로 만들어준다.

 

 

이 무비클립의 인스턴스네임은 inner_mc라고 하자.

 

 

그런 다음 타임라인에서 1프레임을 클릭하고 오른쪽 마우스를 클린한다음 Create Classic Tween을 클릭한다.

 

 

그런다음 30프레임을 클릭하고 F6을 눌러 프레임을 추가한다.

 

 

그런다음 추가한 30프레임에서 사각형을 오른쪽으로 이동시킨다. 그럼 아래와 같이 된다.

 

 

마지막으로 properties에서 Class를 아래와 같이 지정한다.

 

 

중요한것은 rect_mc 무비클립안에서 inner_mc 라는 무비클립을 하나더 만들어주는 것이다.

 

여기서 왜 무비클립을 만들고 또 그 안에 무비클립을 만드냐 하면..

 

모션 줄때 shape으로는 액션을 줄수가 없다.

 

 꼭 무비클립으로 만든 다음에 모션을 줘야한다.

 

또한 모션을 줄 땐 인스턴스네임이 필요하므로 꼭 인스턴스네임을 지정해 줘야 한다.

 

그럼 이제 MotionExample01.as 파일을 만들어 보자.

 

[code as3]
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;

public class MotionExample01 extends Sprite
{
 public function MotionExample01()
 {
  super();

  rect_mc.buttonMode = true; // 사각형 마우스 오버시 손모양

  rect_mc.stop(); // 초기 상태 정지 설정

  rect_mc.addEventListener(MouseEvent.CLICK, clickHandler); // 마우스 클릭 이벤트 등록
 }

/**
  *  @private
  *  사각형 클릭
  */
 private function clickHandler(event:Event):void
 {
  rect_mc.addEventListener(Event.ENTER_FRAME, moveRectHandler); // 사각형 이동 이벤트 등록
 }

/**
  *  @private
  *  사각형 이동
  */
 private function moveRectHandler(event:Event):void
 {
  if(rect_mc.currentFrame == rect_mc.totalFrames) // 현재 프레임이 마지막 프레임이면
  {
   rect_mc.stop(); // 사각형 정지 : 타임라인 정지

   rect_mc.removeEventListener(Event.ENTER_FRAME, clickHandler); // 사각형 이동 이벤트 제거
  }
  else
  {
   rect_mc.play(); // 사각형 이동 : 타임라인 재생
  }
 }
}
}
[/code]

 

 

 

 

자 이제 실행해보자. 위의 파란색 사각형을 클립해보자. 잘 실행되는가? 그럼 간단한 모션만들기는 성공!

 

다음에는 버튼을 추가하여 모션을 제어하는 조금더 복잡한 모션예제를 만들어보자.