Flash Essentials for Adobe After Effects Users

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.

Note: What about ActionScript 1.0

There was a version of ActionScript before 2.0, but it was just called ActionScript (not ActionScript 1.0). In fact, prior to reaching a more stable state in 2.0, ActionScript went through several minor and major revisions.

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.

Tip: More Action-Script Resources

This book dips into ActionScript in Chapters 13 and 14. In addition, in the Chapter 13 Project Files folder, there are some video tutorials that teach ActionScript Fundamentals.

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

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

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

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

Note: Two Export Options

In addition to File > Export, you can also output rendered files by choosing File > Publish Settings from the menu. In fact, Publish Settings is Flash’s main export technique. It’s the option you’d choose in a typical Flash work- flow, and we explain it later in this chapter. File > Export is for rendering out less-common file types.

SWF Confusion

Many programs besides Flash can output SWF files. This is confusing since people call SWFs “Flash files” or “Flash movies.” Such people may say they’ve made “Flash movies” in programs other than Flash. For instance, After Effects can output SWFs; so can Photoshop and Illustrator, but they aren’t as feature-rich (in terms of being SWF creators) as Flash. SWF has become a common output format, much like QuickTime.

Adobe has two types of applications that output SWFs: design/animation programs (such as Flash, Photoshop, Illustrator, and After Effects) and programming applications, such as Flex. Flex allows programmers to create SWFs without having to mess with timelines. Most animators dislike the Flex interface, because it’s mostly a text editor for writing code.

SWF is also a common input format. Many programs, such as After Effects, allow you to import SWFs and integrate them into a larger multimedia project.

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.