Preparing Vector Graphics for Flash Movies Flash

Earlier in this book, we discussed the use of external media in Flash movies. However, not all vector graphics are created the same. Some vector graphics may be simple objects and fills, while others may include complex blending or paths that add significant weight to a Flash movie. Even though most vector graphics are by nature much smaller than raster graphic equivalents, don’t assume that they’re optimized for Flash use.

Guidelines for using external vector graphics in Flash
Because Flash is primarily a vector-based application, using vector graphics from other applications is rather straightforward.

However, because most vector graphics applications are geared for print production (for example, publishing documents intended for press), you need to keep some principles in mind when creating graphics for Flash in external graphics applications:

  • Limit or reduce the number of points describing complex paths. This looks at using FreeHand’s Simplify command and Illustrator’s Pathfinder window to accomplish this task.
  • Limit the number of embedded typefaces (or fonts). Multiple fonts add to the final .SWF movie’s file size. This shows you how to convert fonts to outlines in both FreeHand and Illustrator.
  • To insure color consistency between applications, use only RGB colors (and color pickers) for artwork. Flash can only use RGB color values, and converts any CMYK colors to RGB colors. Color conversions usually produce unwanted color shifts. This shows you how to set up FreeHand and Illustrator to avoid this.
  • Gradients created in other drawing applications are not converted to Flash gradients when the file is imported. Unless you’re using Macromedia FreeHand, you may need to replace externally created gradients with Flash gradients, or to accept the file size addition to the Flash movie. This teaches you how to redraw gradients in Flash.
  • Some vector formats can use layers, and Flash recognizes these layers if the graphic file format is correctly specified. Layers keep graphic elements separate from one another.

Reducing path complexity
All vector graphics are made up of paths in one shape or another. A path can be as simple as a straight-line with 2 points, a curved line with 2 points, or 500 or more points along an irregular shape or fill. This is why vector graphics are well suited for noncontinuous tone images such as logos, architectural drawings, clip art, and so forth. Fonts are also made up of paths.

When you use imported vector graphics in Flash movies, you should minimize the number of points describing curved lines or intricate outlined graphics (for example, “traced” raster images). A big problem with creating cool graphics in vector-based applications such as Illustrator, FreeHand, and 3D Studio Max is the number of points used to describe lines. When these graphics are imported into Flash, animations are slower and harder to redraw (or refresh) on the computer screen. In addition, the file size of the Flash movie grows considerably.

Simplify paths in FreeHand
Complex artwork can be “simplified” in FreeHand. Simplifying reduces the number of points to describe a path (or a set of paths). To simplify any artwork, select the paths that describe the object and choose Modify➪Alter Path➪Simplify .

The Simplify dialog in FreeHand 8 can reduce the complexity of vector artwork.

The Simplify dialog in FreeHand 8 can reduce the complexity of vector artwork.

The slider and/or text field of the Simplify dialog controls how much information is discarded from the original artwork. Although it might seem tempting to use the highest setting (10), you may end up drastically changing the look of the original artwork..

Compare the effects of the Simplify command at different settings.

Compare the effects of the Simplify command at different settings.

Although the visual difference between the Simplify settings may not be readily apparent, the resulting .SWF file sizes are noticeably different. The original artwork’s .SWF file (when copied, pasted, and exported from Flash 5) was 48.4K.
a) Original artwork b) Simplify "5" c) Simplify "8"

The simplified “5” version of the original produced a 31K .SWF file, and the simplified “8” version resulted in a 29.8K .SWF file. Granted, those are still large .SWF movies, but it does illustrate the file-size savings that the Simplify command can accomplish.

Optimize curves command in Flash
You can also reduce the complexity of paths within Flash 5, by using the Modify➪ Curves➪Optimize command. This has the same effect as the Simplify command in FreeHand, with a couple of extra options. Be sure to use the Modify➪Break Apart command before you use the Optimize command you can’t optimize groups or symbols. Figure below shows the effect of maximum smoothing on the seashell_ simplify_5 graphic from the previous section.

Flash 5’s Optimize Curves dialog enables you to specify multiple passes, which means that Flash will optimize the graphic at a given setting as much as it possibly can.

Optimize Curves dialog enables you to specify multiple passes, which means that Flash will optimize the graphic at a given setting as much as it possibly can.

Using the Pathfinder window in Illustrator 9
You can use the Pathfinder window in Illustrator 9 to join overlapping paths. Not only does this reduce the complexity of the path, but it makes the graphic easier to handle as a group. Select the overlapping paths by Shift+clicking each object. In the Pathfinder window, select an operation that is suitable for the overlapping elements. The Unite command is used to combine the individual components of the crosshair into one unified path shows below.

Combine paths into single path by using the Pathfinder window.

Tracing complex vector artwork in Flash
Many graphics programs, such as Discreet 3D Studio Max and Adobe Dimensions, can create some astonishing vector-based graphics. However, when you import EPS versions of those graphics into Flash, they either fall apart (display horribly) or add unrealistic byte chunks to your Flash movie. Does this mean that you can’t use these intricate graphics in Flash movies?

You can try several different procedures with intricate vector artwork, including using the methods described previously, to make intricate graphics more Flashfriendly. Depending on the needs of the artwork, you may be able to output small raster equivalents that won’t consume nearly as much space as highly detailed vector graphics. Or you can try redrawing the artwork in Flash. Sound crazy and timeconsuming?

Well, it’s a bit of both, but many Flash designers spend hour after hour getting incredibly small file sizes from “hand-tracing” vector designs in Flash. For example, if you made a highly detailed technical drawing of a light bulb, and wanted to bring into Flash, you could import the original EPS version of the drawing into Flash, place it on a locked layer, and use Flash drawing tools to recreate the object .

Compare the original artwork of the light bulb (A) to the simplified version drawn in Flash (B).

Compare the original artwork of the light bulb (A) to the simplified version drawn in Flash (B).

Converting text to outlines
Another aspect of vector graphics that you need to keep in mind especially when working with other designers is font linking and embedding. With most vector file formats such as Illustrator, FreeHand, or EPS, you can link to fonts that are located on your system. However, if you give those files to someone else who doesn’t have those fonts installed, then he/she won’t be able to see or use those fonts. Some formats enable you to embed fonts into the document file, which circumvents this problem. However, whether the fonts are linked or embedded, you may be unnecessarily bloating the size of the vector graphic.

You can convert any text into outlines (a.k.a. paths) in any drawing or illustration program. In FreeHand 9, select the text as a text block (with the Arrow Tool, not the Text Tool) and choose Text➪Convert to Paths. In Illustrator 9, select the text as an object and choose Type➪Create Outlines.

Make sure that you have finished editing your text before converting the text to outlines. The text at the top can be edited, whereas the text at the bottom (the same text converted to outlines) cannot be edited.

Make sure that you have finished editing your text before converting the text to outlines

If you have a lot of body text in the graphic, you may want to copy the text directly into a Flash text box and use a _sans, _serif, or _typewriter device font. These fonts do not require any additional file information (unlike embedded fonts) when used in a Flash movie.

Controlling color output
Flash 5 can only use an RGB color space, meaning that it renders colors in an additive fashion full red, green, and blue light added together produce white light.

Whenever possible, use RGB color pickers in your preferred drawing application. If you use CMYK (subtraction colors), then you will notice color shifts when the artwork is imported into Flash 5. If you’re using FreeHand 9 or Illustrator 9, be sure that you specify colors with the RGB color picker; doing so ensures that both copied-and-pasted objects and exported files will appear as you see them in the Illustrator workspace. If you’re using Macromedia FreeHand 9, then you have a wider range of clipboard options.

Setting up preferences in FreeHand
Macromedia FreeHand 9 has controllable clipboard options, accessible via File➪Preferences. In the PC version of FreeHand, click the Import/Export tab of the Preferences dialog. In the Mac version of FreeHand, click the Export category of the Preferences dialog. There, you find a Convert Colors To drop-down menu. If you are using a mix of CMYK and RGB color in a FreeHand document, then choose CMYK and RGB. However, this may render CMYK artwork differently in Flash 5. To have WYSIWYG (What You See Is What You Get) color between FreeHand and Flash, opt to use the solitary RGB option. This option converts all artwork to RGB color space, regardless of the original color picker used to fill the object(s).

Saving in the proper file format
Some vector file formats cannot save artwork color values in RGB space. If you are using Adobe Illustrator 8 or 9, make sure you specify Illustrator 7 in the Illustrator document options when saving. If you choose the Illustrator 6 or lower format, then RGB values will not be saved and color shifts will result. If you are exporting EPS files from FreeHand 8, use the Setup (PC) or Options (Mac) button in the Export Document dialog to access the same color options available in the FreeHand Preferences, discussed previously. Because FreeHand 9 supports direct export to .SWF files, you should use this route (instead of EPS files) to insure complete color compatibility with Flash 5. We see more discussion of color space in the next section.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Flash Topics