Topics:
- Project 2 Presentations
- Final Project Introduction
- ActionScript: Animating with code:
- Frame-based events
- Timers
- Hit Testing
ActionScript: Animating with code
Today we’re going to explore some events that allow us to animate and react with code. Next week we’ll talk about how to do the same thing with jQuery.
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
}
Hurricane Sandy Project
Because of the class we missed during the hurricane, the college has asked the faculty to give an extra assignment to make up for the lost time. This is the project that I would like you to do, due next class:
During a natural disaster, communication becomes both crucial and difficult. Design a mobile application OR communication device that would have aided you or someone you know during the hurricane. You don’t have to build this app or device, just do a wireframe for it and provide an explanation of the functionality of it. We’ll discuss these next week.
Final Project
For the rest of the semester you will be working on your final project. Next week you should be ready to discuss your project concept.
For the final project, you can choose to continue work on either Project 1: The Drawing Application or Project 2: The Media Player, building on and perfecting the functionality you have already started. OR you may also choose to start a new project. You can use either HTML5/CSS/Javascript or Flash/Actionscript. Your project should be imagined either in the context of a larger Web site, or as a mobile application. We will discuss more specific requirements next class.
