Layers July/August 2008
Flash Tutorial (pp. 84–87)
Out of the box
With each release of Flash, Adobe tries to add as many cool new features as possible. Despite this, there are many community-based projects that have arisen to fill any missing gaps. In this tutorial, you’ll learn how to use the open-source TweenLite library to achieve some effects that would be next to impossible to duplicate using the Timeline in Flash alone.

[If you’d like to download the files used in this tutorial to practice these techniques, visit www.layersmagazine.com and navigate to the Magazine section. All files are for personal use only.]

1 [GET THE FILES]
Download the project files at the Layers website and unzip it to your desktop. Open the orb.fla file in Flash CS3. This Flash file contains two layers in the Timeline: one is named actions and will contain all of your ActionScript code; the other is named clips and will contain all of the visual assets. The frame rate has been set to 30 to make the animation nice and smooth. In the Library panel (Window>Library), you’ll see an image of a glassy orb created in Photoshop and a movie clip that contains the orb.

2 [DOWNLOAD THE LIBRARY]
The TweenLite library consists simply of an ActionScript file that you’ll be including in your project. Open a browser and navigate to http://blog.greensock.com/tweenliteas3. Click on the Download Now button to download the latest version as a ZIP file. Unzip it to your desktop. Inside of the TweenLiteAS3 folder you should see a folder named “gs.” This folder needs to be in the same

3 [IMPORT THE LIBRARY]
After downloading the TweenLite library, you need to import those files into your Flash project so that you can use them. Select the first keyframe in the actions layer and open the Actions panel (Window>Actions). The way that you import external ActionScript files into your project is by using the import command. Enter the code shown above into the Actions panel. This imports all of the ActionScript files found in the gs folder.

4 [CREATE THE BUTTON MOVIE CLIP]
Now you’ll create the movie clip that you’ll animate using TweenLite. Select the first keyframe in the clips layer and drag out a copy of the orb movie clip from the Library to the Stage. With it selected, give it an Instance Name of “innerOrb” in the Property inspector. We need to wrap this movie clip inside of another, so press the F8 key to open the Convert to Symbol dialog. Give this new movie clip a name of “orbButton” and then click OK. Give this newly created movie clip an Instance Name of “orb1” in the Property inspector.

5 [CREATE RECTANGLE FOR HIT STATE]
Double-click on the orbButton movie clip on the Stage to enter edit mode. We need to create a hit state for the button that will trigger the animation. Double-click Layer 1, rename it “orb,” and click the Insert Layer icon to create a new layer above it. Rename this layer “hit.” Get the Rectangle tool (R) and draw a rectangle over the innerOrb movie clip. It should cover the clip, so look at the Property inspector to make sure it’s positioned roughly at X:0 and Y:0 on the Stage. Since this rectangle is only for the hit state and shouldn’t be visible, remove any Stroke color and set the Fill Alpha value to 0% in the Color panel (Window>Color).

6 [CONVERT RECTANGLE TO MOVIE CLIP]
With the rectangle still selected, press the F8 key to open the Convert to Symbol dialog. Name it “hit,” select Movie Clip as the Type, and click OK. Now give it an Instance Name of “hit” in the Property inspector. In the final movie, when the user rolls over the hit movie clip, the orb will animate up, and when they roll off, the orb will return to its original position. Click Scene 1 under the Timeline to go back to the main Timeline.

7 [IMPORT BOUNCE & EASING EFFECTS]
Select the first keyframe in the actions layer and open up the Actions panel. The first thing you’ll need to do is import some ActionScript classes that describe the various types of easing effects that you can use with TweenLite. These include effects such as bounce and elastic easing. Type in the second line of code you see above into the Actions panel directly below the import statement that you entered in Step 3. With these two ActionScript libraries imported into your project, you can now begin writing the code to handle the rollover and rollout mouse events.

8 [TELL FLASH TO LISTEN TO THE MOUSE]
There are two mouse events that Flash needs to listen for. The first is the rollover event that gets fired anytime the user moves their mouse over the object, and the second is the rollout event that fires when the user moves their mouse off of the object. Type the next two lines of code into the Actions panel. In this code you’re telling Flash to call the orbOver function when the rollover event fires. In a similar fashion you’re telling Flash to call the orbOut function when the rollout event fires.

9 [WRITE THE ORBOVER FUNCTION]
Enter the next few lines of code into the Actions panel to assign your function. When the orbOver function is called, the TweenLite.to() function is called to make the animation start. The first thing we pass to the function is the object we want to animate. In this case, it’s the innerOrb clip. The second item is the time in seconds that we want the animation to take. Lastly, we pass in an object containing the destination values for whatever properties that we want to animate. Here we’re animating the Y position to –50. The ease property is set to Exponential.easeOut, which gives a strong easing effect.

10 [WRITE THE ORBOUT FUNCTION]
Type the next function into the Actions panel. When the orbOut function is called we’re again calling the TweenLite.to() function, but this time we’re animating the orb back down to its original Y position. Another difference is that we’re using Bounce.easeOut as the easing type, which will make the orb bounce back into place. Test the movie by hitting Command-Return (PC: Ctrl-Enter) and roll your mouse over the orb to see the animation. In the next step you’ll duplicate your work to add some more orbs.

11 [ADD MORE ORBS]
Now that you’ve successfully animated a single orb, you can duplicate your work to create a row of orbs. This could be useful as a site navigation element or quasi-Dock-look from a Mac. Click the clips layer in the Timeline, drag out additional orbButton movie clips from the Library panel onto the Stage, and align them as shown. Give each an Instance Name of orb along with the next number in the sequence. For instance, the next orb would have an Instance Name of “orb2,” etc. In this example we’ve added a total of five orbs but you can add however many you like.

12 [DUPLICATE YOUR CODE]
For each orb that you added to the Stage in Step 11, you’ll need to duplicate some of the ActionScript code. Click the first frame in the actions layer, copy lines 4 and 5, paste these lines for each additional orb, and change the Instance Name for the two events. The functions were written in such a way that they don’t need to be duplicated. All of the orbs will call those two functions. That way if you want to change something in the animation, you only need to do it in a single place.

13 [CONTINUE THE EXPERIMENT!]
I’ve shown you one effect out of potentially thousands that are possible using this code. You can play with animating different movie clip properties besides the Y property. You can also change the animations duration and/or easing types to achieve a wide range of different effects. TweenLite is just one community ActionScript library that makes things much easier for Flash developers. You should never reinvent the wheel unless you really have to.