애니메이션의 기본 정의는 이미지를 시차를 두고 계속 바꾸어서 움직이거나 변화하는 듯한 효과를 주는 것입니다. 이 샘플의 목표는 세로 축을 중심으로 회전하는 둥근 달의 효과를 만드는 것입니다. 그러나 애니메이션의 목적을 위해 샘플의 구형 왜곡 측면은 무시할 수 있습니다. 달 이미지 데이터의 소스로 로드되고 사용된 실제 이미지를 살펴 보십시오.
보는 바와 같이 이미지는 한 개나 여러 개의 구가 아니라 사각형의 달 표면 사진입니다. 이 사진은 정확하게 달의 적도에서 촬영되었기 때문에 이미지의 맨 위쪽과 아래쪽으로 가까울수록 이미지가 확장되고 왜곡되어 있습니다. 이미지에서 왜곡 현상을 제거하고 구형으로 보이도록 하기 위해 뒷부분에 설명된 대로 위치 변경 맵 필터를 사용할 것입니다. 그러나 소스 이미지가 사각형이기 때문에 구가 회전하는 효과를 만들기 위해 코드는 단지 달 표면 사진을 가로로 움직이기만 하면 됩니다.
이미지에는 실제로 달 표면 사진의 복사본 두 개가 서로 나란히 포함되어 있습니다. 이 이미지는 움직이는 모양을 만들기 위해 이미지 데이터가 반복적으로 복사된 것의 소스 이미지입니다. 이미지의 복사본 두 개가 서로 나란히 있으면 끊기지 않는 연속적인 스크롤 효과를 쉽게 만들 수 있습니다. 애니메이션의 프로세스를 단계별로 진행하여 애니메이션이 어떻게 작동하는지 살펴보겠습니다.
이 프로세스에는 실제로 두 개의 별도 ActionScript 객체가 사용됩니다. 먼저 로드된 소스 이미지가 있는데 이 이미지는 코드에서
textureMap
이라는 BitmapData 인스턴스로 표현됩니다. 앞에서 설명한 대로
textureMap
은 외부 이미지가 로드되는 즉시 다음 코드를 사용하여 이미지 데이터로 채워집니다.
textureMap = event.target.content.bitmapData;
textureMap
의 내용은 사각형 달 이미지입니다. 또한 회전 애니메이션을 만들기 위해 코드에서는
sphere
라는 Bitmap 인스턴스를 사용하는데 이는 달 이미지를 화면에 보여 주는 실제 표시 객체입니다.
textureMap
처럼
sphere
객체는
imageLoadComplete()
메서드에서 다음 코드를 사용하여 만들어지고 초기 이미지 데이터로 채워집니다.
sphere = new Bitmap();
sphere.bitmapData = new BitmapData(textureMap.width / 2, textureMap.height);
sphere.bitmapData.copyPixels(textureMap,
new Rectangle(0, 0, sphere.width, sphere.height),
new Point(0, 0));
코드에 표시된 대로
sphere
가 인스턴스화됩니다.
sphere
에 의해 표시되는 원시 이미지 데이터인
bitmapData
속성은
textureMap
과 같은 높이에 절반의 너비로 생성됩니다. 즉,
textureMap
이미지에는 두 개의 달 사진이 나란히 있으므로
sphere
의 내용은 한 장의 달 사진 크기가 됩니다. 다음으로
bitmapData
속성은
copyPixels()
메서드를 사용하여 이미지 데이터로 채워집니다.
copyPixels()
메서드 호출에서 매개 변수는 다음과 같은 사항을 나타냅니다.
-
첫 번째 매개 변수는 이미지 데이터가
textureMap
에서 복사된다는 것을 나타냅니다.
-
두 번째 매개 변수인 새 Rectangle 인스턴스는
textureMap
의 어느 부분에서 이미지 스냅샷을 가져올 지 지정합니다. 이 경우에 스냅샷은
textureMap
의 왼쪽 위 모서리(
Rectangle()
의 처음 두 매개 변수인
0, 0
으로 표시됨)에서 시작하는 사각형이고, 사각형 스냅샷의 폭과 높이는
sphere
의
width
및
height
속성과 일치합니다.
-
세 번째 매개 변수인 새 Point 인스턴스는 x와 y 값이
0
이며 픽셀 데이터의 대상을 정의합니다. 이 경우에 대상은
sphere.bitmapData
의 왼쪽 위 모서리 (0, 0)입니다.
시각적으로 표시하면 코드에서는 다음 이미지에서 외곽선이 표시된
textureMap
에서 픽셀을 복사하여
sphere
로 붙여 넣습니다. 즉,
sphere
의 BitmapData 내용은 다음에서 강조 표시된
textureMap
의 일부분입니다.
그러나 이것은
sphere
의 초기 상태, 즉
sphere
로 복사된 첫 번째 이미지 내용일 뿐입니다.
소스 이미지가 로드되고
sphere
가 만들어지면
imageLoadComplete()
메서드가 수행하는 마지막 작업은 애니메이션을 설정하는 것입니다. 애니메이션은
rotationTimer
라는 Timer 인스턴스에 의해 작동되는데 이는 다음 코드에 의해 만들어지고 시작됩니다.
var rotationTimer:Timer = new Timer(15);
rotationTimer.addEventListener(TimerEvent.TIMER, rotateMoon);
rotationTimer.start();
코드에서는 먼저
rotationTimer
라는 Timer 인스턴스를 만듭니다.
Timer()
생성자로 전달되는 매개 변수는
rotationTimer
가 15밀리초마다 자신의
timer
이벤트를 트리거해야 한다는 것을 나타냅니다. 다음으로
timer
이벤트(
TimerEvent.TIMER
)가 발생하면
rotateMoon()
메서드를 호출하도록 지정하여
addEventListener()
메서드를 호출합니다. 마지막으로
start()
메서드를 호출하여 타이머가 실제로 시작됩니다.
rotationTimer
가 정의된 방식으로 인해 약 15밀리초마다 Flash Player가 MoonSphere 클래스의
rotateMoon()
메서드를 호출하며 여기에서 달의 애니메이션이 발생합니다.
rotateMoon()
메서드의 소스 코드는 다음과 같습니다.
private function rotateMoon(event:TimerEvent):void
{
sourceX += 1;
if (sourceX > textureMap.width / 2)
{
sourceX = 0;
}
sphere.Data.copyPixels(textureMap,
new Rectangle(sourceX, 0, sphere.width, sphere.height),
new Point(0, 0));
event.updateAfterEvent();
}
이 코드는 다음과 같은 세 가지 작업을 수행합니다.
-
처음에 0으로 설정된 변수
sourceX
의 값이 1씩 증가합니다.
sourceX += 1;
sourceX
는
sphere
로 픽셀을 복사할
textureMap
내부의 위치를 결정하는 데 사용되므로 이 코드는
textureMap
에서 사각형을 한 픽셀만큼 오른쪽으로 이동하는 효과가 있습니다. 시각적 표현으로 돌아가면, 애니메이션 주기를 몇 번 거친 후 소스 사각형은 다음과 같이 오른쪽으로 몇 픽셀만큼 이동하게 됩니다.
주기가 몇 번 더 지나면 사각형은 더 멀리 이동하게 됩니다.
이렇게 픽셀이 복사되는 위치가 조금씩 일정하게 이동하는 것이 이 애니메이션의 핵심입니다. 소스 위치를 천천히 계속해서 오른쪽으로 이동함으로써
sphere
에서 화면에 표시되는 이미지는 계속 미끄러지듯이 왼쪽으로 이동하는 것처럼 보입니다. 소스 이미지(
textureMap
)에 두 개의 달 표면 사진 복사본이 필요한 이유가 여기에 있습니다. 사각형이 계속 오른쪽으로 이동하므로 대부분 사각형이 한 개의 달 사진이 아니라 두 개의 달 사진에 걸쳐 있게 됩니다.
-
소스 사각형이 오른쪽으로 천천히 이동함에 따라 한 가지 문제가 발생합니다. 결국 사각형이
textureMap
의 오른쪽 가장자리에 도달하면
sphere
로 복사할 달 사진 픽셀이 부족하게 됩니다.
다음 코드 줄이 이 문제를 해결합니다.
if (sourceX >= textureMap.width / 2)
{
sourceX = 0;
}
코드에서는
sourceX
(사각형의 왼쪽 가장자리)가
textureMap
의 한가운데에 도달했는지 확인합니다. 한가운데에 도달한 경우
sourceX
가 0으로 다시 설정되므로
textureMap
의 왼쪽 가장자리로 돌아가서 주기가 다시 시작됩니다.
-
적절한
sourceX
값이 계산되면 애니메이션 만들기의 마지막 단계는 새 소스 사각형 픽셀을 실제로
sphere
에 복사하는 것입니다. 이 작업을 수행하는 코드는 앞에서 설명한
sphere
를 처음 채우는 코드와 비슷합니다. 이 경우 유일한 차이점은
new Rectangle()
생성자 호출에서 사각형의 왼쪽 가장자리가
sourceX
에 위치하는 것뿐입니다.
sphere.bitmapData.copyPixels(textureMap,
new Rectangle(sourceX, 0, sphere.width, sphere.height),
new Point(0, 0));
이 코드는 15밀리초마다 반복해서 호출된다는 점에 유의하십시오. 소스 사각형의 위치가 계속 이동하고 픽셀이
sphere
로 복사됨에 따라 화면에는
sphere
가 나타내는 달 사진 이미지가 미끄러지듯 계속 이동하는 것으로 나타납니다. 즉, 달이 계속해서 회전하는 것처럼 보입니다.