boostworthyisryantaylor

AS3 Virtual Timeline Animation System :: v1.0

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

Earlier on, I introduced a virtual timeline animation system for AS2 that simplified the process of creating a sequence of animations with code. The system has proven to be quite useful, so I figured it was time to get the thing ported over to AS3. The concept is pretty simple; create a timeline, create tweens, add the tweens to the timeline, and then use basic controls such as Play, PlayReverse, Stop, NextFrame, and PrevFrame to control the timeline. Enough talk; it’s time for a demonstration.

In the example below, click and hold to play the animation forwards, and then release the mouse button to watch the animation play in reverse.

Creating this animation with the manager paradox would require a lot more effort. Below is some code straight out of the example file that created the animation above.

ActionScript
< view plain text >
  1. // Constructor
  2. //
  3. // Init this object.
  4. public function VTASTestApp()
  5. {
  6.     // Create a new timeline object.
  7.     // The parameter '60' is the frames per second you would like the timeline
  8.     // to play at. '60' also happens to be the default value if nothing is passed,
  9.     // but I wanted to pass it as an example.
  10.     m_objTimeline = new Timeline(60);
  11.    
  12.     // Create a series of tween objects.
  13.     // When they are added to a timeline, they are cloned and then added, so you can
  14.     // create these seperately and add them to multiple timeline objects if you wanted to.
  15.     var objTween_1:Tween  = new Tween(m_mcBox, "x",         400, 1,   60,  Transitions.SINE_IN_AND_OUT);
  16.     var objTween_2:Tween  = new Tween(m_mcBox, "y",         140, 40,  80,  Transitions.SINE_IN_AND_OUT);
  17.     var objTween_3:Tween  = new Tween(m_mcBox, "rotation", -180, 40,  80,  Transitions.SINE_IN_AND_OUT);
  18.     var objTween_4:Tween  = new Tween(m_mcBox, "x",         60,  61,  120, Transitions.SINE_IN_AND_OUT);
  19.     var objTween_5:Tween  = new Tween(m_mcBox, "y",         90,  100, 140, Transitions.SINE_IN_AND_OUT);
  20.     var objTween_6:Tween  = new Tween(m_mcBox, "rotation",  0,   100, 140, Transitions.SINE_IN_AND_OUT);
  21.     var objTween_7:Tween  = new Tween(m_mcBox, "x",         400, 121, 180, Transitions.SINE_IN_AND_OUT);
  22.     var objTween_8:Tween  = new Tween(m_mcBox, "y",         350, 160, 220, Transitions.SINE_IN_AND_OUT);
  23.     var objTween_9:Tween  = new Tween(m_mcBox, "rotation",  90,  150, 190, Transitions.SINE_IN_AND_OUT);
  24.     var objTween_10:Tween = new Tween(m_mcBox, "rotation",  180, 191, 230, Transitions.SINE_IN_AND_OUT);
  25.     var objTween_11:Tween = new Tween(m_mcBox, "x",         60,  191, 270, Transitions.SINE_IN_AND_OUT);
  26.     var objTween_12:Tween = new Tween(m_mcBox, "scaleX",    0.5, 191, 230, Transitions.SINE_IN_AND_OUT);
  27.     var objTween_13:Tween = new Tween(m_mcBox, "scaleY",    0.5, 191, 230, Transitions.SINE_IN_AND_OUT);
  28.     var objTween_14:Tween = new Tween(m_mcBox, "scaleX",    1,   231, 270, Transitions.SINE_IN_AND_OUT);
  29.     var objTween_15:Tween = new Tween(m_mcBox, "scaleY",    1,   231, 270, Transitions.SINE_IN_AND_OUT);
  30.    
  31.     // Add each tween to the timeline object.
  32.     m_objTimeline.AddTween(objTween_1);
  33.     m_objTimeline.AddTween(objTween_2);
  34.     m_objTimeline.AddTween(objTween_3);
  35.     m_objTimeline.AddTween(objTween_4);
  36.     m_objTimeline.AddTween(objTween_5);
  37.     m_objTimeline.AddTween(objTween_6);
  38.     m_objTimeline.AddTween(objTween_7);
  39.     m_objTimeline.AddTween(objTween_8);
  40.     m_objTimeline.AddTween(objTween_9);
  41.     m_objTimeline.AddTween(objTween_10);
  42.     m_objTimeline.AddTween(objTween_11);
  43.     m_objTimeline.AddTween(objTween_12);
  44.     m_objTimeline.AddTween(objTween_13);
  45.     m_objTimeline.AddTween(objTween_14);
  46.     m_objTimeline.AddTween(objTween_15);
  47.    
  48.     // Add event listeners to the stage for the mouse down and up events.
  49.     stage.addEventListener(MouseEvent.MOUSE_DOWN, OnMouseDown);
  50.     stage.addEventListener(MouseEvent.MOUSE_UP, OnMouseUp);
  51. }
  52.  
  53. // OnMouseDown
  54. //
  55. // Called when the mouse is down.
  56. protected function OnMouseDown(objEvent:MouseEvent):void
  57. {
  58.     // Play the timeline forwards.
  59.     m_objTimeline.Play();
  60. }
  61.  
  62. // OnMouseUp
  63. //
  64. // Called when the mouse is up.
  65. protected function OnMouseUp(objEvent:MouseEvent):void
  66. {
  67.     // Play the timeline in reverse.
  68.     m_objTimeline.PlayReverse();
  69. }

As you can see, the system is very intuitive. By listing out each tween and lining up the values in each column, you are essentially creating a dope sheet for the animation you are envisioning.

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.

So give it a try and let me know what you think. I’m probably aware of most of the bugs that exist, but feel free to post those as well. Enjoy!

Download ‘boostworthy_animation_AS3.zip’

3 comments

3 Comments so far

  1. [...] I used the example SWF file from my virtual timeline animation system in the template just to show that it can be any old SWF file that is published for Flash Player 9. [...]

  2. [...] One of the hot new features in Flash CS3 is the ability to generate code from animations created on the timeline. I was especially curious to see how they approached this. It turns out that the approach is very similar to that of my virtual timeline animation system, however they brilliantly use XML to map out the animation. [...]

  3. [...] takes 24 frames to move the image over and stop.||| Hey this tutorial might help you out a little: http://www.boostworthy.com/blog/?p=124 No related [...]

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