boostworthyisryantaylor

AS3 Animation System v2.0

v2: Because you deserve better.

You are a developer. As a developer, you need a powerful animation tool that can provide you with both simplicity and complexity at the same time. You need a clearly defined API for auto-completion; one that is nicely documented to make your life easier. That is what the version 2.0 release is all about.

Feature packed.

Here are some details regarding the system and it’s features.

    - Specify the use of ‘enter frame’ or ‘timer’ as your render method on a per-animation basis.
    - Easily complete many common animations using the animation manager with one line of code.
    - Create complex sequences of tweens and actions using the virtual timeline.
    - Easily animate any property of any filter.
    - Advanced color support that includes brightness, contrast, hue, and saturation.
    - Common interface used for garbage collecting throughout the entire package.
    - Create motion paths for display objects with the option to auto-orient to path.
    - Advanced animation support using paths as value maps.
    - Extremely extensible architecture.
    - Clearly defined API.
    - Full-blown documentation using ASDoc (same as Adobe livedocs).
    - Eleven example files ranging from basic to advanced usage and theory.

Between the large collection of example files and the thorough documentation, you will be up and running in no time.

Syntax examples…

Here are some very simple examples of what the syntax for creating animations looks like.

Animation Manager:

ActionScript
< view plain text >
  1. // Create a new animation manager.
  2. m_objAnimationManager = new AnimationManager();
  3.  
  4. // Move the box to the coordinate (100, 225). The animation will last 500 milliseconds,
  5. // use the 'cubic out' easing equation, and will be rendered using a timer.
  6. m_objAnimationManager.move(m_spBox, 100, 225, 500, Transitions.CUBIC_OUT, RenderMethod.TIMER);

Virtual Timeline:

ActionScript
< view plain text >
  1. // Create a new virtual timeline. The timeline will be rendered using the 'enter frame' event.
  2. m_objTimeline = new Timeline(RenderMethod.ENTER_FRAME);
  3.  
  4. // Add tweens to animate the box's coordinate to (500, 100). The values after the coordinate
  5. // values are the first and last keyframes of the tweens. Both tweens will be using the 'sine in and out'
  6. // easing equation.
  7. m_objTimeline.addTween(new Tween(m_spBox, "x", 500, 1, 15, Transitions.SINE_IN_AND_OUT));
  8. m_objTimeline.addTween(new Tween(m_spBox, "y", 100, 7, 22, Transitions.SINE_IN_AND_OUT));
  9.            
  10. // Add an action to frame number '7' of the timeline. You can specify seperate functions to be called
  11. // based on whether the timeline is playing forwards or backwards.
  12. m_objTimeline.addTween(new Action(doSomethingWhileGoingForwards, ["this is a sample parameter"], doSomethingWhileGoingBackwards, ["this is another sample parameter"], 7));
  13.  
  14. // Play the timeline forwards.
  15. m_objTimeline.play();

Compatibility

The system was developed using FlashDevelop, however everything has been tested in the Flash IDE as well. The bottom line is, whether you are developing from the Flash IDE or another tool that compiles using mxmlc, you will be error free.

Licensed to tween.

The system is licensed under the MIT license. That means that you are free to use it and modify it for both personal and commercial projects. I don’t want your money.

Still not convinced?

Additional information about the system, what it offers, and the theories behind it’s approaches can be found in the PDF document below.

View the ‘introduction.pdf’ file.

Get the goods.

Below is a zip file that contains the source, example files, documentation, license, and introduction. In the near future, I plan on offering the system on Google Code (or an alternative SVN solution) as well.

Download ‘boostworthy_animation_v2_1.zip’

The future.

There are many other systems out there that will benefit from the use of the Boostworthy AS3 Animation System, such as the Papervision3D project. Since not everyone has these separate systems, additional support for such packages will be offered as ‘plugins’. Right out of the box, you can animate anything, however ‘plugins’ will offer additional features and animation types that are optimized for the specific package they are geared towards.

If you create any plugins of your own and would like to share them with the world, feel free to send me an email using the address listed below.

Final word.

Many hours of thought and love went into the creation of this system. I hope you will find it as useful as I have when adding that special level of polish to your projects that make them stand out from the crowd. If you have any suggestions, feedback, or just want to talk AS3, send me an email at:

rtaylor11 [-at-] gmail.com

Thank you and enjoy.

111 comments

111 Comments so far

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

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

  3. [...] [Update: June 2nd, 2007] v2 is now live. [/Update] [...]

  4. Ben June 2nd, 2007 9:38 pm

    Ryan, this looks great…. I can’t wait to give it a go on a couple projects coming up.

  5. Ryan Taylor June 3rd, 2007 12:53 am

    Thanks Ben. Let me know how it goes.

  6. azad June 3rd, 2007 6:27 am

    thank you. now i am downloading. i loved this :”I don’t want your money.” :) . we give you our thanks..

  7. Tink June 3rd, 2007 10:43 am

    Any reason why your method names begin with caps? It’s standard in AS for method names to use lowerCamelCase.

  8. Ryan Taylor June 3rd, 2007 12:48 pm

    @Azad – You are certainly welcome.

    @Tink – When I was working at Electronic Arts, the software engineers were frequently working with our ActionScript files as well, so when we all sat down to establish scripting standards, a lot of the C++ standards were carried over. At first, I was uncomfortable with the practice of naming methods like that, but it ended up growing on me because it makes it easy to identify what is Adobe’s stuff and what is written by somebody else.

  9. matt June 4th, 2007 7:51 am

    This is great! I’m running through an example ‘BasicManagementExample.as’ I’m not getting the traces from these methods… ‘OnAnimationStart, OnAnimationChange, OnAnimationStop, OnAnimationFinish’. However if I put a trace in ‘OnMouseUp’ it works. Flash CS3. Is anyone else experiencing this?

    Cheers, MaTT

  10. matt June 4th, 2007 7:56 am

    ignore that last comment, doh, uncomment the listeners :/

    – MaTT

  11. [...] And at last but not least, Ryan Taylor has just announced his own AS3 tweening class, AS3 Animation System v2.0. It uses a different syntax approach than Tweener does, so if you don’t like Tweener’s loose syntax, be sure to check it out, as it also works with Papervision3D. [...]

  12. brice June 6th, 2007 11:45 am

    hi man, you have done a very good job!

    have you test your library with flex?

    I create a flex component in flash cs3 (with the flex component kit) using your Timeline class
    Then I import this component into flex to use it

    but the tween speed is slowly when I use the component in flex than when I test it in flash
    the problem is the same with RenderMethod.ENTER_FRAME or RenderMethod.TIMER

    do you know what is happening ?

    —————————————————-
    brice | http://www.aufondagauche.net (Flex-Flash-AS3)
    —————————————————-

  13. Tink June 6th, 2007 12:42 pm

    Thanks for the info back.

    If I was to use this I would definately convert it all back so there is some consistancey in the code I write.

    It really doesn’t matter who wrote what code, as long as it’s constant to use and works. I mean if I was worried about seperating code out by who had written it, I would have to write mine, diff to yours, and diff to Adobe’s, and diff to anyone else code i was using in the project, it would end up being a nightmare.

    I also wouldn’t recommend doing the opposite way round, i.e. change C++ coding standards to match ActionScript standards. The whole point of the standard is to have consistancey in that dev enviroment. When you switch dev enviroments, you have to switch methods and ways of coding etc. Changing methods names to a non standard naming convention still wouldn’t change this fact, as things are just diff in C++ than they are in AS (I know bugger all about C++).

    Anyway it looks like cool stuff, but i’d recommend changing it back, as 90%+ of the people who will utilize it, will be used to lowerCamelCase.

  14. Ryan Taylor June 6th, 2007 12:58 pm

    Tink, thanks for the thoughts.

    There will be a 2.1 release sometime in the near future that has been completely refactored to adhere to the Adobe standards. I don’t disagree with any of your comments; as I said before, the standards I used in this release are old habits; I think it’s definitely about time I got rid of them.

  15. Ryan Taylor June 6th, 2007 10:20 pm

    @Brice – Thanks for the kind words. I have not tested the system with Flex. I am not super surprised to hear that there was a bit of a performance hit though. I may do a post sometime in the future about optimizing Flex applications with animations since there is much to be said about that.

  16. Ryan Taylor June 7th, 2007 3:03 am

    The download has been upgraded to version ’2.1′. Out with the old naming convention habits, in with the new. There was also a minor bug fix as well.

  17. [...] The original post has been updated as well. [...]

  18. John Grden June 10th, 2007 7:08 am

    hey Ryan, just downloaded and plan to use on this classroom app.

    What’s the official name? BoostWorthy Animation? I want to make sure I tell the students the correct name ;)

    Also, @ the note about caps on methods: I’m not familiar with C standards, but one thing that I “like” about lowercase for methods is that it’s a first sign indicator about what you’re accessing.

    Is it a static method? Is it an instanced class object? Is it a singleton?

    I guess with the proper naming convention, you shouldn’t be too confused, but it’s been a rule for so long, i’ve gotten very used to using it as a way of id’ing somethings quickly. I would think doing an AS3 project like this would be counter-intuitive to the majority of Flash Developers who might want to use it. Not to mention the coding standards of the shops that *might want to use it in their setup.

    I think you should reconsider :)

    Just my 2 cents, but I’ve seen these types of little things ruin projects and take focus away from what’s really cool about it in the first place.

    anyway, I’m looking forward to having an api I can look at for once with an animation package ;)

  19. John Grden June 10th, 2007 7:13 am

    LOL, man, you might find this funny – I’ve had your page stuck in my FF tab for days now (because I knew I wanted to give it a go).

    without refreshing, I started reading (today) your comments and from Tink. Then I responded. Then, because the page refreshed, I see your note about fixing the lowercase issue ;)

    Well, if I’d given my feedback when I loaded the page, I’d have sounded relevant. As it turns out, i’m not!

    Thanks and I’ll give some feed back once I’m up and running

    John

  20. John Grden June 10th, 2007 7:28 am

    this all looks great so far Ryan! very nice work. I went for the sequence sample first, and that’s going to rock \m/

    One thought on Global – DisplayObjects all have the stage reference given to them when they’re added to a display list. And since all objects that can be animated eventually extend this object, do you think its still necessary to provide this?

    Now, as I’m saying that, this *would be cool to use in situations where you need access to stage coordinates/properties prior to being added to a display list. In that case, this would be cool.

    Just thinking out loud really and wondering what your motivation was for putting it in? I would figure with an animation project, the items would be added to display lists and have access to their own reference to “stage” – yes?

  21. John Grden June 10th, 2007 7:43 am

    I swear I’ll get out of your hair ;)

    Maybe consider changing your samples to use “handleMouseDown” rather than “onMouseDown” for method names. The reason is, the Flash IDE gives this error:

    Warning: 1090: Migration issue: The onMouseUp event handler is not triggered automatically by Flash Player at run time in ActionScript 3.0. You must first register this handler for the event using addEventListener ( ‘mouseUp’, callback_handler).

    It still works of course (it just throws it because it sees that you used a method called “onMouseUp”), but trust me when I say – people will let you know and it will become a thorn in your side ;) Some will think it’s an error they can’t get passed and it’s just not worth the hassle – trust me on that one.

  22. Ivan Todorov June 10th, 2007 10:59 am

    Ryan – great stuff – thanks for sharing and being part of the Free OS community.

  23. Ryan Taylor June 10th, 2007 2:28 pm

    John,

    No need to apologize, you aren’t in my hair at all; in fact, I really appreciate all the feedback. I can totally relate to the Firefox tab incident; I do that all the time! I’m very glad I refactored everything. I’m not sure why those old habits stuck with me so long, but they did.

    Regarding the use of the global stage reference, a lot of the animation methods require a display object, but some allow any object type. By using the global reference, you can render using the enter frame event without ever passing the system a display object, thus keeping things as flexible as possible. It is also nice to have that reference available throughout an application for other purposes as you mentioned.

    I did see that warning the Flash IDE spits out for the mouse event handlers. I couldn’t decide whether it was worth changing the method names or not. On one hand, using those method names is sort of traditional from AS2, so people will feel right at home. On the other hand, I don’t want people seeing that warning and thinking something is broken or not working. You’re probably right though, so I may change them in the future just to play it safe.

    As far as the name of the system goes, I need to come up with something clever, but as of right now it’s just Boostworthy Animation System. I’m open to ideas if you or anybody else has any.

    And again, thanks for all the feedback John; good stuff for sure!

  24. Ryan Taylor June 10th, 2007 2:31 pm

    Ivan,

    Thanks, it’s certainly a great community to be involved in.

  25. Chris Harglerode June 20th, 2007 10:23 am

    First of all, good job on the package. It’s nice to see a single solution for everyday needs and it’s very clean and easy to use.

    I just wanted to inform you of something I noticed today. The filter method in the AnimationManager is expecting a Number for nTargetValue, but that may have to be changed in the future. Not all filters accept a number for their target such as the ColorMatrixFilter. I may change things slightly unless there is a way to workaround the type conflict.

    Good job, keep it up.

  26. Ryan Taylor June 20th, 2007 10:18 pm

    Chris,

    The ‘FilterAnimation’ and ‘FilterTween’ classes are designed to handle most filter needs. There are some special cases like the ‘ColorMatrixFilter’ as you said, so special animation types for those special cases are needed. In the case of ‘ColorMatrixFilter’ specifically, the enhanced display object types located in the ‘core’ package use the ‘ColorMatrix’ class to allow various color transformations to occur.

    If you have any suggestions for special cases that you would like to see added, certainly let me know.

  27. Ryan Christensen [draw.logic] June 24th, 2007 12:59 pm

    Hy Ryan,

    Nice kit I plan on delving into it further later on. We currently use Tweener, ANimation package and sometimes TweenerLite for stuff. Your package seems like it is based on Fuse with more timeline and queuing of animation. The switch from enterframe to timer is nice also even though enterframe is most usable.

    I wonder what size this compiles to in an SWF will check that out.

    Also, when naming events I have switched to onMouseOverEvent or onEnterFrameEvent to stay consistent to old naming but not to throw those annoying warnings. Yes I KNOW they dont’ attach automatically.

    I am also torn over the naming as I woudl ike to adopt C3 or consistent naming across all our Java, C++, C# and AS3 apps but its a constant drama going back and forth. I think that capitalizing is fine if it is across a large library, if its jsut for AS3 maybe switch it.

    Nice kit though.

  28. [...] URL:  http://www.boostworthy.com/blog/?p=170 [...]

  29. [...] AS3 Easing TweenLite (AS3) AS3 Custom Tween API AS3 Animation System v2.0 tweener [...]

  30. [...] John posted up a video demonstrating the use of my animation system with Papervision3D in his latest demo: [...]

  31. Paul Wiscon July 12th, 2007 2:05 pm

    Hey Ryan,

    Thanks a million for the great work. Was wondering if you could show some examples of how to use the AnimationManager with the Timeline, if that’s even possible.

    I would love to be able to reuse the specific animations but also be able to add then in sequence.

    Any recommendations would be great.

    Thanks again!!!

  32. Peter Joe July 12th, 2007 9:53 pm

    Ryan, first off I must say you’ve done a fantastic job. It’s a great fresh take on things. I run into a stage issue and was wondering if there is some simple solution. I need to use the ELASTIC_OUT transition. Everything works fine when using the animation mgr, but not when a tween is declared directly. Seems to go straight to the default.

    Any ideas?

  33. Ryan Taylor July 12th, 2007 10:43 pm

    Paul,

    Thank you for the kind words, I appreciate that. In the current release, the systems are pretty separate in their usage. The best you can do right now to sequence animation types that are handled by the animation manager is to use timeline actions to call functions containing the animation manager calls. The ‘sequence_actions’ example included with the system is a good demonstration of this practice.

    Since actions allow you to call separate handlers for both forwards and reverse playback, this will certainly allow you to get the job done, however I agree that things do not mesh as well as they could, and this is something that I am working on addressing for future releases.

  34. Ryan Taylor July 13th, 2007 9:55 pm

    Peter,

    Thanks for bringing that to my attention. I will check things out this weekend and get back to you soon.

  35. [...] Since FuseKit doesn’t have an AS3 version, I’m going to use the Boost Animation System. It looks pretty full featured. [...]

  36. Tink August 12th, 2007 4:21 pm

    “I did see that warning the Flash IDE spits out for the mouse event handlers. I couldn’t decide whether it was worth changing the method names or not. On one hand, using those method names is sort of traditional from AS2, so people will feel right at home. On the other hand, I don’t want people seeing that warning and thinking something is broken or not working. You’re probably right though, so I may change them in the future just to play it safe.”

    I prefer to see all listeners beging with ‘on’. It makes it very clear to see your listeners and obviously you can group them easily by putting them in alphabetical order. Users can just turn warnings off.

  37. [...] Una de las razones por las que no me animaba a meterme de lleno a AS3, era que realmente si no habia algun ‘tweening engine’ bueno con el que pudiera hacer y deshacer lo que podia hacer con el antiguo FuseKit para AS2. Hoy me tope con dos paquetes de animacion, de los cuales la gente habla muy bien asi que decidi ponerme a compararlos y hacer mi desicion con cual me quedaria. Estos son Tweener y AS3 Animation System 2.0, la verdad es que sin duda me fui por el segundo (tambien conocido como “Boostworthy Animation system”) y basicamente fueron estas cuatro cosas lo que me convencio: [...]

  38. Daniel September 4th, 2007 8:03 pm

    Ryan, first of all thanks for sharing all your hard work with all of us. I was curious, is there a quick and easy way to add callback functions to the Animation Aanager? or should I just use the Virtual Timeline and add Actions? thanks!

  39. Daniel September 4th, 2007 8:48 pm

    Sorry, about my last post. I totally missed the Animation events, and it works now. thanks

  40. Ryan Taylor September 5th, 2007 12:29 am

    Daniel, thanks for the kind words. No worries. I chose not to implement callbacks simply in favor of using events instead. Both the animation manager and virtual timeline dispatch events for start, change, and finish which should cover most of your needs. However, as you mentioned, you can alternatively use actions with a virtual timeline to call functions at any specific time during an animation.

  41. dave September 5th, 2007 5:37 pm

    Hi,
    great work with the classes, but i’m having some trouble with the sequence_path example.

    I am just playing with the example in the downloadable zip in the examples folder under ‘sequence_path.’
    I have tried to add another curve for the block to follow, but it doesn’t seem to follow the complete path – http://www.bassmedia.net/sequence_path.html.

    All that is different from the example ‘as given’, is the line of code i have added below –
    m_objPath = new Path();
    m_objPath.moveTo(0, nY1);
    m_objPath.curveTo(nX1 – nX2, stage.stageHeight, nX1, nY1);
    m_objPath.curveTo(nX1 + nX2, 0, stage.stageWidth, nY1);
    m_objPath.curveTo(400, 500, 200, 350); //the added line by me.

    I thought it would just draw another curve and the block would follow.
    Am i missing some code?
    why would the block follow a different route?

    If you could shed some light on this, that would be great!!

  42. Ryan Taylor September 6th, 2007 10:32 pm

    Dave, thanks for posting. There are a few known bugs with the path support, and that is one of them. I haven’t had a chance to get them all worked out yet, but will be releasing an update in the near future with that type of issue resolved.

  43. dave September 7th, 2007 9:37 am

    Hi,
    for the time being, i suppose i would have to ‘play’ with the path until the object i’m animating went it the direction i intend it.
    Basically, trial and error until it looked right.

  44. Oscar September 8th, 2007 7:01 pm

    Hi,
    first, thanks for this great Animation Package.
    Only one question. Is there an right approach, on when you should make an new “AnimationManager” Object?

    For example, you only should make one AnimationManger Object in a complete App, and make with this reference the animations? Or you could also make more AnimationManager?

    Is there an right approach, or it doesn’t matter?

  45. Ryan Taylor September 9th, 2007 3:49 am

    Oscar, great question. It really depends on the situation and your own personal design preferences. Having a single instance of the animation manager in your main class and sharing it throughout your application is ok, but it is usually better to spread out your instances for the sake of events and also so you don’t have too much being managed by any one manager.

    Typically, I have an instance for each document class for animating the various pieces of the interface around. For something like a button, I create a static instance for all instances of that type to share.

  46. David September 14th, 2007 4:36 pm

    Great WORK!!!

    Just wondering if there is support for Bezier Animations?

  47. Ryan Taylor September 14th, 2007 11:21 pm

    David, if you are asking about support for animating along a path, the answer is yes. There are some demonstrations of creating path animations inside the example folder that should help get you started.

  48. David September 17th, 2007 12:39 pm

    Thanks Ryan I figued that out about 5 minutes later! I think this is an awesome package! I just have one more question. I have looked at Tweener, TweenLite, and yours, and I really like the structure and organization of your solution, but how does it rate in performance compared to the other solutions?

  49. Ryan Taylor September 17th, 2007 9:47 pm

    Thanks David. I haven’t done any head to head comparisons myself, but I have seen some tests being discussed in various mailing lists and the results were good.

  50. Justin Windle September 20th, 2007 3:55 am

    First of all, I love your engine, really great work. I double love the ease of colour transformation. But I quadruple love the virtual timeline. This is something I have recreated using Fuse will all sorts of callbacks and rubbush, yours is intuitive and flexible and the motion path is a fantastic touch also. I am an instant convert and will keenly follow new releases.

    I am working on some experiments with your package and will post them around once done. You deserve many shout outs, great stuff.

  51. Ryan Taylor September 20th, 2007 5:14 am

    Thanks Justin, I really appreciate that.

  52. Justin Windle September 24th, 2007 12:58 pm

    No, thank you! much respect ;)

  53. judy September 28th, 2007 3:01 pm

    Interesting, I have been trying all of the tween filters for AS3 I could find. So far I’ve seen a lot of great stuff including this one. Tweener, TweenLite, TweenFilterLite, and now this. This is definitely an interesting take. However, I seem to have instantly decided to try to do something it doesn’t quite know what to do with (though it puts forth a good try)

    I picked up the FilterManagementExample.as and tried to tween the glow’s color. Try tweening it simply from 0xff0000 to 0x00ff00 … let’s just say the results are kind of epileptic seizure inducing.

    Then again, I could just be doing something wrong again.

  54. hierro September 29th, 2007 10:43 pm

    Hi i was trying to use a virtual timeline using this :

    m_objTimeline.addTween(new FilterTween(_oldBM,BlurFilter,”blurX”,20,0,30))

    I get always this error :

    RenderFrame :: Constructor :: An invalid filter and/or filter property was specified.

    i found a throw error about checking starting values of object

    The error is the same with other filters, and of course i imported those classes and tried to forcecompile too

    i’m using flex 3, any hints ?

  55. hierro September 30th, 2007 4:09 pm

    just my fault, i thought FilterTween initializes his filter if not yet pushed in filters[] ;)

  56. charlie October 24th, 2007 10:43 pm

    Ryan,

    I share everybody’s thoughts. Great work and much appreciated.

    I might be overlooking something, but I’m finding some limitations when trying to animate with color. I’d like to take an existing (fairly complex) sub Class of a Sprite and animate it from a black tint to untinted.

    As far as I can tell, the only way I can do that within this system is to have that complex class extend your core.EnhancedSprite class, which I’d like to avoid.

    Is it possible to animate a colorTransform without relying on the ColorTransform().color property and without using the core.EnhancedSprite Class?

  57. ali October 25th, 2007 1:55 pm

    Thanks for a great animation engine Ryan, one thing I can’t figure out is I can run the animations fine when I preview in Flash CS3 but when I run the swf in Flash Player I can’t get them to work.
    If you have any suggestions as to what I’m doing wrong I would be really thankful to hear them.
    Cheers!
    Ali

  58. nomiad October 26th, 2007 2:20 pm

    Hi, ive tested the system with ASWing.
    Ive implemented a custom Layout driven by BoothworthyAnimation.
    Ive used the animation managager. Every component fades on resize to its destinied position. Looks awsome, and jip the best of all LOW CPU Costs with around 40 buttons and no optimisation.

    Sample here: (only a quick test)
    http://temp.web-specials.net/tests/animationResizeAswing.swf

    cu nomIad

  59. Ryan Taylor October 28th, 2007 11:18 am

    @charlie – Thanks for the kind words. While subclassing EnhancedSprite will certainly give you more control over animating various color related properties, you can still animate color without it. Have a look at the ‘color’ method of the AnimationManager. Internally, what it does is animate the redOffset, greenOffset, and blueOffset properties of the display object’s ColorTransform object. The reason for the EnhancedSprite is that it has an instance of a ColorMatrix object in which is used to manipulate more advanced color properties such as tint, hue, and saturation. I hope that makes sense.

    @ali – You’re certainly welcome. The only thing that immediately comes to mind is that your standalone player version is probably not 9, where as inside Flash CS3 it is.

  60. ali November 16th, 2007 11:51 am

    Hmm, I’m still to check out what version of player I’m running on my home computer though that’s the likely reason, thanks for your response Ryan.

    I have another request if anyone could give me a hand. I want to animate a tint but I’m not sure of the syntax as I can’t find it in any of the examples or documents (I’m sure I’m missing it somewhere!).
    I’d like the tint to be a tween that is part of a timeline object rather than an AnimationManager instance.

    I guess it looks something like this:
    m_objTimeline.addTween(new Tween(m_spBox.colorMatrix, “tint”, 30, 1, 10, Transitions.SINE_IN_AND_OUT));

    If someone could point me in the right direction I would be realyl grateful.

    Cheers!
    Ali

  61. Ryan Taylor November 17th, 2007 6:58 pm

    @ali – You have a couple of options for how you can accomplish that. Using the approach that you listed, you can animate the hue and/or saturation (of the colorMatrix) to get an effect like the one you are looking for. There is no equivalent of the color animation type in the animation manager; however, you can create an Action for calling a function that contains an animation manager call inside of it. Have a look at the ‘sequence_actions’ example to see what I am talking about. Hope that helps!

  62. ali November 18th, 2007 7:03 am

    Hi Ryan, thanks again for your help and for your quick response. I’ve spent a couple of hours trying to figure this out this morning and I still can’t achieve the animation I want. I would like to tint my Sprite green (initially with no tint visible) then tween the percentage of the tint up and down. Here are the problems I’ve come across when trying the solutions you suggested:

    - Animate the hue and/or saturation (of the colorMatrix):
    I’m not sure how to set the color of the tint if I used the colorMatrix property of the enhanced sprite. I am only tweening the brightness and saturation of the sprite as it is normally. I’ve read around the colorMatrix a bit though I’m not sure how to tint a Sprite to the desired hex value. Maybe I need to spend some time to understand the colorMatrix.

    -Create an Action for calling a function that contains an animation manager call:
    When I use the Animation manager from the Action method I have to use initColor() to set the tint color and this completely colours my movieclip the tint colour before I start. If I don’t use initColor then the colour changes without a tween when the function is called.

    Another problem I am having is that these methods are completely coloring the Sprite as if it is a single shape rather than tinting it as you would using the tint slider in the properties panel.

    I’m sorry this is dragging on, maybe I am trying to use the animation system for something that it isn’t meant for. I’ve spent quite a few hours getting my head around how the system works and it’s great but I just can’t figure this one out.

    Thanks again,
    Ali

  63. Ryan Taylor November 19th, 2007 1:03 am

    @ali – Ah, I’m with you now. The ColorMatrix class currently does not include a tint getter/setter due to some issues I was having implementing it correctly way back when. I think your best bet would be to create an overlay sprite above the graphic you are trying to tint and animate it’s alpha. This would give you something pretty close to what you are aiming for. If I get some free time here soon, I’ll try and get a tint method added to the ColorMatrix class.

  64. ali November 20th, 2007 9:24 pm

    Thanks for your response Ryan and for your suggestion. I’ve been using your engine a lot recently in a project I’m working on and I love the do Action methods to call functions and pass different variables when playing timelines back and forth it’s a great feature.
    Btw I was trying to play yr swf in Flash Player 8 as you suspected, my os was using the old version of the player as the default.
    Kind regards,
    Ali

  65. Ali November 23rd, 2007 8:42 am

    Hi Ryan, just a quick question;
    I’ve set up an FLA that has a document class this contains my Global.stage referenc. The problem is Iam loading the compiled swf into another preloader swf and get this error message:

    Renderer (WARNING) :: startEnterFrame :: Unable to add a listener to the enter frame event because a global stage reference does not exist.

    Any help appreciated, thanks, I’ve tried passing a reference to the stage through but I have items in my library I am using.
    Thanks,
    Ali

  66. Stephen Melrose November 25th, 2007 7:19 pm

    The animations I get from using this package are SO much cleaner and smoother than using the built in Tween classes.

    Thank you for a great package, much appreciated.

  67. Ali November 28th, 2007 11:03 am

    Sorry to keep bugging you about this, I don’t think I explained my question very well.

    My SWF works great when I run it alone but if I load this SWF (that has an instance of a Timeline and a Global.stage reference set) into another SWF I get the error message:

    Renderer (WARNING) :: startEnterFrame :: Unable to add a listener to the enter frame event because a global stage reference does not exist.

    Maybe the Animation system won’t work in SWFs that have been loaded into other SWFs if anyone could let me know that would be great.
    Many thanks
    Ali

  68. Ryan Taylor November 30th, 2007 10:35 am

    @Stephen – Thank you very much for the feedback.

    @Ali – No need to apologize; I’ve been out of town, so I’m slowly getting caught up on things. Usually in a situation like this, you need to place the static class inside your main application class. That happens frequently in modular Flex applications with the manager classes as well. Give that a try and let me know if that solves the issue.

  69. Ronan Rafferty December 6th, 2007 9:28 am

    Brilliant bit of kit mate. Any way of adding a scrollRect feature to mask out areas of the screen on animated objects?

    Probably overkill.

  70. Ronan Rafferty December 6th, 2007 9:52 am

    Also any way to set the timeline to play as a factor of speed, say x2 x4. I’ve tried setting the refresh rate but it doesn’t do it. Currently I replace the timeline for double speed animations (forward and back on a timeline player).

    Thanks in advance or I understand in advance :D

  71. Ryan Taylor December 10th, 2007 1:10 am

    @Ronan – The scrollRect is a neat idea; however, I could see it potentially causing some issues since the objects being animated could be nested in various containers and components. In a situation where all of your animated objects are in a single container, it’s easy enough just to mask that container, so I don’t really see the need. As far as the factor of speed goes, I currently do not have any support for speed multipliers in the API. The refresh rate is used for rendering with a Timer and affects the smoothness of the animation, not the speed of the animation itself. I could definitely see that being a feature I may add in the future though.

  72. hierro December 20th, 2007 11:43 am

    Hi all, I’m trying to use the anumation package within my application, let’s say i have a sprite and i want to saturate/desaturate it…how can i do it ?

    thank is advance for interest, hierro.

  73. Flyer December 25th, 2007 7:53 am

    Thanks for a great animation engine Ryan, one thing I can’t figure out is I can run the animations fine when I preview in Flash CS3 but when I run the swf in Flash Player I can’t get them to work

  74. Ali January 11th, 2008 7:16 am

    Ryan, thanks for your continued help, I still can’t get this to work so I can’t load my swfs with boostwortyth animations into other movie clips.

    As far as I can understand you are suggesting that my reference to the static class (I guess you mean the Global.stage) should exist in the top level movie (the root in as2 speak).
    I’ve removed all references to the Global.stage from my classes and have now put this in my fla that I load my swf into like this:

    import com.boostworthy.core.Global;
    Global.stage = stage;

    But no cigar !:(

    I’m sure I have got the wrong end of the stick, if you could let me know where I need to put my code that would be really helpful.

    Thanks again,
    Ali

  75. Ali January 11th, 2008 10:06 am

    I have it working now! It was very simple, I just instantiated the document class as a class on the timeline and passed a reference to my App class. In case anybody else had the same problem:
    var stageMC:MovieClip;
    public function App(mc:MovieClip){
    stageMC = mc
    init();
    }
    public function init() {
    Global.stage = stageMC.stage;
    }
    A very simple solution, my problem was that my document class couldn’t access the stage property when loaded into another movie.
    Thanks for all of your help Ryan and thanks for such a neat class :)
    Ali

  76. derean February 23rd, 2008 12:36 am

    Good work on the library Ryan, however for games it doesn’t really work well.

    Frame based animation is quite evil when frame rate drops as animations slow to a crawl, all games today rely on time based animation.

    Anyone looking into this library for gaming purposes should be aware of its shortcomings. Their game will be unplayable if FPS is not steady 60 fps (as it usually isnt going to lower end machines).

    Great piece of work tho, I love your ColorMatrix object.

  77. Ryan Taylor February 24th, 2008 3:17 am

    @derean – Thanks for the feedback. I have certainly learned a lot with this iteration of my animation system and, though it’s features are nice, it does come up a little short in terms of performance in aggressive usage. Fortunately, I am currently working on the next version of my system which revolves around top-notch performance. More info on that can be found here.

  78. Brandon Plasters March 9th, 2008 9:44 pm

    Hi Ryan,

    Is there a way to add a PathTween to the stage directly, or does it need to be added to a Timeline obj?

    thanks and great work!
    -bp

  79. Ryan Taylor March 9th, 2008 10:57 pm

    @Brandon – Thanks man. The PathTween object is just a wrapper around some instructions for animating a given object along a given path. Since a PathTween isn’t a DisplayObject, you can’t add it to the stage or any other DisplayContainer. If you are looking to avoid the Timeline object, you can rig up the Path object to a DisplayObject’s property manually on your own and avoid the PathTween altogether. Does that answer your question?

  80. Brandon Plasters March 9th, 2008 11:23 pm

    Ryan- yes it does. And you were right, I was trying to avoid the timeline obj. Now for the rigging… -b

  81. Aaron March 22nd, 2008 2:51 pm

    I’m having a bit of trouble doing an animation sequence involving drawing and animating a variable amount of shapes. It should read in a list of items from an external source and sequentially draw a square for each one. It should start the square off at 1px height, and then animate it to 57 pixels, halfway thru the animation it should draw the second one and start its animation, etc. The way I have it now, it first creates an array of generic shape objects:

    for( var i = 0; i

  82. summer April 24th, 2008 8:31 am

    In response to Ali:

    The stage cannot be accessed because the code in the constructor is run before the clip has been added to stage. try this in the clip to be loaded:

    public function theConstructor()
    {
    addEventListener(Event.ADDED_TO_STAGE, addedHandler);
    }
    private function addedHandler(e:Event):void
    {
    Global.stage = stage;
    initTheRestOfTheApp()
    }

  83. sohbet April 28th, 2008 7:40 am

    Thanks for a great animation engine Ryan, one thing I can’t figure out is I can run the animations fine when I preview in Flash CS3 but when I run the swf in Flash Player I can’t get them to work

  84. sohbet April 28th, 2008 8:53 am

    getter/setter due to some issues I was having implementing it correctly way back when. I think your best bet would be to create an overlay sprite above the graphic you are trying to tint and animate it’s alpha. This would give you something pretty close to what you are aiming for. If I get some free time here soon, I’ll try and get a tint method added to the ColorMatrix class.

  85. Joe July 7th, 2008 3:40 pm

    Interesting engine. When was the last time this was updated? Reading through your blog it appears that there are some bugfixes that are necessary? It would be nice if you would provide a project bug tracker…

  86. Hadrien July 9th, 2008 1:24 pm

    Ryan : You writed in June 2007 “I plan on offering the system on Google Code (or an alternative SVN solution) as well.”

    I think your great animation engine deserve it. It is one really important thing missing. Google code is a really good option. If you do not have time for doing it, let us know, I would love to help and I am sure I am not the only one.

    Thank you.

  87. Ryan Taylor July 10th, 2008 1:49 am

    @Joe – I haven’t updated the engine in nearly a year. I have been overwhelmed with other tasks and simply haven’t been able to commit time towards the library. I did get started on the next iteration of my system earlier this year though and I do plan on using Mantis for bug tracking.

    @Hadrien – I certainly appreciate that. You’re definitely right, I need to set aside some time this month for getting that setup finally. I will post an update on my blog as soon as I do so. Thanks for bringing that to my attention!

  88. Hadrien July 16th, 2008 3:46 pm

    @Ryan – Cool! As I said, I will take time to help if you need.

  89. Hadrien July 16th, 2008 3:51 pm

    @Ryan – Moreover : if you set a project on google code (i.e. like Tweener) or anything else, you will get tons more feedbacks and help for continuing the project with taking less of your time as a community will grow around project.

    (my english sucks, doesn’t it? ;)

  90. kpss September 13th, 2008 10:14 am

    thanks and great work!

  91. Burrows September 17th, 2008 9:52 am

    thx for your sharing

  92. kuriusOne December 21st, 2008 3:12 am

    first of all, bravo. very in depth, thank you! i deffinitely want to use this!

    i was curious though, will you have move on the z axis implemented sometime and rotation on the new 3d axis for cs4?

  93. Registry Cleaner February 5th, 2009 1:10 am

    Thank you for this code

  94. Jesse February 12th, 2009 2:54 pm

    Can audio be added to the virtual timeline??

  95. Aries February 16th, 2009 2:45 am

    It’s good program animation~

  96. Anthony February 16th, 2009 10:49 pm

    Very nice engine! I love it. super simple.

    but i was wondering. is it possible to get the tweens to work with a target camera?

    (btw im a total n00b with AS3)

  97. Albino June 18th, 2009 8:29 am

    Loving this library!
    What if I want to set a reg point?
    I have a movieclip to resize [m_objAnimationManager.size(etc,etc,etc)] but even if I manually set the reg point in the middle of the movieclip it resizes like the reg point would be on the top left corner…

  98. Adnan Doric September 2nd, 2009 7:51 am

    Hello, any news on the next iteration, or maybe opensourcing the project ?

    Keep doing good work :)
    Adnan

  99. football manager January 22nd, 2010 7:08 am

    What if I want to set a reg point?

  100. [...] — «???????????» ?????? Tweensy. GoASAP (ActionScript Animation Platform) AS3 Animation System 2.0 Animation Package KitchenSync Gyro – A tween and animation library for ActionScript 3. gTween [...]

  101. AS3 Code Libraries (APIs) | bytecoderz blog February 2nd, 2011 3:40 am

    [...] AS3 Animation System 2.0 http://www.boostworthy.com/blog/?p=170 [...]

  102. [...] AS3 Animation System [...]

  103. [...] AS3 Animation System v2.0 [...]

  104. ActionScript Library July 8th, 2011 5:41 am
  105. [...] AS3 Animation System 2.0 http://www.boostworthy.com/blog/?p=170 [...]

  106. ??????????Flash????? | Wersling's Blog July 22nd, 2011 4:33 am

    [...] boostworthy : ???? tweener ??????????????????????????????????????????demo???????????????????? [...]

  107. [...] Downs) Carlos Ulloa Unit Zero One (Ralph Hauwert) Tinic Uro Jesse Warden Tweening Animation PackageAS3 Animation System v. 2.0asinmotionGoTween Lite, [...]

  108. [...] Downs) Carlos Ulloa Unit Zero One (Ralph Hauwert) Tinic Uro Jesse Warden Tweening Animation PackageAS3 Animation System v. 2.0asinmotionGoTween Lite, [...]

  109. Flex???? « XuYin's Blog! February 21st, 2012 12:30 am
  110. [...] the story for me, but somehow Tweener is lacking some funcionalities that would like so i moved to Boostworthy's engine and again I found myself lacking some of the things i had in Tweener. So I kept searching [...]

  111. AS3 Class Library October 21st, 2012 9:46 pm

    [...] AS3 Animation System 2.0 http://www.boostworthy.com/blog/?p=170 [...]

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