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.

• 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:
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;
 ;      // Resets the number of repetitions (to start from 0);      // 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.

Daily Test with Code Example

Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
Indicate the PHP variable that contains data added in URL address after the "?" character.
if(isset($_GET["id"])) {
  echo $_GET["id"];
Animation with the Timer class

Last accessed pages

  1. Multiple Select Dropdown List with AJAX (15558)
  2. Moving html element to a random direction (84)
  3. XHTML References - Old (15)
  4. Star shapes with CSS (4464)
  5. Get and Modify content of an Iframe (12618)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (387)
  2. Register and show online users and visitors (355)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (327)
  4. Insert, Select and Update NULL value in MySQL (256)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (254)