Adobe Flash CS4 Professional introduces a revamped animation engine that is easy to use and more powerful than previous versions. When you have mastered the basics of the engine, Flash gives you added capabilities to extend your creative possibilities.
In this article, I show you how to import artwork to Flash CS4, create an animation, and change an animation after you've created it.
REQUIREMENTS
To make the most of this article, you need the following software and sample file:
Flash CS4 Professional
Sample file:
- Go.png (PNG, 75K)
IMPORTING ARTWORK TO FLASH
With Flash CS4, you can import content from multiple Adobe Creative Suite CS4 applications, including Adobe Photoshop, Adobe Illustrator, and Adobe Fireworks, as well as from Adobe InDesign CS4 and Adobe After Effects CS4.
In this example, we import artwork from Fireworks. With Fireworks CS4, you can work with both raster and vector content. Raster files (or bitmaps) become pixelated when you resize them. A photograph is an example of a raster graphic file. Vector files, on the other hand, do not pixelate when you resize them. The paths of a vector graphic simply redraw no matter how much you expand or reduce it.
In Fireworks CS4, you can create assets to import to Flash CS4. For this example, I have created a vector polygon with a gradient fill and a stroke that is grouped with a text field (see Figure 1). This Fireworks file is saved as a PNG file, which can then be imported to Flash CS4.
Figure 1. Vector graphic created with Fireworks
To import the file, you must first create a new Flash CS4 document by selecting Flash File (ActionScript 3.0) from the Create New column on the Flash startup screen.
To import the Fireworks PNG file, choose File > Import. You have two import options: you can import either to the Stage or the Library. The Stage is the main animation area for the movie you're creating with Flash. The Library is a bank of assets or graphics that are part of the project but not necessarily on the Stage. The Library contains assets that you either create in Flash or import from other applications.
Import the Fireworks PNG design to the Flash CS4 Library by choosing File > Import > Import To Library. Then browse to the file and click Import To Library. In the Import Fireworks Document dialog box, select the options shown in Figure 2.
Figure 2. Fireworks import dialog box in Flash CS4 Professional
For this example, you want to keep the vector design editable instead of converting it to a raster or bitmap design. For designs that are more complex, you may want to import as a bitmap to maintain the appearance.
When you click OK, the Fireworks asset is imported to Flash. To see the imported assets, click the Library tab. When the assets are imported, the design is automatically converted to a graphic called Go.png.
To position the graphic on the Stage, drag and drop the Go.png asset from the Library panel to the Stage. Position the object in the upper left corner. If you don't position it in the correct location initially, you can reposition it using the mouse by dragging and dropping the graphic to the correct position. Your file should look like Figure 3.
Figure 3. Starting position on the Stage for the Go graphic
CREATING AN ANIMATION
Now, let's say you want to make an animation that will move the asset from the upper left corner to the lower right corner.
First, you need to tell Flash that you want to tween the object. When you use a tween, you tell Flash where on the Stage you want the object in the animation to start and end. Flash will automatically fill in the frames between the start and end points that you define.
There are two types of tweening in Flash: motion and shape. Since you are moving the Go graphic instead of changing its shape, you need to create a motion tween. To do this, right-click the object in Flash and select Create Motion Tween.
Now you'll notice that the Timeline at the bottom of the application has changed.
The Timeline represents how the animation looks and behaves from the time it starts moving until it arrives at its destination. The Timeline is broken up into frames, or individual points in time, that display the animation.
By default, Flash displays individual frames at a rate of 24 per second, which means that for each second the animation is playing, 24 frames are displayed. In the Timeline, the red indicator is the playhead, which shows what frame you are currently displaying in the Flash application.
Before you added the motion tween, the Timeline was a single frame, containing the object you placed onto the Stage. When you created the tween, Flash extended the Timeline by 24 frames and positioned the playhead at the end of the tween.
Now that you are at the end of the tween, you want the Go graphic to be at the lower right corner of the Stage. To change its location, simply drag and drop the graphic to the desired location. With the playhead on frame 24, move the Go symbol to the lower right corner of the Stage (see Figure 4).
Figure 4. Setting the Go graphic's final destination in the animation
After you drop the object, you'll notice a line with dots appear from the graphic's starting location (the origin) to the final location (the destination). That line is called the motion path. It won't actually show when you publish your file, but it is a visual cue to show you the path the graphic will take as it moves from the origin to the destination.
Now that the destination has been set, you can click and drag the playhead to show the animation on the Timeline. Click and drag the playhead to frame 1, and then press Return to play the animation in Flash. You'll see the object move from the upper left to the lower right.
Now, you can preview how it will look in Flash Player. It is a good idea to test your animations in Flash Player as well as in Flash CS4, since the Flash Player preview more accurately represents the timing and actions you may use to control and update your animation. To preview in Flash Player, Choose Control > Test Movie from the main Flash menu.
Now you'll see a new window appear that displays the animation. The animation will simply loop because you haven't told the animation when to stop. We'll take care of that later.
CHANGING AN ANIMATION AFTER IT IS CREATED
Now that you have created the initial animation, you can modify and extend it using Flash CS4. First, let's change the direction of the animation.
Your current animation moves the Go symbol from the upper left to the lower right corner of the Stage. But now you want to change the destination from the lower right corner to the upper right corner.
To make this change, make sure you're at the destination point by dragging the playhead to the last frame of the animation: frame 24.
To move the destination of the Go symbol, and therefore the direction of the animation, simply click and drag the symbol to the new desired location. For this example, move it to the upper right corner of the Stage.
Now the motion path has been updated. If you run or test the animation, the animation will now move the graphic across the Stage from left to right instead of down the Stage diagonally.
You can also change the origin of the animation using these steps, but you need to move the playhead to the first frame, or frame 1, to make that change. In this example, let's move the origin from the upper left to the lower left corner.
First, move the playhead to frame 1. Then click and drag the Go symbol to the lower left corner of the Stage.
Now the animation and the motion path reflect the new origin of the animation. You can continually update the origin and destination of your animations using the same methods. Simply move the playhead to the beginning or end of the tween and then move the object to the new desired location.
ADDING MIDPOINTS TO YOUR ANIMATION
Creating point-to-point animations may be easy, but they are relatively boring. More complex animations usually have several midpoints in the tween to give the desired effect.
For instance, in this example, you may want the animation to move from corner to corner to corner, starting in the lower left, moving to the upper left, and ending in the upper right.
To do this, you need to add an intermediate location at the middle of the animation. The process is the same as setting the origin or destination points, however you now need to move the playhead to the middle of the animation.
Move the playhead to frame 12 (see Figure 5).
Figure 5. Adding an intermediate location, or midpoint, to the animation
At the bottom of the Timeline is a small text indicator that shows the current position of the playhead. You can click and drag your mouse to scrub to a specific point or double-click the indicator and enter the location manually.
Now that the playhead is at the correct location, the animation shows the symbol in the middle of the motion path. If you look carefully, you'll notice tiny dots along the motion path (see Figure 6). These dots represent the location of the object at each individual frame. There are 12 dots from the start point to the current point of the symbol because your animation is now on frame 12. The black circle in the center of the Go symbol is its registration point, which is where it positions itself relative to the location on the motion path.
Figure 6. Motion path displaying the location of the object at each frame as well as the point the object is positioned on the path
To create a new intermediate destination for the symbol, click and drag it to the upper left corner of the Stage.
You now have a three-point animation that starts in the lower left corner, moves to the upper left corner, and winds up at the upper right corner.
In the Timeline, a small black dot now appears in frame 12, which shows that you have created an intermediate location that the tween will use to create the animation. If you want to change this intermediate point, move the playhead to this point in the Timeline and then drag and drop the object. That will update the motion path with the new intermediate point.
You can continue to add intermediate points throughout the animation, with a maximum of one per frame. Just move the playhead to the desired frame and then move the object.
CHANGING THE ANIMATION'S DURATION
So far, you have changed the location of the graphic throughout the animation, but you haven't changed the duration. The duration is the amount of time that the animation runs. In this example, the duration of your tween is 24 frames. With a default frame rate of 24 frames per second, your animation will run for one second.
If you want to change the duration of the entire animation, you need to change the Timeline animation layer. Each tween is represented as an individual layer in Flash. To change the duration, simply drag the end of the tween to either lengthen or shorten the duration.
If you want your animation to play for two seconds at a frame rate of 24 frames per second, then lengthen it to 48 frames by moving your mouse pointer to the end of the tween in the Timeline. When the mouse icon changes to a left-right arrow, click and drag the tween to the right to extend it to frame 48.
When you let go of the mouse button, the animation will proportionally update to represent the new desired duration. You'll notice that the intermediate point has also moved to the new midpoint of the tween.
The motion path now has twice as many dots because it is now extended over 48 frames, and each dot represents where the Go graphic is on any given frame.
You can also shorten your animation back to 24 frames by clicking and dragging the left end of the tween on the Timeline back to frame 24.
ADDING A CURVE TO THE MOTION PATH
Each segment of the motion path is editable as well. For instance, the animation now moves the symbol from point to point to point in a straight line. You can alter that and have the tween move the animation along a curve by simply dragging and dropping with your mouse.
Once the Go symbol has moved to the upper left corner, let's make it move to the upper right corner on a curved path instead of a straight path. To do this, just drag and drop the motion path in the second part of the tween.
Make sure you choose the selection tool (with the dark arrow icon) from the Tool menu.
Then move your mouse over the motion path along the top of the Stage. You'll see a curved line icon appear next to the mouse pointer, which means you can now drag and drop the motion path to build a curve.
Now let's create a curved path from the upper left corner down toward the center of the Stage and then up to the right corner. With the mouse pointer showing the curved line icon, click and drag the middle portion of the motion path down toward the center of the Stage (see Figure 7).
Figure 7. Changing a straight path to a curved path
When you release the mouse button, the motion path updates and shows you the curve. Now when you preview the animation, the symbol will follow the curve you just created. You can click and drag the curve again if you want to change the curve ratio between tween points.
RESIZING AND ROTATING THE ANIMATION
You can also manipulate the motion path using the Transform tool. The Transform tool enables you to resize, rotate, skew, or stretch objects in Flash. You can rotate the motion path of the animation, changing the locations of the origin, intermediate, and destination points, without rotating the symbol itself.
To do this, select the motion path with the Selection tool. The path will darken to indicate that it is selected.
You can now move or reposition the motion path by clicking and dragging it. For this example, however, select the Transform tool. Make sure the motion path is selected and then choose the Transform tool.
Once you select the Transform tool, a box with squares along the edge appears around the motion path. This is called a bounding box, and the squares are called handles. If you click and drag a handle, you can resize the contents of the bounding box — which in this case is the motion path — in various directions. If you position your mouse pointer slightly outside the corner handles, the mouse pointer will change to show that you can rotate the contents of the bounding box.
When the rotation icon appears, you can click and drag to change the rotation of the motion path for the animation. For this example, click and rotate the animation 90 degrees clockwise.
Then let go of the mouse button, and you'll see that the motion path has changed (see Figure 8).
Figure 8. Rotating the direction of the animation
Now let's adjust the height of the bounding box to keep the animation within the confines of the Stage. Select the top handle and move it down. Then move the bottom handle up (see Figure 9).
Figure 9. Resizing the motion path of the animation
The animation has now been rotated and resized. If you test the animation, you'll see that its path has been updated, but the symbol itself doesn't rotate because you only modified the path, not the object on the path.
To finish the animation, all you need to do is add your stop action to the end of the Timeline. Click the New Layer button at the bottom of the Timeline to create a new layer.
Now make sure you are on the last frame of the animation, select the new layer, and create a new blank keyframe by choosing Insert > Timeline > Blank Keyframe from the main menu.
Open the Actions panel by choosing Window > Actions. Make sure you have selected the correct layer and that your playhead is on the new blank keyframe you created. In the Actions panel (see Figure 10), type the following script:
stop();
Figure 10. Adding a script to the Actions panel
When you're finished, you'll see a small a appear in the blank keyframe in the Timeline.
That's it. Now when you preview your animation, you'll see it run from start to finish and then stop instead of looping the way it did before.
