Flash on the Web

A few years back you couldn't go anywhere on the web without running into Flash. Web designers were given the instruction to "create a Flash web site" even if there was no good reason to use it. It was as if just having the Flash technology was more important than the information it contained.

Fortunately things have calmed down, and these days Flash technology is being used appropriately. We are excited to see what will happen now that Flash is part of Adobe (see "Flash versus PDF: Who's the Winner?" below).

Misconceptions about Flash

Flash has gotten a bum rap in recent years. People associate Flash with loud animations that pop up uninvited when you enter a web site. While it is certainly true that Flash can create those types of animations, it is also a terrific tool for creating rich, interactive content. There are quite a few misconceptions that people have about Flash files. Here's our chance to debunk them.

What you see on the web is a Flash file or Flash movie. No. Strictly speaking, what you view on the web is a SWF file. Flash (.fla) is the native file format of the Macromedia Flash application. (This name will change at some point to Adobe Flash.) You must export your Flash file as a SWF in order to have others view it on the web.
You must use the Macromedia Flash application to create Flash files. Not true. There are a host of applications including Illustrator and ImageReady, which we'll cover here that can create Flash movies.
You must download the Flash plug-in in order to view the SWF. Well, that's somewhat true. The person opening the SWF file does need the Flash plug-in in order to play the SWF. But most of the current browsers ship with that plug-in already installed. It's only when a new version of the Flash plug-in comes out that people may need to download the viewer.
Flash files are much smaller than ordinary files. Compared to what? Compared to the equivalent GIF animation, Flash files are much smaller. But if you fill a Flash movie with tons of pixel images and QuickTime movies, you're going to create a large file.

Flash versus PDF: Who's the Winner?

For years people engaged in a debate as to which format was better on the web, Flash or PDF. The truth is, and was, that they both have their benefits and it shouldn't have to be an either/or situation. So now that Adobe has both, what is the future of Flash and PDF?

Fortunately, Adobe has already given us the answer. In response to the question "What are Adobe's plans for Flash Player and Adobe Reader?" Adobe has posted the following answer on its web site: "Our long-term plan is to develop a 'universal client' by combining PDF, Flash and HTML in a single, integrated runtime. Of course, we will continue delivering the Flash Player as a small, efficient runtime for content and applications on the web, and Adobe Reader for viewing and interacting with PDF documents and forms. The integration of these technologies into a unified framework creates a ubiquitous platform that runs on virtually every device, and dramatically expands the opportunities to create compelling solutions."

So it looks like there will be a Flash player, a PDF reader, and a combination application that handles both.

Creating Flash Files and Movies

There are quite a few options in the Creative Suite applications for creating static Flash files as well as Flash movies. When we talk about static Flash files we mean a document that has only one page. A static Flash file can also refer to a multi-page document if it doesn't automatically jump from one web page to another. Flash movies jump from one frame to another to create an animation. Flash movies can also have sound and QuickTime movies inside the pages.

Illustrator is our program of choice for creating static Flash files as well as Flash movies. In this section we'll discuss two different methods for creating SWF files from Illustrator both good, one richer than the other and we won't completely leave out GoLive either.

Save For Web as SWF

The simple, convenient method for saving an Illustrator document as a SWF file is by using the Save For Web dialog box (Figure 17-18). These are the settings you can choose:

AI File To SWF File exports the artwork to a single frame. Use this setting if want to open the artwork in Macromedia Flash or if you do not want to animate the artwork.
Layers To SWF Frames exports the artwork on each layer to a separate SWF frame. This creates an animated SWF.
Compression compacts the file to its smallest possible size. Do not choose this option if you want to use the artwork in the Macromedia Flash application.
Protect File keeps users from downloading or modifying the exported SWF file. This is another reason why the SWF format has gained popularity: SWF files can't be pirated by others who view your site.
Text As Outlines converts the text into paths so the viewers do not need to have those fonts installed on their machines.
Loop sets the animation to play continuously instead of just once. This setting is available only if you have chosen Layers To SWF Frames.
Curve Quality sets the quality of curves. A low number decreases the exported file size but will make curves look slightly chunky. A higher number increases creates a larger file size but makes the curves look better.
Frame Rate sets the rate (in frames per second) at which the animation plays in the Flash player.

Figure 17-18. SWF settings in the Save For Web dialog box in Illustrator.

If you have selected AI File to SWF File, you have additional options for how the artwork should export:

Preserve Appearance expands any strokes into fills and flattens any blending modes and transparency settings that aren't supported by the SWF format.
Preserve Editability Where Possible converts the Illustrator strokes to SWF strokes, and approximates or ignores transparency that isn't supported by the SWF format.

Export as SWF in Illustrator

The Save For Web dialog box method, discussed above, is fine for simple files that can be exported without any further enhancements. But there's another Illustrator feature the Export As Macromedia Flash (SWF) command that's a powerhouse when it comes to creating rich Flash files.

To take advantage of the abilities of this export process, as you work in Illustrator, be sure to set up your document with layers for each frame of the Flash animation. In addition to the layers, however, you can apply blends that can be set to be animations in the finished SWF file. Figures 17-19 and 17-20 show the arrangement of layers and export settings for a Flash animation.

Figure 17-19. Arrangement of Illustrator artwork to create a Flash animation.

Figure 17-20. Macromedia Flash (SWF) Format Options dialog box set for the animation options.

As you work, remember that some layers can be set as background layers that remain visible throughout the animation. Although they are called background layers, they do not have to be below the other layers in the artwork. In Figure 17-19, the Name layer is on top of the other layers. Then, in the final export options shown in Figure 17-20, the layer has been set to Use As Background. This keeps that layer visible as the rest of the animation plays.

Choose File > Export, and then choose Macromedia Flash (swf). This opens the Macromedia Flash (SWF) Format Options dialog box. Most of the settings in this dialog box are the same as the ones in the Save For Web dialog box, but as you might expect, you'll find a few new ones:

AI Layers To SWF Files exports the art in each Illustrator layer to a separate Flash file. Use this option if you would like to import the Illustrator artwork into the Macromedia Flash application.
Generate HTML creates an HTML file that contains the code necessary to play the Flash file in a browser. You can copy and paste this code into your GoLive or Dreamweaver layouts.
Clip To Artboard Size exports the file as the size of the Illustrator artboard page. With this open unchecked, the file is the size of the bounding box that contains the artwork.
Background Color lets you assign a color to go behind the artwork. The default is white.

The Animation section controls are active only for the AI Layers To SWF Frames setting:

Use As Background allows you to designate layers that will be visible throughout the animation. Check the option and then Shift-click to select as many of the named layers as desired.
Layer Order can be set to Top Down or Bottom Up. This sets which layer should start the animation.
Animate Blends can be turned on or off. If you turn it on, you can then choose In Sequence or In Build. In Sequence displays an element of the blend, and then removes it to display the next element. In Build displays an element of the blend, and then adds the next element in the blend to the display.

If you have any pixel images in the Illustrator artwork, or have applied any transparency or effects that will create pixel images, you can control the appearance of those pixel images in the Image section:

Image Format lets you compress the images so the final SWF file is smaller. The Lossless setting uses a ZLIB compression that does not change the quality of the image. However, this creates a larger file than the Lossy (JPEG) setting.
JPEG Quality sets the level of compression for the final image. If you have small shadows on artwork that is quickly moving around, you can get away with a very low quality. Increase the quality if you need a better appearance for people's photos.
Method specifies the type of JPEG compression: Baseline Standard or Baseline Optimized. Baseline Optimized applies additional optimization creating a smaller file. Really old web browsers didn't support Baseline Optimized, but today there are few problems using this format.
Resolution lets you choose the resolution for the images. If you expect your viewers to zoom in on the Flash images, you may want to set this number higher than the screen resolution of 72 ppi. You can set the resolution up to 2400 ppi.

Creating SWF files in GoLive

You don't have to export Flash movies in Illustrator. Just bring the Illustrator file into GoLive as a Smart Object (see Chapter 9, "Smart Objects and Intelligent Layouts"). When you choose the Illustrator file, the Conversion Settings dialog box appears (Figure 17-21). Choose SWF from the format list. This opens up the exact same Macromedia Flash (SWF) Format Options dialog box shown in Figure 17-20. Set the export, appearance, and animation options as described in the previous section.