Advertisement
  1. Code
  2. Animation
Code

Quick Tip: Copying Timeline Animation into a Class

by
Difficulty:BeginnerLength:ShortLanguages:

In this tutorial we will use timeline animation to create a custom class. We will then use the class on two different and distinct MovieClips, effectively duplicating the animation to these symbols.


Brief Overview

One of the new features that came along in Flash CS3, along with ActionScript 3, was the ability to copy timeline animation as AS3 code. In this tutorial we will be creating a custom class that can be used on any movie clip you choose. The resulting class is mostly XML based and is not something you would want to write by hand -- well, not unless you are up for a lot of hard work and frustration!

In the example SWF above we are just growing and fading the MovieClips, but you could have a very complex animation and it would copy over to ActionScript just as well.The best thing about copying timeline animation into a class is reusability. You can see that the two symbols are following the exact same pattern of animation.


Step 1: Setting Up The Document

Open a new Flash Document and set the following properties

  • Document Size: 400x200px
  • Background Color: #FFFFFF

Step 2: Setting up the MovieClip

From the Tools Panel select the Oval Tool and draw a green circle on the stage. You can hold down the Shift key as you drag the circle out to the shape conform to a circle and not an extended ellipse.

Flash timeline animation as AS3 code

In the Properties panel give the circle the following dimensions

  • W: 27.00
  • H: 27.00
Flash timeline animation as AS3 code

Right-click on the circle you just created and choose "Convert To Symbol". Enter circle as the name and make sure the Type is set to Movie Clip.

Flash timeline animation as AS3 code

Step 3: Adding the Animation to the MovieClip

On the timeline, right-click at frame 60 and choose "Insert KeyFrame".

Flash timeline animation as AS3 code

Make sure you are still on frame 60 and in the Tools Panel use the Free Transform tool to drag the circle to approximately twice its original size.

Flash timeline animation as AS3 code
Flash timeline animation as AS3 code

Make sure you are still on frame 60 on the circle MovieClip. In the Properties panel choose "Color Effect". In the Style pulldown choose "Alpha" and set it to 0%.

Flash timeline animation as AS3 code

Click on the layer that the circle is on to make sure all the frames are highlighted. Alternatively, you can click on the first frame then Shift-click on the last frame to make sure all frames are highlighted. Then right-click anywhere between the highlighted frames and choose "Create Classic Tween".

You can now test your animation by going to Menu > Control > Play. You should have a growing and fading MovieClip.


Step 4: Copying the Animation

Now we are ready to copy our timeline animation and code our class.

Make sure all the frames are highlighted using the technique above. Then, right-click the tween in the timeline and choose "Copy Motion As ActionScript 3.0". In the prompt that comes up, give it the instance name of "GrowFade"

Flash timeline animation as AS3 code

Copy the code that appears on your clipboard.


Step 5: Coding the Class

Create a new ActionScript file by going to Menu > File > New and then choosing ActionScript File.

Flash timeline animation as AS3 code

Add the following code to the new AS file:

Here we open our package and do some imports. The Animator class is what is used to do the animating in our class. The function growAndFade() is where we will paste the copied ActionScript from the step above. We do this next.

Inside the growAndFade() function paste the ActionScript. If you need to copy it again just follow the steps above and make sure you give it the instance name "GrowFade".

The growAndFade function should now look something like this

We need to perform some cleanup work on this.

First we need to remove the import statement since we've already done this at the beginning of the class.

Next we'll want to declare the GrowFade_animator as a local variable to the class, so we move that to the top and instantiate it within the growAndFade function like so: GrowFade_animator = new Animator(GrowFade_xml, this)

You may have noticed we also changed the second parameter to this. The reason we did this is so we can use this class on any MovieClip; if we had not changed it to this then only classes with the instance name "GrowFade" would be able to use this class.

Here is the complete class with the new changes and one small addition. We will discuss this addition next.

You will notice we added the repeatCount property. Setting this specifies how many times to repeat the animation. Setting it to zero means it will repeat forever.


Step 6: Setting Up the MovieClips

Back in the FLA, delete the circle from the stage and remove all the frames from the timeline.

In the Library, right-click on the circle movie clip and choose "Properties".

Give the circle the Class Name "Circle" and set the Base Class to "GrowFade"; because the GrowFade class extends MovieClip we can use it as the Base Class of the Circle. We've not created a Circle class, but because we entered GrowFade as the Base Class, Flash will automatically create a class for the Circle that extends GrowFade, when the SWF is created. This is how we are able to use as many Movie Clips as we want, all sharing the GrowFade class.

Flash timeline animation as AS3 code

Next, draw a blue rectangle on the stage.

In the Properties panel give this rectangle the following properties:

  • W: 83.00
  • H: 30:00
Flash timeline animation as AS3 code

Right-click on the rectangle and choose "Convert To Symbol"; give it the name square.

Delete the rectangle from the stage. In the Library, right-click on the square MovieClip. Choose "Properties" and give it the Class Name "Square" and set the Base Class to "GrowFade" like we did with the circle above.

Flash timeline animation as AS3 code

Step 6: Applying the Class to the Movie Clips

Create a new ActionScript File, and add the following code to it:

Because we set the base class of the circle and square to GrowFade, we can call the growAndFade() method on them.

Set the movie's document class to Main and test the movie. You should have two separate movie clips using the same GrowAndFade animation.


Conclusion

Being able to copy timeline animation is a great addition to Flash. No matter how complex an animation you come up with, Flash can handle it for you, and being able to share the same animation across many different movie clips is a huge time saver.

I hope you have enjoyed this tutorial, thanks for reading!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.