4 2 LESSON 2
Working with Graphics
Getting started
First, view the finished movie to see the animation you'll be creating in this lesson.
1 Double-click the 02End.swf file in the Lesson02/02End folder to play the animation.
The project is a simple animation that can be used as a logo on a web page or as a
preloader, an animation that keeps the viewer's attention while a web page loads. This
animation is for Fizzy Drink, a fictional company. In this lesson, you'll draw the shapes,
modify them, and animate them.
2 Double-click the 02Start.fla file in the Lesson02/02Start folder to open the initial
project file in Flash.
3 Choose File > Save As. Name the file 02_workingcopy.fla, and save it in the 02Start
folder. Saving a working copy ensures that the original start file will be available if you
wish to start over.
Creating rectangles
Flash includes several drawing tools, which work in different drawing modes. Many of
your creations will begin with simple rectangles, so it's important that you're
comfortable drawing them, modifying their shapes, and applying fills and strokes.
ADOBE FLASH CS3 PROFESSIONAL 143
Classroom in a Book
You'll begin by drawing the glass for the fizzy drink.
a.
1 Select the Rectangle tool ((). Make sure the Object Drawing mode icon (CO is not
selected. The stroke and fill can be any color, but make sure a color is selected for
each.
2 On the Stage, draw a rectangle that is about twice as tall as it is wide. You'll
specify the exact size and position of the rectangle in step 5.
rs,
t
Note: Flash applies the default fill and stroke to the rectangle, which is determined by the
last fill and stroke you applied. You'll specify a different fill and stroke for the rectangle in
the following sections.
44 LESSON 2
Working with Graphics
3 Select the Selection tool.
4 Drag the Selection tool around the entire rectangle to select the stroke and the fill.
When a shape is selected, Flash displays it with white dots.
5 In the Property inspector, type 95 for the width, and 135 for the height. Press Enter or
Return to apply the values.
Properties
Filters _( p arametefS .
1
Shape
P
W. 95.0
s
ICJ Solid ________________________
Stroke hinting
Scale. Normal
¢J Miter:
Custom_..
,~.
Cap:
C.
Join. .,'%
X: 100.0
H. 135.0 Y. 100.0
Adding a bitmap fill
The fill is the interior of the drawn object. You can apply a solid color, a gradient, or a
bitmap image (such as a TIFF, JPEG, or GIF file) as a fill in Flash, or you can specify that
the object has no fill. For this lesson, to give the glass the appearance of hol ding liquid,
you'll import an image of water to use as the fill. You can import a bitmap file in the
Color panel.
1 Make sure the entire rectangle is still selected. If necessary, drag the Selection tool
around it again.
2 In the Color panel, click the Fill Color icon ( rn ).
Note: Be sure to click the Fill Color icon, and not the Fill Color box. Clicking the Fill Color
box opens the Adobe Color Picker, which you don't need when you're importing a bitmap.
ADOBE FLASH CS3 PROFESSIONAL
Classroom in a Book
3 Select Bitmap from the Type menu.
4 In the Import to Library dialog box, navigate to the Water.tif file in the LessonO2/
02Start folder.
5 Select the Water.tif file and click Open. The rectangle fills with the water image.
tt
Specifying stroke properties
The stroke is the outline of the object, in this case a rectangle. You can apply attributes to
the stroke that are different from those of the fill; you can also specify that the object has
no stroke. You'll give the rectangle a solid gray outline.
1 Select the rectangle on the Stage, if it isn't already selected.
45
4 6 LESSON 2
Working with Graphics
2 In the Property inspector, click the Stroke Color box (y ).
3 In the Color Picker, select the fourth box down on the left, a gray color. Or, type
#999999 in the box.
Note: Each color has a hexadecimal value in Flash, HTML, and many other applications.
Light gray is #999999; white is #FFFFFF; black is #000000. Appendix A (page 327) lists the
colors with their hexadecimal values. You may find it handy to memorize the values for the
colors you use most often.
4 Type 4 in the Stroke Height box, and press Enter or Return to apply the value. r
I',uperties = (, Fllters. f Parameters
Shape
I,
O4
1-1 Solid
_ Stroke hinting
Custom... Cap:
Scale: Normal
Miter:
Join:
W:. 95.0 X: -450.J H:
135.0 Y: 157.1
The rectangle should now have the water bitmap fill and a thick gray stroke.
ns.
5 the
r the
TI
ADOBE FLASH CS3 PROFESSIONAL
Classroom in a Book
Modifying objects
It's time to make this rectangle look more like a drinking glass. You'll use the Free
Transform tool to nudge the bottom corners inward. With the Free Transform tool,
you can adjust points on lines and shape outlines.
1 Select the Free Transform tool (KO.
2 Drag the Free Transform tool around the rectangle on the Stage to select it.
Transformation handles appear on the rectangle.
0
. ________ 
3 Press Ctrl+Shift (Windows) or Command+Shift (Mac OS) as you drag one of the
corners inward. Pressing these keys lets you move both corners the same distance
simultaneously.
4 Click outside the shape to deselect it.
The bottom of the rectangle is narrow, and the top is wide. It looks much more like a
drinking glass.
47
48 LESSON 2
Working with Graphics
Flash drawing modes
Flash provides three drawing modes, which determine how objects interact with each other on the
Stage, and how you can edit them. By default, Flash uses merge drawing mode, but you can enable
object drawing mode, or use the Rectangle Primitive or Oval Primitive tool to use the primitive
drawing mode.
Merge drawing mode
In this mode, Flash merges drawn shapes, such as rectangles and ovals, where they overlap, so that
multiple shapes appear to be a single shape. If you move or delete a shape that has been merged with
another, the portion that was overlapping is permanently removed.
Object drawing mode
In this mode, Flash does not merge drawn objects; they remain distinct and separate, even when they
overlap. To enable object drawing mode, select the tool you want to use, and then click the Object
Drawing icon in the options area of the Tools panel.
To convert an object to shapes (merge drawing mode), select it and press Ctrl+B (Windows) or
Command+B (Mac OS). To convert a shape to an object (object drawing mode), select it and choose
Modify > Combine Object > Union.
ADOBE FLASH CS3 PROFESSIONAL 149
Classroom i n a Book
Primitive drawing mode
New to Flash CS3 is the primitive drawing mode. When you use the Rectangle Primitive tool or the
Oval Primitive tool, Flash draws the shapes as separate objects. Unlike regular objects, however, you
can modify the corner radius of rectangle primitives, and the start and end angle and the inner radius of
oval primitives using the Property inspector.
Using a gradient fill
In
a gradient, one color gradually changes into another. Flash can create linear gradients,
which change color horizontally, vertically, or diagonally; or radial gradients, which
change color moving outward from a central focal point. You'll use a linear gradient fill to
add weight and depth to the base of the drinking glass.
1 Select the Selection tool.
2 Drag a rectangle around the bottom of the glass to select an area for its base..
5 0 LESSON 2
Working with Graphics
3 In the Color panel, click the Fill icon, and then select Linear from the Type menu.
Note: Be sure to click the Fill icon, not the Fill Color box.
Solid
Flash applies a black and white linear gradient to the base of the glass.
Customizing gradient transitions
By default, a linear gradient moves from one color to a second color, but you can use
up to 15 color transitions in a gradient in Flash. A color pointer determines where the
gradient changes from one color to the next. Add color pointers beneath the gradient
definition bar to add color transitions.
You'll add a color pointer and adjust the existing pointers to create a gradient that moves
from black to white to black in the base of the glass.
ADOBE FLASH CS3 PROFESSIONAL 5 1
Classroom in a Book
1 Click beneath the gradient definition bar to create a new color pointer.
2 Drag the new color pointer to the middle of the gradient.
3 Select the new color pointer (the triangle above it turns black when selected) and
then type #FFFFFF to specify white for the pointer. Press Enter or Return to apply the
color.
4 Select the far-right color pointer, and then click the black area in the grayscale range
above it, or type #000000.
The gradient fill at the base of the glass changes from black to white to black.
5 2 LESSON 2
Working with Graphics
Using the Gradient Transform tool
In addition to positioning the color pointers for a gradient, you can adjust the size,
direction, or center of a gradient fill. To stretch the gradient in the glass, you'll use the
Gradient Transform tool.
1 Select the Gradient Transform tool (a). (The Gradient Transform tool is
grouped with the Free Transform tool (c).
IGII
R IW ___________________
 R .: Free Transform Tool (Q)
2 Click in the glass base. Transformation handles appear.
Note: Move the circle to change the center of the gradient; drag the arrow circle to rotate
the gradient; or drag the arrow in the square to stretch the gradient.
ADOBE FLASH CS3 PROFESSIONAL
Classroom in a Book
3 Drag the square handle on the side of the bounding box to stretch the gradient until the
gradient color matches the stroke color of the glass. The gradient should blend into the
edge of the glass.
Making selections
To modify an object, you must first select it. In Flash, you can make selections using
the Selection, Subselection, or Lasso tool. Typically, you use the Selection tool to select
an entire object or a section of an object. The Subselection t ool lets you select a specific
point or line in an object. With the Lasso tool, you can draw a freeform selection.
Selecting sections of a fill
To give the base of the glass a stronger highlight, you'll select a section of it and apply a
white fill. But first, to prevent accidentally selecting or modifying any part of the water
fill, you'll group the glass base section.
1 Select the Selection tool.
5 4 LESSON 2
Working with Graphics
2 Drag a selection around the base of the glass.
R
3 Choose Modify > Group.
4 Double-click the newly created group to edit it.
ADOBE FLASH CS3 PROFESSIONAL
Classroom i n a Book
5 With the Selection tool, select the center area of the base shape. Start drawing the
selection area from outside the group—either above or below it—to prevent moving the
entire base.
6 Click the Fill Color icon in the Tools panel, and select white or type #FFFFFF in the
Color Picker.
0
55
5 6 LESSON 2
Working with Graphics
7 Click the Scene 1 icon to return to the main scene.
Using the Lasso tool
To make the drink more believable, you'll curve or slope the top of the liquid in the
glass. The Lasso tool is an ideal tool for this job because you can use it to make an
irregular selection.
1 Select the Lasso tool (P). Make sure the Polygon Mode icon (') is not selected.
Note: When the Polygon Mode icon is selected, the Lasso tool is constrained to
draw polygons.
ADOBE FLASH CS3 PROFESSIONAL
Classroom i n a Book
2 Draw a closed shape around the top of the glass fill. Overlap the ends, and then
release the mouse.
3 Click the Color Fill icon in the Tools panel, and select white in the Color Picker.
The water bitmap is replaced with a solid white fill in the selected area.
57
5 8 LESSON 2
Working with Graphics
4 To ensure the glass is displayed during the entire animation, select frame 35 in the
Glass layer in the Timeline, and choose Insert > Timeline > Frame. Flash extends frame 1
to frames 2 through 35.
The drink itself is complete! All that's left to do is to add bubbles and fizz.
Drawing ovals
The Oval tool is similar to the Rectangle tool, except, of course, it draws ovals. You'll use the
Oval tool to draw a bubble in the drinking glass. So that you can easily animate the
bubble later, you'll create it on a new layer.
1 Lock the Glass layer, so that you don't accidentally change it while you're working
with the bubble.
2 Choose Insert > Timeline > Layer to add a layer for the bubble.
3 Name the layer Bubble.
ADOBE FLASH CS3 PROFESSIONAL
Classroom in a Book
4 Select the Oval tool
O, which is grouped with the Rectangle tool.
r®~
5 Hold down the Shift key and draw a circle inside the glass. When you press the Shift
key, the Oval tool draws a perfect circle.
59
6 0 LESSON 2
Working with Graphics
6 Drag the Selection tool around the entire circle to select both the fill and the stroke.
7 In the Property inspector, set the Stroke color to No Color (Z) and the Fill color to
i
Cfrhvn Rn!nn,n
white (#FFFFFF).
mare!
8 Select the Free Transform tool ( i ) to resize the bubble.
J
Gradient Transform Tool (F)
ADOBE FLASH CS3 PROFESSIONAL 6 1
Classroom in a Book
9 Hold down the Shift key to retain the bubble's proportions, and drag a corner handle
inward to make the bubble smaller. The resized circle should be about 8 pixels wide and 8
pixels tall. You may find it easier to resize the bubble if you zoom in on it. (The Property
inspector displays the bubble's height and width.)
Q By default, the object is scaled relative to the upper-left corner. If you press Alt
(Windows) or Option (Mac OS), the object is scaled relative to its transformation point,
represented by the circle icon. You can drag the transformation point anywhere in the
object, or even outside of the object.
Creating a simple animation
Later lessons cover animation in greater detail, but for this project, you'll use a motion
tween to create a simple frame-by-frame animation. You'll convert the bubble to a
symbol, apply the motion tween, and then copy the layer to create additional animated
bubbles.
6 2 LESSON 2
Working with Graphics
Converting a shape to a symbol
A symbol is a graphic, button, or movie clip that you create once in Flash and then reuse
as many times as you like, reducing the size of your movie file. Additionally, there are ways
you can use symbols that you can't use other shapes. You'll learn more about symbols in
Lesson 3. Now, you'll convert the bubble to a symbol so that you can animate it.
1 With the Selection tool, select the bubble.
2 Choose Modify > Convert to Symbol.
3 Name the symbol bubble, and select Graphic for the symbol type. Click OK to close the
Convert to Symbol dialog box.
Convert to Symbol
Animating an object
The bubble should rise in the drink and change size over 20 frames. You'll specify the
final bubble size and position at frame 20, and then apply a motion tween. A motion
tween automatically creates the frames between the beginning and the end of the
animation.
1 Select the bubble on the Stage and move it to the bottom half of the glass.
2 Select frame 20 in the Bubble layer, and press F6 to insert a keyframe.
3 Select the bubble on the Stage.
4 In the Property inspector, enter the following values:

Height: 12 pixels

Width: 12 pixels
5 Set the Y value to 90 pixels lower than its current value. For example, if the current Y
value is 100, change it to 10. Press Enter or Return to apply the value.
ADOBE FLASH CS3 PROFESSIONAL 163
Classroom in a Book
The larger bubble moves up to the top of the glass.
6 Select any frame between 1 and 20 on the Bubble layer.
7 In the Property inspector, select Motion from the Tween menu.
8 To see the bubble animation, choose Control > Test Movie. The bubble floats to the top
of the glass and out of it, and then the animation repeats.
Adding animation layers
A drink needs more than one bubble, but you don't need to go through all the steps to
create each one. Instead, you'll copy the Bubble layer to create additional layers. Then,
you can reposition the bubbles' starting and ending positions.
1 Click the Insert Layer icon nine times to create nine new layers.
2 Name the layers Bubble2, Bubble3, Bubble4, and so on.
6 4 LESSON 2
Working with Graphics
3 In the Timeline, click frame 1 in the Bubble layer, and then press the Shift key and
click frame 20 to select frames 1-20.
4 Press Alt (Windows) or Option (Mac OS) as you drag the layer to one of the new layers
above it, shifted slightly so that the first frame is a few frames further down the Timeline.
5 Copy the same frames to each layer, so that the starting keyframe for each layer is at a
different position, from frame 1 to frame 15.
65
6 Select the first keyframe in the Bubble2 layer, press Ctrl+A (Windows) or
Command+A (Mac OS) to select the bubble on that layer, and then drag the selected
bubble to a different position in the glass.
7 Select the last keyframe in the layer, press Ctrl+A (Windows) or Command+A (Mac
OS), and move the final bubble to a position above its new starting point, so that the
bubble travels straight up in the glass.
8 Repeat steps 5-7 for the remaining bubble layers, so that each bubble begins in a
different position in the glass and ends in a position directly above its starting position.
9
To see each bubble's path more clearly, hide all the bubble layers except the one you're
working with.
9 To preview the animation, choose Control > Test Movie.
The fizzy drink is now bubbly!
6 6 LESSON 2
Working with Graphics
Working with lines
The Line tool draws straight lines, which you can combine to create new objects. To add
some sparkle to the drink, you'll create popping fizz shapes above the glass.
Matching the color of an existing object
The fizz should match the drink color, so you'll set the stroke color of the initial ovals to
match the darkest shade in the drink.
1 Select the Bubble 10 layer (the top layer) in the Timeline.
2 Choose Insert > Timeline > Layer, and name the layer Fizz.
3 Select frame 1 in the Fizz layer.
4 Select the Oval tool.
5 In the Property inspector, click the Stroke Color box, and then use the Color Picker's
eyedropper to click on a dark area of the drink.
6 Set the Stroke Height to 3 and the Fill Color to none (CI).
7 Draw a small circle above the drink. 0
ADOBE FLASH CS3 PROFESSIONAL
Classroom in a Book
Adding lines
You'll add lines to the oval to create a star shape.
1 Select the Line tool ( \ ) and select Object Drawing mode (0).
2 Hold down the Shift key while you draw a line across the center of the oval. The line
should be about three times as long as the oval is wide.
9
Hold down the Shift key while you draw a line to ensure the line is straight.
3 Choose Edit > Copy to copy the line you just drew.
4 Choose Edit > Paste In Place to paste a copy in exactly the
same position.
5 Choose Modify > Transform > Rotate 90° CCW to rotate the second line so that it is
perpendicular to the first one.
6 Select the Selection tool.
7 Hold down the Shift key and select both the horizontal and vertical lines.
8 Choose Edit > Copy to copy both lines.
9 Choose Edit > Paste In Place.
6 8 1 LESSON 2
Working with Graphics
10 Choose Modify > Transform > Scale And Rotate.
11 Type 45 in the Rotate box, and click OK.
The second set of lines are perpendicular to the first set, creating a star.
Breaking objects apart
You used the object drawing mode to create the lines. Now, to remove the overlapping
lines from the center of the circle, you'll convert the lines into separate line segments.
1 With the Selection tool, drag a selection around the entire star so that all four lines
and the circle are selected.
2
Choose Modify > Break Apart.
3
Click a blank area on the Stage to deselect the star.
ADOBE FLASH CS3 PROFESSIONAL 6 9
Classroom in a Book
4 Select each line segment in the center of the circle and delete it.
Manipulating objects
You can combine multiple objects—whether they were drawn using object drawing mode
or not—to copy, paste, reposition, and otherwise work with them more efficiently. To
create multiple fizz elements, you'll group the components of the star.
Disabling Snap To Guides
Guides appear as you drag an object on the Stage. These guides can help you align objects
quickly, and you can snap the object you're moving to a guide or to another object. For
this project, however, you want to place the fizz elements randomly, so you'll deselect Snap
To Guides and Snap To Objects.
7 0 LESSON 2
Working with Graphics
1 Choose View > Snapping > Snap To Guides.
2 Choose View > Snapping > Snap To Objects.
Grouping objects
To copy the star, you'll first group all the components of the star.
1 With the Selection tool, drag a selection around the entire star.
2 Choose Modify > Group.
3 Press Alt (Windows) or Option (Mac OS), and drag the group to an open area above the
drink.
9
Pressing Alt (Windows) or Option (Mac OS) copies the selected object as you drag it.
4 Repeat step 3 to make another copy of the star.
ADOBE FLASH CS3 PROFESSIONAL
Classroom i n a Book
Adding shapes
In addition to the stars, the fizzy area above the drink will contain small ovals. You'll use
the Oval tool to create those.
1 Select the Oval tool.
2 Hold down the Shift key, and draw a circle.
3 With the Selection tool, select the circle.
4 Press Alt (Windows) or Option (Mac OS), and drag the circle to create another copy.
Animating objects
You'll create a very simple animation for the fizzing elements to create a popping effect.
The objects will move on the screen every five frames. You must create a keyframe at
each frame where the objects move.
1 In the Timeline, select frame 5 in the Fizz layer, which contains the fizz objects.
2 Choose Insert > Timeline > Keyframe.
7 2 LESSON 2
Working with Graphics
3 Add a keyframe for every fifth frame through frame 30. (That is, create keyframes at
frames 10, 15, 20, 25, and 30.)
4 In the Timeline, select the keyframe at frame 5.
5 Rearrange the fizz elements on the Stage.
6 Select each of the remaining keyframes, in turn, and rearrange the fizz elements so
that they're in a different position for each keyframe.
7 Choose Control > Test Movie to preview the popping fizz you've created, and then close
the preview window.
ADOBE FLASH CS3 PROFESSIONAL I 7 3
Classroom in a Book
Masking objects
A mask provides a hole through which underlying layers show, so that you can limit the
area of the layers that is visible. You'll use a mask to keep the bubbles in the glass.
1 Unlock the Glass layer.
2 Click on the drink fill on the Stage to select it.
3 Choose Edit > Copy.
4 Choose Edit > Deselect All to prevent the fill from sitting above the outline.
5 Lock the Glass layer again.
6 In the Timeline, select the Bubble 10 layer, beneath the Fizz layer.
7 Choose Insert > Timeline > Layer.
74 LESSON 2
Working with Graphics
8 Choose Edit > Paste In Place. The drink fill shape is pasted into the new layer.
Bubble
1
O
Bubble9
Bubble8
Bubble7
v
Bubble6
Bubbles
Bubble4
d Bubble3
v
Bubble2
d Bubble
al l 4
9 Name the layer Mask.
10 Right-click (Windows) or Control-click (Mac OS) the Mask layer, and choose Mask.
Flash locks the Mask layer and indents the layer beneath it.
ADOBE FLASH CS3 PROFESSIONAL 7 5
Classroom i n a Book
11 In the Timeline, select all the layers from Bubble to Bubble9.
9
To select multiple contiguous layers, click the first layer, press the Shift key, and click
the last layer.
12 In the Timeline, drag the selected layers onto the BubblelO layer (the indented layer).
All the layers are indented below the Mask layer, so the Mask layer masks all of them. No
bubbles will appear outside the drink fill.
[ask.
Testing a movie
Preview your animation to make sure it's behaving as you expect. In fact, you should
preview the movie frequently so that you can troubleshoot or simply tweak your
animation.
To preview the movie, choose Control > Test Movie. You see the full effects of t he drink,
the bubbles, and the fizz—all created with rectangles, ovals, and lines. You've created an
animated fizzy drink!
9
To use this animation in other projects, you can copy all keyframes from the main
Timeline and paste them into a new movie clip symbol, which you can then place
wherever you want to use it.