S· I G tting
Acquainted
Start Adobe Flash. In \"'lindows, choose Start> All Programs> Adobe Flash CS3. In Mac OS,
double-click Adobe Flash CS3 in the Applications folder or the Dock.
ot: ari.1 I /$ $11 r1 Ff It by douule-Ii king a Fla~1J ( .fla· jilf!• .w It Ll.S tJl~ 0JStarlJla fit IOU '11
use in t/!is J on.
2 Choose FiJe > Open. In the Open dialog box, select the 0] End.swf file in the
LessonO] /0 1End folder, and click Open to preview the final project.
An animation plays. During the animation, a bottle moves onto the screen and tips to
pour water.
3 Close the preview window.
Choose File> Open. In the Open dialog box, double-click the 01 Start.f]a file in the LessonO
1/0IStart folder.
The OlStart.f1a file opens with a logo already on the Stage. The Timeline contains several layers;
the contents of the layers change in different frames.
Choose File> Save As. Name the file Ol_workingcopy.fIa, and save it in the OlStart folder.
Saving a working copy ensures that the original start file will be available if you wish to start
over.
t:ie1:1I"n o now
WOII'
re
'lhe Adobe Flash work area includes the command menus at the top of the screen
and a variety of tools and panels for editing and adding elements to yom lllovi . You
can create all the objects for your animation in Flash, or you can import elements
you've created in Adobe Illustrator, Adobe Photoshop, Adobe After Effects, and other
compatible applications.
DOBE FLA,~H (53 PROCES_IONI\L
Cla~smom In i! Book
By default. Flash displays the menu bar, Timeline, Stage. Tools panel. Property inspector, and a
few other panels. As you work in flash, you can open, dose, dock, undock, and move panels
around the screen. Tb return to the default workspace, choose Default from the Workspace menu
in the Edit bar just above the Stage.
I"
121 lESSON I
G~ltln!J Acqualnted
About the Stage
A with a theater stage, the Stage in Flash is the area viewer. sec when a movie is playing. It
contains the text, images, and video that appear on the screen. Move elements on and off the
Stage to move them in and Ollt of the rectangular area in Flash Player or the web browser
v,'indow where your Flash movie will play. YOll can use the grid, guides, and rulers to help you
position items on the Stage. Additionally, yOll can use the Align panel and other tools you'll learn
abollt in the lessons in this book.
To see the work area around the Stage, lise the Zoom tool (~) to zoom Ollt, or choose View>
Pasteboard.
To scale the Stage so that it (Its completely in the application window, choose View>
Magnification> Fit in Window. You can also choose view options from the pop-up menu just
above t'he Stage.
ADOBE FLA,_
(Sj
r CFESSIONAl
113 n 5.$f'oom I Bk
Understanding the Timeline
Like filJ11~, Fla~h documents measure Lime in frames. As the movie plays, the playhead
advances through the frames in the Timeline. You can change the contcnt on the Stage for
different frames. To display a frame's content on the Stage, move the playhead to that frame in
the Timeline.
At the bottom of the Timeline, Flash indicates the selected frame number, the current frame
rate (how many frames play per second), and the time that has elapsed so far in the movie.
.
I.
I
,
•
TIle Timcline also contains layers, whjch help you organize the artwork in your dOCUHlent.
TI1ink of layers as multiple film strips stacked on top of each other. Each layer contains a
different image thal appears On the Slage, and you can draw and edit objects on one layer
without affecting objects on another layer. '1 he layers are stacked in the order that they appear
in the Timelinc, so that objects on the botrom layer in the Timeline are on the bottom of the
stack on the Stage. YOll can hide, show, lock, or unlock layers. Each layer's frames are unique,
but you can drag them to a new location on the same layer, or copy or move them to another
layer.
141lfSSON 1 G ttlng:
Acqu Intl!d
Adding a layer
A new Flash document contains only one layer, but you can add as many layers as you
need. It's a good idea to name each layer to indicate its contents so that you can easily
find the layer you need later.
You'll add a layer [0 the Timdil1c to contain the bottle image that you're going to animate.
1 Select the Mask layer in tbe Time/ine.
2 Choose Insert> Tin1cline > Layer. A new layer appears between the Labels layer and
the Mask layer.
3 Double-click the new layer to rename il, and type Pour. Click outside the name box
to apply the new name.
Click the lock icon above the layers to lock all layers. Locking a layer prevents you from
accidentally making change~ to it.
I
S Click the lock icon next to the Pour layer to unlock it.
10 15 20 25 S!S 4iJ 45 SO 5$ 60
,. I
1.
I
ADO& LASH (S3 i>ROn' IONAl
(I s.sroom III aBook
Creating a keyframe
A keyframe indicates a change in content on the Stage. You'll insert a keyframe on the Pour
layer where you want the bottle to first appear.
Select frame 18 on the Pour layer. As you select a frame, Flash displays the frame number
beneath the Timcline.
10
""II r~rf "
....
20 25 30 3540 455055 ~o
o
•
•
Ii
II
•
Ii
:U ,"1Tr~"''''
-l 24.0 fp. 0.7.
II
.> --
I
____ ~bottle
• >-------+ •
• WOYO
1 Choose Insert> Timeline > Keyframe,
10 15 :20 25 3540 50 55 60
Iii
I"~ .
•
.~.=======-=-~~~]=-~~-_-_-_-_-_-~_,-"
~_'_o_._
--l .-JJ!..J:::'-===:;:::::;
0 .!b...-----_l--llI!..=======;:===J.!....~
,,_-,"Jlb'---.
------l:~II!c.,====j:
•.....JIl:.t:==========,~.c..:'
• Ii, ,!..
Trcnspolrm ..a,..
il 51&_
aWey
'll", ...l
• Ii
I
• ii1I
[J,lt
11S
1161 NI
Getting Acqu in 00
Wor· 9
e i rary panel
The Library panel is where you store and organize symbols created in flash, as well
as imported files, including bitmaps, grapnics, sound files, and video clips. 'TIle bottle
image you're going to use has already been added to the library and converted to
a symbol.
ote: You'll am mu 1 more abollt s)'mlJ ~ ill L' (m 3.
About the Library panel
The Library panel lets you organize library items in folders, sec how often an item is
used i) a document, and sort items by type. When you import items into Flash, you can
import them onto the Stage or into the library. However, any item you import onto the
Stage is also added to the library, as are any symbob you create. 'TIlat \·\,ay, you can easily
access the items to add them to the Stage again, edit them, or see their properties.
To display the Library panel, choose Window> Library, or press Ctrl+L (Windows) or
COl1.1mand+L (Mac OS).
11 Items
+
Type
o
Polder
p''''' -1;1
~Op
Clp
p
When you select an item in the Library panel, it displays a thumbnail preview of the item. If
the item you selected is a sound file or is animated, click the Play button in the preview
window to play it.
I';
).
Select the Pour layer in the Timdine, and then click the Insert Layer icon (
2
ame the new layer Outline.
3
Lock the Pour layer so that you don't accidentally move anything on it.
2
1
I
20 LESSmil
Getting ACQuain d
Positioning an object on the Stage
First, you'll move the bottle into its initial position llsing the Property inspector. You'll also use
the Transform panel to rotate the bottle.
1 Select the bottle that you dragged onto the Stage.
2 IJl the Property inspector, type 6R9 for the X value and -59 for the Y value. Press Enter
or Return to apply the values. 1he bottle moves to the right, above the Stage.
JlOOS' \ illdow
> 1',-, P
rlie :> Prope
ti , or
(11 i 0).
Color: 0"'"
__-,
i w:~l;;;~ Bler>d: =-_--'
~j::;-
H:75"Ol~~
Use runurroe b<r.m~p c~(hlnq
I..-
----~-----
o
AQ11A ZERO
3 Choose Window> Transform to open the Transform panel,
, OORF ~LASH (53 POOFESS ....
A.L
121 Classroom in B
4 In the Transform panel, select Rotate, and type 35 in the Rotate box. Press Enter or Return to
apply the value.
AQ1)A ZERO
Using motion tweens to animate an object
The bottle should tip over, so that it appear~ to be pouring water. To achieve this effect, you could
create a keyframe for each frame in the Timeline, and then mOVe the bottle slightly in each
keyframe. It's much easier, though, to specify the initial and final positions and then let Flash create
the intermediate steps. The process of creating intermediate steps is called tweening.
!
ote: You'U Jell/Ii nlOrl: abollt motion! vc nil L"( ons 2 'ld .
You'll animate the bottle so that it appears to be pouring, and then move the bottle off the Stage. 1
Select frame 24 in the Pour layer, and press F6 to insert a keyframe. 2 Select the bottle you positioned
on the pasteboard. In the Property inspector, type 668 for the X value and 31 for the Y value. Press
Enter or Return to apply the values.
221
LillO~ 1
Getting
ACCluilirrt~d
4 In the Transform panel, type -25 in the Rotate box, and press Enter or Return.
,~
,
AQ!JA
,
,
ZERO
In the Timehne, ~elect any frame between frames 18 and 24 in the Pour bottle layer.
'Ii iii
""""..
l'ibti
.,flDIli ; • • •
01 1015 2'
25 30 35 40is 50 55 60
.~------+-----------~_---!
I .O!<...-------r--,j,-...,..
-.
o
Del
.
--,
J
~~
p
6 In the Property inspector, choose Motion from the Tween menu. Flash adds an arrow to the
frames in the Timeline to show that a motion tween has been applied.
..
Select the Pour layer in the Timdine, and then click the Insert Layer icon (
2
ame the
..new layer Outline.
TV'Pe..e....,: No:r'",
Frame
Sound:
<;
tt:oI
Effect: Label
~ype; S,:,TtC:
E"t!Il! f\.epl!':!it
I i\JQ soun
Ieeted
3
Lock the Pour layer so that you don't accidentally move anything on it.
I';
).
241 ssnN
G ulng Acqu Inl d
just about e,'crvthing you do in Flash invokes a panel. [n this lesson, you use the Library panel, '[()ols panel,
ProperlY inspeclor, Transform panel. History panel, and the Timeline. In later It's.sons, ynu'l\ use the Actions
panel, the Color panel, the Align pand, and other pands thai let you control various aspects of your project.
Because panels are such an inkgral part of the Flash workspace, it pays to kno\\' hnw to manage them.
To open any panel ill Flash, choost' its namt' from the \Vindow lllellU. In a few cases, you may need to choose the
panel from a submenu, such as Window> Properties> Properties, or \"'indo\\' > Other Panels> History.
vT
By default, the Property inspector, Hlters panel, ,uul Pamlllders panel appear together at the bottom of the scrl'l'n,
the Timeline is at the top, and the TlIo!s pancl is on the lefL side. Most other panels are displayed on the right
side of the screen. Howevt:r, you Gin move a panel Lo any position Lhat is convenient for you.
•
To undock a pand from the right side of the screen, drag it by its tab to ,I Ilew location. To dock a pand,
drag it hy its tah into the dock Oil tht' right side of the screen. You can drag it to the top, hottom, or in between other
panels.
'10 group a panel with another, drag its tah 011LO the other panel';; tah.
To mow a panel group, drag the group by its title bar.
ADOBE -LASH '53 PROFESSIONAL
Classroom in a ook
si 9
The Tools panel-the long, narrow panel on the far left side of the work area-contains selection
tools, dTawing and type tools, painting and editing tools, navigation tools, and tool options.
You'll use the Tools panels frequently to switch from the Selection tool to the Text tool to a
drawing tool. When you select a tool, remember to check the options area at the bottom of lhe
panel to ensure that you're using the fill, stroke, or other settings appropriate for your task.
You'll use the Zoom tool to enlarge the central logo area on the Stage. Then, you'll use the
Oval tool to draw an outline around the logo circle.
Selecting and using a tool
When you select a tool, the options available at the bottom of the Tools panel change.
For example, when YOli 'decl a draWing tool, the Object Drawing mode and Snap
To Object options appear. When you select the Zoom tool, the Enlarge and Reduce
options appear.
first, zoom in to see the logo circle more clearly.
, Seleclthe Zoom tool in the Tool panel.
125
261 LBSON 1
Getting A'lluiI or d
2 Select the Enlarge icon (~) in the options area of the Tools panel.
3 Click the aqua circle with the letters in it to enlarge it on the screen.
Selecting a hidden tool
The Tools panel contains too many tools to display all of them at once. Some tools are arranged
in groups in the Tools panel; only the tool you hlst selected frol11 a group is displayed. If then::
is a small triangle in the lower-right corner of the tool button, there are other tools in the group.
Click and hold the icon for the visible tool to see the other tools available, and then select one
from the pop-up menu.
You'll use the Oval tool, which is hidden by the Rectangle tool, to draw an outline around
the logo circle.
p
4 In the Timeline, move the plaYhead to frame 293. the last frame in the movie. and select
frame 293 i.n the Outline 'layer.
I';
).
Select the Pour layer in the Timdine, and then click the Insert Layer icon (
2
ame the new layer Outline.
3
Lock the Pour layer so that you don't accidentally move anything on it.
• >-----0'
2
1
24,0
(
~ps
O,~s
ADOllf. FLASH -', PROF <;, l) Al
(I room in iI Book
Click and hold the Rectangle tool in the Tools panel, and then select the Oval tool from lhe
pop· up menu.
12
OWIIfOlll(C\
• (p i<ltlvt
Tool 01
T~
6 ClicktheStrokeColoricon(..)in theoplionsarea oftheToolspanel.TheAdobe Color Picker
opens.
7. Select black in the Color PickeL
Click the Fill Color icon (~) in the options area of the Tools panel. The Color Picker ( pens
again.
9 Select Ko Color in the Color Picker.
127
281 LESSO~ 1
Getting Acquaint d
10 Hold down the Shift key as you draw an oval around the logo circle.
j\.ote: Pr~ ill tJI
!IUi ke 't Syou m v 011 tmillS t/'I ' tool to arm
J
1 perfect
drdc. You C 1 modify
mall)' tool by pre. ing {I key '\'lIite y 1/ 1/5 th m. For mil ie, f1r1? th 11" ( ~findow. ) or plioll
(\fa 0) key as you flS til' Zo lItt II to -hi ngc it from Iliar~e mod to 1 Cdll-mode.
11 Select the Selection tool (\), and then select the oval.
2 In the Property inspector, change the width and height values to 101 so that the oval you drew
matches the logo circle exactly. 13 Select the oval, and then use the arrow keys on your keyboard to
nudge the circle
into position. 14 In the Property inspector, change the Stroke Height to
4.
: Ft<
u..
./ ~ 4
~ Shape
C~p;
~ /.. Stroke loll .r,g Scalel Normal
r W; 101.0 X;
Y
1i":1
m,o ~ H', lltLO
e
Join: ~
I Gettir19 AcqlJilinted
30 LES ONI
n0
In a perfect world, everything would go according to plan. But sometimes you need to move
back a step or two and start over. You can undo steps in Flash using the Undo command or the
History panel.
To undo a single step in flash, choose Edit> Undo, or press Control+Z (Windows) or
CommanJ+Z (Mac OS). To redo a step you've undone, choose Edit> Redo.
To undo multiple steps in flash, it's easiest to use the Histlry panel, which displays a list of all
the steps you've performed since you opened the current document. Closing a document clears
its history.
To open the History panel, choose Window> Other Panels> History.
The logo looked better before yOll added the black circle, so you'll remove the circle. First,
undo the change i.n stroke size using the Undo command, and then remove the entire Outline
layer u 'ing the History panel.
Choose Edit> Undo to change the Stroke value back to l. 2 Choose Window>
Other Panels> History to open the History panel.
1\ D(''6 IA fIC> PRarmlON I
ClasUOClfll 11 a Baok
3 Drag the History panel slider up to the step just before you created the Outline layer. ~ teps
helmv that point are dimmed in the Ilistory panel, and they are removed from the projecl. To add
a step back, move the slider back down.
ote: ifyou remove step$ in the Hi tor I pallel and Ih 11 pe'iorm ad fiti nar t 'P-', the
h'/lW1'ea step_ will II J01Iger be tlvailabJc,
'nyo 0
As you work on a project, it's a good idea to preview it frequently to ensure that you're
achieving the dtCct you want. To quickly sec how an animation or movie will appear to a
vi<::\ver, choose Control> Test Movie. You can also press Crr] ,..Enter (Windows) or
Command+Return (Mac OS) to preview your movie.
1 Choose Control> Test Movie. flash opens and plays the movie in a separate window.
2 Close the preview windO\o\'.
131
i'.DOBE FL'\SH CSJ PROFESSIONAL
133
Classroom na oak
5 Click OK to close the dialog box.
6 Navigate to the LessonO lIO lStart folder to see the files Flash created.
---I
.'
Us ngF
For complete information about llsing panels, tools, and other application features, refer to Flash
Help. To open nash Help, choose Help> Flash Help.
...
~
.til' ...
~th't....
Up~".
Ato.Jt C53 r~
.JSON!
341
Get I 9 cquaint d
Flash Help is divided into several books. The Using Flash book includes how-to tips, tutorials,
and explanations of Flash concepts and feature descriptions. Programming ActionScript 3.0,
ActionScript 3.0 Language and Components Reference, and Using ActionScril't 3.0 Components
are references for ActionScript 3.0, which lets yOll extend the functionality and include
interactivity in your Flash movies.
ore: Flt's" Help ( Lso il1durl references/or earlier v£>rsion 0 clio I• ripl ,uif r
multiple v rsians afFlash 't£', which i. used to r; at·, tlnim til1tts_ft)r mnbile oml
ldlu~id d vi
Browsin.g the table of contents
If you want to learn more about a general feature set or concept in [lash, browse the table of
contents. You'll use the table of contents to see more information about what's
new in Flash CS3.
1 Choose Help> Flash Help.
R . trOOrn...
"'bwt Adebt Flash C53 1'101
361
LLSOtl! 1
G 'n ACqullfTltl!d
Searching for keywords
If you're not sure where a topic would be included in the tahle of contents, or if you want to see
every topic that refers to a concept or term, search [or the appropriate k yword. You'll use the
search function to learn more about the History panel.
Choose Help> Flash Help.
R.,.....tes M>et s N!!W' FI C~
fu.nS>.Jl!l)tYtCe Flash
ytIilpc< ,~ ",ums
M'*'-'""'"il
Rovab'* .e
"'5...
Aoot>o Fl.st l'r.ssauoI
2 In the Search field, type history.
I'!
3S!LCSON G ttfng
Acquainted
Your default web browser launches and displays the Adobe Flash support page on the
U.S. Adobe Systems website.
2 Explore the site. You can find information such as tips and techniques, galleries
or artwork by Adobe designers and artists around the world, the latest product
information, aod troubleshooting and technical information.
Adobe Design Center
....
..
瘀.
3 Close your browser. Congratulations. You've finished Lesson 1. Now that .you're
..........................................................................................................................
............
acquainted
.....................
with the Flash workspace,
...........................
................................................................................................................................
you can proceed to Lesson 2 to learn how to USe Flash drawing tools.
If you prefer, you can skip to any Ie· 'on in the book. However, most people will find it useful to
.....................
work through the lessons in order, as each lesson builds on concepts and skills you've learned in
previous lessons.