Now you’ll look at the way all Flash animation was done prior to Flash CS4. When Adobe developers created a new workflow, they wisely left the old technique in the application to allow backwards compatibility.

1. Move the playhead to frame 1 and select another plane.
2. Right-click frame 30 in that plane’s layer and select Insert Keyframe.
3. Right-click the plane’s start keyframe (frame 1) and select Create Classic Tween.
4. Move the playhead to frame 30. Then move the plane to a new location and press Return (Enter) to play the animation.

Flash indicates a classic tween by placing a black arrow between the tween’s keyframes.

Classic tweening involves more Timeline manipulation than the newer method. We like it because it forces us to explicitly add keyframes, so we really have to think about what we’re doing. On the other hand, that can get tedious. So sometimes we prefer the new (more After Effects-like) method in which you just right-click a movie clip, choose Create Motion Tween, and then adjust the movie clip on the Stage.

Flash has two core animation methods: the “classic” method and the new method, which is available for the first time in Flash CS4. This new method is useful for simple animations (e.g., text flying onstage). For more complex work, switching to the classic method is often best.

Since it’s a bit simpler, let’s start by trying the new method.

1. Continue working in the same file or open text_added.fla from the -Chapter_02 Project Files folder. Right-click a plane (making sure it’s on a layer by itself).
2. From the context menu, choose Create Motion Tween.

Flash adds a blue span to the Timeline and moves the playhead to the end of the span. On the Stage, you’ll see everything vanish except for the plane. This is because the plane tweening extended the plane’s “lifetime” to frame 30, whereas all the other images just exist in frame 1. Later, we’ll extend all the images so that they exist as long as the plane.

Note that there is only one keyframe symbol for this layer (a black dot), which is at the start of the span.

3. Drag the plane to a new location on the Stage (or offstage if you want it to leave the screen—the gray area around the Stage won’t be -visible in the published file).

There’s now a second keyframe at the end of the span. The dotted line indicates the motion path of the plane.

4. Point to the motion path with the Selection tool. When the cursor is right up against it, a curve appears. Click and drag to manipulate the shape of the path.
5. Switch to the Subselection tool (the white arrow), and click the head or tail, or the motion path (which looks like unfilled circles).
6. Flash displays Bezier control handles on the motion path. Experiment with dragging the handles to adjust the motion path.
7. Drag the playhead right and left to watch the animation.
8. Place the playhead at frame 20, and drag the plane to a new location.
9. Move the playhead to frame 10, drag the object to yet another location. Each drag at a new point in time adds a new keyframe. The animation is not realistic because the plane isn’t facing the direction it’s flying.
10. To fix this, click inside the tween span in the Timeline, and then select the “Orient to path” option on the Properties panel.

Notice that Flash places a keyframe on every frame of the tween. This is because it has to calculate frame-by-frame rotations to keep the plane facing the right direction.

Tip: Orient to a Path

For best results when orienting to a path, create the source graphic so that its “nose” faces due east (3 o’clock).

11. Press the Return (Enter) key to play the animation in realtime. As the animation is playing, you can press Return (Enter) to pause it. Press Return (Enter) again to replay the animation from the beginning.

You’ve surely noticed at this point that the water, map, and other vehicles vanish after the first frame. By default, all layers have a one-frame duration. Don’t worry, you’ll solve this problem next.

Extending Layers in Time

When you add an asset to a new Flash layer, it only exists for one frame. However, you can extend its life so that it exists for as long as you like. Here’s how.

1. Right-click frame 30 of the water/map layer.
2. From the context menu, choose Insert Frame.

Flash extends the layer so that it lasts until frame 30. Each time you do this, a nonanimated layer will exist longer in time. Extend the text layers so that they also exist for 30 frames.

One Keyframe to Rule Them All

After Effects animators may be wondering how to access layer Transform properties. From an After Effects standpoint, it’s a bit odd that you just animated the position of a layer without first accessing its Position property. If you think that’s odd, prepare yourself for a real twilight-zone experience.

1. Move the playhead back to frame 1, and select a different plane. Using the Free Transform tool (Q key on the keyboard), rotate the plane so that it’s facing the direction you want it to move.
2. Right-click it and select Create Motion Tween. The plane’s Timeline span increases to 30 frames and the playhead moves to the end of the span.
3. Leave the playhead at the end of the span, and move the plane to a new position.
4. Press Q to switch to the Free Transform tool and resize the plane by dragging inward to make the plane smaller. Additionally, slightly rotate the plane by moving the cursor just outside the transform boundaries, and drag inward to make the plane smaller.
5. Press V to switch back to the Selection tool, click the plane, and in the Properties panel, choose Alpha from the Style drop-down menu (under Color Effect). If it’s not already set there, drag the slider to 0%.
6. Press Return (Enter) to see the plane move, resize, rotate, and fade out.

Notice that there is only one keyframe at the end of the Timeline. That keyframe holds information for all the animatable properties. Unlike in After Effects, there aren’t separate keyframes for Position, Rotation, Scale, Opacity (Alpha), and Effects.

This may seem too simplistic to you. When Flash is overly simple, it’s usually because—historically—it was built to be a simple tool for nonprofessional animators. However, if you want finer (property-by-property) control, stay tuned.

7. If you just want to, say, get rid of the fade without deleting all the other transforms, right-click the end keyframe and choose Clear Keyframe > Color (because Alpha is a Color Effect).
8. Press Return (Enter) again to view the animation. Remember to save your work.

Text in Flash is easy to work with but limited. You don’t have access to all the fancy text-animation presets and Timeline tools that you have in After Effects. Still, if you need to add simple text to a Flash movie, it’s nice to know that Flash’s Text tool follows most of Adobe’s typographical conventions.

1. Continue working in the same file or open Vehicles_on_layers.fla from the Chapter_02 Project Files folder. Add a new layer and drag it just above the map layer.

Tip: Moving Layers out of Folders

If you accidentally add the new layer inside the vehicles folder, just drag the new layer to the top of the stack to move it out of the folder. Once it’s out of the stack, you can drag the vehicles folder above it to keep the new layer below the vehicles folder.

2. Select the Text tool and click in the Pacific Ocean. Type Pacific Ocean.
3. In the Properties panel, set the text to Static Text and adjust the Text properties until you like the look of the type. You’ll want to modify font family, size, and color to improve appearance.

Static doesn’t sound like much fun, especially when one of the other options is Dynamic Text. Truth is, these options are poorly named. Dynamic Text and Input Text are for programmers: Dynamic Text can be set via ActionScript (such as the high score in a game); Input text is for form fields. Static Text—despite its name—is animatable text. You can make it move around the screen or animate it in other ways.

Tip: Static Text

We recommend that you always use Static Text for animating.

4. Repeat steps 1–4, typing other location names. We labeled Russia and Australia.

You’ve been placing all your movie clips on Layer 1. As with After Effects, each animated item must be on its own layer. In After Effects, you have no choice—adding footage to the Composition panel automatically creates a new layer. Flash is more like Photoshop: You have to tell it when you want a new layer. However, there’s a great shortcut that allows you to quickly generate multiple layers and place each selected item on one of them.

1. Continue working in the same file or open setup_done.fla from the Chapter_02 Project Files folder. Hold down the Shift key and carefully select all the ships and planes. Don’t select the map or the water. If you accidentally select something, you can Shift-click to deselect it.
2. Choose Modify > Timeline > Distribute to Layers. Flash makes a layer for each selected item.

But where are all the planes and ships? They’re hidden behind the water. The water and map were not in the selection set, so Flash left those items on Layer 1, and it added the new layers below that layer.

3. Drag the divider at the bottom of the Timeline panel to reveal all the layers.
4. Drag Layer 1 to the bottom of the Layer stack. Ah, there are the vehicles!
5. In the Timeline, double-click Layer 1 and rename it map.
6. Create a layer manually by clicking the New Layer button. Double-click the new layer’s name and type ship. With the new layer selected, drag a ship movie clip from the Library and drop it on the Stage.
7. Click the New Folder button and name the folder vehicles.
8. Drag the plane and ship layers into the folder.

You’ve left the water and map on Layer 1 (which you renamed map). That’s okay, because you won’t be animating those items.

At this point, the Stage looks exactly the same as it did before. Recall that you imported the graphics into the Library. But where is this Library?

1. To access the Library, press Command+L (Ctrl+L). Alternately, you can choose Window > Library or click the Library button.
2. In the Library panel, click the disclosure triangle to open the world.psd Assets folder.
3. Click the disclosure triangle to open the Assets subfolder.

Inside this subfolder are all the original images from the Photoshop file. The little tree icon to the left of each image’s name indicates that it is a simple PNG or JPEG. The items below the images are movie clips (note the blue gear icons). There’s one movie clip for each Photoshop source image (because you asked Flash to create movie clips in the Import to Library dialog).

So what’s the difference between a movie clip and an image? The best way to explain this is to evoke Wonder Woman. If you’re as geeky as we are, you know that Wonder Woman (unlike Superman) doesn’t have the power of flight. However, she has an invisible airplane. So when you see her “flying” through the sky, it’s not really Wonder Woman who is flying—it’s her invisible plane. Wonder Woman is just along for the ride.

In Flash, images—like Wonder Woman—can’t fly. That is, they can’t move around the screen. They can’t be animated. Instead, you have to put them inside an invisible vehicle and animate that. You move the vehicle and the image goes along for the ride. To viewers, it looks like the image is moving, because the vehicle it’s inside is invisible. Movie clips are those invisible vehicles. So all those movie clips in the Library are invisible vehicles with your Photo-shop images riding inside them like passengers. When you animate, you’ll use these movie clips and just leave the original source images (the ones with the tree icons) in the Library.

Adding Library Symbols to the Stage

The technical term for Library items is symbols. Adding symbols to the Stage is as simple as dragging them from the Library and dropping them where you want them to appear. A symbol on the Stage is called an “instance,” because it’s actually a copy of the symbol.

1. Drag the water movie clip from the Library and drop it on the Stage so that its upper-left edge lines up with the upper-left edge of the Stage.

Notice the helpful guidelines Flash displays to help you place images. If you need help positioning the movie clip, select it and then adjust the image’s X and Y coordinates in the Properties panel. Set both its X and Y coordinates to zero.

2. Drag the map movie clip to the Stage so that it covers the water.
3. Drag the ship movie clip to the Stage twice, putting each instance of it in a different body of water.

Tip: Reusing Images

As in After Effects, you can reuse images multiple times. Drag as many instances from the Library as you want.

4. Select one of the ships and reverse its direction by choosing Modify > Transform > Flip Horizontal.
5. With the ship selected, press the Q key to switch to the Free Transform tool. Hold down the Shift key while dragging one of the corner handles inward to make the selected ship smaller. Press V to switch back to the Selection tool.
6. Select one of the smaller ships. In the Properties panel, click the disclosure triangle next to Color Effect, then choose Tint from the Style drop-down menu.

Note: Color Effects

Color effects are fully animatable. This means that you can have an object change color over time.

7. Click the color swatch to choose a yellowish tint, and then adjust that tint with the sliders under the drop-down menu. Adjust the tint to match that in the figure shown here.
8. Add the plane movie clip to the Stage, placing it above Africa.
9. With the plane movie clip still selected, click the Add Filter button at the bottom of the Properties panel, choose Drop Shadow, and then adjust the shadow’s setting to your liking in the Filters area of the Properties panel.

Note: Filter Settings

Filter settings are fully animatable. This gives you controls that are similar to keyframeable effects in After Effects.

10. With the plane still selected, press Command+D (Ctrl+D) to duplicate an instance. This has the same effect as dragging another instance from the Library.
11. With the second plane selected, click the Swap button in the Properties panel. Select the jet symbol.

Note that the jet takes on all the properties (including filters and position) of the plane. Much like After Effects, you can update an item in the library to use a different source file.

12. In the Library, right-click the jet source image (not the movie clip). From the context menu, choose Properties.
13. Click the Import button and choose the file jet2.png from the Chapter_02 Project Files folder. Then click Open.

You must click OK to swap the files. Flash swaps the jet image in the Library for another image.

14. Add a few more planes and ships, resizing, flipping, and styling them as you please. Save your work by pressing Command+S (Control+S) on the keyboard.

You can import graphics, sound, and video into Flash. With the exception of video, assets are actually imported into FLAs, not just linked. In other words, after importing a graphic, you can delete it from your hard drive. It will still be available in the FLA file and generated SWF.

SWF files can only contain JPEG and PNG graphics and MP3 audio (and some video formats, which are discussed in a later chapter). However, you can import many other standard types, and Flash will convert them into JPEGs, PNGs, and MP3s for you.

Let’s import several assets from a layered Photoshop file (Flash allows you to do this with Illustrator files, too).

1. Copy the Chapter_02 Project Files folder from the DVD to your hard drive.
2. Choose File > Import > Import to Library. Select the file world.psd from the Chapter_02 Project Files folder and click Import to Library.

Tip: Transparency Support

Although SWFs can contain JPEGs and PNGs, only the PNG type supports transparency.

Note: Import a SWF into Flash

You can import SWFs into Flash, although you can’t edit them. This is useful if you’ve generated a SWF in another application, such as After Effects or Illustrator. You can bring it into Flash and incorporate it into your project. However, if you need to make changes to it, you’ll have to use whatever application you created it in.

The Flash Library

The Library is similar to the After Effects Project panel. It’s a storage area for assets. As you can see from the Import options, you can also import directly to the Stage. We don’t recommend this. Let’s say you knew you were going to need ten JPEGs to complete your Flash project and you imported them all to the Stage. They’d wind up on top of each other. Importing them to the Stage would be like dragging every After Effects asset from the Project panel to a comp’s first frame rather than dragging them into the comp as needed. A better workflow in Flash is to import all assets into the Library and then drag them to the Stage as needed.
3. In the Import to Library dialog, select the plane layer, hold down the Shift key, and then select the water layer. You should have 5 layers selected.

Note: Open External Library

The Open External Library option allows you to access assets inside another FLA. After choosing that option, select any FLA on your hard drive or network, and you’ll have access to graphics, sounds, and videos inside it.

4. Select the “Create movie clips for these layers” check box. Leave Instance name and Registration unchanged

Note: What Is a Movie Clip?

A movie clip is an animatable unit in Flash. In other words, by converting each Photoshop layer into a movie clip, you make those layers animatable. (If you don’t convert them, you can still use them as static background elements.) The term movie clip is a bit of a misnomer. Movie clips are not movies (as in QuickTime movies); they are animatable objects.

5. Under Publish settings, choose Lossless from the Compression drop-down menu.

This converts all the Photoshop layers into PNGs. If you’re animating for the Web and worried about file size, you might want to experiment with the Lossy option, which allows you to set a percentage-based quality setting (100 is full quality; zero is lowest quality).

6. Deselect the layer named cursor.

You don’t want to import this layer into Flash as it is not used in the final animation. Fortunately, when you import a layered Photoshop file, Flash allows you to choose which layers you want to import. We sometimes use layered Photoshop and Illustrator files as image libraries with each image on a separate layer. We then import the whole file into Flash but only select layers containing images we want.

7. Click OK to add the files to your project’s library.

Flash baffles After Effects users as often as it makes them feel comfortable. It’s timeline based, so in that sense it feels familiar, but its quirky way of handling tweens leaves many After Effects users puzzled. Flash is also eccentric from an After Effects point of view when it comes to rendering (publishing in Flash) and pre-composing (nesting). This chapter introduces you to Flash’s interface and core animation techniques.

Creating a New Flash File

You’ll start (where else?) by launching Flash CS4 and will immediately be stymied by the myriad options for creating a new file. You want to create a new Flash animation, but of which type: Flash File (ActionScript 3.0), Flash File (ActionScript 2.0), Flash File (Adobe AIR), and so on?

Generally, you’ll choose the top option, Flash File (ActionScript 3.0). ActionScript is a programming language (similar to JavaScript) that has two major versions: ActionScript 2.0 and 3.0. Since Flash is an animation and a programming tool, some users will need to consider which version of the language they’ll be using.

As an animator, you probably won’t be using ActionScript. But just in case one of your collaborators wants to add script later, you might as well choose the file format that supports the most recent version of the language, ActionScript 3.0.

This book focuses on the animation features of Flash. If you’re interested in ActionScript, which is mostly used for adding interactivity to Flash movies (buttons, forms, games, etc.), there’s a wealth of material available to help you. Be sure to read ActionScript 3.0: Visual QuickStart Guide (Peachpit, 2008).

The other format choices include Flash File (Adobe AIR), which is for Flash movies intended to run on the desktop as opposed to in a Web browser; Flash File (Mobile) for mobile-phone applications; ActionScript File for content that is pure programming code; and a few other, rarely-chosen formats.

Let’s create a Flash file. You’ll create a bumper for a TV news show, which can also be used on the station’s Web site. You’ll start by creating a file, adjusting its dimensions, and saving it to your hard drive.

1. At the splash screen, choose Flash File (ActionScript 3.0) in the Create New column.

Fun with Panels

As in other Adobe programs, you can move panels by dragging them by their tabs. You can float a panel by dragging it to the middle of the screen. Or you can dock a panel by dragging it onto another panel’s tab. Panels have flyout menus (in their upper-right corners) that allow you to close them. To bring a closed panel back, add it from the Window menu. If you create a panel arrangement that you like, you can save it as a new workspace. To do so, choose Window > Workspace > New Workspace.

Flash’s interface appears, including the Stage (which is similar to After Effects’ Composition panel), the Timeline, and some support panels. To follow along with the steps in this book, choose Window > Workspace > Classic. After you’ve worked with Flash for a while, you might want to try some of the other workspace options; each of which sets up the interface in a different way.

2. Choose the Selection tool (the black arrow) and then click the Stage to select it and reveal its properties. The Properties panel allows you to adjust most objects in Flash. It is context sensitive, displaying options for whatever object is currently selected. You want to change the width and height of the Stage, which is why you started by clicking the Stage.

Note: Context Sensitive

If you don’t understand what context sensitive means, click inside frame one on the Timeline and then look at the Properties panel. Then click the Text tool. As you can see, the Properties panel changes to show you options for whatever you have selected.

3. Click the Edit button in the Size portion of the Properties panel. The Document properties dialog opens.

Tip: Choosing a Frame Rate

Flash only allows whole-number frame rates. The closest you can get to 29.97 frames per second is 30. Many Flash animators work at 24 frames per second, which is a well-known frame rate used in film production. Flash video files (FLV and F4V files) output from After Effects and other video-authoring programs can run at 29.97 frames per second.

4. In the Document Properties dialog, set the Stage Dimensions to 1280 x 720. Leave the background color unchanged but set the frame rate to 30 since this is a video project intended for output to After Effects. Click OK.
5. Choose File > Save. Name the file map.fla and save it to your hard drive.

File Types

Flash’s source format is the FLA (rhymes with spa) file. The FLA is similar to the AEP: It’s the file you edit, but it’s not the final rendered file. Like After Effects, Flash can render out in multiple formats. In other words, from a single FLA file you can output QuickTime videos, animated GIFs, and other movie formats. You can export files in these formats via the Export command (File > Export).

But the most common format is the SWF (pronounced swiff) file, which is exported via the Publish command (File > Publish). SWF files are the Flash files that run in Web browsers. So when you’re online and you’re watching a Flash movie, you’re actually watching a SWF file. SWF is such a common output format that most people think of SWF files and Flash files as the same thing. So if someone asks you for a Flash file, it’s important for them to specify whether they mean a SWF (the final output) or a FLA (the editable source file). As with the QuickTime movies you make in After Effects, SWFs aren’t editable. If you want to make changes, you must go back to the source file—the FLA.

A FLA file is an editable animation (and programming) source-file format that can only be generated and edited in Adobe Flash. From a FLA you can output a SWF file, but you can also output SWFs from other source formats, such as AEP or AI. Although you can generate SWFs in many applications, if you start making one in Flash, you have to finish making it in Flash. This is because Flash’s FLA source format is only editable in Flash. Similarly, you can generate QuickTime videos from many applications, but if your source format is AEP, you can only edit it in After Effects.

When you are satisfied with an animation, you’ll need to render it at final quality. Most users create RAM Previews at a lower quality to save time. The final rendering process usually takes longer due to the improvements in output quality. The process of rendering can be time-consuming depending on the complexity of effects chosen as well as the speed of the machine. As such, rendering is often run as an unsupervised task.

The Render Queue

The primary way of rendering and exporting motion content from After Effects is to use the Render Queue panel. The key advantage of using the Render Queue is that you can add multiple files into it for processing. Additionally, you can render a file once but encode, compress, and output multiple versions.

1. Choose Composition add to Render Queue.
2. The active composition is added to the panel for processing.

Render Settings

The Render Settings specify the quality that After Effects uses when processing the animation file. Click the small triangles to access several different Render Settings templates. You can also click the underlined text for a template name to customize the settings. For now, use the default value of Best Settings.

Output Module

The Output Module determines which type of file is written to disk. After Effects offers multiple output modules to choose from. Simply click the small triangle next to Output Module to access the Presets lists. These modules can be further customized by clicking the underlined text. You’ll explore creating custom output modules in upcoming chapters. For now, choose Lossless.

Setting a Destination

The final step to setting up a render is to target a destination drive. This is where you want the files to render to. Rendering out a Lossless file creates a big file on your hard drive. But this file can always be recompressed to other specific formats as needed using the Adobe Media Encoder (more on this in Chapter 12, “Professional Encoding of Flash Video”).

1. Click the text Not yet specified to target a location for the file. For this example, be sure you have at least 1 GB of free disk space. (Alternately, click the triangle next to the Output To heading and choose a preset naming convention.)
2. In the Navigation dialog, enter a name in the Save As field.
3. Specify a location for output and click Save.
4. Choose File > Save to capture the current state of your project.
5. With your mouse pointer over the Render Queue, press the Accent Grave key (`) to maximize the panel. Hiding the Composition panel can speed up the final render because the computer screen doesn’t need to load and refresh the processed frames for viewing.
6. Click Render.

After Effects intelligently handles imported files. It is quite capable of detecting which application created the file and allows you to open the file using that program for changes. Simply modify, close, and save the file. After Effects then updates the instance in your project. This particular workflow is very handy, especially when using the Creative Suite applications.

Let’s use the Edit Original command to update a graphic in the bumper.

1. Double-click the layer Logo Animated in the Timeline to open it. The new file loads into the Composition panel and Timeline.
2. Select the bottommost layer called Box in the Timeline.
3. Chose Edit > Edit Original or press Command+E (Ctrl+E).
4. Adobe Illustrator opens and reveals the layered file. Activate the Selection tool in the toolbar.
5. Click the green box one time to activate it.
6. At the bottom of the toolbar, click the color swatch and pick a deep red. The box updates.
7. Click on the word REPORT to select it.
8. In the options bar, click the color swatch and pick a warm yellow. The text updates.
9. Choose File > Close and click Save. Switch back to After Effects where the composition updates.

Note: No Updates?

If a layer doesn’t update, right-click it in the Timeline and choose Reveal Layer in Source Project. Then right-click the revealed file in the Project panel and choose Reload Footage.

10. Switch to the Bumper tab in the Timeline and invoke a RAM Preview. Review your work so far.
11. Let’s add a fade in and out for the composition. Press the Home key.
12. Choose Layer > New > Solid. Name the Solid Fades, make sure it is set to black, and click OK.
13. With the layer Fades selected, press T to access the Opacity Transform controls.
14. Add the following opacity keyframes:
    • 00:00:00 100%
    • 00:01:00 0%
    • 00:19:00 0%
    • 00:19:29 100%
15. Invoke a RAM Preview. Review your work so far. Choose File > Save to save your work.

During the animation process, you may decide to replace certain elements in a project, perhaps because the footage or logo file has been updated or to encompass changes requested by a client. In this case, another artist has already animated the logo used in this bumper animation. After Effects allows multiple users to collaborate by making it easy to import a project into an existing project.

1. Click the Project panel to select it.
2. Choose File > Import > File.
3. In the Import File dialog, navigate to the Chapter_01 Project Files folder. Open the folder Logo Animation. Select the file Logo_Animation.aep and click Open. A new folder with the same name is added to your project. It contains one composition and the source footage used. Drag these two new items into the Pre-comps folder.
4. Click the disclosure triangle next to the folder Logo_Animation.aep.
5. In the Timeline, click to select the layer logo start, and then press I to move to its In point.
6. While holding down the Option (Alt) key, drag the composition Logo Animated onto the layer logo start. The new layer is swapped for the old layer.
Drag the layer from the Project panel to the Timeline while holding down the Option (Alt) key.

7. Invoke a RAM Preview. Notice that the swapped layer still preserves the animation and transition of the original. Only the contents of the layer were swapped but all applied effects and keyframes remain. This is a useful way to swap content. Choose File > Save to save your work.