Flash CS4 Professional in 24 Hours- P5 docx

Presets Add filter Clipboard Reset filter Delete filter Enable or disable filter Properties for selected filter FIGURE 5.2 You can apply advanced special ef-fects to symbol instances us

111Workshop

Q Okay, I moved the contents, so the registration point aligns with the

ex-act axis of rotation, but when I rotate the instance onstage it’s still

us-ing the center point I know for a fact this used to work in an older

version of Flash What gives?

A You need to edit the transformation point That’s the white circle that

appears when you use the Free Transform tool and select the symbol

in-stance If the transform point seems to be in an odd location, remember

it’s always the visual center at the time the object was created If you’ve

edited the contents of the master symbol, it could get all out of whack

Not to worr y, you can always edit it by hand

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 If you don’t see a symbol that you know you’ve created listed in the

Li-brary window, what is the likely cause?

A You have an outdated version of Flash and should get the

up-grade

B You’re either not looking at the Library window for the current file

or the symbol is hiding in a folder

C You forgot to name the symbol; therefore, it isn’t listed

2 Which of the following are clues you are currently editing the master

version of a particular symbol?

A The Edit Bar contains the symbol’s name, and a big plus sign

ap-pears in the middle of the screen

B The Properties panel is grayed out

C The symbol is highlighted in the Library window

From the Library of Lee Bogdanoff

3 Should you consider using another color style setting instead of alphawhen you simply want an instance to be faded back?

A No, nothing beats alpha

B Yes, you should never use alpha

C If the instance is not on top of anything else, then, yes, you shouldconsider using brightness or tint instead

Quiz Answers

1 B A Library from another file can fool you, and putting symbols infolders can effectively hide them from your view The drop-downlist in the Library enables you to view the library for any othercurrently open Flash file Consider, too, that Answer C can’t becorrect because every symbol must have a name

2 A The Edit Bar is the main clue you’re in the Library By all means,don’t let the Library window fool you—Answer C is absolutelywrong

3 C If the alpha color effect is used, it’s only effective, and thereforeworthwhile, when it’s on top of something that can show through

it Brightness and tint can be used to get the same effect, and bothperform better than alpha on slower machines

You’ve spent the last few hours acquiring basic drawing and

graphic-im-porting skills This hour, you’re going to concentrate on gaining fine control

of the features involved with these skills

On the one hand, this hour could be called “Advanced Drawing,” but the

techniques you learn have just as much to do with accurately presenting

graphics with the right color and alignment as it does with creating

graph-ics from scratch Everything you learn in this hour should help you create

perfect layouts, which is a different matter than the subjective topic of

cre-ating nice-looking graphics

Using Blends and Filters

Last hour you learned many ways to customize instances from the

Library—such as scaling, rotating, and tinting them Two additional ways

you can tweak instances is by using Blend modes and applying Filters

Blends define how overlapping instances blend with each other The alpha

effect controls the transparency of an object Blends, however, are much

fancier than changing the RGB or Alpha values, and allow you to achieve

such effects as Invert, which looks like a photographic negative, and

Darken, which shows only the darker of two colors If you’re familiar with

Photoshop, you will find Blends very much like the Blend Modes in Photoshop

Filters are like special effects filters found in imaging programs such as

Adobe Photoshop The Drop Shadow Filter, for example, is a powerful and

easy way to make an instance appear to float off the screen Filters are

non-destructive, meaning they don’t permanently change the symbol You can

apply different Filters on several instances of the same symbol, and, if you

choose, later adjust or remove the Filter effect In this hour, you see how

HOUR 5

Controlling Color

From the Library of Lee Bogdanoff

FIGURE 5.1

The Blend you select from the

Prop-er ties panel affects how a symbol

composites with what is

under-neath it.

Blends and Filters work; in the next hour, you see practical ways they can

be applied to your projects

Blends

Applying a Blend is nearly identical to applying a color effect Select an stance, and choose one of the Blend options from the Properties panel un-der the Display section, as shown in Figure 5.1

in-Many blend options are provided by Flash Here are the options and scriptions of what they do

de- Normal—The default or no blend

Layer—Analyzes everything inside the overlay and ensures it pears as expected This Blend is subtle, but jumps out when youchange the alpha color style on a symbol containing multiple overlap-ping objects For example, if you draw an ice cream cone Movie Clipusing a triangle under a circle, and then set the clip’s alpha to 50%,you see through the ice cream scoop to the cone underneath—unlessyou also use the Layer blend Simply put, the Layer blend makes al-pha transitions accurate Layer is also required when a nested clip isset to Alpha or Erase

ap- Darken—Shows the darkest color That is, you see the overlay except

Multiply—Mixes the two colors The effect is least when base and

overlay are similar colors and greatest when the base and overlay are

different colors

Lighten—Shows the lightest color That is, you see the overlay except

where the base is lighter

Screen—Similar to Multiply, but it uses the inverse of the overlay to

make a result that appears washed out

Overlay—Applies the Screen blend on pixels where the base is dark

and applies Multiply where the base has light pixels

Hard Light—The exact opposite of Overlay Hard light applies the

Screen blend on pixels where the base is light and applies Multiply

where the base has dark pixels

Add—Adds the base and overlay, with the maximum being white

Subtract—Subtracts base and overlay with the minimum being black

Difference—Subtracts the darker color from the lighter color

regard-less of whether that color came from the base or the overlay

Invert—Inverts the base only This makes it look like a negative

Alpha—Like Erase, Alpha requires more than a base color and the

overlaying clip on which you apply the blend You apply the Alpha

blend to a clip that’s nested inside another clip, and that parent clip

must have its blend set to Layer The clip on which you set the Alpha

blend should contain graphics that contain some level of

trans-parency The amount of transparency determines how much of the

parent clip is revealed or see-through That is, where the nested clip is

100% alpha, you see just the parent clip Where the nested clip is 0%

alpha, you won’t see the parent clip, but rather see through to

what-ever is underneath If you’re familiar with masking, the Alpha blend

lets you create a gradient alpha mask

Erase—Requires that the clip on which the Erase blend is applied is

nested inside another clip that is set to Layer Primarily, the nested

clip set to Erase clears away its parent clip and shows through to

whatever is underneath It’s the opposite of Alpha because where the

nested clip is 100% alpha you see through the parent to what’s

un-derneath and where the nested clip is 0% alpha you only see the

par-ent clip

Notice the base is just as important as the overlay—sometimes it’s more

im-portant This list doesn’t give you practical uses for each option One

per-fectly legitimate way to use blends is by exploring However, you see

several practical uses later this hour

From the Library of Lee Bogdanoff

Presets Add filter Clipboard

Reset filter Delete filter Enable or disable filter

Properties for selected filter

FIGURE 5.2

You can apply advanced special

ef-fects to symbol instances using the

Filters panel.

Using Filters

You can apply filters to any symbol instance or text object onstage First,open the Filters panel, select an object, and then select the filter you want toapply Take a look at Figure 5.2

To start, select an instance, and then click the Add Filter button (on the

bot-tom left of the Properties panel) to select a filter The menu that appears ables you to remove, enable, or disable all filters already applied to the

en-instance You can individually remove filters by clicking the Delete filter

button, but don’t press Delete on your keyboard because it removes thesymbol instance You can also click the button with an eye icon to tem-porarily disable individual filters After you’ve added a filter, the propertiesfor that filter appear on the right side of the panel, like adjusting thestrength or blur of a filter

The Filters panel supports adding multiple filters to get a layered effect Forexample, you can use the Adjust Color filter to turn a color image intoblack and white, and then also add a Drop Shadow filter Because multiplefilters are cumulative, the order in which they’re applied makes a differ-ence If you apply a Drop Shadow and then a colored Glow, the Glow is ap-plied to the instance as well as its Drop Shadow, and you see color all

around the shadow If you put a colored Glow and then a Drop Shadow,

the object and its Glow are given a Drop Shadow, and the color only

sur-rounds the instance Because the order matters, you can click and drag to

reorganize the filter order listed in the Filters panel The filters listed on top

are applied first

After you’ve spent time setting all the properties the way you want for one

or more filters, you can save the settings as a preset Click Presets, Save As

The properties available for each filter vary, although there are some

consis-tencies For example, all except the Adjust Color Filter include an option for

Quality This affects how smooth or choppy the gradations appear

Interest-ingly, Quality affects performance but has almost no impact on file size

You notice the visual impact of the Quality setting most when the blur is

greatest The good news about all the filters is you see their visual effects

immediately, so it’s worth exploring the various options The blends tend to

require a little more foresight because many blends don’t have any visible

effect under certain conditions

Like blends, we list the filters and let you explore on your own Later this

hour you get plenty of exercise applying them to real tasks

Drop Shadow—Creates a single-color duplicate of your instance’s

shape, slips it underneath your instance, and offsets the location

There are options to control the strength or alpha, blur, angle, and

off-set distance Used conservatively, the Drop Shadow can add depth to

an image Interestingly, if you simply make the shadow very blurry

and the same color as your symbol instance, it looks a lot like a

mo-tion blur

Blur—Blurs the entire content of your instance Besides the

out-of-fo-cus look, you can blur the X or the Y more than the other to get a

mo-tion blur effect That is, lots of Y blur makes something look like it’s

moving up or down

Glow—Makes a duplicate of your instance’s shape and blurs it It’s

like having a blur with your original layered on top There are many

specific reasons to use Glow, but a common one is to make text stand

out when the text is too similar to the background color

Bevel—Gives the instance an embossed look, almost like raised

print-ing The reason your instance looks raised is the upper left is

light-ened or highlighted It’s like there’s a light up to the left, so the

bottom right is darkened as if that part is in the shadow of the object

You can change the highlight and shadow colors as well as the angle

where the imaginary light is positioned

CAUTION

Applying Presets Removes Existing Filters

When you select one of the set filters you’ve saved, it wipesaway any filters already applied

pre-to an object If you want pre-to plement a preset, star t by apply-ing the preset, and then makeadjustments or add more filters

sup-From the Library of Lee Bogdanoff

Adjust Color—Works best on instances that contain a raster graphic.

It’s an intuitive filter for adjusting the contained color Drag the ration slider all the way to the left (–100) to make a color photographappear black and white

Satu-As a summary of color styles, blends, and filters, consider the normalprocess you follow to create a graphic Start by making symbols based on afoundation of building blocks—basically, the graphics you can import ordraw in Flash Place them onstage, and then apply color styles or filters

Blends enable you to define how layered objects appear When you wantthe same effect applied to multiple objects, you can nest symbols insidesymbols

Although in Hour 2, “Drawing and Painting Original Art in Flash,” andHour 3, “Importing Graphics into Flash,” you learn ways to either create orimport graphics, the color styles, blends, and filters give you ways to createeven more advanced effects Plus, compared to importing raster graphicswith the same visual effect, applying effects to instances in this manner ismore bandwidth friendly You’re being efficient by storing graphics in theLibrary, but because all these effects are applied at runtime, they are almostalways smaller than raster alternatives Of course, they’re also better be-cause you can make edits right inside Flash It’s worth noting that eventhough such runtime effects don’t add much to file size, they do tend to re-duce your movie’s performance by making it play slower Don’t worry,though, because the impact is not an issue unless you overdo it Plus, youlearn ways to optimize performance in Hour 23, “Optimizing Performance.”

Creating and Saving Color Swatches

In the following sections, you learn how to create and save color swatches

to easily produce customized color palettes for movies This helps you sure a color theme is maintained throughout a Flash Movie or an entire site

en-You also see how to create and control gradients

Creating Solid and Gradient Swatches

In Hour 2, anytime you want to color a line or fill, you select the swatch of

your choice from the Fill Color or Stroke controls in the Tools panel or

Properties panel Clicking the fill color exposes all the swatches that are

currently available

Creating a custom color swatch involves two basic steps: using the Color

panel to pick a color, and then saving it as a swatch This process is easy,

but it’s still worth stepping through carefully the first time In the following

task, you create a custom color by using both the Color panel and the

Swatches panel

Create a Custom Color and Swatch

TRY IT YOURSELF ▼

In this task, you look at several ways to create colors, and then save

them as swatches for use later Follow these steps:

1 Make sure both the Color panel and the Swatches panel are visible

2 In the Color panel, click the color picker, shown in Figure 5.3, and drag

as you move through all the colors Although the choice of colors isn’t

infinite, there are more than 216 variations

3 You should notice as you move through the color picker that the

num-bers in the RGB (red, green, blue) fields change Colors are mixed from

256 shades of red, green, and blue with numeric values 0 to 255

These numeric values can be par ticularly useful For example, a

com-pany that wants its logo colors to remain consistent can provide

spe-cific RGB values

4 Another way to select a color is to sample it from somewhere else,

even from outside Flash For example, to use a color from a web page,

open the page in a browser, and resize the Flash application so you

can see both the web page and the Flash program at the same time

5 In the Color panel or Tools panel, click and hold the fill color As you

drag, move to the website in the background (see Figure 5.4) The

cur-rent fill color changes to the color from the web page when you release

the mouse button

6 Now that you’ve created a new color, you could use it immediately by

selecting the Brush tool Instead of tr ying it now, save it as a swatch,

so you can easily select it later without using the Color panel In the

Color panel’s options menu, select Add Swatch This adds the current

color to the bottom of the Swatches panel Another way to add a

swatch is by enlarging the Swatches panel, and then clicking

underneath all the existing swatches

Color picker FIGURE 5.3

Selecting a color from the Color Mixer panel requires that you click the color picker square.

From the Library of Lee Bogdanoff

Sampling a color from outside

Flash is possible A web page is

positioned on the left for

sampling.

FIGURE 5.5

After a swatch is added, it

ap-pears almost ever ywhere—as a

fill color, a stroke color, or a text

color.

NOTE

Panel Options Menu

Remember that each panel

has a subtle options menu

available at the top right of its

title bar

7 Scroll to the last color in the Swatches panel to find the new color Youcan also find the color anytime you click to select a color for your fillcolor or stroke color (see Figure 5.5)

121

You’ve seen how to select colors and save a swatch Even though we added

a swatch for a custom color selected from the Web, it’s also convenient to

save any color, even one that already has a swatch For example, if you’re

using the same orange color repeatedly, you don’t have to remember it’s

the one in the eighteenth column and seventh row of the Color Swatches

panel Just save a swatch, and it becomes one of the few swatches in the last

row You can even create a whole row of black swatches (21 across), so you

can easily see where your custom swatches begin

In the preceding task, you sampled a color and added it to the swatches

You can also enter the exact RGB if you know it Alternatively, you can use

HSB (hue, saturation, brightness) if you change the setting in the Color

panel’s options menu The Hex value always appears under the color

picker In addition, that same editable Hex field appears in the color

swatches that pop up next to the fill color or stroke color in the Tools panel

or Properties panel

Finally, for any color setting, there’s an option for the percentage of alpha

The lower this percentage, the more transparent the color is This is

conven-ient; however recall from Hour 4, “Staying Organized with the Library and

Layers,” that you can also apply the Alpha color effect on a symbol

in-stance That’s not the same thing unless the symbol is all one color, but the

exact appearance of a color changes when you modify the alpha If the

color is in your client’s corporate logo, you probably don’t want to change

its alpha

Even though the process for creating swatches is time-consuming at first, it

can really help you down the line For instance, although swatches are

saved only with the current Flash file, after you’ve taken the time to create

custom swatches, you can save them as a Flash Color Set file From the

Swatches panel’s options menu, you select Save Colors The file you save

can be used with other files or by other team members To load colors that

have been saved this way, you select Replace Colors from the Swatches

panel’s options menu Notice the feature is called Replace not Add—so it

replaces any custom colors you’ve already created

No doubt you’ve noticed the fill color can be a gradient You see both radial

and linear gradients in the default color swatches any time you click to

specify the fill color In the following task, you learn how to create your

own custom gradient

NOTE

Color Systems

There are several ways to describe color Your monitor has three color guns that project red, green, and blue, respectively Using RGB to describe a color tells each gun how much of its color to project With 256 shades of color for each gun (0–255), practically any color (16.7 million or so) can be created by mixing the three guns Even though RGB may be the most intuitive color system, other systems exist.

Consider that the range of 0–255 used

in RGB means nine characters are essary (three for each color because the number 255 has three digits).

nec-The Hex system was developed to scribe RGB by using only six charac- ters Hex uses only six characters by extending the 10-base numbering sys- tem (which has only 10 characters, 0–9) to a 16-base system (0–9 plus A,

de-B, C, D, E, and F) The result is that red, green, and blue each get two char- acters For example, FF0000 is pure red (the highest value for red, FF, and

no green or blue) Magenta is FF00FF (a mix of red and blue) In Flash, you see two designations of a value that is presented in Hex: the prefix 0x, as in 0xFF000, and the more standard prefix

#, as in #FF0000 HTML also uses the Hex system to describe colors.

Still another system HSB uses is the three factors: Hue (think angle in a color wheel), Saturation (how much chroma the color has or how rich it is), and Brightness (the amount of white—

as if you’re adding white to a paint color).

There’s no difference in the resulting color when you use any system: RGB, Hex, or HSB For example, in the previ- ous example, the reddish color we sampled had 238,59,65 when ex- pressed in RGB, which is identical to saying #EE3B41in Hex It’s almost like the difference between English and Spanish: You can say “red” or

“rojo,” and the result is the same.

Flash’s Color panel is a nice way to get a feel for the differences You can select a color, use the options menu

to change the setting from RGB to HSB, and then view the results.

Creating and Saving Color Swatches

From the Library of Lee Bogdanoff

1 Expand the Color panel and arrange the Swatches panel so the twopanels are not docked to each other Click the bucket icon in the Colorpanel to define a gradient for the fill por tion You can set a gradient forboth the fill and the stroke separately.

2 Select Linear from the Type drop-down list Notice the Color panelchanges in several ways A sample gradient appears in the color pickerarea; two little triangle arrows appear at each end of the gradient sam-ple, which enables you to edit the color at either end; and the Over flowdrop-down menu appears You can set the gradient to appear once or

extend, reflect, (meaning it goes from the first color to the last color, then back to the first, and so on), or repeat, (meaning it goes from the

first color to the last, then first to last again, and so on) (See Figure5.6.)

3 Either arrow (indicating the end of a gradient range) can be edited Theone with a black triangle indicates it’s the one being edited currently

Click the one on the left, and the pointer head changes to black, asshown in Figure 5.7 Now edit this star ting color by double-clicking toselect a color of your choice in the swatch fly-out menu that opens

Choose a yellow color

4 Select Radial Gradient from the Fill Style drop-down list, and you see theColor panel change again—but only in that the gradient sample is oval

5 Double-click the pointer on the right side of the gradient and then select

a bright blue color You should now have a radial blend that goes fromyellow to blue

6 To add more colors to the gradient, click under the gradient definitionbar in the Color panel, the shor t wide sample gradient New pointersappear, and you can move them and edit their colors To remove acolor, drag the pointer straight down

7 To save this gradient in your Swatches panel, either select Add Swatch

in the Color panel’s options menu or click in the Swatches panel to theright of the gradients that are already saved This simply creates a newswatch based on the currently selected color

Extend

Reflect

Repeat

FIGURE 5.6

Gradient over flow options are

shown visually in the drop-down

menu in the Color panel.

FIGURE 5.7

With the left side of the gradient

selected, you can double-click to

change the color.

Now that you have a custom gradient, you learn how it can be used in amovie

123

Using and Transforming Gradients

Whether you use the default gradients or create your own as you did in the

previous task, there’s more to using gradients than selecting one of your

choice for the fill or stroke colors The Gradient Transform tool gives you

some powerful ways to edit the precise look of your gradients The

Gradi-ent Transform tool shares a slot in the Tools panel with the Free Transform

tool That means you have to click and hold the button for the Free

Trans-form tool to access the Gradient TransTrans-form tool (or press F).

The Gradient Transform tool only edits gradients already applied to a fill or

stroke onstage It doesn’t create anything If you select the Gradient

Trans-formtool and then select an existing gradient, you’re given handles that

en-able you to adjust the attributes of a gradation You can adjust the falloff

rate, center point, rotation, and, in the case of radial gradients, the shape

and focal point When you create fills that use a gradation, such as when

you use the Bucket tool, you have an option called Lock Fill While Lock

Fill is selected, all the shapes you fill are part of the same gradient If that

gradient goes from black to white, the transition is spread out through all

the objects If Lock Fill is not selected, each shape repeats a single gradient

from black to white In the following task, you practice using the Gradient

Transform tool and the Lock Fill option

Transform Attributes

of Gradients Used

in a Movie

TRY IT YOURSELF ▼

In this task, you explore using the Lock Fill option and the Gradient

Trans-form tool to gain full control of gradients Follow these steps:

1 Select the Rectangle tool; make sure Object Drawing is deselected in

the options area; select a solid fill color; and draw two squares close

together Deselect ever ything by pressing Esc

2 Select the Paint Bucket tool and a radial gradient from the fill color

swatch (The white-to-black default is fine.)

3 Make sure the Lock Fill option is not selected The Lock Fill is

con-trolled by a button at the bottom of the Tools panel when the Paint

Bucket tool is selected, as shown in Figure 5.8 Click once in each

square to fill it with the radial fill Both squares have the entire radial

effect—from white to black This is the normal mode Notice the radial

gradient centers around where you clicked Continue to click in

differ-ent locations within each square to see that the cdiffer-enter of the gradidiffer-ent

appears where you click

Creating and Saving Color Swatches

From the Library of Lee Bogdanoff

4 Click once near the edge of a square that borders the other square

Click Lock Fill Now the last fill you made defines the star t of all quent fills because Lock Fill has been turned on Although it’s not re-quired, you might encounter fewer problems if you first fill one shape,and then turn on Lock Fill before continuing

subse-5 Click the other square You should notice the gradient continues fromwhere it star ted in the first square; that’s the result of Lock Fill beingselected If you click the first square again, the center point of the gradi-ent remains locked

6 Press F to select the Gradient Transform tool You can edit the fillsyou’ve made With this tool selected, you can edit fills that are already

on the Stage

7 Click the fill of one of the squares, and several handles appear, asshown in Figure 5.9 You can now move the gradient’s center The han-dles on the edge enable you to change the shape of the radial gradient,falloff rate, focal point, and rotation

8 You probably find these handles to be very intuitive, but you should ment with them a bit Click and drag the Move handle to change the centerpoint of the fill (Figure 5.10 shows six handles that all change your cursor.)

experi-9 Click and drag the Reshape handle to make the gradient an ellipserather than a per fect circle Notice in Figure 5.10 that the Reshape cur-sor is similar to the cursor you see when you scale an object

FIGURE 5.8

Lock Fill is at the bottom of the

Tools panel when the Paint

10 The Focal Point handle lets you change the symmetr y of the radial

gra-dient The effect is similar to the Reshape handle; however, the Focal

Point identifies the hot spot within the entire shape The Focal Point

handle adjusts how oblong the gradient should appear

11 Use the Falloff handle to change the rate at which the gradient

changes from white to black A custom Falloff cursor is shown in

Figure 5.10

12 Adjust the rotation of the reshaped gradient You see the same Rotation

cursor that is shown with the traditional rotation tool in Figure 5.10

With radial gradients, you have to reshape the fill before the rotation

handle provides any results

Falloff handle Rotation handle

Move focal

point handle (only

for radial gradients)

Move center

point handle

Reshape handle

FIGURE 5.9 You can use the Gradient Transform tool on this gradient, which spans multiple shapes because Lock Fill was selected.

Falloff Rotation

Focal point Gradient Transform tool active

FIGURE 5.10 The different features of the Gradi- ent Transform tool have different cursors.

From the Library of Lee Bogdanoff