boostworthyisryantaylor

AS3 Animation System v1.0

[Update: June 2, 2007]
Version 2.0 is now live.
[/Update]

I finally managed to find enough free time in the past couple couple weeks to refactor/port my animation system to AS3. The performance is great and I learned a lot of little things about AS3 in the process of making it. Before I get into details about what I learned, issues I ran into, and some new features I added, let’s have a look at the architecture.

Click to view a larger image.

Not exactly a UML diagram, but white boards are awesome and the marker colors even match the colors of my blog (tacky yet cool nonetheless).

Similar to the architecture of my AS2 animation system, a framebuffer and renderer are used. You may notice something new in the diagram however, the RenderMethod object. This is the highlight feature of my first release of the system; you can specify whether you want to use a timer or the enter frame event individually for each animation. To me, being able to use the right render method for the right occasion is invaluable, and will certainly pay off in larger projects.

The new event system in AS3 is fantastic, so there was no need to build my own event system this time around. The only other new object that needs special attention is the Global object. In order to make the enter frame usage possible, a listener must be added to a display object which is inside a display container. So if you created a sprite object and added an event listener, the enter frame event wouldn’t occur until you added it to a display container. This is where the Global object comes into play. In your main application class, the best practice would be to start off setting the global stage reference in the Global object right away, that way it is always available. However, since that creates a dependency, my animation system checks each new animation that is created to see if the target object is a display object. If it is, the global stage reference is extracted from it and set for all other objects to use.

You will notice a much smoother animation using a timer as your render method over the enter frame event. This is because the default refresh rate is set to 14 milliseconds, the ideal rate for a project running at 30 frame per second. You can pass your own custom refresh rate into the constructor of an animation manager as well. When a timer is used, the display is manually updated independent of the frame rate. This is why the animation appears so much smoother than one rendered using the enter frame event. Essentially, you are seeing an animation at around 60 frames per second, but this extra load on the processor only lasts for the short duration of the animation. In a case where you are doing something like a pulse animation on an object, it’s probably wiser to use the enter frame event, since the pulse animation runs until you remove it. The default render method for all animations is a timer, so if you prefer enter frame, you can set the default render method at the top of the animation manager class.

Again, to me, the benefit to using my system over other animation systems out there (though I do believe this is the first one available in AS3) is the manner in which the code is written and maintained. It’s written in a strict object-oriented fashion, so it can be easily extended upon with new animation types and features.

The link to download the zip file is below. If you have any comments, feedback, or bug reports, I’d love to hear from you. Hopefully you will find it handy and also a great reference for learning AS3. Enjoy.

Download ‘boostworthy_animation_AS3.zip’

NOTE: If you don’t already have the Adobe Flash Professional 9 ActionScript 3.0 Preview, you can download it from Adobe Labs here.

23 comments

23 Comments so far

  1. DevEvert January 20th, 2007 7:29 pm

    Tried to use your animation system in Flex Builder 2 and it came up with several errors. Specifically in all of the animation type classes (AlphaAnimation, etc.) it says “1067: Implicit coercion of a value of type String to an unrelated type Number.”

    There are also some warnings in the Framebuffer and Renderer classes. Just thought you might like to know. I am very interested in your system, and would love to play with it more.

  2. Ryan Taylor January 21st, 2007 1:39 pm

    DevEvert,

    Thanks for posting. I honestly haven’t touched Flex Builder 2 since Flash Professional 9 Alpha was released. I’ll start working on refactoring it for compatibility with both Flash and Flex Builder as soon as I can.

  3. dom February 16th, 2007 2:30 am

    great stuff. you probably know this, but in your demo app you rely on an ‘mcStage’ to recieve the mouse events. you can get the same effect like this:
    // Add a listener to the mouse’s click event.
    stage.addEventListener(MouseEvent.CLICK, OnClick);

    just mention stage.

    thanks for the code, its excellent!

  4. dom February 16th, 2007 2:37 am

    oh also.. i really liked the back.easeOut & back.easeIn effect where you can specify the overshoot amount in the old Zeh Fernando prototype tween methods. Maybe you could implement them too ;) I cant see a Back type tween or any way to set overshoot parameter.

  5. Ryan Taylor February 16th, 2007 9:18 am

    Wow, actually I didn’t realize that. When I was throwing together that demo, I remember trying to use the app class to fire off the mouse event, but it’s display container was empty so there was essentially no hit area. I ended up just doing that hacky ‘mcStage’ way; great call on using the stage. I’m lame for not thinking of that.

    I ended up leaving the back ease types out because basically the same effect could be created using the elastic ease types by adjusting the period and amplitude. I’m planning on refactoring the whole system sometime soon, so I’ll add that in there for you while I’m at it.

    Thanks for posting man, I really appreciate your feedback.

  6. Mike Britton February 24th, 2007 1:18 pm

    Nice work – thanks for making this.

  7. Chad Udell February 24th, 2007 7:57 pm

    Besides being AS3, how does this compare with Zeh’s MCTween or Laco’s Tween engine? Does it handle text and sound? FrameTo, etc.?

    Just curious.

  8. Ryan Taylor February 24th, 2007 10:39 pm

    Well, you can tween any property of any object using the ‘Property’ method, however, one of the big pluses to this system is that you can easily extend upon it by adding your own custom animation types. It’s very useful right out of the box, however it’s true value lies in it’s open framework.

  9. Tiago BIlou February 27th, 2007 12:55 pm

    I got it working in Flex :)
    I had a chance to take a deep look at the code and I really liked it.
    I guess I still need to implement a tween sequencer…
    Gosh How I miss Fuse in as3…

    Keep up the good work Ryan!

  10. Ryan Taylor February 27th, 2007 1:12 pm

    Tiago,

    Thanks for the kind words. I appreciate you picking up on my slack. I’ve been pretty busy lately, so I haven’t had a chance to convert my AS2 sequencer system over to AS3, but I’m hoping to very, very soon. If you haven’t already checked out the AS2 sequencer, here’s the link:

    http://www.boostworthy.com/blog/?p=114

  11. [...] I was hoping to fix the bugs in the AS2 system before porting over to AS3, however I got anxious and wanted to put this out there for all of you to play with. A majority of the tweakiness occurs when looping is enabled, but I’ve been able to create some pretty cool stuff with no problems at all. Between this system and the manager system, you should have all the tools you need to create some pretty awesome animations with minimal effort. [...]

  12. Ryan Taylor February 27th, 2007 11:39 pm

    Ok, I ported the virtual timeline animation system over to AS3 finally. For all of your animation sequence needs:

    http://www.boostworthy.com/blog/?p=124

  13. Ryan Taylor March 19th, 2007 11:37 pm

    Ok, wow, I had some really obvious errors in there. I cleaned it all up; should compile in Flex Builder 2 now. Thanks guys for bringing those to my attention.

  14. DevEvert March 27th, 2007 2:05 pm

    I’ve added the back.easeIn back.easeOut, and back.easeInOut types to the Transitions class for those of you who wanted that, as it is something I use a lot also. You can check it out here.

    http://www.devertdesign.com/boostworthyaddition/Transitions.as

  15. Ryan Taylor March 27th, 2007 8:25 pm

    Cool, thanks for posting that; I completely forgot to throw those in there last time I did some updates.

  16. Amit M April 13th, 2007 5:38 am

    Hi,

    Is there a way where I can move an object along a path. My requirement is to move an object in a circular path… how do I achieve this?

  17. Ryan Taylor April 13th, 2007 12:44 pm

    Amit,

    That’s a great question and I think I’m actually going to post a tutorial in the near future that explains how to approach complex animations like that.

  18. Awkward Aardvark April 18th, 2007 5:59 pm

    Hi Ryan.
    I saw your example and just want to say thanks for the efforts. I’ve looked for an AS3 alternative to AS2/Fuse and think I’ve found it.

    I’m currently trying to get it to work within a class that extends Sprite by referencing ‘this’ for the object, but it doesn’t seem to work with that. Is there another way, or does it have to reference an object further down?

    Thanks,
    Bjørn

  19. Ryan Taylor April 18th, 2007 6:47 pm

    Using ‘this’ as a reference should work just fine. If you post the code, I’d be happy to take a look at it for you.

  20. Awkward Aardvark April 19th, 2007 4:27 am

    I got it to work after some serious hair pulling. :) Here’s the code I was using

    1. package {
    2.     import flash.events.Event;
    3.     import flash.events.MouseEvent;
    4.     import flash.display.*;
    5.    
    6.     import com.boostworthy.core.Global;
    7.     import com.boostworthy.animation.AnimationManager;
    8.     import com.boostworthy.animation.Transitions;
    9.     import com.boostworthy.animation.RenderMethod;
    10.     import com.boostworthy.animation.events.AnimationEvent;
    11.  
    12.     public class ItemName extends Sprite
    13.         {
    14.         protected var animationManager:AnimationManager;
    15.        
    16.         public function ItemName(theString: String)
    17.         {
    18.             addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
    19.             addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
    20.            
    21.             var field:TextField2 = new TextField2(theString);
    22.             addChild(field);
    23.            
    24.             animationManager = new AnimationManager();
    25.             animationManager.InitColor(this, 0xEFEFEF);
    26.             RenderMethod.TIMER;
    27.         }
    28.        
    29.         public function mouseOverHandler(evt: MouseEvent):void
    30.         {
    31.             animationManager.Color(this, 0xFF0000, 500, Transitions.QUINT_OUT);
    32.         }
    33.        
    34.         public function mouseOutHandler(evt: MouseEvent):void
    35.         {
    36.             animationManager.Color(this, 0xEFEFEF, 500, Transitions.QUINT_OUT);
    37.         }
    38.   }
    39. }

    The structure is an Item with subclasses ItemName, ItemTime, ItemDescription (all look pretty much like the one pasted). The Item gets the name, time and description from XML, then passes each as a string to the relevant subclass.
    But as it is, there’s a seperate AnimationManager for each of the subclasses. Is this how it’s supposed to be used, or do I have a talent for deoptimizing? :)

  21. Ryan Taylor April 19th, 2007 8:40 am

    Glad you got it working.

    In the case of buttons or items, I usually create a class instance (static, in other words) of the animation manager that all objects of that type (as well as objects derived from that type) use.

  22. Matthew Wallace April 24th, 2007 1:16 pm

    Thanks for making this class. I look forward to learning more about how it works. In AS2 I have been using a package of classes called the FUSE KIT.

    Was wondering if you have the ability to do a Video Tutorial on how to set up and do animation with your system. I learn way better if I can see someone do this that reading a tone of project note. I would be glad to host the video tutorial for you if bandwidth is a concern.

    thanks,
    Matthew

  23. Ryan Taylor April 24th, 2007 11:04 pm

    Matthew,

    A video tutorial would be cool for sure. I’m currently working on version 2.0 of the system and it will include excellent documentation and a whole bunch of example files. I will certainly try and squeeze in some time for a video tutorial as well.

Leave a reply

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image