creating a simple animation in flash

8/3/2019 Creating a Simple Animation in Flash

1/15

Creating a simple animation in Flash

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 creativepossibilities.

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

Try

Buy

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. Vectorfiles, 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
http://www.adobe.com/go/devcenter_flpro_tryhttp://www.adobe.com/go/devcenter_flpro_buyhttp://www.adobe.com/devnet/flash/articles/animation_intro/Go.pnghttp://www.adobe.com/go/devcenter_flpro_buyhttp://www.adobe.com/devnet/flash/articles/animation_intro/Go.pnghttp://www.adobe.com/go/devcenter_flpro_try


2/15

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 importoptions: 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.


3/15

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 bydragging 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


4/15

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 lowerright 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).


5/15

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 previewmore 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.


6/15

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, theanimation 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.


7/15

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


8/15

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.


9/15

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 persecond, 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.


10/15

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 thecurved 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 thecurve. 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


11/15

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 appearsaround 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).


12/15

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).


13/15

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:


14/15

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.

WHERE TO GO FROM HERE

Now that you know the basics, you can create all kinds of animations in Flash CS4

using assets from other Adobe applications. Experiment with midpoints, curves, and

size to come up with innovative ways to move graphics over time. For more

information about Flash CS4 Professional, visit theFlash Developer Center.
http://www.adobe.com/devnet/flash/http://www.adobe.com/devnet/flash/http://www.adobe.com/devnet/flash/


15/15

Note: This article appeared originally in theEdge newsletter.

ABOUT THE AUTHOR

Doug Winnie is group product manager for Adobe's Creative Suite web tools and

workflow. He manages multiple products, including Adobe Dreamweaver, Adobe

Fireworks, and Adobe Creative Suite Web Premium. In addition, he is responsible

for maximizing workflow collaboration between Adobe products, platforms, and

technologies for designers and developers. Prior to joining Adobe, Doug led designer

and user experience development organizations. He is an avid developer and

designer using Adobe Flash, Adobe Flex, Dreamweaver, Creative Suite, and other

web design and development applications and platforms. You can reach him at his

blog.
http://www.adobe.com/go/edgehttp://www.adobe.com/go/edgehttp://www.adobe.dougwinnie.com/http://www.adobe.dougwinnie.com/http://www.adobe.com/go/edgehttp://www.adobe.dougwinnie.com/http://www.adobe.dougwinnie.com/

creating a simple animation in flash

Documents