Foundation Flash CS5 For Designers- P4

GRAPHICS IN FLASH CS5
129


Figure 2-66. A traced bitmap is on the right, and the original image is on the left.
If you have used previous versions of Flash, you will find the Preview button in the
Trace Bitmap dialog box a welcome addition to Flash CS5.
4.
Click OK to apply the change and close the dialog box.
5.
Now you’ll see what happens when you use even closer tolerances. Select the image on the right
of the stage, and open the Trace Bitmap dialog box. Specify these values:
 Color threshold: 5
 Minimum area: 2
 Corner threshold: Many corners
 Curve fit: Pixels
6.
Click the Preview button. The progress bar will take a bit longer this time, and when it finishes,
the difference between the original image and the vector image is not readily evident. Click OK to
apply the changes.
You are about to find out that there is indeed a major difference between the original bitmap and the traced
image. The difference becomes evident when you optimize the image. Let’s get real clear on one aspect of
tracing: Flash should be your last resort. Illustrator CS5’s Live Trace feature is far superior and more
accurate.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 2
130

Optimizing the drawing
In Flash, optimizing a drawing means you are reducing the number of corners in a traced image and

smoothing out the lines in the traced image to give you a smaller and less-precise image. Though you can
optimize any drawing you have in Flash, this technique is best applied to traced images. Here’s how:
1.
Change to the Selection tool, and marquee the image you traced. Select Modify
➤
Shape
➤

Optimize to open the Optimize Curves dialog box shown in Figure 2-67.

Figure 2-67. The Optimize Curves dialog box lets you reduce the size of a traced image.
2.
Drag the Smoothing slider up to the Maximum value of 100, and click OK. The process starts,
and when it finishes, you will be presented with an Alert box telling you how many curves have
been optimized (see Figure 2-68).
The downside is the image loses a lot of its precision, and some of the curves become spiky because
Flash converted all the pixelated smoothness to vectors. If you repeat the process on the second image
but only move the Smoothing slider to the midpoint, the process will take a lot longer than the previous
one, and the curve reduction will be minimal. This is because you essentially created a high-resolution
vector image, so there are a lot more curves to check out. The bottom line here is the decision regarding
using a bitmap, tracing it, and optimizing the curves is up to you.
This book was purchased by
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
GRAPHICS IN FLASH CS5
131


Figure 2-68. A 26 percent curve reduction means a hefty file size reduction.
JPEG files and Flash

The JPG/JPEG file format is the one used for photos. As mentioned earlier, JPEG stands for Joint
Photographic Experts Group and is a method of compressing an image using areas of contiguous color.
The file size reductions can be significant with minimal to moderate image quality loss. This explains why
this format has become a de facto imaging format for digital media. In this exercise, you are going to learn
how to optimize a JPEG image in Flash.
Before you do this, it is extremely important you understand that the JPEG format is lossy. This means
each time a JPEG image is compressed in the JPEG format, the image quality degrades. The point here is
you have to make a decision regarding JPEG images before they arrive in Flash. Will the compression be
done in Photoshop or Fireworks, or will Flash handle the chores? If the answer is Flash, always set the
JPG Quality slider in Photoshop or Fireworks to 100 percent to apply minimal compression. If you don’t
know where the image came from or what compression was used, don’t let Flash handle the compression.
1.
Open the JPGCompression.fla file in your Chapter 2 Exercise folder. When it opens, you will
notice the movie contains nothing more than a single JPEG image, and the stage matches the
image dimensions. In short, there is no wasted space that can skew the results of this
experiment.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 2
132

2.
Minimize Flash, and open the Chapter 2 Exercise folder. Inside the folder is a file named
JPGCompression.swf. It is the compiled version of the FLA file, and if you check its file size, you
will see it comes in at about 176KB. Let’s see whether we can shed some weight from this file.
3.
Return to Flash, and save the open Flash file to your Exercise folder by selecting File
➤
Save
As and naming the file JPGCompression2.fla.

4.
Double-click the image in the Library to open the Bitmap Properties dialog box shown in
Figure 2-69.
Be aware that any changes made in this dialog box ripple through the entire movie and
will override the defaults used in the Publish dialog box.

Figure 2-69. The Bitmap Properties dialog box
Let’s examine this dialog box. To start, the image on the left side is the preview image. As you start playing
with some of the settings, this image will show you the final result of your choices. This is a good thing
because changes you make in this dialog box are visible only when the SWF file is running; they won’t be
reflected in the image on the stage. The other areas are as follows:
 Name: This is the name of the file. If you want to rename the file, select it and enter a new name.
This only changes the name by which Flash knows the file—it does not “reach outside of Flash”
and rename the original image.
 Path, date, dimensions: These are fairly self-explanatory. There will be the odd occasion where
this information will not be displayed. The reason is the image was pasted in from the Clipboard.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
GRAPHICS IN FLASH CS5
133

 Update button: If you have edited the image without using the Edit with feature, clicking this
button will replace the image with the new version. This button will not work if you have saved or
moved the original image to a new location on the computer. To “reconnect” such a broken link,
respecify the image file’s location with the Import button, explained next.
 Import button: Click this, and you open the Import Bitmap dialog box. When using this
button, the new file will replace the image in the Library, and all instances of that image in your
movie will also be updated.
 Allow smoothing option: Think of this as anti-aliasing applied to an image. This feature tends
to blur an image, so use it judiciously. Where it really shines is when it is applied to low-resolution

images because it reduces the dreaded jaggies.
 Compression drop-down menu: This allows you to change the image compression to either
Photo (JPEG) or Lossless (PNG/GIF). Use Photo (JPEG) for photographs and
Lossless (PNG/GIF) for images with simple shapes and few colors, such as line art or logos.
To help you wrap your mind around this, the image in the dialog box uses Photo (JPEG)
compression, and if you click the Test button, the file size is about 2.4KB. Apply Lossless
compression and click the Test button, and the file size rockets up to 142KB.
 Use Imported JPEG data option: Select this check box if the image has already been
compressed or if you aren’t sure whether compression has been applied. Selecting this avoids
the nasty results of applying double compression to an image.
 Quality option: If you deselect the Use Imported JPEG data check box, you can apply
your own compression settings. In fact, let’s try it.
5.
Make sure your compression setting is Photo (JPEG) and that you have deselected the Use
Imported JPEG Data check box. Change the Quality value to 10 percent, and click the
Test button. The image in the preview area, shown in Figure 2-70, is just plain awful. The good
news is the file size, at the bottom of the dialog box, is 4.6 KB.

Figure 2-70. At 10 percent quality, the image is terrible.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 2
134

6.
Change the Quality setting to 40 percent, and click the Test button. Things are a little
better, but the text in the banner a bit looks pixelated, and the file size has gone up to 16KB.
7.
Change the Quality value to the normal 80 percent value used by imaging applications, and
click the Test button. The text issue is resolved, but the file size has risen to 43.1KB. As you are

seeing, there is an intimate relationship between the Quality setting and file size.
8.
Knowing the quality between 50 percent and 80 percent is a vast improvement; let’s see if we can
maintain quality but reduce the file size. Set the Quality value to 65 percent, and click the
Test button. The difference between 65 percent and 80 percent is minimal, but the file size has
reduced to 3KB. Click OK to apply this setting and close the dialog box.
9.
Save the movie, and press Ctrl+Enter (Windows) or Cmd+Return (Mac) to test the movie. This
will create the SWF you need. Minimize Flash and the SWF window, and navigate to your
Exercise folder. The results are, to say the least, dramatic. The file size, as you see in Figure 2-
71, has reduced to 29KB from 176KB. Save and close the open movie.

Figure 2-71. Applying compression in Flash can result in seriously smaller and more efficient SWF files.
Using GIF files in Flash CS5
There was point a few years back where many web and Flash designers were preparing to celebrate the
death of the GIF image and the GIF animation. The reason was simple: in a universe where bandwidth is
plentiful and every computer on the planet is able to display 16-bit color, the limited color range and small
file size of a GIF image that made the format so important were irrelevant. GIF images were developed for
a time of limited color depth—monitors that could only display 256 colors—and dial-up modems. Then a
funny thing happened on the way to the wake; they arose from their deathbed. The reason was banner
advertising.
Ad agencies and their clients were discovering the Web really was a viable advertising medium and that
Flash was a great interactive tool for ads. The problem was, standards for banner advertising appeared on
the scene, and the agencies discovered they were handed a file size limit of 30KB. This tended to go
against the grain, and as they grappled with the requirement for small files, they rediscovered the GIF
image and the GIF animation.
This isn’t to say you should use the GIF format only in banner ads. It can be used in quite a few situations
where size, or even transparency for that matter, is a prime consideration.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

GRAPHICS IN FLASH CS5
135

Working with GIF images
Here’s how to use GIF images and GIF animations in Flash:
1.
Open the GIF.fla file in your Chapter 2 Exercise folder. When the file opens, open the
Library. There are two GIF files in the Library.
2.
Drag the Figurines image from the Library to the stage. Notice how you can see the stage
color behind the image. This image is a transparent GIF. When it comes to GIF transparency, you
have to understand it is an absolute. It is either on or off. There are no shades of opacity with this
format. GIFs may contain up to 256 colors, and one of those colors may be transparent.
3.
Drag the FigurinesNoTrans file to the stage, and place it under the image already there. This
image is a GIF image with no transparency applied.
4.
Select the image you just dragged onto the stage, and press the Ctrl+B (Windows) or Cmd+B
(Mac) combination to break the image apart. Hold on, that isn’t right. Only the figurines in the
image break apart (see Figure 2-72). That is an expected behavior. Remember what we said in
the previous step? The background in a GIF image is either on or off. If it is on, it can’t be
removed in Flash.
When you break apart an image like this, here’s what’s really going on. That image is simply translated
into a shape with a bitmap fill. It is the same thing as drawing a shape and filling it with that bitmap. This is
why file size is identical between the white and transparent versions of this image. The GIF is the same in
all respects—except that the color slot in one file’s color table is white and in the other file the color table is
transparent. But both GIFs have the same number of colors and weigh the same.
5.
To “get rid of” the white background, you can drag in the edges of the shape that contains the
white version, just like the star shape from the earlier bitmap fill example. Obviously, this would

be nearly impossible by hand with an image of this complexity, but any portion of the bitmap fill
can be hidden by changing the shape hat contains it.
6.
Close the file, and don’t save the changes.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 2
136


Figure 2-72. Transparent and regular GIFs are treated differently in Flash.
Working with GIF animations
Animated GIFs are a bit different. They are a collection of static images—think of a flip book—that play,
one after the other, at a set rate, all stored inside a single GIF file. These flip book “pages” can be imported
either directly into the main timeline (not a good idea) or into a separate movie clip. Here’s how:
1.
Open a new Flash document, and create a new movie clip named Counterforce. The Symbol
Editor will open.
2.
Select File
➤
Import
➤
Import to Stage, and when the Open dialog appears, locate the
Counterforce.gif file, select it, and click the Open button.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
GRAPHICS IN FLASH CS5
137

3.
When the import is finished, you will see that each frame of the animation has its own Flash
frame, and each image in the animation, as shown in Figure 2-73, has its own image in the
Library.
4.
Press the Enter key to test the animation or click the Scene 1 link to return to the main timeline,
add the movie clip to the stage, and test the movie.
A good habit to develop is to place the images in the Library in a folder. This way,
your Library doesn’t end up looking like what your mom would call “a pigsty.”

Figure 2-73. Importing GIF animations into a movie clip
Importing Fireworks CS5 documents into Flash CS5
When Macromedia was acquired by Adobe in 2006, the betting in the Macromedia community was that
Fireworks, Macromedia’s web imaging application, would simply not make the cut. The reason was the
market regarded Fireworks as a competitor to Photoshop—it wasn’t—and, as such, the application was
doomed to extinction.
What the Macromedia community failed to comprehend was that Adobe, prior to the acquisition, had
quietly announced it was no longer supporting ImageReady, which was the web imaging application for
Photoshop. When the acquisition was settled, Fireworks did indeed make the cut, and in fact Adobe had
decided to reposition Fireworks as a rapid prototyping application for web designers. Along the way,
Adobe improved how Fireworks PNG files integrate with Flash CS5 along with Illustrator CS5, Flex Builder
2, and Photoshop CS5, and the movement of files from Photoshop and Illustrator into Fireworks. The end
result is Flash designers now have a tool that will seriously improve their workflow.
We will be showing you elsewhere in this book techniques in which Fireworks integration will be a huge
timesaver. For now, though, let’s concentrate on getting a PNG image—the native file format used by
Fireworks—into Flash.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 2
138

As you can see in Figure 2-74, the Fireworks file we will be working with is composed of one layer,
Background, and three sublayers. When you import this PNG image into Flash, you will see these layers
move, intact, into the movie.

Figure 2-74. We start with a Fireworks CS5 PNG image.
To import the PNG image, follow these steps:
1.
Open a new Flash document. When the New Document dialog box opens, click the Templates
button, select Advertising from the Category list, and select 728 x 90 Leaderboard from
the Template list, as shown in Figure 2-75. Click OK to open the template.

Figure 2-75. Opening a Flash CS5 template
2.
Select File
➤
Import to Library, and navigate to the Banner.png image in the Chapter 2
Exercise folder.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
GRAPHICS IN FLASH CS5
139

3.
When you click the Open button, the dialog box will close, and the Fireworks PNG Import
Settings dialog box, shown in Figure 2-76, will open.

Figure 2-76. The Fireworks import dialog box
Let’s review the options:
 Import: The important aspect of this is not the scene but the fact you are being asked to

import pages. This feature was first introduced to Flash CS3. Because it is a rapid
prototyping application, Fireworks CS5 is able to create multipage documents for websites. If
the PNG file contains multiple pages, you can select the page to be imported from the drop-
down menu.
 Into: Select Current frame as movie clip so all the layers in the Fireworks image
are placed into separate layers in the movie clip. When this occurs, Flash creates a new
folder in the Library named Fireworks Objects and places the movie clip in this folder.
The second choice allows you to add the selected page as a new layer on the main timeline.
 Objects: The choices are to flatten everything on the Fireworks layer or keep each object
editable.
 Text: This has the same choices as objects. We tend to keep text editable just in case there
is a typo.
 Import as a single flattened bitmap: This option flattens all the layers into a
bitmap.
4.
Go with the default values for this example. Click OK to import the image into Flash.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 2
140

5.
When the import finishes, you will see the Fireworks Objects folder in the Library. Open it,
and you will see that Flash has created a folder for the page just imported, and if you open that
folder, you will see the movie clip and a flattened bitmap of the file.
6.
Double-click the movie clip to open it. Compare the Flash file (shown in Figure 2-77) to the
Fireworks file in Figure 2-74. You can now either save the file or close it without saving the
changes.

Figure 2-77. The Flash movie clip layers match those in the Fireworks PNG image.
Importing Illustrator CS5 documents into Flash CS5
Flash lets you import Illustrator AI files directly into Flash and generally allows you to edit each piece of the
artwork when it is in Flash. The Illustrator file importer also provides you with a great degree of control in
determining how your Illustrator artwork is imported into Flash. For example, you can now specify which
layers and paths in the Illustrator document will be imported into Flash and even have the Illustrator file be
converted to a Flash movie clip.
The Flash Illustrator file importer provides the following key features:
 Preserves editability of the most commonly used Illustrator effects such as the Flash filters and
blend modes that Flash and Illustrator have in common.
 Preserves the fidelity and editability of gradient fills.
 Imports Illustrator symbols as Flash symbols.
 Preserves the number and position of Bezier control points; the fidelity of clip masks, pattern
strokes, and fills; and object transparency.
 Provides an improved copy-and-paste workflow between Illustrator and Flash. A copy-and-paste
dialog box provides settings to apply to AI files being pasted onto the Flash stage.
This book was purchased by
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
GRAPHICS IN FLASH CS5
141

To many Flash designers, that list is “nirvana,” but there are two critical aspects of the Flash-to-Illustrator
workflow that must be kept in mind:
 Flash supports only the RGB color space. If the Illustrator image is a CMYK image, do the CMYK-
to-RGB conversion in Illustrator before importing the file into Flash.
 To preserve drop shadow, inner glow, outer glow, and Gaussian blur in Flash CS5, import the
object to which these filters are applied as a Flash movie clip. In Flash, these filters can be
applied only to movie clips.
Let’s import an Illustrator CS5 drawing to see what is causing all of the joy. The file we will be using,

Mascot.ai, contains a number of Illustrator layers and paths (see Figure 2-78). One path—in the Head
layer—contains a drop shadow.

Figure 2-78. The Illustrator CS5 file for this example contains a number of layers and paths.
The authors would like to thank Mischa Plocek for the use of the
Mascot.ai
file. Mischa
is a flash developer/artist based in Zurich, Switzerland, and his work can be seen at
www.styleterrorist.com
.

Follow these steps to import an Illustrator CS5 document into Flash CS5:
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 2
142

1.
Open a new Flash document, and import the Mascot.ai file into the Flash Library. The
Import dialog box, shown in Figure 2-79, will appear. Keep in mind the Head layer contains a
Drop Shadow filter, and as you can see, Flash will import that layer as a movie clip in order to
retain the drop shadow.

Figure 2-79. The Import dialog box used for an Illustrator CS5 image
If you select File
➤
Import to Stage, the Import dialog box will contain a couple
of choices not shown here. You will be asked whether you want the images in each layer
to be placed at their original position in the Illustrator document, and you will also be
asked whether you want to trim the stage to the dimensions of the Illustrator document.

www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
GRAPHICS IN FLASH CS5
143

2.
Select the remaining layers, not the paths, and select Create movie clip, as shown in Figure
2-80. Don’t bother with instance names because there is no need for ActionScript here. The
Convert layers to drop-down menu allows you to convert your Illustrator layers to Flash
layers or to a series of Flash keyframes (this is handy if they are animated) or allows you to put
the whole image into one Flash layer. You are also given the opportunity to import unused
symbols created in Illustrator or to flatten the image and bring it in as a bitmap.

Figure 2-80. Illustrator layers can be converted to movie clips.
The Import unused symbols option may be a bit confusing. Illustrator allows you to
create symbols, and these symbols can be imported directly into Flash from Illustrator.
We will show how this works in the next chapter.
3.
Click OK, and when the import process finishes, open the Library, as shown in Figure 2-81. The
image has been directly imported to the stage, but each of the layers has its own folder
containing the movie clip you created in the Import dialog box.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 2
144


Figure 2-81. The Illustrator image in the Flash Library. Note the drop shadow on the star.
At the top of this section, we mentioned how developers would simply copy Illustrator documents and
paste them into Flash to avoid “issues.” This can still be done, but when you paste the drawing into Flash

CS5, the dialog box shown in Figure 2-82 appears. This dialog box is fairly self-explanatory, though you
may be wondering about the Paste using AI File Importer preferences choice.

Figure 2-82. Pasting a drawing from Illustrator to Flash will open this dialog box.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
GRAPHICS IN FLASH CS5
145

You can get to the preferences by selecting Edit
➤
Preferences (Windows) or Flash
➤

Preferences (Mac). When the Preferences dialog box opens, click the AI File Importer
selection at the bottom of the Category list. This will open the AI File Importer preferences, as
shown in Figure 2-83. As you can see, many of the choices are also available in the Import dialog box.

Figure 2-83. The AI File Importer preferences
You are most likely looking at the Mascot image in the Library and thinking, “That’s all well and good,
but how do I get the dang document onto the Flash stage and play with it?” Here’s how:
1.
Drag the Mascot.ai file from the Library to the Flash stage.
2.
Double-click the image on the stage. When the Symbol Editor opens, you will see the image
is actually composed of the movie clips in the Mascot.ai.Assets folder from the Library and
that each movie clip is on a separate named layer.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 2

146

Importing Photoshop CS5 documents into Flash CS5
We’ll wind up this overview of Flash’s drawing features with the import of Photoshop CS5 images into
Flash. As you saw with Illustrator CS5, the process has been streamlined, and you are in for a rather
pleasant surprise. Follow these steps to import a Photoshop document into Flash:
1.
Open a new Flash document. When the document opens, select File
➤
Import
➤
Import to
Stage, and navigate to the IglooVillage.psd document. Click Open to launch the PSD File
Importer, shown in Figure 2-84.

Figure 2-84. The PSD file importer
The dialog box looks similar to its Illustrator counterpart. Still, there are a couple of major differences. The
inclusion of a Place layers at original position check box option ensures the contents of the
PSD file retain the exact position that they had in Photoshop. For example, if an object was positioned at X
= 100, Y = 35 in Photoshop, it will be placed at those coordinates on the Flash stage. If this option is not
selected, the imported Photoshop layers are centered on the stage.
The other check box option, Set stage to same size as Photoshop canvas, is a real godsend.
In the case of this image, the canvas size is not the default Flash size—500 by 400—but 468 by 146.
When the file imports, the Flash stage will be resized to the dimensions of the Photoshop document.
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
GRAPHICS IN FLASH CS5
147

The manner in which PSD files are imported into Flash is set in the Preferences. You

can reach them by selecting Edit
➤
Preferences (Windows) or Flash
➤

Preferences (Mac) and selecting PSD File Importer in the Category listing.
2.
Hold down the Shift key, and click the first two layers to select them. The Merge Layers button
lights up. This means you can combine the selected layers into one layer. This works for selected
adjacent layers only. Deselect the layers.
3.
Select the check box beside the first layer. What you have just done is to tell Flash to ignore
importing that layer. Reselect the check box.
4.
Click the name of the first layer. The import options, as shown in Figure 2-85, appear on the right
side of the dialog box. The first thing you should notice is the Importer has figured out you clicked
a text layer. You have three choices as to how the text will be handled, and if you want, you can
put the selection in its own movie clip. Select the Editable text import option.
If the text in the PSD file is PostScript or TrueType, always select Editable text. If
you select the other two options, typos move, cemented, into Flash.

Figure 2-85. The text import options
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
CHAPTER 2
148

5.
With the layer still selected, select the Create movie clip for this layer check box
option, and enter Headline as the instance name. Notice the placement of a movie clip icon on

the layer strip.
6.
Click the BackgroundImage layer. Pay attention to how, as shown in Figure 2-86, the import
options change to reflect the selection of a bitmap. You can choose to put the layer in a movie
clip—Bitmap image with editable layer styles—or import a flattened bitmap image. It
makes sense with this image to choose the first option to maintain the layer transparency.

Figure 2-86. The text import options for a bitmap image
Hold on, does this mean you have to repeat this step with the remaining five layers? No.
Shift-click each layer to select all of them, and click the first option. A movie clip icon, as
shown in Figure 2-87, will appear beside each layer.

Figure 2-87. How to import a series of bitmap layers as movie clips
www.zshareall.com
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.