Animating objects

Animation is the process of making something move, or alternatively, of making something change over time. Scripted animation is a fundamental part of video games, and is often used to add polish and useful interaction clues to other applications.

The fundamental idea behind scripted animation is that a change needs to take place, and that change needs to be divided into increments over time. It’s easy to make something repeat in Haxe, using a common looping statement. However, a loop will run through all its iterations before updating the display. To create scripted animation, you need to write Haxe that performs some action repeatedly over time and also updates the screen each time it runs.

For example, imagine you want to create a simple animation, such as making a ball travel across the screen. Haxe includes a simple mechanism that allows you to track the passage of time and update the screen accordingly—meaning you could write code that moves the ball a small amount each time, until it reaches its destination. After each move the screen would update, making the cross-Stage motion visible to the viewer.

From a practical standpoint, it makes sense to synchronize scripted animation with the project’s frame rate (in other words, make one animation change each time a new frame displays or would display), since that defines how frequently OpenFL updates the screen. Each display object has an enterFrame event that is dispatched according to the frame rate of the project—one event per frame. Most developers who create scripted animation use the enterFrame event as a way to create actions that repeat over time. You could write code that listens to the enterFrame event, moving the animated ball a certain amount each frame, and as the screen is updated (each frame), the ball would be redrawn in its new location, creating motion.

Note: Another way to perform an action repeatedly over time is to use the Timer class. A Timer instance triggers an event notification each time a specified amount of time has past. You could write code that performs animation by handling the Timer class’s timer event, setting the time interval to a small one (some fraction of a second). For more information about using the Timer class, see

"Controlling time intervals" on page 4

.

In the following example, a circle Sprite instance, named circle, is created on the Stage. When the user clicks the circle, a scripted animation sequence begins, causing circle to fade (its alpha property is decreased) until it is completely transparent:

import openfl.display.Sprite; import openfl.events.Event; import openfl.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);

When the user clicks the circle, the function fadeCircle() is subscribed as a listener of the enterFrame event, meaning it begins to be called once per frame. That function fades circle by changing its alpha property, so once per frame the circle’s alpha decreases by .05 (5 percent) and the screen is updated. Eventually, when the alpha value is 0 (circle is completely transparent), the fadeCircle() function is removed as an event listener, ending the animation.

The same code could be used, for example, to create animated motion instead of fading. By substituting a different property for alpha in the function that is an enterFrame event listener, that property will be animated instead. For example, changing this line

circle.alpha -= .05;

to this code

circle.x += 5;

will animate the x property, causing the circle to move to the right across the Stage. The condition that ends the animation could be changed to end the animation (that is, unsubscribe the enterFrame listener) when the desired x coordinate is reached.