AS3 Animation Tutorial - Using the AS3 EnterFrame Event to Create Animation in Flash [Video Tutorial]

by Alberto Medalla
Lecturer, Ateneo de Manila University

You can use AS3 to add some animation to your Flash project using code. Instead of adding tweens on the timeline, you'll be using AS3 to animate objects. In this ActionScript video tutorial, I'll show you a few simple examples on how to create animation in Flash using the AS3 EnterFrame event.

AS3 Animation Tutorial - Using the AS3 EnterFrame Event to Create Animation in Flash

AS3 EnterFrame Event Animation Sample Code #1
Here is the code for the first example where the circle will continue to scale up as long as the movie is running.

var growthRate:Number = 2;

circle_mc.addEventListener(Event.ENTER_FRAME, grow);

function grow(e:Event):void
{
     e.target.width += growthRate;
     e.target.height += growthRate;
}

AS3 EnterFrame Event Animation Sample Code #2
In the second example, the animation will stop when the circle's size reaches 150 pixels.

var growthRate:Number = 2;
var maxSize:Number = 150;

circle_mc.addEventListener(Event.ENTER_FRAME, grow);

function grow(e:Event):void
{
     e.target.width += growthRate;
     e.target.height += growthRate;
     if(e.target.width >= maxSize)
     {
          circle_mc.removeEventListener(Event.ENTER_FRAME, grow);
     }
}

AS3 EnterFrame Event Animation Sample Code #3
In the third example, the code has been modified to make the circle grow and then shrink repeatedly.

var growthRate:Number = 2;
var maxSize:Number = 150;
var minSize:Number = 100;
var scaleMode:String = "grow";

circle_mc.addEventListener(Event.ENTER_FRAME, growShrink);

function growShrink(e:Event):void
{
     if(scaleMode == "grow")
     {
          e.target.width += growthRate;
          e.target.height += growthRate;
          if(e.target.width >= maxSize)
          {
               scaleMode = "shrink";
          }
     }
     else if(scaleMode == "shrink")
     {
          e.target.width -= growthRate;
          e.target.height -= growthRate;
          if(e.target.width <= minSize)
          {
               scaleMode = "grow";
          }
     }
}

[VIEW MORE SAMPLES]

Click on the link to view more AS3 enterframe animation samples