Adobe Flash CS5 Professional continues to be the most advanced environment for interactive authoring on the Web. According to Adobe, Flash Player is the most ubiquitous plug-in on Earth, with a penetration rate of nearly 98 percent of all Internet browsers. Despite the ongoing controversy surrounding Flash on the Apple iPhone and iPad, there’s currently no better product for creating interactive experiences than Adobe Flash Professional.
More than simply a program for creating vector animation, Flash Professional has evolved into its own platform. Today when we talk about Flash we’re really talking about a Rich Internet Application, or RIA, that supports audio, video, and both vector- and pixel-based interactivity.
Although content can be created inside of Flash Professional, most designers take advantage of the application’s ability to smoothly import content created in standard design environments like Photoshop or Illustrator. In our first tip, we’ll explore that initial process.
In the past, one of the knocks against Flash Professional was due to its nonstandard (some would say “crude”) drawing and image editing tools. Today, that’s no longer a problem because the application can now import files originally created in other programs. If you preferred working in Illustrator or Photoshop prior to animating in Flash, you’re going to love this improvement.
With Flash Professional CS5, artwork created in Photoshop or Illustrator CS5 can be brought into Flash through the Clipboard, dragged and dropped from the Mac OS Finder or Windows Explorer, or imported via the Import dialog box (File > Import) shown in Figure 73a. When you’re importing native Photoshop and Illustrator files, Flash Professional converts your artwork and populates the library with elements that match the original file. Other points to keep in mind:
• Text can come in as text or outlines or even bitmaps.
• Vector art is converted to Flash’s own vector format.
• Bitmaps are converted to PNG-24, including all transparency.
If you have applied effects in Photoshop or Illustrator that Flash does not support—such as Photoshop lighting effects or opacity masks in Illustrator—the artwork is converted to a PNG-24 to maintain the appearance and transparency. In Figure 73b, we see those incompatible objects flagged by yellow warning triangles.
Imported artwork can also be assigned symbol properties, such as Buttons or Movie Clips. What’s more, symbols created in Illustrator are automatically added to the Flash document, including any settings for 9-slice scaling.
Once the import is complete, Flash Professional creates layers in the Timeline panel and place elements on the stage to match the layout of the original Photoshop and Illustrator files, as shown in Figure 73c.
New to Flash Professional CS5 is the ability to directly edit imported bitmap images in Photoshop CS5. The process is quite simple, despite an important caveat (see the sidebar). The process is as follows:
FXG is a cross-platform interchange format that allows files to be moved from Flash Professional to other programs such as Illustrator or Flash Catalyst. Based on a subset of MXML, the XML-based programming language used by the Flex framework, the FXG format helps designers and developers collaborate more efficiently by enabling them to exchange graphic content with high fidelity. When importing FXG files, Flash Professional CS5 needn’t do any file conversion to bring in artwork.
The following Adobe applications support FXG:
• Fireworks (export)
• Photoshop (export)
• Illustrator (export)
• Flash Professional (import and export)
• Flash Catalyst (import and export)
• Flash Builder (import and export)
In Flash Professional, you can export content in FXG format in either of two ways:
• To export objects on the Stage as FXG, select the objects and choose Export > Export Selection. Then select FXG format from the File Type menu.
• To save the entire Stage as FXG, choose Export > Export Image and select Adobe FXG from the Format drop-down menu.
When you export a file containing vector and bitmap images using FXG export, a separate folder is created along with the FXG file. This folder has the name <filename.assets> and contains the bitmap images associated with the FXG file (Figure 75a).
Achieving better-looking type in Flash is no longer question of TLC, but rather TLF. TLF, which stands for Text Layout Framework, is a rewritten type engine that supports advanced typesetting features like ligatures, baseline shifting, tracking, and more. Multiple columns of text can now be set in one text frame, as in InDesign, and text can flow continuously from container to container (Figure 76a).
Flash Professional automatically embeds the fonts used in your project when you publish your project. In cases where your SWF file may receive external data, such as a person’s name, or stock prices, you will need to embed a full set of characters in order to ensure the SWF file has all the characters it may need.
To embed fonts in Flash Professional CS5, choose Text > Font Embedding. Select the fonts you’d like to embed in the document and click the (+) above the left Font column. Select the sets of characters you’d like to embed from each font family you are embedding. To conserve file size, character sets are broken into commonly used groups, such as numbers only, or Basic Latin (Figure 76b).
If you’re comfortable formatting type in page layout apps like InDesign, you’re in for a pleasant surprise with Flash Professional CS5. Now, for the first time, text frames in Flash can have properties such as insets, borders, background colors, and other professional attributes. A look at the Properties panel reveals a level of control over type previously unattainable in Flash (Figure 77a).
In addition, text frame linking similar to InDesign improves and simplifies working with type. In Figure 77b, we see how text is linked from a two-column frame to other frames in the thread.
The Decorative, or Deco, drawing tool turns graphic shapes into complex, geometric patterns. In a process known as procedural drawing, the Decorative drawing tool uses calculations that are applied to a movie clip or any graphic symbol you create.
After you select a drawing effect, you can customize the way your artwork will be generated. Some options include brushes such as the Flower Brush, Vine Fill, and Lightning Brush. In the case of Vine Fill, Flash Professional generates artwork in an allotted area and fits vector artwork together based on built-in symbols, or custom symbols you create (Figure 78a).
Selecting the Tree Brush effect, for example, gives you a choice of 20 different trees and allows you to specify tree scale, branch color, leaf color, and flower or fruit color, as seen in Figures 78b and 78c.
The Bone Tool allows you to add joints to artwork or join together movie clips (referred to as armatures) so that movements in one affect the other in a naturalistic way. Using inverse kinematics, Flash Professional will figure out the various angles for all the joints and animate from the first pose to the next (Figure 79a).
New Inverse Kinematics settings now allow you to add Spring and Dampening settings to your bones (Figure 79b). (Spring is the bounce of objects and Dampening is the force that counters such motion.) Flash Professional applies physics to your motion to create realistic animations with the help of a few simple keyframes.
By combining various Inverse Kinematic settings, Flash is able to convincingly animate the toy seen in Figure 79c.
Motion Presets give you a fast way to add animations to your symbols. By applying presets, you can achieve commonly used animation techniques, even with realistic physics properties, such as bouncing (Figure 80a). Motion Presets also serve as a solid foundation for learning and studying the principles of Flash for those new to Flash Professional.
Note that motion presets can be applied to motion tweens only. Motion presets can not be applied to classic tweens.
To apply a motion preset, select a tweenable object (text or a symbol instance) on the stage and click the Apply button. Only one preset can be applied per object. In the event a second preset is applied to an object, the second preset will overwrite the previous preset (Figure 80b).
Motion presets also contain a specific number of frames. When you apply a preset, the tween span in the timeline contains this number of frames. If the target object already had a tween of a different length applied to it, the tween span adjusts to match the length of the motion preset.
Before clicking Apply to a Motion Preset, right-click the animation option you want and choose from either “start at current location” or “end at current location” as seen in Figure 80c.
The Code Snippets panel (accessed by selecting Window > Code Snippets) provides a fast way to add the necessary ActionScript code to your Flash movie. Simply double-click on a code snippet in the panel and Flash Professional writes and inserts the proper code.
With the Code Snippets panel (Figure 81a) you can:
• Affect the behavior of objects on the Stage.
• Control the playhead in the Timeline.
• Add new code snippets that you create to the panel.
If you have an object selected, such as a button (Figure 81b), the code snippet will include the button’s name (if it is entered in the Properties panel). If you do not name your object, Flash Professional picks a name, then applies the code.
Once the code snippet is applied, an Actions layer is created in the Timeline and an ActionScript is applied to the same frame as the button. Opening the Actions panel will reveal the code written by the snippet.
One of the most common uses for Flash is for playing video. You can add video to your project by simply importing a video file, or by dragging a video to the stage.
Before you start working with video, it’s important to understand the following:
• Flash Professional can support only the FLV, F4V, and MPEG video formats.
• The Adobe Media Encoder (included with Flash Professional) converts other video formats to FLV and F4V (Figure 82a).
• Flash Professional includes the Video Import Wizard (Figure 82b), which opens when you choose File > Import > Import Video. This walks you through the steps for setting up video playback controls.
• The FLVPlayback component lets you easily add video playback to a Flash file.
You can use Flash video in different ways:
• As a progressive download from a Web server.
• By streaming video using Adobe Flash Media Server.
• Via embedding video information inside a Flash file.
In addition, you can use the FLVPlayback component in conjunction with the Component Inspector (Figure 82c), and bypass the Video Import Wizard altogether.
The most common format to publish to from Flash Professional is the Shockwave-Flash format, or SWF. This format requires the Flash Player to read and play a SWF file. Typically, Flash Player is found as a Web browser plug-in. Figure 83a shows how the Publish Settings dialog box lets you check all possible publish settings prior to proceeding.
In addition to SWF, Flash Professional can also publish to executable projectors (applications) for both Mac OS and Windows (see Figure 83b). This format is most commonly used for CD-ROM and kiosk systems. These applications can run on their respective operating systems without the Flash Player being present; its playback capabilities are contained within the projectors themselves.
In addition to publishing formats targeted at Flash Player, Flash Professional also publishes to Adobe’s AIR format (Adobe Integrated Runtime). A cross-platform format that takes advantage of Flash, Flex, HTML, JavaScript, and Ajax technologies, Adobe AIR allows you to build and deploy Rich Internet Applications to the desktop. Users interact with AIR applications in the same way as they would with native apps.
From the Flash Professional publishing options, choose Adobe AIR 2, then Settings and set the properties of your AIR application (Figure 84a).
Settings for your AIR application include the window style, operating system environment options, custom icons, and finally, the ability to digitally sign your Adobe AIR application before distributing it. After you choose Adobe AIR 2, click the Settings button to the right to invoke the dialog box shown in Figure 84b.