AS3 Animation class to replace MovieClip

Okay, let me start by saying that I HATE importing resources into fla’s. When I first learned Flash [AS2] it wasn’t an issue. Now with AS3 and the necessity of classes my coding style has changed and I really, really like keeping things as separated into classes as possible.

The Problem With MovieClips
When attempting to program button classes I ran into this wall: Flash’s MovieClip is the only appropriate class object to use for animation. It’s great for placing images in your timeline to form moving pictures and placing Actionscript on certain frames makes directing the clip around really easy. But what about when you have to make MovieClips dynamically and add code to certain frames inside that clip, without using the GUI? MovieClip doesn’t support dynamically adding frames, or functions or Bitmaps to certain frames. This sucks. Why Adobe did this I do not know – so I wrote a class that DOES WHAT I WANT [and maybe you too].

Animation takes three parameters, which are all optional: numFrames:int = 1 width:int = 0, and height:int = 0. These params just initiate the object.

* Example

import com.efnx.utils.Animation;     //import the class

var character:Animation = new Animation();     //object sets numFrames, width and height to 1, 0 and 0

After making the object you have to append the pictures to certain frames using the appendBitmapData function:

character.appendBitmapData(theFrame:int, bitmapData:BitmapData);

What this does is take the BitmapData and attach a function to the given frame that replaces the Animation’s default BitmapData with yours upon execution of that frame.
Doing this achieves the same effect as dragging a bitmap onto the stage in a MovieClip keyframe.

I wrote the class keeping in mind that someone may want to use it not for animation but sequential code execution, so frames can be created and functions attached to each frame without any graphics associated. The function used to add [or append] other functions to a certain frame is

     appendFrameScript(theFrame:int, theFunction:Function, [testing:Boolean = false]);

theFrame is the frame you’d like to add a function to, theFunction is the function to be added and testing tells the class whether or not to print debug info.

After adding frames and bitmaps and all that Animation can be controlled using familiar MovieClip methods like gotoAndPlay(), gotoAndStop(), go(), stop() and properties like currentFrame and totalFrames, as well as some others – bmd [the current frames BitmapData], bmdArray [an array of all frames BitmapData] and cool functions like customFps(fps:int) which set a custom playback rate denoted in number of frames per second [fps:int] and accelerateFps(desiredFps:int, numberFrames:int) which accelerates the playback delay from the current FPS to the desired FPS in numberFrames frames. accelerateFps is still a little buggy, feel free to nice it up!

Last Words
Animation doesn’t automatically loop your animation [since I usually don't need it to], so to really mimic a MovieClip you’d have to write a function incorporating gotoAndPlay(1) and then attach the function to the frame you’d like to loop your clip at:

var character:Animation = new Animation();                   //initiate object
     character.appendBitmapData(1, firstBitmapData);       //add BitmapData
     character.appendBitmapData(2, secondBitmapData);
     character.appendFrameScript(2, repeat);                   //append repeat function

function repeat():void                //repeat function

Hope this class helps some of you out. Feel free to let me know what needs improving and comment if you like it!

Animation Class Source Code

Tags: , , , , , ,

11 Responses to “AS3 Animation class to replace MovieClip”

  1. Very nice indeed. I would have just been doing animation through movieclips and attaching (or at least making new classes of them) those to the stage. This is a really nice class. I’ve been wanting to do this since AS2 so it’s a really nice addition to the toolset.

  2. This looks like it will really help me out a lot. I downloaded the source code and Flash is telling me there should be another class called Raster. Is this supposed to be included in your source code download? If not, can you direct me in what I need to do to get this class. Thank you.

  3. A nice one if you keep on thinking the AS2 way. If you try and struct your code to be REALLY OOP you will find out that there is no need for such a functionallity and probably this is why it isn’t there by default…

  4. Mike, I was using Didier Brun’s Raster classes for tracing outlines of each frame. You can download them from or download the new source above. Thanks for finding that dependency!

    Paul, I’m interested to know why animation is is an un-needed feature in an OOP language. Prove to me you’re not just spam and I’ll listen to you.

  5. “Paul, I’m interested to know why animation is is an un-needed feature in an OOP language.”

    I think what’s more to the point is that you don’t need timelines to swap out images or do animations. Beyond that, I don’t see the need for attaching functions to artificial “frames”. Somewhere in your code you’re telling your Animation gotoAndStop(). Why not call a method at that point that swaps your graphic and performs whatever necessary action is associated with that Event?

  6. Exactly! This is what the class is doing. If you download the source you will see that what you explained is exactly what is happening in this class. Although the class is slightly outdated at the moment [I don't use it in this post's form] you are correct, and Animation does just what you describe. I’ll write a new post on the current version of Animation I’m using, it’s based on sprite sheets, which save space by containing all “frames” of animation in one picture.

  7. Thank you for your website ;)
    I made on photoshop backgrounds for myspace and youtube and more
    my backgrounds:
    Hope you had a good day and thank you again!

  8. Hi thanks for this tutorial.

  9. Hi,

    Nice work.

    Did you ever publish the sprite sheet version?

    Would love to see that.


  10. I have not yet. I’ll try to get something up ASAP.

  11. […] เพียงเท่านี้ตัวแปร character ที่มีคลาสเป็น Animation ก็จะมีหน้าตาที่เหมือนกับมูฟวี่คลิป myMC แต่เพียงเปลี่ยนเป็นบิทแมพแล้วล่ะครับ ศึกษาเพิ่มเติมได้จาก AS3 Animation Class to Replace Movieclip […]

Leave a Reply

Follow me on GitHub
Follow me on Google+
Follow me on Twitter
EFNX is proudly powered by WordPress
Entries (RSS) and Comments (RSS).