Animation with the Timer class

Actionscript Course

This tutorial will show you how to create an animation whose motion is syncronized with a specified time interval. To make this type of animation with ActionScript, we use the Timer Class.
The Timer is a class for executing code after a specified time interval. Each Timer object dispatches TimerEvent.TIMER events at a programmer specified frequency.
The function called by TIMER event and executed at that frequency can be used to change the visual aspect of an object, so with frequent modifications of the object it can create the effect of animation.
The animation created with TimerEvent does not depend on the number of frames per second FPS (like the one with ENTER_FRAME), but if the system or the Flash runtime is busy at the time a Timer is scheduled to execute its functions, the execution will be delayed.

• The general steps required to create an animation with the Timer class and the TimerEvent.TIMER are as follows:

1. Create a new Timer object, adding two arguments, the first argument sets the number of milliseconds between each time the timer event fires (frequency), the second atribute sets the total number of repetitions.

   var name_var:Timer = new Timer(frequency, repetitions);

   - The time interval (frequency) can also be set and changed with the property delay, and the number of repetitions with repeatCount (the value 0 indicates no limit)
2. Create a function to be invoked periodically when the TimerEvent.TIMER event is dispatched.

   function functionName(evt:TimerEvent):void {
     // code to execute
   }

   - This function must define a single parameter whose datatype is TimerEvent.
3. Register an event listener with the Timer object for TimerEvent.TIMER, that calls the function created in Step 2:

   instanceTimer.addEventListener(TimerEvent.TIMER, functionName);

4. Use the Timer class's method start() to start the timer. Once the timer is started, it begins dispatching TimerEvent.TIMER events according to the specified frequency and repetitions.

   instanceTimer.start();

• Another event in the TimerEvent class is TIMER_COMPLETE. This event type is dispatched when the number of repetitions is reached.

• The Timer class offers three methods for controlling the timer:

• start() - Starts the timer, if it is not already running.
• stop() - Stops the timer. When start() is called after stop(), the timer instance runs for the remaining number of repetitions.
• reset() - Stops the timer and resets the number of repetitions back to 0

Let's make an example to apply these events and methods of the Timer class to create an animation.

1. Open a new Flash document, draw a rectangle (with "Rectangle tool") on the Stage, and convert it into Movie Clip (from Modify - Convert to Symbol).
   Open the "Properties panel", then in the box with "<Insance Name>" give the name "drept1" for this MovieClip instance (the rectangle on the stage)
2. Right-click on Frame 1 in the Timeline, choose Actions, and in the "Actions panel" add the following code:

   var dimens:Number = 0.12;         // sets a sizing coefficient (12%)
   var move_y:Number = 23;           // sets an Y motion distance
   var rotire:Number = 30;           // Degrees for rotation
   
   // Create instance of Timer class, with the frequency half a second and maximum 6 repetitions
   var jumpTimer:Timer = new Timer(500, 6);
   
   // The Function that will be called by the TimerEvent.TIMER
   function jumpLand(evt:TimerEvent):void
   {
     // Modify the object's size with the coeficient value (%) from "dimens"
     drept1.scaleX += dimens;
     drept1.scaleY += dimens;
   
     drept1.rotation -= rotire;        // rotates
     drept1.y -= move_y;               // moves vertically
   }
   
   // The function that will be called by the TimerEvent.TIMER_COMPLETE
   function atTimerComplete(evt:TimerEvent):void
   {
     // Changes in an opposite way the values for sizing and vertical motion
     dimens *= -1;
     move_y *= -1;
   
     evt.target.reset();      // Resets the number of repetitions (to start from 0)
     evt.target.start();      // Starts the TIMER again
   }
   
   // register an event listener TimerEvent.TIMER, to "jumpTimer" instance
   jumpTimer.addEventListener(TimerEvent.TIMER, jumpLand);
   
   // register an event listener TimerEvent.TIMER_COMPLETE, to "jumpTimer" instance
   jumpTimer.addEventListener(TimerEvent.TIMER_COMPLETE, atTimerComplete);
   
   jumpTimer.start();        // Starts the TIMER
   

   - When the number of repetitions reaches the specified value (in this case 6), the event TimerEvent.TIMER_COMPLETE is dispatched. In the function called by this event ( atTimerComplete() ) the animation's motion direction changes, the number of repetitions resets to 0, and the start() method is invoked to start again the TimerEvent.Timer.
   When the number of repetitions reaches again to 6, these operations repeat, and so on. This way is created a continuous movement of the object, on the vertical direction, up and down.
       - If you press "Ctrl+Enter", the Flash Player will display a presentation like this: - To increase the motion speed, set a lower value for the delay (the time interval).

- To download the FLA file with the animation presented in this lesson, click: Animation with the Timer class.

<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Language for web pages</dd>
</dl>

#id {
  visibility: hidden;
}

document.getElementById("id").onclick = function(){
  alert("http://CoursesWeb.net/");
}

if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}