Week 11: Animating With Code

Topics

• Final Project Concept Presentations
• Frame-based events
• Timers
• Hit Testing

So far we’ve been working with user-generated Mouse Events. Today we’re going to explore some non-User events that allow us to animate and react with code.

Drag and Drop Events

Any named movieclip instance on the stage can be made “draggable” with the startDrag( ) method.

myObject.startDrag();

Usually this is triggered with an event listener on the MOUSE_DOWN event on the instance. Once startDrag is called, the object will follow the mouse movement. To stop this behavior, you use the stopDrag( ) method, usually implemented on MOUSE_UP.

myObject.stopDrag();

This behavior also has a property associated called dropTarget. The dropTarget is the object that is under the draggable object when the stopDrag method is called. To get the name of the drop target, you must access its name property.

myObject.dropTarget.name;

Frame-based Events

Now that we are comfortable with working with and creating display objects, and using event listeners and event handlers, we can also create animation entirely from code, without involving the timeline. To do this, we use a new event type, onEnterFrame, or ENTER_FRAME event.

You might think that you could use a for loop for animation, like this:

for(i = 0; i < 500; i++){
    ball.x = i;
}

Where “ball” is a display object that you have defined elsewhere. You might think that this code would move the ball 1 pixel 500 times, and in a sense you would be right. The problem is that you would only see the result of the last loop, because all 500 loops are executed before the frame is rendered.

To get around this, you need to introduce time between loops, which is where ENTER_FRAME comes in. The ENTER_FRAME event is dispatched at the frame rate of the .swf.

This is how you set up an enter frame event:

instancename.addEventListener(Event.ENTER_FRAME, eventHandler);

function eventHandler(event:Event):void {

            //do something
 }

Timer Events

You can also set up an event that will happen at regular intervals in your code. This is called a Timer Event. A timer is actually an object, so first you need to create a new Timer instance, then add an event listener and handler to it, and last, start the timer!

//create the timer instance
var myTimer:Timer = new Timer(500, 10);

//add the timer event to it
myTimer.addEventListener(TimerEvent.TIMER, eventHandler);

//start the time
myTimer.start();

function eventHandler(event:TimerEvent):void {
    //do something
}

Hit Testing

It can be useful when creating dynamic code based animation to be able to detect when one display object collides with another. This is called “Hit Testing”. You can hit test two ways, with two objects or with an object and a point on the stage.

To hit test two objects, use the hitTestObject method:

object1.hitTestObject(object2)

To hit test and object and a point, use the hitTestPoint method:

object.hitTestPoint(xcoordinate,ycoordinate)