Flash CS4 Professional in 24 Hours- P3 ppt

There are two ways: If you’re editing the actual text, you use the circle or square in the top-right corner; or, if you’re not actually editing the contents of a text block, you can stil

You can edit any drawn shape in the same manner in which you drew lines

with the Pen tool in the preceding task You just select a shape by using the

Subselect tool (the white arrow at the top right of the Tools panel), and you

see the same handles and anchor points as in the preceding task

Creating Text

Now for a graphic element that involves neither line nor fill In this section,

you explore creating text To create text, you simply select the Text tool,

click, and start typing When you first make the text, if you click and drag,

you are setting the margins; otherwise, the margins adapt to what you’re

typing You can modify the font, color, and style of what you’ve typed after

you create it Modifying your text after it’s typed usually makes sense

be-cause then you are able to best judge how it looks

Creating text in Flash has never been easier or more sophisticated The

fol-lowing task walks you through a couple quick maneuvers

Use the Pen Tool

TRY IT YOURSELF ▼

6 Finally, while still holding down the mouse button, you can increase or

decrease the distance you’re dragging from the point you clicked This

changes the curve’s arc Before your hand gets tired, move the mouse

to the right Then double-click down to the right at about the same

height as the first point to make an arc Even though this curve has

three points, only the middle one needs a curve—that is, when you

create the first and last points, you don’t click and drag

Create and Style Text

TRY IT YOURSELF ▼

In this task, you explore using text in Flash Follow these steps:

1 In a new file, select the Text tool, click the Stage, and then type a

word; we typed Hello This click-and-type technique expands the

mar-gin for the block of text to the exact width of whatever you type The

circle that appears at the top-right corner of the text block indicates

the margin automatically adjusts in this way (see Figure 2.17)

2 When you click and drag this circle to adjust the width, it turns into a

square to indicate the margins are fixed You can double-click the

square margin control to restore the automatic margin adjustment

(that is, to make it a circle again)

FIGURE 2.17

The circle in the top-right corner indicates the margins adjust to fit what you type Once you’ve set the margins by dragging any han- dle on the text, the circle turns to

a square.

TRY IT YOURSELF

▼

Create and Style Text

3 While editing the text block, you can set the margin Make sure the beam cursor is blinking in the block; click inside the block of text, ifnecessary Grab the little circle at the top-right corner of the text block,and widen or narrow the block of text The circle margin handlechanges to a square, which indicates margins are set and any text youpaste or type into this block wraps when it reaches this margin Goahead, and type a couple lines of text You should see the text wrapeven though you didn’t press the Enter key

I-4 Now that you have some text in the block and have set the margins,it’s time to modify some attributes of the text Two ways to modify thetext include: selecting all or some of the characters or adding morewhere you’re editing the contents of the text; or, selecting the entireblock and picking it up, moving it, or modifying the attributes This isnot the same as simply selecting all the characters while editing theblock Click the Selection tool to stop editing the text Your text blockshould be selected If it isn’t, click it once, and a rectangle appearsaround it

5 With the block selected, observe the Properties panel to make cations For now, modify the text’s color, font, and font height, asshown in Figure 2.18 Any setting you make here applies to all charac-ters in the text because you’re editing the entire block Most of theProperties are easy to learn There’s an especially nice feature that al-ways displays a preview of the type face when you select a different

modifi-NOTE

Adjusting Text Margins

By the way, if you had clicked

and dragged with the Text tool

to the right before typing

(in-stead of clicking and then

typ-ing), you would have created a

margin in one step You can

always adjust the margins

later, too There are two ways:

If you’re editing the actual

text, you use the circle or

square in the top-right corner;

or, if you’re not actually editing

the contents of a text block,

you can still select it using the

Selection tool In this case,

you can change the margins

by dragging any of the square

handles in the corners

FIGURE 2.18

The Properties panel enables you

to change text attributes, such

as font size and color.

Create and Style Text

TRY IT YOURSELF ▼

font The preview displays the characters you have selected if you’re

editing the contents of the text block For example, if you double-click

and then select some of the characters, those characters appear in

the preview

6 Change the text style of part of your text block to bold or italic by first

selecting the characters you want to change and then selecting bold or

italic Double-clicking the text block automatically selects the Text tool

You can select the characters as you would in any word processor by

clicking and dragging While some text is selected, use the Properties

panel to change the selected text If you want to change the font, the

preview includes the text you have selected You can use this method

to change the properties of individual characters within any block of

text

7 Switch to the Selection tool, and select the block of text Using the

Properties panel, change the alignment to Align Center under the

Para-graph section of the panel, as shown in Figure 2.19 Explore the other

settings, which control attributes such as the margin padding and line

spacing, by clicking the Format button

A few options are shown in Figure 2.19 that we haven’t covered yet

Specifi-cally, the Text type options (Static, Dynamic, or Input) are explored in Hour 16,

FIGURE 2.19

When the block of text is selected, use the Properties panel to change the alignment (to Align Center, in this case).

“Basic Interactivity.” For now, you should always leave the Text Type down in the Properties panel set to Static Text When you do this, the textyou type never changes, and your audience sees the same font you’ve cho-sen Dynamic is for text that needs to change while the movie runs, and In-put is for text you want to let the user change The Selectable button givesyour users the ability to select and copy the text

drop-Another important option is the setting for Font rendering This lets you

control how the text aliases, which affects how it will appear—most notably,

when the text is very small Generally, you should select the rendering tion by eye—that is, simply select the option that looks best given yourfont, font size, and other layout conditions For tiny text, like 8 or 10 point,Bitmap text is a good option—although you should always at least previewhow Anti-alias for readability looks The option for Use Device Fonts is ef-fectively no anti-alias (like Bitmap text); however, users have to have thesame font installed on their machine or a substitute is used—so this is arisky option There are two reasons to consider the Anti-alias for animationoption: First, if the text is being moved for an animation, it looks smoother;

op-second, this is the only version of anti-aliasing available when you plan todeliver your site to users with older Flash players, which we discuss book-ing Hours 20, “Linking a Movie to the Web,” and 24, “Publishing a Cre-ation.” Finally, the Custom Anti-alias option lets you fine tune thethickness and sharpness for any look you prefer

Aliasing and Anti-Aliasing

Anti-aliasing is a way of smoothing otherwise rough diagonals and curves

with a blurry fuzz If you zoom in on a diagonal line without anti-aliasing,you see a stair-case effect Adding fuzz can make that diagonal line lookbetter; albeit blurrier Normally, anti-aliased text appears smoother and ismuch more pleasing One problem arises when the anti-aliased text issmall—it can be too blurry to read In earlier versions of Flash, the only vi-able solution for small text was to turn off anti-aliasing completely, which isstill sometimes the best option In addition, anti-aliasing affects how fastanimated text can fly across the screen

Selecting and Transforming ObjectsNow that you’ve seen how to create lines, fills, deco fills, shapes (with bothlines and fills), and text, it’s time to explore how to modify them Theprocess seems simple You select the object you want to modify by using

the Selection tool, and then you modify it But, selecting exactly what you

want to modify is often the most challenging part The following section

looks at some of the fundamentals, and you learn even more about this in

Hour 5, “Controlling Color.”

Object Draw Mode Versus Merge Mode

Before we can discuss selecting objects, you need to understand the

differ-ence between the two ways to create objects: Merge mode and Object Draw

mode By default, and any time you don’t have the Object Drawing option

selected at the bottom of the Tools panel, you’re in what’s called Merge

mode In Merge mode, most of the drawing tools create shapes with the

ex-ception of the Rectangle Primitive, Oval Primitive, and Text These fills and

lines are all drawn on the same plane—meaning that if you draw two

shapes on top of each other, the one drawn second wipes away any part of

the first shape that’s underneath the second This behavior can actually be

used to your advantage although it is disorienting to many at first

Object Draw mode makes everything you draw a Drawing Object Unlike

shapes, Drawing Objects can be stacked and don’t eat away at each other

Despite the fact we’ve taught hundreds of students how to draw in Merge

mode in earlier versions of Flash, Object Draw mode is a more intuitive

way to learn

Normally, the Draw mode you have selected affects what you draw When

you’re in Object Draw mode, each time you click to draw a line, fill,

rectan-gle, or oval you create a new Drawing Object Deep inside that Drawing

Object is a shape You can double-click to edit the contents, and you find a

plain old shape inside It’s mildly confusing because Rectangle Primitive

and Oval Primitive objects behave similarly to Drawing Objects as they’re

stackable, but you can’t double-click a primitive to edit its contents You

might need to access the shape inside a Drawing Object to select and

change, move, or delete part of the object You learn much more about

se-lecting shapes later this hour, but sese-lecting a Drawing Object means

select-ing the whole object When you’re done editselect-ing the shape inside a Drawselect-ing

Object, you double-click the object or click the blue arrow button at the left

of the address bar, as shown in Figure 2.20

Because Drawing Objects contain shapes that don’t modify any shapes

un-derneath them, it shouldn’t be a surprise that Flash provides a way to

con-vert a shape(s) into a Drawing Object To concon-vert a shape into a Drawing

Object, select all the shapes you want, and then click Modify, Combine

FIGURE 2.20

Use the address bar (officially

called the Edit Bar) to return to your

main stage when you’re finished

ed-iting the contents of a Drawing

ob-ject.

shape, then select the Drawing Object, and click Modify, Break Apart ize those shapes now behave like any shape and can be erased by othershapes on the sole plane where all shapes reside

Real-The whole concept of shape versus Drawing Object only applies to linesand fills Text and primitives behave more like Drawing Objects (though,they’re really neither) because they don’t eat away at other things youdraw Another tidbit to know is you can always toggle between ObjectDraw mode by pressing J This only affects things you’re about to draw, notthings you’ve already drawn (To do that, use the Modify menu as men-tioned previously.)

Object Draw mode is more intuitive at first, but you can also learn to loveMerge mode The following is a quick review in order of importance:

Realize you can only select an entire Drawing Object, not just some orportions of the shapes contained

To get to the shapes inside a Drawing Object, double-click Be carefulnot to get lost while inside—remember to exit the object by clickingthe left arrow in the address bar

The setting in the Tools panel (for Object Draw mode or not) affectsnew things you draw; for example, to convert an existing shape(s) to

a Drawing Object via Modify, Combine Objects, Union, or to turn a

Selection Tools

The two basic selection tools are the Selection tool and the Lasso tool The

Subselect tool is the white arrow It is for selecting and editing individual

anchor points in the same way the Pen tool created them If you’re familiar

with controlling shapes by using the Pen tool, this section will be familiar to

you If you’re not familiar with using the Pen tool, you should master the

basics before working with the Subselect tool This section concentrates on

just the Selection tool and the Lasso tool

The Selection tool can seem so simple that it’s not worth discussing, but it’s

actually quite powerful You’ve already used the Selection tool to select an

object by clicking it once The key to the Selection tool is the cursor changes

to tell you what happens when you click You can try this tool on a couple

simple shapes in the following task

Use the Selection Tool to Select and Modify Shapes

TRY IT YOURSELF ▼

In this task, you explore how the Selection tool’s cursor changes to inform

you what happens when you click Follow these steps:

1 Select the Oval tool, but before you draw, select a very thick stroke

height (5 or so) in the Properties panel Turn on Object Drawing via the

button at the bottom of the Tools panel Draw a circle, and then select

the Rectangle tool Turn off Object Drawing, and draw a square

2 Choose the Selection tool Move the cursor to the middle of your

square The cursor changes to include the move symbol, indicating

that if you were to click and drag, you would start moving this fill (see

Figure 2.21)

3 Click and drag Notice that only the fill of the square moves Select

Edit, Undo (or press Ctrl+Z) to restore the fill Also, make sure nothing

is selected by just clicking the white area of the Stage or pressing Esc

4 Position the cursor over the circle you drew If you click and drag you’ll

move the entire circle because it’s a Drawing Object Its fill and stroke

are contained in one object

5 Move the cursor so that it is near the outside edge of the square The

cursor adds a curved tail, as shown in Figure 2.22 Now if you click

and drag, you bend the line Go ahead and click and drag to the left,

and the line portion of the square bends Notice that the fill bends

with the line This cursor behavior is consistent for Drawing Objects or

shapes However, because it’s possible to select the square’s fill and

stroke independently, as it’s a shape, you’ll need to just click and

drag—don’t click and then click and drag because that selects then

moves the stroke portion

FIGURE 2.21

The Selection tool’s cursor changes when it is on top of a fill

to indicate that clicking will start

to move the fill.

FIGURE 2.22

When the cursor is near a line, it changes to indicate that clicking will start to bend the line.

TRY IT YOURSELF

▼

Use the Selection

Tool to Select and

Modify Shapes

6 Make sure nothing is selected and move the cursor so that it’s nearanother corner of the square A corner shape is added to the cursor,which means that if you drag, you’ll be moving the corner point (seeFigure 2.23) Try it It’s like you’re bending the line, but instead you’rejust moving the corner

7 You’ve seen the cursor communicate what will happen when you clickand drag Now you can use the Selection tool to simply select some-thing For instance, clicking anywhere on the circle (the line or the fill)selects the entire Drawing Object However, you can select just the lineportion of one side of the square by clicking it

8 With part of the square’s stroke selected, notice that the cursor addsthe “move” symbol when you’re near the selected line Click and dragnow, and you can move the stroke You can also just press Delete toremove that line portion Do so now

9 Deselect everything (by clicking a blank area onstage or pressing Esc)and this time double-click on what’s left of the square’s stroke Whenyou double-click a stroke, you select the entire stroke At this point,you could move or delete the stroke Just leave it for now

10 The circle was easy to select because it is a Drawing Object Becausethe square is just a regular shape, if you click the fill, you select justthe fill If you click the stroke, you select just one side If you double-click the stroke, you select only the stroke portion However, if you dou-ble-click the fill of the square you should find that the entire square isselected Now you can move or delete the square In fact, you couldeven select Modify, Combine Objects, Union to turn the square into aDrawing Object Don’t bother, though

11 Another way to select the square is to marquee it With the Selection

tool still selected, click outside the square and drag until you you’vedrawn an imaginary rectangle that surrounds the square entirely Whenyou let go, the square becomes selected In the case of a Drawing Ob-ject, or primitive, your marquee need only touch the object to select it

12 Sometimes the arrangement of other shapes onscreen makes themarquee technique difficult or impossible Notice in Figure 2.24, youcan’t marquee just the square without selecting part of the circle Infact, there’s a preference (Edit, Preferences, General) called Contact-sensitive Selection and Lasso tools, but that setting doesn’t affect se-lecting shapes To select the square in such a sticky situation asFigure 2.24, you could simply double-click the fill of the square How-ever, there’s another tool you can use to do this: the Lasso tool

FIGURE 2.23

When the Selection tool is near a

corner, it shows yet another

cur-sor, this time indicating that you

can extend the corner.

FIGURE 2.24

Sometimes using the marquee

technique would select more than

what you want.

You use the Selection tool to employ the marquee technique If you click and

drag an object, it moves or bends However, when you click the Stage

where there are no objects, you see a rectangle appear while you drag (this

is the marquee) You can draw that rectangle around other objects, and they

will be selected when you let go Using this marquee technique to select

ob-jects is often easier than clicking to select obob-jects

You’ll learn how to modify what you’ve selected in the next section, but at

this point, you have the fundamental selection techniques under your belt

More advanced techniques are discussed in Hour 5, but the best clue as to

what will happen if you click is how the cursor changes You’ll find many

places in Flash where the cursor is communicating information to you For

Use the Selection Tool to Select and Modify Shapes

TRY IT YOURSELF ▼

13 Select the Lasso tool and then click and drag around a shape to

se-lect it The Polygon Mode option for the Lasso tool makes the tool act

almost like the Pen tool, though the Polygon Mode behaves like a

string or rubber band Select the Polygon Mode option, as shown in

Figure 2.25, and click onscreen and let go Then click and release in a

new location to extend the selection Continue to extend the selection

and then double-click when you’re done There’s also a spring-loaded

way to access the Polygon Mode: hold down the Alt key while you

click In this case, double-clicking the fill would probably be easier, but

often when you’re selecting several objects, you need to use this

method

14 Finally, you can decide to select just a portion of a shape Suppose

you want to chop off the top of the square You can use either the

Lasso tool or the marquee technique with the Selection tool to select

the portion desired (see Figure 2.26) If you want to select just part of

the circle you need to first double-click (to enter the Drawing Object)

and then you can select the contained shapes as normal Just

remem-ber to get back to your main stage by clicking the left-arrow in the

ad-dress bar

FIGURE 2.25

The Polygon Mode option for the Lasso tool lets you click for each corner of the selection you want to make.

FIGURE 2.26

Using the Selection tool to marquee just part of a shape chops off the top of the circle in this case.

an object that is already onscreen The cool part is that it actually samplesmore than just color, as you’ll see in the following task.

3 With the Dropper tool, click the center of the first circle Not only doesthe fill color change to the sampled fill color, but the Paint Bucket toolalso becomes active You can now fill the second circle with the colorsampled by the Dropper tool

FIGURE 2.27

The Dropper tool changes its

cur-sor to indicate that it will sample

a fill when you click.

TRY IT YOURSELF

▼

Select Attributes

with the Dropper Tool

In this task, you’ll use the Dropper tool to select color and additional tributes Here are the steps to follow:

at-1 Select the Oval tool, set the stroke height to 10, and draw a circle

Change the stroke height, the stroke color, and the fill color Then drawanother circle Finally, change both the stroke and fill color settingsand draw a third circle

2 At this point, if you wanted the second circle to have the same fill color

as the first circle, you would have to change the fill color If you member the color, you’re in luck Even better than relying on your mem-ory, you can select the Dropper tool Notice how the cursor changes toinclude a brush when you’re over the fill of the first circle, as shown inFigure 2.27 This indicates that if you click, you’ll select the fill attrib-utes of this shape

TRY IT YOURSELF ▼

4 If you want to match the strokes on both circles, you could use the Ink

Bottle tool, but you would have to set all the attributes manually It’s

far easier to use the Dropper tool to sample all the stroke’s attributes

in the first circle Select the Dropper tool and move it near the stroke

of the first circle Notice that the cursor changes to include a pencil

(see Figure 2.28) This indicates that you’ll be sampling the stroke (or

line portion) of that shape

FIGURE 2.28

The Dropper tool changes its cursor to indicate it samples a stroke when you click.

5 Click to sample the stroke, and you see the stroke attributes update

in the Properties panel Also, the Ink Bottle becomes active, so you

can click the second circle to change its stroke Remember the

Drop-per tool samples all attributes, not just color

Transforming Scale, Rotation, Envelope, and

Distortion

You’ve seen how to bend, extend, and move shapes by using the Selection

tool and how to change shapes that are already onscreen by using the Ink

Bottle and Paint Bucket tools There are still more ways to modify the objects

you select The Free Transform tool is your key to even more modifications

Basically, you select an object with the Free Transform tool active Up to four

options appear any time you use the Free Transform tool and have an object

selected You can also find these options by selecting Modify, Transform In

the following task, you experiment with these options

In this task, you explore the four basic options for the Free Transform tool.

Follow these steps:

1 Use the Rectangle tool and with Object Draw mode turned off, draw asquare Select the Free Transform tool It shares a slot in the Toolspanel, so you can click and hold the Gradient Transform tool to see it

You can always select Free Transform by pressing Q With the FreeTransform tool selected, double-click the center of the square to select

it entirely (Interestingly, the Free Transform tool can perform many lection tasks.)

se-2 At this point, none of the four options should be selected (see Figure2.29) This means you’re in Free Transform mode, and if you have asteady hand, it’s possible to rotate, scale, or distort the shape

FIGURE 2.29

When an object is selected, you

can choose the Free Transform

tool’s Scale option.

3 Explore the possibilities by rolling your cursor over the square handles

at the corners and sides of the shape, but don’t click yet Depending

on where you move your mouse, the cursor changes to two versions

of the Scale option, as well as Rotate and Skew (as in Figure 2.30) Ifyou hold down Ctrl, the corners make the cursor change to the Distortoption

4 Free Transform mode can be really touchy, so let’s go through the tions individually The selected object shows square handles in thecorners and on the sides Notice the cursor changes when you roll

Transform Drawn Objects

TRY IT YOURSELF ▼

over these handles The corner handles let you scale both width and

height equally and at the same time The side handles let you change

just width or just height Click and drag a corner handle to change the

scale This version of Scale (compared to Scale in Free Transform

mode) maintains your shape’s proportions horizontally and vertically

Now drag a side handle, and you change just the width

5 Make sure the square is still selected, and choose the Rotate and

Skew option Now the corner handles rotate and side handles skew

Roll your cursor over the handles to see the cursor change

6 Click and drag a corner handle and notice you can rotate the square

Actually, if the default Snap to Objects option is selected (that is, if

the magnet button is pressed in, as shown in Figure 2.31), the object

snaps into place at 15-degree increments You learn more about this

in the next section, “Using Snap to Objects to Connect Shapes.”

7 Select the Distort option Drag the shape by the handles on the

cor-ners to distort The Selection tool can create the same effect as

Dis-tort, but only when the shape itself has a corner to grab Without this

Distort option, you would find making a distorted ellipse nearly

impos-sible Finally, try holding down the Shift key and dragging a corner

han-dle when you distort This way, you can distort two sides evenly

8 Finally, the wildest of transformation options is Envelope To best

un-derstand this option, draw a new square, select the Free Transform

tool, and click the Envelope option When your shape is selected, you

see many handles Move the square handles to influence the shape

Rotate (corner) Skew (side)

Scale one dimension (side) Scale both dimensions (corner)

FIGURE 2.30

Depending on which handle you grab and which option is selected, you can use both Scale and Rotate

to modify the shape in multiple ways.

Handles are little white squares that let you stretch, rotate, or otherwise

trans-form a selected object When you select an object, it is either highlighted orappears with a box around its edges When you select the Free Transformtool’s Scale or Rotate and Skew options, for example, handles are added tothe selection Different handles often have different functions, but the cursorchange is your best clue as to exactly what happens when you click

Don’t overlook the fact you can select more than one shape or object, andthen transform everything that is selected at the same time Also, you canfind all the tools explored in the preceding task by selecting Modify,Transform.Another way to do all these things is in the Transform panel

The Transform panel lets you rotate or skew any selected shape You canalso remove transformations immediately after making them by clickingthe Reset button in the Transform panel (or by using the keyboard shortcutCtrl+Shift+Z) Finally, an interesting button is the Copy and Transform but-ton in the Transform panel This button duplicates the selected object andapplies the most recent transformation every time you click it The result is

FIGURE 2.31

If Snap to Objects is turned on,

when you rotate an object, it

snaps to logical positions, such

as 45 degrees.

Using Snap to Objects to Connect Shapes

One of the most helpful features in Flash is Snap to Objects By selecting

View, Snapping, Snap to Objects(or clicking the Magnet button at the

bot-tom of the Tools panel when the Selection or Free Transform tools are

ac-tive), you can draw perfectly round circles, horizontal or vertical lines, and

much more The visual cue that Snap to Objects is helping you is the dark

ring that often appears next to your cursor while you drag When you see

that ring, you know Flash is trying to help you draw

You might already know from using other software that holding the Shift

key constrains your cursor similarly to Snap to Objects, but Snap to Objects

can do much more In addition to helping you draw perfect shapes, Snap to

Objects also enables you to connect two shapes It’s more than simply

mak-ing two shapes touch—they actually become bonded In Flash, unless two

shapes have been snapped together, they can look connected when they

ac-tually aren’t For example, you draw an arrow in the following task, but

un-less the arrow head is snapped to the arrow’s body, it might not remain

visually connected when you scale it to a larger size After a shape is

snapped to another, it’s forever connected

Use Snap to Objects

to Draw Perfect Shapes and Connect Objects

TRY IT YOURSELF ▼

This task walks you through some of the amazing ways Snap to Objects

helps you draw Follow these steps:

1 Confirm that Snap to Objects is selected in the View, Snapping menu,

and then click the Rectangle tool While you click and drag, if you’re

close to drawing a perfect square, you see the dark ring appear near

your cursor (see Figure 2.32)

2 Select the Line tool and draw a line at a 45-degree angle elsewhere on

the Stage This time you have to hold Shift as you draw the line to

con-strain it to 45 degrees

3 Connect the top of the line to a corner of the square To do so, click the

Selection tool; make sure before you click and drag the end of the line

that the cursor changes to show the corner tail You can then click and

drag to extend the line, and you see it snap to the square Keep

dragging and notice how the line can snap to a corner or a side

Sev-eral different logical locations exist on the square; snap the line to a

corner

4 The last step probably changed the angle of your line, so click Edit,

Undo (or press Ctrl+Z) and try again This time, single-click the line to

select the whole thing, let go, click the end of the line, and drag to

FIGURE 2.32

If Snap to Objects is turned on while you’re dragging with the Rec- tangle tool, a dark ring appears to help you create a perfect square.