객체 애니메이션

애니메이션은 어떤 것을 움직이게 하거나 또는 시간에 따라 변화되도록 하는 프로세스입니다. 스크립트 애니메이션은 비디오 게임의 기본이 되는 요소이며, 기타 응용 프로그램에 세련되고 유용한 상호 작용을 추가하기 위해서도 자주 사용됩니다.

스크립트 애니메이션의 기본 아이디어는 변경이 발생해야 하며 이 변경이 시간의 경과에 따라 여러 단계로 나뉘어 진행되어야 한다는 것입니다. ActionScript에서는 일반 루프 문을 사용하여 어떤 작업을 쉽게 반복할 수 있습니다. 그러나 루프는 표시를 업데이트하기 이전에 모든 반복을 완료합니다. 스크립트 애니메이션을 만들려면 시간에 따라 일부 작업을 반복적으로 수행하고 반복이 실행될 때마다 화면을 업데이트하는 ActionScript를 작성해야 합니다.

예를 들어, 화면을 따라 공이 이동하는 간단한 애니메이션을 만든다고 가정합니다. ActionScript에는 시간 경로를 추적하여 화면을 적절하게 업데이트할 수 있는 간단한 메커니즘이 포함되어 있습니다. 즉, 공이 목표 지점에 도달할 때까지 조금씩 이동하는 코드를 작성할 수 있습니다. 이동할 때마다 화면이 업데이트되어 스테이지를 가로지르는 모션이 뷰어에 표시됩니다.

실질적인 관점에서 스크립트 애니메이션을 SWF 파일의 프레임 속도(이 속도에 따라 Flash Player 또는 AIR에서 화면을 업데이트하는 빈도가 정의되기 때문)와 동기화하여, 새 프레임이 표시될 때마다 애니메이션 변경을 하나씩 만들 수 있습니다. 각 표시 객체에는 SWF 파일의 프레임 속도에 따라 전달되는 enterFrame 이벤트(프레임별로 하나의 이벤트)가 있습니다. 스크립트 애니메이션을 만드는 대부분의 개발자는 enterFrame 이벤트를 사용하여 일정 시간 반복되는 작업을 만듭니다. enterFrame 이벤트를 수신하여 애니메이션 처리된 공을 프레임별로 특정 양만큼 이동하고 각 프레임에 대해 화면이 업데이트되면 공을 새 위치에 다시 그려 모션을 생성하는 코드를 작성할 수 있습니다.

다음 예제에서는 circle 이라는 원 Sprite 인스턴스를 스테이지에 만듭니다. 사용자가 원을 클릭하면 스크립트 애니메이션 시퀀스가 시작되어 circle 이 완전히 투명해질 때까지 페이드됩니다( alpha 속성이 감소됨).

import flash.display.Sprite; 
import flash.events.Event; 
import flash.events.MouseEvent; 
 
// draw a circle and add it to the display list 
var circle:Sprite = new Sprite(); 
circle.graphics.beginFill(0x990000); 
circle.graphics.drawCircle(50, 50, 50); 
circle.graphics.endFill(); 
addChild(circle); 
 
// When this animation starts, this function is called every frame. 
// The change made by this function (updated to the screen every 
// frame) is what causes the animation to occur. 
function fadeCircle(event:Event):void 
{ 
    circle.alpha -= .05; 
     
    if (circle.alpha <= 0) 
    { 
        circle.removeEventListener(Event.ENTER_FRAME, fadeCircle); 
    } 
} 
 
function startAnimation(event:MouseEvent):void 
{ 
    circle.addEventListener(Event.ENTER_FRAME, fadeCircle); 
} 
 
circle.addEventListener(MouseEvent.CLICK, startAnimation);

사용자가 원을 클릭하면 fadeCircle() 함수가 enterFrame 이벤트의 리스너로 구독되어 프레임마다 한 번씩 호출됩니다. 이 함수는 alpha 속성을 변경하여 circle 에 페이드 효과를 적용하기 때문에 프레임마다 한 번씩 원의 alpha 가 .05(5%)씩 감소하고 화면이 업데이트됩니다. alpha 값이 0( circle 이 완전 투명한 상태)이 되면 fadeCircle() 함수가 이벤트 리스너 구독에서 제거되어 애니메이션이 종료됩니다.

예를 들어, 동일한 코드를 사용하여 페이드 효과 대신 애니메이션 모션을 만들 수 있습니다. 함수에서 alpha 를 enterFrame 이벤트 리스너인 다른 속성으로 대체하면 해당 속성이 대신 애니메이션화됩니다. 예를 들어, 다음 행을

    circle.alpha -= .05;

다음 코드로 변경하면

    circle.x += 5;

x 속성이 애니메이션화되어 원이 스테이지의 오른쪽으로 이동합니다. 애니메이션이 종료되는 조건을 변경하여 원하는 x 좌표에 도달하면 애니메이션이 종료(즉, enterFrame 리스너 구독 해제)되도록 할 수 있습니다.

Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.