본문 바로가기

Flash Programming 란?

Flash/Flex AS3 - Timeline 의 제어 Part.3

  • Timeline 제어

 Flash의 Timeline이 그냥 시간에 따라 진행 되는 것만은 아닙니다. AS를 통해서 이를 제어하고 코드가 발생하는 순서를 정할 수 있습니다. 기본적으로 Timeline을 제어 하는데 사용하는 액션은 다음과 같습니다.


- stop() : Timeline에 있는 재생헤드를 정지합니다.

- play() : Timeline에 있는 재생헤드를 움직입니다.

- gotoAndPlay(frame, scene =null) : 해당 Scene 에 존재하는 frame으로 이동한 후 재생헤드를 움직입니다.

- gotoAndStop(frame, scene =null) : 해당 Scene 에 존재하는 frame으로 이동한 후 정지 합니다. (정지상태)



 gotoAndPlaygotoAndStop의 파라미터로 들어가는 scene 의 경우는 생략이 가능합니다. 위에서 =null 이라고 선언되어 있는 것은 해당 파라미터가 입력되지 않았을 때는 scene 값을 null 값으로 처리 하겠다는 의미입니다. Timeline에 여러개의 프레임이 존재 하고 있을 때 재생헤드는 현재 머물고 있는 프레임에 해당하는 일을 마친 뒤 다음 프레임이 존재 한다면 다음 프레임으로 자동으로 넘어가서 또 그 프레임에 있는 일을 처리 합니다. 하지만 이러한 동작은 사용자가 원하지 않는 것일 수도 있습니다. 평소에는 프레임 1에 있는 것을 보여 주다가 어떠한 이벤트가 발생 했을 때 다른 프레임으로 이동 시키고 싶은 경우 평소에는 재생 헤드가 항상 프레임 1에 존재해야 되기 때문에 stop() 함수를 사용하게 됩니다. Timeline을 제어 하는 액션은 아주 다양한 용도로 사용 되고, 많은 것을 만들 수 있게 도움을 주는 메소드입니다. 예를 들어, Flash에는 마우스가 오버, 다운, 업 일 때의 이벤트를 처리를 미리 구현해 놓은 SimpleButton이라는 객체가 있습니다. SimpleButton은 내부적으로 구현되어 있는 객체지만 위의 Timeline을 제어 하는 메소드만을 이용하여 만들 수 있습니다. 우선 SimpleButton이 어떻게 구성되어 있는지부터 알아보겠습니다. 



 1. Flash File(Actionscript3.0) 로 새로운 파일을 생성 한후, Rectangle Tool(R)을 이용하여 사각형을 만듭니다.



2. 사각형을 선택 한 후, F8 또는 Modify-Convert to Symbol...을 선택하고 Type을 MovieClip으로 선택 한 후 OK를 누릅니다. 




3. 만들어진 MovieClip 객체를 마우스로 클릭 한 후, 우측 상단에 있는 Properties에 Instance Name을 입력하는 곳에 rect_mc라고 이름을 입력합니다.

 


4. 사각형을 더블클릭하여 하위 객체의 Timeline으로 이동한 후 2,3 프레임에 마우스 오버일 때의 상황과 마우스 버튼을 클릭 했을 때의 상황을 정의 합니다. 이 예제에서는 3개의 프레임에 각각 아래와 같은 도형을 그려 넣었습니다. 그리고 프레임 1에 stop(); 메소드를 입력 합니다.


 




5. 다시 상단에 있는 네비게이션 버튼을 클릭하여 Scene1(상위객체)로 올라 와서 프레임 1에 아래의 코드를 입력 합니다.




// 코드

stop();                   // 재생헤드가 움직이지 않게 정지 시킨다.// 각각의 이벤트를 등록해 준다.rect_mc.addEventListener(MouseEvent.MOUSE_UP,onUphandler);rect_mc.addEventListener(MouseEvent.MOUSE_OVER,onOverhandler);rect_mc.addEventListener(MouseEvent.MOUSE_OUT, onOuthandler);rect_mc.addEventListener(MouseEvent.MOUSE_DOWN,onDownhandler); function onUphandler(event:MouseEvent):void{        rect_mc.gotoAndStop(1);}function onOverhandler(event:MouseEvent):void{         rect_mc.gotoAndStop(2);}function onOuthandler(event:MouseEvent):void{         rect_mc.gotoAndStop(1);}function onDownhandler(event:MouseEvent):void{         rect_mc.gotoAndStop(3);}



 위에서 만든 사각형에 rect_mc 라는 이름(Instance Name)을 적용하므로써 코드에서 접근을 할 수 있게 되었습니다. rect_mc 에 Flash가 정의하고 있는 4가지 마우스 이벤트를 정의하고, 이벤트에 종류에 따라 gotoAndStop 문을 써서 재생헤드의 위치를 변경 하였습니다. 이 예제에서는 마우스의 움직임에 따라 rect_mc안에 있는 Timeline을 조작하므로 SimpleButton와 같은 동작을 하게 됩니다. (객체에 마우스 이벤트가 발생하는 과정은 후에 자세히 다룰 것임으로 생략 합니다.) 이러한 원리를 이용하면, 사용자의 마우스 움직임에 따라 마우스 이벤트가 발생한 객체뿐만 아니라, Timeline을 가지고 있는 모든 객체의 Timeline 속성을 조절할 수 있습니다. 여러 웹 사이트를 돌아다니다 보면, 화려한 모션과 함께 사용자의 반응에 따라 액션이 일어나는 사이트들이 많이 존재 합니다. 이러한 사이트들의 대부분이 이러한 Timeline을 메소드를 사용하는 이벤트만으로도 쉽게 만들 수 있습니다. 다만 Adobe AfterEffect 와 같은 모션 툴에서 한 작업을 Flash 의 Timeline으로 가져와서 조절하기 때문에 가능해지는 것입니다. 물론 Flash로 작업한 애니메이션도 가능합니다. 이렇게 타임라인을 이용한 작업은 간단하게 멋진 결과물이 나올 수 있게 도와줍니다. 


 하지만, Timeline 의 프레임 번호만을 가지고 재생헤드를 이동시키는 것은 여간 번거로운 작업이 아닐 수 없습니다. 프레임 번호를 맞춰가면서 gotoAndPlay를 사용해 가며 인터렉션을 만들었다고 해도, 유지보수가 있을 때 Timeline의 길이가 변하거나, 효과가 변하는 일은 비일비재 하게 일어나는 일이기 때문에 또 다른 방법을 요구 하게 됩니다. 그래서 Flash는 이러한 번거로움을 줄이기 위해 Timeline에 label 속성을 제공해 주고 있습니다. label 속성이란, Timeline을 조절할 때 프레임 번호로 위치를 참조해야 하는 번거로움을 없애기 위해 해당 프레임에 이름을 부여 하는 기능입니다. 아래 그림과 같이 마우스로 프레임을 선택하면 Properties 창에 LABEL 속성이 나타나게 됩니다. Name 에 해당 프레임으로 지정하고 싶은 Name을 입력하게 되면 해당 프레임은 지정된 이름의 참조 값을 갖게 됩니다. 



이 그림에서는 프레임 1에 Out, 프레임 10에 Over, 프레임 20에, Down 이라는 이름을 지정하였습니다. 이렇게 LABEL 값이 정해지게 되고, 위에서 구현했던 소스를 다음과 같이 변경하면 같은 기능을 하게 됩니다.


// 코드

부록 CD: Example\1-4\1_4_3.fla// 이벤트 등록 부분이 동일함으로 생략하였습니다.// 바뀐 부분은 bold 처리 되었습니다.function onUphandler(event:MouseEvent):void{	rect_mc.gotoAndStop("Out");}function onOverhandler(event:MouseEvent):void{	rect_mc.gotoAndStop("Over");}function onOuthandler(event:MouseEvent):void{	rect_mc.gotoAndStop("Out");}function onDownhandler(event:MouseEvent):void{	rect_mc.gotoAndStop("Down");}


 이러한 간단한 구조의 Timeline 에서는 필요하다는 느낌을 받지 못할 수도 있습니다. 하지만, 언제 바뀔지 모르는 프레임 번호를 신경 쓰기보다는 label을 지정함으로서 예측 할 수 없는 유지 보수에 대해 대비 할 수 있고, 훨씬 유연하게 대처할 수 있는 작업 방법입니다.


 지금까지 Timeline을 제어 하는 방법에 대해 알아보았습니다. Timline을 어떻게 조절하고 어떤 효과를 삽입하느냐에 따라 gotoAndPlay 만으로도 멋진 Flash를 만들 수 있는 비결이 될 수 있습니다. 그만큼, Timeline을 기반으로 하고 있는 Flash 프로그래밍에서 Timeline 제어는 중요한 부분을 차지하고 있습니다.