Flash CS4 Professional in 24 Hours- P4 pot

ptgTRY IT YOURSELF▼ Create a Symbol by Converting Selected Objects version of a symbol stored in the Library.. First, this means file size remains small because only themaster symbol add

Figure 3.11 shows the results of using several different compression levels

on the same image Notice JPEG 80 and JPEG 100 are almost identical in

quality, but JPEG 80 has a much smaller file size

You get the ultimate quality by using the compression option Lossless

(GIF/PNG) It is selected by default when you import .pngand.giffiles,

but you can select it any other time you want to use it When this option is

selected, Flash leaves the image in its original state This option always

pro-vides the best quality—but not without a price File size is highest when

this option is selected This is a suitable alternative if you’re making a

movie that doesn’t need to download from the web—for example, if you’re

making a presentation that you are delivering on your hard drive or

CD-ROM Otherwise, you should use this option only on images where you

want to retain the best quality possible If your imported image is a .gif

that already has a small file size, selecting Lossless is perfectly suitable

Be-cause even 100% JPEG compression Be-causes some image degradation, the

Lossless option is suitable for images that are particularly important

Fi-nally, the only way Flash supports 32-bit graphics (that is, raster images

with varying degrees of transparency) is through .pngitems that you set to

Lossless The fact that PNG is the only format that supports transparency is

another perfectly legitimate reason to use PNG

FIGURE 3.11

The results of different sion settings on the same image shows how quality degrades and file size shrinks.

SmoothingRegardless of which compression option you use for your importedbitmaps, Allow Smoothing (as shown earlier in Figure 3.10) is another op-tion in the Bitmap Properties dialog If you plan to scale or rotate the rastergraphic, you want to click that check mark Normally, a bitmap with its ex-plicit number of pixels looks fine without smoothing However, smoothinglets Flash apply a tiny bit of blur when the image’s pixels don’t align per-fectly with the screen’s pixels, which is the case when you rotate or scale animage You can see the effect of smoothing in a side-by-side comparison inFigure 3.12

The downside of smoothing is images can look a bit fuzzy, so don’t use it ifyou’re not rotating or scaling the image If you’re using the image in a de-tailed animation, you want to opt for smoothing Compared to how raspy amodified image looks without smoothing, you probably want to click thecheck mark to enable smoothing when appropriate

Importing Layered Raster Graphics

Flash CS4 can import Photoshop .psdfiles The value is that artists canwork in Photoshop, and you can conveniently import the graphics they cre-ate Compared to having the artist individually export each element andthen you import it and place it in the correct position, this is a huge work-flow improvement What’s doubly great about this new feature is that it’s

so intuitive there’s not a whole lot to learn

FIGURE 3.12

Applying smoothing to the image on

the left improves it when rotated,

but the same effect makes the

im-age look soft.

Like the Illustrator Import dialog, when you select File, Import, Import to

Stageand point to a Photoshop file, you see all the layers and folders

con-tained in the source Photoshop file, as shown in Figure 3.13

There are some striking similarities between the Photoshop import dialog

and the Illustrator one discussed earlier—though this one is more

ad-vanced You can see similar global options at the bottom left as to whether

to keep objects in position and or to convert layers into Flash layers or

keyframes Also similar is the way you can include or exclude layers by

clicking check marks

A particularly handy feature in Photoshop, called layer comps, lets you save

multiple arrangements of your layers and their contents Artists can include

tons of layers with all the graphics for an entire project in a single

Photo-shop file Then, they can make multiple compositions—for example, one

where only the layers related to the home screen in your project are visible

and another where the layers for a video section are visible With layer

comps, artists can quickly view different arrangements without going

through and turning layers on and off When you import a Photoshop

doc-ument with layer comps, you see them listed at the top left, as shown in

Figure 3.14 This gives you a quick way to select all the layers related to a

particular layout

FIGURE 3.13

Impor ting a Photoshop document allows you to select how to impor t each layer.

After you’ve selected the layers you want to import, you can set the optionsfor how each layer gets imported on the right side of the import dialog

Provided you don’t want to accept the defaults, you individually selecteach layer and make adjustments to the options on the right All layer typescan be imported as a flattened bitmap, which is the best way to retain theexact look created by the artist You see slightly different options in text lay-ers and shape layers, but the big difference from the Illustrator importerdiscussed earlier is that for each layer you import as a flattened bitmap,you can individually set the publish settings

The publish settings for each imported layer affect the Bitmap propertiesfor the contained objects when they appear in the Library These settingsare the same ones you learned about in the previous section “AdjustingBitmap Properties.” This way, you can make the decision between JPEGand PNG/GIF and whether to use Flash document’s publish settings forcompression or set them individually for each item The odd thing is thatthe terms are slightly different than the ones you just learned Where thePhotoshop importer says Lossy Compression, it means JPEG in the BitmapProperties dialog (accessible by double-clicking an item after it’s in the Li-brary) Where the Photoshop importer says Lossless, it means PNG

Although you always see the best quality by importing layers as flattenedbitmaps, other options also have some value In the case of text layers, youcan opt to import as editable text You can make edits to the actual wording

FIGURE 3.14

You can use the Layer Comp

drop-down to quickly select the layers

re-lated to a par ticular layout.

85Summary

later, but realize you immediately lose any layer effects applied to the text

Photoshop supports very detailed text effects that are unmatched in Flash

For both shape and text layers, you can choose to keep paths and layer

styles editable Not only does this mean you see subtle differences in the

image after it’s inside Flash, but a complex Photoshop document translates

to a complex Flash document Be prepared to test any import process if

you’re not importing as flattened bitmaps

To summarize the suggested workflow, select the layers you want to

im-port, either by clicking the check marks or by selecting a layer comp, which

effectively selects the layers for you Then, go through each layer to adjust

the publish settings or do this later via the Library item’s bitmap properties

Summary

When possible, you should create graphics inside Flash But sometimes you

can’t There are times when you need to import graphics, such as when you

have an existing graphic that would be impossible or difficult to recreate in

Flash or when a graphic requires a raster file type, such as a photograph

When you’re certain you want to import, Flash provides you with

mecha-nisms to do so

Q&A

Q Importing Photoshop and Illustrator files looks pretty cool, but I don’t have

those programs How can I test out some of what I learned this hour?

A You can find some sample .aiand.psdfiles in the downloads section

of the publisher’s website

Q I’m having trouble importing images from a digital camera I have

some great shots of my potato chip collection, but they’re huge after I

import them How can I resize them?

A Because multi-megapixel cameras produce originals that can be

thou-sands of pixels wide, you don’t want to impor t these directly First use

an image editing program, such as Fireworks, to resize the image to fit

comfor tably on a normal screen size—that is, less than 1024×768 or

800×600 Taking a megapixel image and scaling it down inside Flash

does not improve the sharpness and actually does the opposite if you

don’t select the Allow Smoothing option Worse still, the file size will

be huge Don’t do that; instead resize and optimize the image before

impor ting!

Q I have a photograph that I use as a raster graphic in my Flash movie

After I scan it into the computer and touch it up, what file formatshould I choose? There are so many

A Generally, you want to keep all your raster graphics in the highest-qualityformat possible before impor ting into Flash One exception is when youuse a tool, such as Fireworks, to produce an optimally compressed im-age If you use an outside program to compress the image, make sureyou don’t recompress in Flash; leave the default setting Use Impor tedJPEG Quality Alternatively, if you impor t a high-quality .pct,.bmp, or.png, you can compress it in Flash until you’re satisfied with the com-pression level JPEGs are all right, but they always have some compres-sion that could result in ar tifacts GIFs are not a good alternativebecause they can’t have more than 256 explicit colors Changing the fileformat of an existing image never makes a graphic better andpotentiallymakes it worse You should star t with the best quality possible, andthen reduce it as the ver y last step

Q How do you determine how much one graphic is contributing to the nal movie’s file size?

fi-A If it’s a raster graphic, you can explore the Bitmap Proper ties dialog box,which tells you exactly how big a graphic is With vector graphics, deter-mining the size is more difficult Ultimately, you should copy the graphicinto a new file and expor t a .swfof that file by selecting File, Expor t

You can look at the file size Sometimes it’s not so impor tant how muchone graphic is contributing, especially if it’s an impor tant graphic; yourconcern should always be to not add to the file size unnecessarily

Q I have a fairly simple Illustrator file graphic that I would like to importinto Flash It’s impossible to redraw in Flash, so I have to import it, right?

A If the file is simple, it should be possible to create it in Flash Makesure you’re fully exploiting the potential of Flash Read Hour 2, “Drawingand Painting Original Ar t in Flash,” again, if necessar y Of course, if youhave to impor t the image, do so You might still have luck if you first ex-por t it from Illustrator as a .swfbefore impor ting

87Workshop

Workshop

The Workshop consists of quiz questions and answers to help you solidify

your understanding of the material covered in this hour You should try to

answer the questions before checking the answers

Quiz

1 What’s the most appropriate image file format to import into Flash?

A Raster

B Vector

C It depends on the nature or content of the image

2 If you import a .gifimage into Flash, what kind of compression does

Flash use on the image when it exports the entire movie?

A It depends on the Compression setting in the Bitmap Properties

dialog box

B Flash always uses JPEG compression, but it’s up to you to specify

what quality level to use

C GIFs are exported as GIFs

3 How do you import photographs created with a digital camera?

A You can’t; you must use conventional film

B It’s simple; click File, Import

C Be sure to resize the image in an outside program first, then click

File, Import

2 A.Each image imported can have a unique compression setting that

is not dependent on its original format By default, however, ported.gifsget exported as .gifs

im-3 C.Maybe we’re being tricky including a question whose explanation isonly found in the Q&A section, but be sure to read the second question

in that section if you didn’t get this answer right because it’s important

WHAT YOU’LL LEARN INTHIS HOUR:

How to create symbols

How to use the Library

to minimize work

How to identify clues inthe Flash interface tohelp keep your bearings

How to use multiplesymbol instances with-out increasing amovie’s size

Flash’s Library is so fundamental that creating a Flash movie without it is

al-most impossible If you don’t use the Library, it’s fair to say you’re doing

something wrong The Library is where master versions of graphics are

kept Editing a graphic in the library changes all instances of that graphic

throughout a movie Also, graphics stored in the Library—despite how

many times they’re used in a movie—are stored and downloaded only

once, making your movie more efficient This hour explores organization of

your movie using the Library

Symbols are things, usually graphics, that you put in the Library Anything

created in Flash and placed onstage, such as shapes, groups, other symbols,

even animations, can be converted into a symbol and placed in the Library

You can choose from three symbol types, and each has unique

characteris-tics We get to these in a moment

Item is the term used for each media element imported into your movie,

and thereby resides in the Library Items can be bitmaps, audio files, and

digital videos However, symbols created in Flash are the Library items

with which you become most familiar

Instance is the term given to a symbol anytime it’s used outside the Library.

As you see, only one master of any symbol exists—the one saved in the

Li-brary However, you can drag as many instances of a master symbol out of

the Library as you like Each instance is like a copy of the original

The Concept of the Library

The process of using the Library involves creating symbols and then using

instances of those symbols throughout a movie You always have one master

HOUR 4

Staying Organized with the Library and Layers

ptgTRY IT YOURSELF

▼

Create a Symbol by

Converting Selected

Objects

version of a symbol stored in the Library You can drag multiple instances

of that symbol from the Library to any other part of the movie—even insideother symbols The ability to create instances of a master symbol offers twoimportant benefits First, this means file size remains small because only themaster symbol adds to the file size, and each instance just points to the

master, (similar to how a shortcut in Windows or an alias on the Macintosh

points to a master file) Second, you can make a visual change to the mastersymbol, and that change is then reflected in each instance This is like usingstyles in a word processing document: You make a change to the style, andeach instance where you use that style reflects the change You learn moreabout these benefits in a minute, but let’s first go over the basics of how tocreate and use symbols

How to Create and Use Symbols

Two ways to create symbols are to convert any selected object onstage into

a symbol or make a symbol from scratch The following task looks at thefirst method

In this task, you create symbols using the Conver t to Symbol feature

Follow these steps:

1 In a new file, use the Oval tool to draw a circle Click the Selection tooland make sure the circle is entirely selected You can double-click thecenter if it’s not a Drawing object, marquee the whole thing, or simplyclick Edit, Select All

2 Click Modify, Convert to Symbol or press F8 Flash forces you to ify the name and type for this symbol (as shown in Figure 4.1)

spec-3 You should always name symbols logically The default Symbol 1 mightseem logical, but having 35 symbols all named in this manner can be-come unwieldy (You learn more about naming symbols later in this hour,

in the section “Managing the Librar y by Using Names, Sor ting, and ers.”) Name this one Circle We look at all three types of symbols

Fold-FIGURE 4.1

When you conver t to a symbol,

you must specify a name and

type.

eventually, but for now consider Movie Clip the best choice when you’re

not sure which to choose Buttons are useful only when you’re creating

buttons, and Graphics are primarily used for static graphics Set Type as

Movie Clip, and click OK It’s possible that your Conver t to Symbol

dia-log box is set to Advanced so it looks much larger than the one in Figure

4.1 If this is the case, you can collapse it by clicking the Basic button

(which toggles to read Advanced) because we aren’t exploring the

Ad-vanced settings now

4 Open your Librar y window by clicking Window, Library (or Ctrl+L), and

you should notice one symbol, Circle, in the Librar y When you selected

Convert to Symbol, you did two things: You stored your new symbol in

the Librar y, and you caused the object that remained on the Stage to

become an instance of the Circle symbol If you drag more instances

from the Librar y window (by single-clicking and dragging the picture of

the circle from the Librar y window onto the Stage), each new instance is

equivalent to the instance already on the Stage If you double-click by

accident, you see Scene 1: Circle in your Edit Bar, indicating you’re

edit-ing the master version of the symbol In this case, you can simply click

Scene 1 or press Ctrl+E to get back to editing the document

5 Tr y dragging a few instances of the Circle symbol onto the Stage You

now have multiple instances of the Circle symbol You’re about to make

a change to the master version in the Librar y, and you see that change

in each instance on the Stage

6 From the Librar y panel, double-click the picture of your Circle symbol or

select Edit from the Librar y’s menu, as shown in Figure 4.2 It might

ap-pear that nothing has happened, but now you’re inside the Circle symbol

where you can edit its contents The best indication is the Edit Bar,

cov-ered in Hour 2, “Drawing and Painting Original Ar t in Flash” (also see

Figure 4.3) In addition, you should see only one copy of your circle, the

original, in the center of the Stage The Stage appears to have no

bor-ders These clues tell you that you are currently inside the master

ver-sion of the Circle symbol about to edit it

7 Now we get out of Edit mode for the master version and reenter another

way Click Scene 1 in the Edit Bar You return to the main scene with

multiple instances of the Circle symbol visible Enter the master version

of the symbol by double-clicking one of the instances of it You should

see the Edit Bar and all the other instances dim slightly This is similar

to how you can edit the contents of a grouped shape In this case,

you’re doing what’s called Edit in Place This is where you can edit the

Circle symbol

8 Take a “chunk” out of the master graphic of the Circle by using the

mar-quee technique with the Selection tool (see Figure 4.4) If the Circle is a

Drawing Object, then be sure to double-click it first

TRY IT YOURSELF

▼ Create a Symbol by Converting Selected Objects

The Librar y’s options menu

in-cludes several choices, including

Edit.

Center of symbol Edit Bar

FIGURE 4.3

You can tell you’re editing the

contents of a symbol when you

look at the Edit Bar.

9 Go back to the main scene by clicking Scene 1 in the Edit Bar Now allinstances of the Circle symbol have the same chunk taken out of them!

Any new instances of the symbol you drag from the Librar y will have thesame effect

Create a New Symbol

from Scratch TRY IT YOURSELF ▼

FIGURE 4.4

The edits you make to this symbol affects each instance.

In the preceding task, you converted a selection into a symbol This

gener-ated an instance of the symbol you cregener-ated on the Stage The other way to

create a symbol is to create it directly in the Library, as described in the

fol-lowing task Neither method is better than the other, and both give you the

same result

In this task, you make a symbol by using the New Symbol feature Follow

these steps:

1 Open a new file and choose Insert, New Symbol

2 You see the same Symbol Proper ties dialog box that you see when you

use Conver t to Symbol In this case, name the new symbol Square and

set the Type option to Movie Clip This time when you click OK, you are

presented with the editing screen for the master version of the Square

symbol Since we haven’t created it yet, the stage is blank, as shown in

Figure 4.5 You should see the Edit Bar indicate you are editing the

Square symbol Think of it this way: Conver t to Symbol puts your

selec-tion in the Librar y; whereas New Symbol makes you name the symbol,

and then takes you to the master version of that symbol, so you can

draw something—effectively saying, “Okay, you want a new symbol?

Draw it.”

3 Now that you’re in the master version of the Square symbol, you can

draw the square You probably want to draw it near the registration point

of the symbol, indicated by the plus sign (shown in Figure 4.5) This

TRY IT YOURSELF

▼ Create a Symbol by Converting Selected Objects

becomes the reference point whenever you view or change the stance’s location onscreen But how do you get the square you draw inthe center? You might have discovered the Paste in Place command inthe Edit menu (or Ctrl+Shift+V) It enables you to paste anything to thesame location from where you copied it The Paste in Center command

in-is useful here Select your drawn square, click Edit, Cut, and then mediately Edit, Paste in Center Presto! It’s centered You could alsouse the Info panel to set the shape’s transformation point to 0,0 or usethe Align Panel’s To Stage option, and then click both Align HorizontalCenter and Align Vertical Center

im-4 When you’re done creating the Square symbol, go back to the mainscene by clicking Scene 1 in the Edit Bar Where’s the square? Well,New Symbol creates a symbol and keeps it safe in the Librar y panel,where you can find it Locate the new Square symbol in the Librar y, andthen drag a few instances of the Square symbol onto the Stage

How Symbols Help You

Let’s go over the two fundamental advantages of storing symbols in the brary: reducing the movie’s file size and minimizing your work

Li-FIGURE 4.5

Selecting New Symbol takes you

into a blank symbol, so you can

draw its contents.

Reducing File Size

Believe it or not, if you have one symbol in your Library and 100 instances

of that symbol on the Stage, your file is barely larger than if you have only

one instance Here’s how it works: The graphic, movie clip, or button in the

master symbol contributes to the file size Therefore, if the graphic is 1KB,

the master symbol adds 1KB; if the master symbol is 100KB, it adds 100KB

The size depends on what’s in that symbol No matter how many times a

symbol is used, it’s only stored once Even as you drag many instances onto

the Stage, the symbol is still stored only once A tiny bit of data is saved

in-side Flash that specifies how each instance is different from the others, (for

example, their positions) so each instance does add a small amount of data

to the file size However, it’s such a tiny bit of information that it’s almost

not worth mentioning Imagine what would happen if it didn’t work this

way; a 100KB graphic used 10 times would make a movie balloon to 1MB!

In reality, though, 10 instances of a 100KB symbol might make your file

grow to, say, 101K, if even that much

Using symbols is also powerful because each instance can differ from the

others So far, you’ve used symbols to display identical replicas of an

origi-nal The only way each instance has varied has been in its onscreen

posi-tion However, the tiny bit of extra data telling Flash where each instance is

positioned onscreen can also contain information about how each instance

is scaled or rotated differently This way, each instance can look different

You learn more about this in the section, “How Each Instance Behaves

Dif-ferently,” but for now, realize if you have three instances on the Stage and

you have each one scaled to a different size, you haven’t added to the file

size in any significant amount

Minimizing Work

In addition to reducing file size, the Library can reduce the amount of work

you do For example, say you have a block of text (maybe a title) that’s used

in several places within a movie If you first put the text in a symbol in the

Library, each time you need that text onscreen, you can drag an instance

from the Library Later, if you want to change the text, you can edit the

master version in the Library and see the change in every instance This

ad-vantage requires only that you invest a little bit of time and planning