Chapter 10. Incorporating Non-Flash Media Files

Flash gives you a ton of drawing and painting tools you can use to create original artwork, as you saw in Chapters Chapter 2 and Chapter 5. But if you've already got some cool logos or backgrounds that you created in another program (like Adobe Illustrator and Photoshop), you don't have to redraw them in Flash. All you have to do is pull them into Flash—import them. Once you do, you can work with them nearly as easily as you do the images you create directly on the stage. You can also add sound clips, video clips, and scanned-in photos to your animations.

This chapter introduces you to the different types of media files that Flash lets you work with. It also gives you tips for working with imported files: You'll see how to apply effects to bitmap graphics, edit video clips, and synchronize (match) sound clips to specific animated sequences.

Note

After you've incorporated non-Flash media into your animation, you can control that media using ActionScript. For more details, flip to Chapter 12.

Importing Graphics

Theoretically, you can cut or copy graphic elements from any other program you have open, paste them into Flash, and then tweak them. For example, say you've created a drawing in Microsoft Paint. In Microsoft Paint, you can choose Edit→Copy. Then, in Flash, you can choose Edit→Paste in Center to transfer the image from Microsoft Paint to your stage, and then edit it using Flash's drawing and painting tools. When you import or paste an image onto the stage, Flash stores a copy in your Library, as shown in Figure 10-1.

Figure 10-1. After you import a bitmap, Flash throws a backup copy of the image into the Library as a convenience so you have the option of dragging another copy onto the stage without going through all the trouble of importing the file again. To see the properties of your newly imported bitmap, click the information icon.

Copying and pasting usually works, and it's quick and easy. It's not surprising that Adobe tweaked Flash so that Cut and Paste work well with its own programs—Illustrator, Photoshop, and Flash. Sometimes, though, you get hit-or-miss results by using the system Clipboard in this way. Flash may decide to flatten (group) the drawing, limiting your ability to edit it. Flash may also decide to ignore certain effects (like transparency and gradients) so that the image you paste onto your stage doesn't quite match the image you cut or copied.

A safer alternative: In your non-Flash program, save your graphic elements as separate files, and then import those files into Flash. Flash lets you import most popular graphics file formats, including .jpg, .gif, .png, and .bmp formats. If you're a Flash veteran, you may notice that the list of importable file formats is actually shorter than it used to be. In Flash Professional CS5, Adobe has retired some older and less-common formats, like Macromedia Freehand, Silicon Graphics, Targa, and Windows metafiles. If you're working in one of these formats, you need to save your files in one of the formats listed in Table 10-1.

One of the major improvements in recent versions of Flash is the way it imports Adobe Photoshop and Adobe Illustrator files. These programs use layers much like the layers in Flash, as explained on Working with Multiple Layers. When you import Photoshop and Illustrator files in Flash, you can choose which layers you want to import, and the program converts them into Flash layers. Say you're creating a business presentation and you've got a Photoshop file of a map. The Photoshop PSD file has the map on one layer, city names on another layer, and stars on another layer to highlight where you've had increased sales. Flash imports the map, city names, and stars on separate layers, making it easy for you to show and hide these elements separately in your Flash animation. Also, if you need to make changes after you pull Photoshop or Illustrator files into Flash, you can edit the shapes and text within Flash.

Table 10-1. Graphics file formats you can import into Flash

File Type	Extension	Note
Adobe Illustrator	.ai	Instead of automatically pulling these files in as flat, rasterized bitmaps, Flash lets you set import settings that help preserve the original images' layers and editable text.
Portable Network Graphic	.png	Instead of automatically importing PNG files created in Fireworks as flat, rasterized bitmaps, Flash lets you set import settings that help preserve the original images' layers, editable objects, and editable text.
Photoshop	.psd	You must have QuickTime 4 (or later) installed before you can import Photoshop files into Flash.
Adobe FXG	.fxg	This is Adobe's new open source, MXML-based file format. It works well with Photoshop, Illustrator, Flash, and Flex. For more details, see the box on New File Formats for Flash? Why?.
AutoCAD DXF	.dxf	Flash imports 2-D DXF files, but not 3-D DXF. Font confusion can happen when Flash tries to match AutoCAD's nonstandard font system. Flash imports only ASCII (text-based) DXF files. Binary DXF files have to be converted to ASCII before they're imported to Flash.
Windows Bitmap	.bmp, .dib	If you're running a Mac, you must have QuickTime 4 (or later) installed on your computer to import Windows bitmap files into Flash.
Flash and FutureSplash (pre-Flash)	.swf	These are Flash movies that have been published (also known as compiled) for distribution.
Graphic Interchange Format (including animated GIF)	.gif	This format, originally developed by CompuServe (one of the earliest online information services), is good for simple drawings.
Joint Photographic Experts Group	.jpg, .jpeg	The most popular format for displaying photos on the web.
QuickTime Image	.qtif	You must have QuickTime 4 (or later) installed before you can import QuickTime Image files into Flash.
Tagged Image File	.tif, .tiff	You must have QuickTime 4 (or later) installed before you can import TIFF files into Flash.

Note

If you're looking for third-party graphics files to import into Flash, check out the box on Stock Images, Sounds, and Video Clips.

Frequently Asked Question: New File Formats for Flash? Why?

With all the file formats floating around, why did Adobe create two new ones: XFL for Flash and FXG for images?

It's a reasonable question. If you use Flash, you're expected to keep track of dozens of different types of files and understand their capabilities and shortcomings. Over the years, Flash has matured from a simple animation tool to an application-building tool. Branches of that growth include Flex and AIR—development tools that use Flash files to create full-blown applications. Adobe created the new file formats to accommodate the needs of these new appbuilding tools.

At the same time, there's an industry trend toward open-source tools and file formats. In the past, companies like Microsoft and Adobe created proprietary file formats that only their programs could open. Once the competition figured it out, the company would come out with a new version, protecting their corner of the market. This system wasn't so great for the consumer. The trend these days is to develop file formats made of separate components that are compressed like a Zip file, often using the XML scripting language. Microsoft went this direction when creating file formats for Office 2007 and 2008, and now Adobe is using a similar method for Flash and other programs.

Flash Files (.fla and .xfl). Now, when you save a Flash file (File→Save), the program automatically stores it in the new format and squashes it using Zip compression. You can see for yourself—use a tool like WinZip or Stuffit to open a Flash file. (You may need to change the file extension to ".zip" before you can open it.) Once it's open, it looks like Figure 10-2. Flash developers who work in teams will love this approach. Artists can design buttons and widgets somewhat independently of programmers who write the ActionScript code. Then, each team member can pop her work into the Flash document without messing up any other part of the project. Folks who develop Flash extensions and add-ons will also be fans of the new, easily accessible file format.

When you save your Flash documents (File→Save), you can choose Flash CS5 Uncompressed Document (*.xfl) from the "Save as type" menu. When you choose this option, Flash forgoes the compression. Instead, it saves your file as a folder with subfolders to hold all of its parts (called assets). For example, a Library subfolder holds any symbols you've created. This setup makes asset swapping even easier.

FXG file format. There's more than one way to operate on a Flash animation. For example, you can use Flash Professional with all its bells and whistles. If you're a designer but not a programmer, you may want to use Flash Catalyst. On the other hand, if you're a developer and a programmer, you may want to use Flash Builder. These last two tools are useful when an entire team is working on a project. Adobe developed the FXG file format to ease the cooperation between these programs, as well as Photoshop, Illustrator, Flash, and Flex. FXG uses XML-type descriptions to define an image. Technically, this code is a subset of Flex's MXML language. To see the innards of an FXG file, open it using Notepad or TextEdit. You'll find text descriptions of the image. It looks a little like the code that underlies web pages, because XML and HTML have shared roots.

Figure 10-2. Flash Professional CS5 uses a new file format that's easier for everyone to open and understand. Here a Flash file is uncompressed and opened in WinZip, so you can see its contents stored in separate folders. These images are part of the Photo Gallery file (07-5_Photo_Gallery.fla on the Missing CD page at www.missingmanuals.com/cds).