Monday, December 6, 2010

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";
          }
     }
}

Click on the link to view more AS3 enterframe animation samples

9 comments:

  1. Thanks, this really helps ^^

    ReplyDelete
  2. Wicked Tutorial well explained :)

    ReplyDelete
  3. Explained in very simple and understandable language....Thanks a looooooot!!!!!!!

    ReplyDelete
  4. hey, can anyone help me find out what's wrong with my code? it doesn't mark any error, but doesn't do anything:

    var growthRate:Number = 2;
    var maxSize:Number = 250;
    var minSize:Number = 50;
    var scaleMode:String = "Grow";

    circle.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";
    }
    }

    }

    ReplyDelete
    Replies
    1. When you initialized the scaleMode variable, you gave it a value of "Grow" with an uppercase G. But in the if statement's condition, your grow is spelled with a lowercase g. The letter casing should match.

      Delete
  5. THANKS a beautiful example. I got that in my mind easily

    ReplyDelete