-
Adobe Flash CS3 Professional C lassroom in a Bookby Adobe
Creative T eam
Publisher: Adobe Press
Pub Date: April 27, 2007Print ISBN-10: 0-321-49982-4Print
ISBN-13: 978-0-321-49982-0
Pages: 352
Overview T his project-based guide from Adobe will teach readers
all they need to know to create engaging interactive content with
Flash CS3.Using step-by-step instructions with projects that build
on the knowledge learned in each lesson, readers will learn the key
elements ofthe Flash interface, including panels, timelines, and
frames. From there, readers will learn how to work with vector and
bitmap graphics;create and edit symbols; modify text and add
interactivity with ActionScript 3.0; and incorporate animation,
music, and sound to theirprojects. T hey'll also learn how to
prepare and export their finished projects for Web and broadcast.
Of course, readers will also learnhow to take advantage of the new
features of Flash CS3--the streamlined user interface, native
support for Photoshop and Illustratorfiles, revamped drawing tools,
new video encoding features, code editing enhancements, and much
more. T he companion CD providesusers with all the sample files
they need to complete all of the projects.
Page 1
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
CopyrightT he Official T raining Workbook from Adobe Systems
2007 Adobe Systems Incorporated and its licensors. All rights
reserved.
Adobe Flash CS3 Professional Classroom in a Book for Windows and
Mac OS.
If this guide is distributed with software that includes an end
user agreement, this guide, as well as the software described in
it, is furnishedunder license and may be used or copied only in
accordance with the terms of such license. Except as permitted by
any such license, nopart of this guide may be reproduced, stored in
a retrieval system, or transmitted, in any form or by any means,
electronic, mechanical,recording, or otherwise, without the prior
written permission of Adobe Systems Incorporated. For information
on obtaining permission,please write [email protected].
Please note that the content in this guide is protected under
copyright law even if it is notdistributed with software that
includes an end user license agreement.
Please remember that existing artwork or images that you may
want to include in your project may be protected under copyright
law.T he unauthorized incorporation of such material into your new
work could be a violation of the rights of the copyright owner.
Please besure to obtain any permission required from the copyright
owner. Any references to company names in sample templates are
fordemonstration purposes only and are not intended to refer to any
actual organization.
Adobe, the Adobe logo, Acrobat, the Acrobat logo, Classroom in a
Book, AfterEffects, Flash, Illustrator, and Photoshop are
trademarksof Adobe Systems Incorporated.
Apple, Mac OS, Macintosh, and Safari are trademarks of Apple
registered in the U.S. and other countries. Microsoft, Windows,
andInternet Explorer are either registered trademarks or trademarks
of Microsoft Corporation in the U.S. and/or other countries. All
othertrademarks are the property of their respective owners.
Adobe Systems Incorporated, 345 Park Avenue, San Jose,
California 95110, USA
Notice to U.S. Government End Users. T he Software and
Documentation are "Commercial Items," as that term is defined at 48
C.F.R.2.101, consisting of "Commercial Computer Software" and
"Commercial Computer Software Documentation," as such terms are
usedin 48 C.F.R. 12.212 or 48 C.F.R. 227.7202, as applicable.
Consistent with 48 C.F.R. 12.212 or 48 C.F.R. 227.7202-1through
227.7202-4, as applicable, the Commercial Computer Software and
Commercial Computer Software Documentation are beinglicensed to
U.S. Government end users (a) only as Commercial Items and (b) with
only those rights as are granted to all other end userspursuant to
the terms and conditions herein. Unpublished-rights reserved under
the copyright laws of the United States. Adobe SystemsIncorporated,
345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government
End Users, Adobe agrees to comply with allapplicable equal
opportunity laws including, if appropriate, the provisions of
Executive Order 11246, as amended, Section 402 of theVietnam Era
Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and
Section 503 of the Rehabilitation Act of 1973, asamended, and the
regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741.
T he affirmative action clause and regulationscontained in the
preceding sentence shall be incorporated by reference.
Adobe Press books are published by Peachpit, Berkeley, CA. T o
report errors, please send a note to [email protected].
Printed in the U.S.A.
ISBN-13: 978-0-321-49982-0
9 8 7 6 5 4 3 2 1
Writer: Brie GyncildDesign Director: Andrew Faulkner, afstudio
designDesigners: Annie T sou, Heather Landry, Rachel
LightfootProduction: Dawn Dombrow-T hompson, dtstudio
We offer our sincere thanks to the following people for their
support and help with this project: Colin Smith, Paul Smith, Nader
Nejat,Andrew Chew, T yler Munson, T hanh T ran, Jill Merlin, John
Nack, Lee Unkrich, and Christine Yarrow. We couldn't have done
itwithout you.
Page 2
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Richard Galvan Sr. Product Manager - Flash CS3
Adobe Systems, Inc.
Greetings from the Flash team,
T hank you for choosing this book. Whether you are a longtime
Flash user or are just beginning to experiment with
animation,interactive websites, and creating visual effects, this
book has something to help expand your knowledge of Flash. In
addition to helpingnew users get up to speed quickly, Adobe Flash
CS 3 Professional Classroom in a Book covers many new features,
including anintroduction to ActionScript 3.0. So jump right in and
start creating a splash with Flash.
We appreciate your interest and support of Flash.
Richard Galvan Senior Product Manager, Flash CS3
Page 3
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Getting StartedAdobe Flash CS3 provides a comprehensive
authoring environment for creating interactive websites and digital
animation. Flash iswidely used to create engaging applications that
are rich with video, graphics, and animation. You can create
content in Flash or importit from other Adobe applications, quickly
design simple animations, and use Adobe ActionScript 3.0 to develop
sophisticatedinteractive projects.
Page 4
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
About Classroom in a BookAdobe Flash CS3 Professional Classroom
in a Book is part of the official training series for Adobe
graphics and publishing software.T he lessons are designed so that
you can learn at your own pace. If you're new to Flash, you'll
learn the fundamental concepts andfeatures you'll need to use the
program. Classroom in a Book also teaches many advanced features,
including tips and techniques for usingthe latest version of this
application.
T he lessons in this book include opportunities to use new
features, such as working with ActionScript 3.0, using new
components tostreamline projects, importing symbols from Adobe
Illustrator layers, integrating Adobe After Effects video, and
more.
Page 5
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
What's on the CD[*]
[*] Here is an overview of the contents of the Classroom in a
Book CD
Lesson Files ... and So Much More
T he Adobe Flash CS3 Professional Classroom in a Book CD
includes the lesson files that you'll need to complete the
exercises in thisbook, as well as other content to help you learn
more about Flash CS3 and use it with greater efficiency and ease. T
he diagram belowrepresents the contents of the CD, which should
help you locate the files you need.
Page 6
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
PrerequisitesBefore beginning to use Adobe Flash CS3
Professional Classroom in a Book, make sure that your system is set
up correctly and thatyou've installed the required software. You
should have a working knowledge of your computer and operating
system. You should knowhow to use the mouse and standard menus and
commands, and also how to open, save, and close files. If you need
to review thesetechniques, see the printed or online documentation
included with your Microsoft Windows or Apple Mac OS software.
Page 7
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Installing FlashYou must purchase the Adobe Flash CS3 software
either as a stand-alone application or as part of the Adobe
Creative Suite. Flash CS3requires Apple QuickT ime 7.1.2 or higher.
For system requirements and complete instructions on installing the
software, see theAdobe Flash ReadMe.html file on the application
DVD.
Install Flash from the Adobe Flash CS3 application DVD onto your
hard disk; you cannot run the program from the DVD. Follow
theon-screen instructions.
Make sure that your serial number is accessible before
installing the application; you can find the serial number on the
registration cardor on the back of the DVD case.
Page 8
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Optimizing PerformanceCreating animations is memory-intensive
work for a desktop computer. Flash CS3 Professional requires a
minimum of 512 MB ofRAM; 1 GB or more is recommended. T he more RAM
that is available to Flash, the faster the application will work
for you.
Page 9
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Copying the Lesson FilesT he lessons in Adobe Flash CS3
Professional Classroom in a Book use specific source files, such as
image files created in AdobeIllustrator, video files created in
Adobe After Effects, audio files, and prepared Flash documents. T o
complete the lessons in thisbook, you must copy these files from
the Adobe Flash CS3 Professional Classroom in a Book CD (inside the
back cover of this book) toyour hard disk.
1. On your hard disk, create a new folder in a convenient
location and name it FlashCS3_CIB, following the standard
procedurefor your operating system:
Windows: In Explorer, select the folder or drive in which you
want to create the new folder, and choose File > New >
Folder.T hen type the new name.
Mac OS: In the Finder, choose File > New Folder. T ype the
new name and drag the folder to the location you want to use.Now,
you can copy the source files onto your hard disk.
2. Copy the Lessons folder (which contains folders named
Lesson01, Lesson02, and so on) from the Adobe Flash CS3
ProfessionalClassroom in a Book CD onto your hard disk by dragging
it to your new FlashCS3_CIB folder.
When you begin each lesson, navigate to the folder with that
lesson number, where you will find all of the assets, sample
movies, andother project files you need to complete the lesson.
If you have limited storage space on your computer, you can copy
each lesson folder individually as you need it, and delete it
afterwardif desired. Some lessons build on preceding lessons; in
those cases, a starting project file is provided for you for the
second lesson orproject. You do not have to save any finished
project if you don't want to, or if you have limited hard disk
space.
About Copying the Sample Movies and Projects
You will create and publish SWF animation files in some lessons
in this book. T he files in the End folders (01End, 02End, and so
on)within the Lesson folders are samples of the completed project
for each lesson. Use these files for reference if you want to
compareyour work in progress with the project files used to
generate the sample movies. T he end project files vary in size
from relatively smallto a couple of megabytes, so you can either
copy them all now if you have ample storage space, or copy just the
end project file foreach lesson as needed, and then delete it when
you finish that lesson.
Page 10
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
How to Use these LessonsEach lesson in this book provides
step-by-step instructions for creating one or more specific
elements of a real-world project. Somelessons build on projects
created in preceding lessons; most stand alone. All of these
lessons build on each other in terms of concepts andskills, so the
best way to learn from this book is to proceed through the lessons
in sequential order. In this book, some techniques andprocesses are
explained and described in detail only the first few times you
perform them.
Note
Many aspects of the Flash application can be controlled by
multiple techniques, such as a menu command, a button, dragging,
and akeyboard shortcut. Only one or two of the methods are
described in any given procedure so that you can learn different
ways of workingeven when the task is one you've done before.
T he organization of the lessons is also design-oriented rather
than feature-oriented. T hat means, for example, that you'll work
withsymbols on real-world design projects over several lessons,
rather than in just one chapter.
Page 11
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Additional ResourcesAdobe Flash CS3 Professional Classroom in a
Book is not meant to replace documentation that comes with the
program. T his bookexplains only the commands and options actually
used in the lessons, so there's much more to learn about Flash.
Classroom in a Bookaims to give you confidence and skills so that
you can start creating your own projects. For more comprehensive
information aboutprogram features, see:
T he Adobe Flash CS3 User Guide, which is included as a PDF file
on the Adobe Flash CS3 application DVD and containsdescriptions of
many features. Printed copies of the Flash CS3 User Guide are
available for purchase from www.adobe.com/go/buy_books
Flash Help, which contains all of the information in the user
guide and much, much more, and is available from within
theapplication. You can view Flash Help by choosing Help > Flash
Help.
Adobe CS3 Video Workshop DVD, included in the product box,
provides you with 250 instructional movies on Flash CS3 andother
products across the Adobe Creative Suite 3 lineup.
T he Adobe website (www.adobe.com). With an active Internet
connection, you can access the website from a web browser orby
choosing Help > Help Resources Online in Flash for links to
several useful areas of the Adobe website.
Adobe Design Center (www.adobe.com/designcenter/), where you can
find a wealth of tips, tutorials, and other designinspiration and
instructional content.
Adobe Developer Center (www.adobe.com/devnet/), where you can
find tutorials, articles, and sample applications. You canlearn the
industry trends you need to master Adobe development-oriented
products and technologies.
Page 12
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Adobe CertificationT he Adobe T raining and Certification
Programs are designed to help Adobe customers improve and promote
their product-proficiencyskills. T here are three levels of
certification:
Adobe Certified Expert (ACE) Adobe Certified Instructor (ACI)
Adobe Authorized T raining Center (AAT C)
T he Adobe Certified Expert (ACE) program is a way for expert
users to upgrade their credentials. You can use Adobe certification
as acatalyst for getting a raise, finding a job, or promoting your
expertise.
If you are an ACE-level instructor, the Adobe Certified
Instructor program takes your skills to the next level and gives
you access to awide range of Adobe resources.
Adobe Authorized T raining Centers offer instructor-led courses
and training on Adobe products, employing only Adobe
CertifiedInstructors. A directory of AAT Cs is available at
http://partners.adobe.com.
For information on the Adobe Certified programs, visit
www.adobe.com/support/certification/main.html.
Page 13
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
1. Getting Acquainted
In Flash, the Stage is where the action takes place, the T
imeline organizes frames and layers, and other panels letyou edit
and control your creation.
Lesson Overview
In this lesson, you'll learn how to do the following:
Open a file in Flash Add layers to the T imeline Create a
keyframe in the T imeline Adjust settings in the Property inspector
Open and work with panels Select and use tools in the T ools panel
Search for topics in Flash Help Access online resources for
Flash
T his lesson will take less than an hour to complete. Copy the
Lesson01 folder from the Adobe Flash CS3 Professional Classroom in
aBook CD onto your hard drive if it's not already there.
Page 14
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Starting Flash and Opening a FileT he first time you start
Flash, you'll see a Welcome screen with links to standard file
templates, tutorials, and other resources. In thislesson, you'll
complete an animation for a bottled-water company. Most of the
artwork is already in place. As you get to know the Flashworkspace,
you'll add an object from the Library panel to the Stage and
animate it.
1. Start Adobe Flash. In Windows, choose Start > All Programs
> Adobe Flash CS3. In Mac OS, double-click Adobe Flash CS3 inthe
Applications folder or the Dock.
Note
You can also start Flash by double-clicking a Flash (*.fla)
file, such as the 01Start.fla file you'll use in this lesson.
2. Choose File > Open. In the Open dialog box, select the
01End.swf file in the Lesson01/01End folder, and click Open to
previewthe final project.
An animation plays. During the animation, a bottle moves onto
the screen and tips to pour water.
3. Close the preview window.
4. Choose File > Open. In the Open dialog box, double-click
the 01Start.fla file in the Lesson01/01Start folder.
T he 01Start.fla file opens with a logo already on the Stage. T
he T imeline contains several layers; the contents of the layers
change indifferent frames.
5. Choose File > Save As. Name the file 01_workingcopy.fla,
and save it in the 01Start folder. Saving a working copy
ensuresthat the original start file will be available if you wish
to start over.
Page 15
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Getting to Know the Work AreaT he Adobe Flash work area includes
the command menus at the top of the screen and a variety of tools
and panels for editing and addingelements to your movie. You can
create all the objects for your animation in Flash, or you can
import elements you've created in AdobeIllustrator, Adobe
Photoshop, Adobe After Effects, and other compatible
applications.
By default, Flash displays the menu bar, T imeline, Stage, T
ools panel, Property inspector, and a few other panels. As you work
in Flash,you can open, close, dock, undock, and move panels around
the screen. T o return to the default workspace, choose Default
from theWorkspace menu in the Edit bar just above the Stage.
[View full size image]
About the Stage
As with a theater stage, the Stage in Flash is the area viewers
see when a movie is playing. It contains the text, images, and
video thatappear on the screen. Move elements on and off the Stage
to move them in and out of the rectangular area in Flash Player or
the webbrowser window where your Flash movie will play. You can use
the grid, guides, and rulers to help you position items on the
Stage.Additionally, you can use the Align panel and other tools
you'll learn about in the lessons in this book.
T o see the work area around the Stage, use the Zoom tool ( ) to
zoom out, or choose View > Pasteboard.
T o scale the Stage so that it fits completely in the
application window, choose View > Magnification > Fit in
Window. You can alsochoose view options from the pop-up menu just
above the Stage.
Page 16
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Understanding the Timeline
Like films, Flash documents measure time in frames. As the movie
plays, the playhead advances through the frames in the T
imeline.You can change the content on the Stage for different
frames. T o display a frame's content on the Stage, move the
playhead to thatframe in the T imeline.
At the bottom of the T imeline, 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.
[View full size image]
T he T imeline also contains layers, which help you organize the
artwork in your document. T hink of layers as multiple film
stripsstacked on top of each other. Each layer contains a different
image that appears on the Stage, and you can draw and edit objects
on onelayer without affecting objects on another layer. T he layers
are stacked in the order that they appear in the T imeline, so that
objects onthe bottom layer in the T imeline are on the bottom of
the stack on the Stage. You can hide, show, lock, or unlock layers.
Each layer'sframes are unique, but you can drag them to a new
location on the same layer, or copy or move them to another
layer.
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
toindicate its contents so that you can easily find the layer you
need later.
You'll add a layer to the T imeline to contain the bottle image
that you're going to animate.
1. Select the Mask layer in the T imeline.
2. Choose Insert > T imeline > Layer. A new layer appears
between the Labels layer and the Mask layer.
3. Double-click the new layer to rename it, and type Pour. Click
outside the name box to apply the new name.
4. Click the lock icon above the layers to lock all layers.
Locking a layer prevents you from accidentally making changes to
it.
[View full size image]
Page 17
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
5. Click the lock icon next to the Pour layer to unlock it.
[View full size image]
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
firstappear.
1. Select frame 18 on the Pour layer. As you select a frame,
Flash displays the frame number beneath the T imeline.
[View full size image]
2. Choose Insert > T imeline > Keyframe.
[View full size image]
Page 18
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Page 19
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Working with the Library PanelT he Library panel is where you
store and organize symbols created in Flash, as well as imported
files, including bitmaps, graphics, soundfiles, and video clips. T
he bottle image you're going to use has already been added to the
library and converted to a symbol.
Note
You'll learn much more about symbols in Lesson 3.
About the Library Panel
T he Library panel lets you organize library items in folders,
see how often an item is used in a document, and sort items by
type. Whenyou import items into Flash, you can import them onto the
Stage or into the library. However, any item you import onto the
Stage isalso added to the library, as are any symbols you create. T
hat way, you can easily access the items to add them to the Stage
again, editthem, or see their properties.
T o display the Library panel, choose Window > Library, or
press Ctrl+L (Windows) or Command+L (Mac OS).
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 isanimated, click the Play button in the preview window to
play it.
Adding an Item from the Library Panel
T o add a library item to a Flash document, simply drag it from
the Library panel onto the Stage. You've already created a keyframe
forthe pour_bottle symbol. Now you'll drag an instance of that
symbol onto the Stage.
1. Choose Window > Library to open the Library panel if it
isn't already open.
2. Select the keyframe you created at frame 18 of the Pour
layer.
[View full size image]
Page 20
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
3. Select the pour_bottle symbol in the Library panel.
4. Drag an instance of the pour_bottle symbol onto the Stage.
You'll move it into position in the next section of this
lesson.
[View full size image]
Page 21
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Page 22
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Using the Property InspectorT he Property inspector gives you
quick access to the attributes you're most likely to need. What
appears in the Property inspectordepends on what you've selected.
For example, if a frame is selected, the Property inspector
includes a T ween option; if an object on theStage is selected, the
Property inspector shows its x and y coordinates. You'll use the
Property inspector to move the bottle to its initialand final
positions on the Stage, and then to add a motion tween that
animates the bottle.
Frame properties
[View full size image]
Object properties
[View full size image]
Positioning an Object on the Stage
First, you'll move the bottle into its initial position using
the Property inspector. You'll also use the T ransform panel to
rotate thebottle.
1. Select the bottle that you dragged onto the Stage.
2. In the Property inspector, type 689 for the X value and -59
for the Y value. Press Enter or Return to apply the values. T
hebottle moves to the right, above the Stage.
Note
If the Property inspector is not open, choose Window >
Properties > Properties, or press Ctrl+F3 (Windows) or
Command+F3 (MacOS).
[View full size image]
3. Choose Window > T ransform to open the T ransform
panel.
4. In the T ransform panel, select Rotate, and type 35 in the
Rotate box. Press Enter or Return to apply the value.
Page 23
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Using Motion Tweens to Animate an Object
T he bottle should tip over, so that it appears to be pouring
water. T o achieve this effect, you could create a keyframe for
each frame inthe T imeline, and then move the bottle slightly in
each keyframe. It's much easier, though, to specify the initial and
final positions andthen let Flash create the intermediate steps. T
he process of creating intermediate steps is called tweening.
Note
You'll learn more about motion tweens in Lessons 2 and 4.
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.
3. In the Property inspector, type 668 for the X value and 31
for the Y value. Press Enter or Return to apply the values.
4. In the T ransform panel, type -25 in the Rotate box, and
press Enter or Return.
5. In the T imeline, select any frame between frames 18 and 24
in the Pour bottle layer.
[View full size image]
Page 24
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
6. In the Property inspector, choose Motion from the T ween
menu. Flash adds an arrow to the frames in the T imeline to
showthat a motion tween has been applied.
[View full size image]
7. In the T imeline, select frame 42 in the Pour layer, and
press F6 to insert a keyframe.
8. Select the bottle on the Stage, and in the T ransform panel,
type 35 in the Rotate box. Press Enter or Return.
9. Select frame 59, and press F6 to insert a keyframe.
10. With frame 59 selected in the T imeline, drag the bottle
directly to the right, far off the Stage. Press Shift as you drag
toconstrain its movement to a horizontal line.
11. Select any frame between frames 42 and 59, and choose Motion
from the T ween menu in the Property inspector. T heT imeline
displays an arrow to show that a motion tween has been applied. If
you move the playhead from frame 42 to frame 59, thebottle moves
off the Stage.
[View full size image]
Working with PanelsJust about everything you do in Flash
involves a panel. In this lesson, you use the Library panel, T ools
panel, Property inspector,T ransform panel, History panel, and the
T imeline. In later lessons, you'll use the Actions panel, the
Color panel, the Align panel, andother panels that let you control
various aspects of your project. Because panels are such an
integral part of the Flash workspace, it paysto know how to manage
them.
T o open any panel in Flash, choose its name from the Window
menu. In a few cases, you may need to choose the panel from
asubmenu, such as Window > Properties > Properties, or Window
> Other Panels > History.
Page 25
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
[View full size image]
By default, the Property inspector, Filters panel, and
Parameters panel appear together at the bottom of the screen, the T
imeline is atthe top, and the T ools panel is on the left side.
Most other panels are displayed on the right side of the screen.
However, you can movea panel to any position that is convenient for
you.
T o undock a panel from the right side of the screen, drag it by
its tab to a new location. T o dock a panel, drag it by its tab
into the dock on the right side of the screen. You can drag it to
the top, bottom, or in
between other panels.
T o group a panel with another, drag its tab onto the other
panel's tab. T o move a panel group, drag the group by its title
bar.
Page 26
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Using the Tools PanelT he T ools panelthe long, narrow panel on
the far left side of the work areacontains selection tools, drawing
and type tools,painting and editing tools, navigation tools, and
tool options. You'll use the T ools panels frequently to switch
from the Selection tool tothe T ext tool to a drawing tool. When
you select a tool, remember to check the options area at the bottom
of the panel to ensure thatyou'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. T hen, you'll use the Oval tool to draw an outline around
the logocircle.
Selecting and Using a Tool
When you select a tool, the options available at the bottom of
the T ools panel change. For example, when you select a drawing
tool,the Object Drawing mode and Snap T o 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.
1. Select the Zoom tool in the T ools panel.
2. Select the Enlarge icon ( ) in the options area of the T ools
panel.
3. Click the aqua circle with the letters in it to enlarge it on
the screen.
Selecting a Hidden Tool
T he T ools panel contains too many tools to display all of them
at once. Some tools are arranged in groups in the T ools panel;
only thetool you last selected from a group is displayed. If there
is a small triangle in the lower-right corner of the tool button,
there are othertools 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-upmenu.
You'll use the Oval tool, which is hidden by the Rectangle tool,
to draw an outline around the logo circle.
1. Select the Pour layer in the T imeline, and then click the
Insert Layer icon ( ).
Page 27
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
2. Name the new layer Outline.
3. Lock the Pour layer so that you don't accidentally move
anything on it.
4. In the T imeline, move the playhead to frame 293, the last
frame in the movie, and select frame 293 in the Outline layer.
[View full size image]
5. Click and hold the Rectangle tool in the T ools panel, and
then select the Oval tool from the pop-up menu.
6. Click the Stroke Color icon ( ) in the options area of the T
ools panel. T he Adobe Color Picker opens.
7. Select black in the Color Picker.
8. Click the Fill Color icon ( ) in the options area of the T
ools panel. T he Color Picker opens again.
9. Select No Color in the Color Picker.
Page 28
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
10. Hold down the Shift key as you draw an oval around the logo
circle.
Note
Pressing the Shift key as you draw constrains the tool to draw a
perfect circle. You can modify many tools by pressing a key while
youuse them. For example, press the Alt (Windows) or Option (Mac
OS) key as you use the Zoom tool to change it from Enlarge mode
toReduce mode.
11. Select the Selection tool ( ), and then select the oval.
12. 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.
[View full size image]
Tools Panel OverviewT he T ools panel contains selection tools,
drawing and painting tools, and navigation tools. T he options area
in the T ools panel lets youmodify the selected tool.
[View full size image]
Page 29
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Page 30
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Undoing Steps in FlashIn a perfect world, everything would go
according to plan. But sometimes you need to move back a step or
two and start over. You canundo steps in Flash using the Undo
command or the History panel.
T o undo a single step in Flash, choose Edit > Undo, or press
Control+Z (Windows) or Command+Z (Mac OS). T o redo a step
you'veundone, choose Edit > Redo.
T o undo multiple steps in Flash, it's easiest to use the
History panel, which displays a list of all the steps you've
performed since youopened the current document. Closing a document
clears its history.
T o open the History panel, choose Window > Other Panels >
History.
T he logo looked better before you added the black circle, so
you'll remove the circle. First, undo the change in stroke size
using the Undocommand, and then remove the entire Outline layer
using the History panel.
1. Choose Edit > Undo to change the Stroke value back to
1.
2. Choose Window > Other Panels > History to open the
History panel.
3. Drag the History panel slider up to the step just before you
created the Outline layer. Steps below that point are dimmed in
theHistory panel, and they are removed from the project. T o add a
step back, move the slider back down.
Page 31
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Note
If you remove steps in the History panel and then perform
additional steps, the removed steps will no longer be
available.
Page 32
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Previewing Your MovieAs you work on a project, it's a good idea
to preview it frequently to ensure that you're achieving the effect
you want. T o quickly seehow an animation or movie will appear to a
viewer, choose Control > T est Movie. You can also press
Ctrl+Enter (Windows) orCommand+Return (Mac OS) to preview your
movie.
1. Choose Control > T est Movie. Flash opens and plays the
movie in a separate window.
2. Close the preview window.
Page 33
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Publishing Your MovieWhen you're ready to share your movie with
others, publish it from Flash. For most projects, Flash will create
an HT ML file, a SWFfile, and a JavaScript (.js) file. T he SWF
file is your final Flash movie, the HT ML file contains the SWF
file, and the JavaScript fileensures that browsers work well with
your movie. You'll need to upload all three files to the same
folder on your web server. Always testyour movie after uploading it
to be certain that it's working properly.
Note
You'll learn more about publishing options in Lesson 11.
1. Choose File > Publish Settings.
2. Click Formats.
3. Select Flash (.swf) and HT ML (.html).
4. Click Publish.
Page 34
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
5. Click OK to close the dialog box.
6. Navigate to the Lesson01/01Start folder to see the files
Flash created.
[View full size image]
Page 35
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Using Flash HelpFor complete information about using panels,
tools, and other application features, refer to Flash Help. T o
open Flash Help, chooseHelp > Flash Help.
Flash Help is divided into several books. T he Using Flash book
includes how-to tips, tutorials, and explanations of Flash concepts
andfeature descriptions. Programming ActionScript 3.0, ActionScript
3.0 Language and Components Reference, and Using ActionScript
3.0Components are references for ActionScript 3.0, which lets you
extend the functionality and include interactivity in your Flash
movies.
Note
Flash Help also includes references for earlier versions of
ActionScript and for multiple versions of Flash Lite, which is used
to createanimations for mobile and handheld devices.
Browsing the Table of Contents
If you want to learn more about a general feature set or concept
in Flash, browse the table of contents. You'll use the table of
contentsto see more information about what's new in Flash CS3.
1. Choose Help > Flash Help.
Page 36
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
2. Expand the Using Flash book to view the table of
contents.
[View full size image]
3. Click Getting Started > What's New > New Features to
see links to new features in Flash CS3.
Searching for Keywords
If you're not sure where a topic would be included in the table
of contents, or if you want to see every topic that refers to a
concept orterm, search for the appropriate keyword. You'll use the
search function to learn more about the History panel.
1. Choose Help > Flash Help.
2. In the Search field, type history.
[View full size image]
Page 37
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
3. Click Search.
4. Select "Using the History Panel" to read about the History
panel.
[View full size image]
Page 38
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Using Adobe Online ServicesAnother way to get information about
Flash and to stay abreast of updates is to use Adobe online
services. With an active Internetconnection, you can access the
Adobe website (www.adobe.com) for information about Flash and other
Adobe products.
1. In Flash, choose Help > Help Resources Online.
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 of artwork by Adobe designers and
artistsaround the world, the latest product information, and
troubleshooting and technical information.
[View full size image]
Page 39
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
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
learnhow to use Flash drawing tools. If you prefer, you can skip to
any lesson in the book. However, most people will find it useful to
workthrough the lessons in order, as each lesson builds on concepts
and skills you've learned in previous lessons.
Page 40
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
ReviewReview Questions
1 What is the Stage?2 How do you open a panel in Flash?3 What's
a hidden tool, and how can you access it?4 Name two methods to undo
steps in Flash, and describe them.5 How can you find answers to
questions you have about Flash?
Review Answers1 T he Stage is the area viewers see when a movie
is playing in Flash player or a web browser. It contains the
text,images, and video that appear on the screen. Objects that you
store on the pasteboard outside of the Stage do not appear in
themovie. 2 T o open a panel in Flash, choose Windows > [panel
name]. Some panels, such as the History panel, are in the
OtherPanels submenu. 3 Because there are too many tools to display
at once in the T ools panel, some tools are grouped, and only one
tool inthe group is displayed. (T he tool you most recently used is
the one shown.) Small triangles appear on tool icons to indicate
thathidden tools are available. T o select a hidden tool, click and
hold the tool icon for the tool that is shown, and then select the
hiddentool from the menu. 4 You can undo steps in Flash using the
Undo command or the History panel. T o undo a single step at a
time, chooseEdit > Undo. T o undo multiple steps at once, drag
the slider up in the History panel. 5 Choose Help > Flash Help
to browse or search Flash Help for information about using Flash
CS3 and ActionScript3.0. Choose Help > Help Resources Online or
visit www.adobe.com to see tutorials, tips, and other resources for
Flash users.
Page 41
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
2. Working with Graphics
You can use rectangles, ovals, and lines to create interesting,
complex animations in Flash. Combine them withimported graphics for
even greater possibilities.
Lesson Overview
In this lesson, you'll learn how to do the following:
Draw rectangles, ovals, and lines Understand the difference
between drawing modes Modify the shape and size of drawn objects
Apply fill and stroke settings Import bitmap images for use in
fills Select elements and portions of elements Create simple
animations using motion tweens Group elements Create masks to hide
areas of layers
T his lesson will take approximately 90 minutes to complete. If
needed, remove the previous lesson folder from your hard drive,
andcopy the Lesson02 folder onto it.
Page 42
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Getting StartedFirst, 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.
T he 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'sattention while a web page loads. T his animation is for
Fizzy Drink, a fictional company. In this lesson, you'll draw the
shapes, modifythem, 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
ensuresthat the original start file will be available if you wish
to start over.
Page 43
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Creating RectanglesFlash includes several drawing tools, which
work in different drawing modes. Many of your creations will begin
with simple rectangles, soit's important that you're comfortable
drawing them, modifying their shapes, and applying fills and
strokes.
You'll begin by drawing the glass for the fizzy drink.
1. Select the Rectangle tool ( ). Make sure the Object Drawing
mode icon ( ) is not selected. T he stroke and fill can beany
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
rectanglein step 5.
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 adifferent fill and stroke for the rectangle in the
following sections.
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
itwith white dots.
Page 44
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
5. In the Property inspector, type 95 for the width, and 135 for
the height. Press Enter or Return to apply the values.
[View full size image]
Adding a Bitmap Fill
T he fill is the interior of the drawn object. You can apply a
solid color, a gradient, or a bitmap image (such as a T IFF, 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
holding liquid, you'llimport 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 ( ).
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 youdon't need when you're importing a bitmap.
3. Select Bitmap from the T ype menu.
4. In the Import to Library dialog box, navigate to the
Water.tif file in the Lesson02/02Start folder.
5. Select the Water.tif file and click Open.
T he rectangle fills with the water image.
Page 45
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Specifying Stroke Properties
T he stroke is the outline of the object, in this case a
rectangle. You can apply attributes to the stroke that are
different from those ofthe 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.
2. In the Property inspector, click the Stroke Color box (
).
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, HT ML, 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 thecolors you use most often.
4. T ype 4 in the Stroke Height box, and press Enter or Return
to apply the value.
[View full size image]
T he rectangle should now have the water bitmap fill and a thick
gray stroke.
Page 46
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Modifying Objects
It's time to make this rectangle look more like a drinking
glass. You'll use the Free T ransform tool to nudge the bottom
corners inward.With the Free T ransform tool, you can adjust points
on lines and shape outlines.
1. Select the Free T ransform tool ( ).
2. Drag the Free T ransform tool around the rectangle on the
Stage to select it. T ransformation handles appear on the
rectangle.
3. Press Ctrl+Shift (Windows) or Command+Shift (Mac OS) as you
drag one of the corners inward. Pressing these keys lets youmove
both corners the same distance simultaneously.
4. Click outside the shape to deselect it.
T he bottom of the rectangle is narrow, and the top is wide. It
looks much more like a drinking glass.
Flash Drawing ModesFlash provides three drawing modes, which
determine how objects interact with each other on the Stage, and
how you can edit them. Bydefault, Flash uses merge drawing mode,
but you can enable object drawing mode, or use the Rectangle
Primitive or Oval Primitive toolto use the primitive drawing
mode.
Merge Drawing ModeIn this mode, Flash merges drawn shapes, such
as rectangles and ovals, where they overlap, so that multiple
shapes appear to be a singleshape. If you move or delete a shape
that has been merged with another, the portion that was overlapping
is permanently removed.
Object Drawing ModeIn this mode, Flash does not merge drawn
objects; they remain distinct and separate, even when they overlap.
T o enable object drawingmode, select the tool you want to use, and
then click the Object Drawing icon in the options area of the T
ools panel.
T o convert an object to shapes (merge drawing mode), select it
and press Ctrl+B (Windows) or Command+B (Mac OS). T o convert
ashape to an object (object drawing mode), select it and choose
Modify > Combine Object > Union.
Page 47
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Primitive Drawing ModeNew to Flash CS3 is the primitive drawing
mode. When you use the Rectangle Primitive tool or the Oval
Primitive tool, Flash draws theshapes as separate objects. Unlike
regular objects, however, you can modify the corner radius of
rectangle primitives, and the start andend angle and the inner
radius of oval primitives using the Property inspector.
Page 48
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Using a Gradient FillIn a gradient, one color gradually changes
into another. Flash can create linear gradients, which change color
horizontally, vertically, ordiagonally; or radial gradients, which
change color moving outward from a central focal point. You'll use
a linear gradient fill to addweight 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..
3. In the Color panel, click the Fill icon, and then select
Linear from the T ype menu.
Note
Be sure to click the Fill icon, not the Fill Color box.
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. Acolor pointer determines where the gradient changes from
one color to the next. Add color pointers beneath the gradient
definition barto 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 theglass.
1. Click beneath the gradient definition bar to create a new
color pointer.
Page 49
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
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
thepointer. 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.
T he gradient fill at the base of the glass changes from black
to white to black.
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. T
o stretch thegradient in the glass, you'll use the Gradient T
ransform tool.
Page 50
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
1. Select the Gradient T ransform tool ( ). (T he Gradient T
ransform tool is grouped with the Free T ransform tool ( ).
2. Click in the glass base. T ransformation 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 tostretch the gradient.
3. Drag the square handle on the side of the bounding box to
stretch the gradient until the gradient color matches the
strokecolor of the glass. T he gradient should blend into the edge
of the glass.
Page 51
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Making SelectionsT o modify an object, you must first select it.
In Flash, you can make selections using the Selection,
Subselection, or Lasso tool.T ypically, you use the Selection tool
to select an entire object or a section of an object. T he
Subselection tool lets you select a specificpoint or line in an
object. With the Lasso tool, you can draw a freeform selection.
Selecting Sections of a Fill
T o 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 accidentallyselecting or modifying any part of the water
fill, you'll group the glass base section.
1. Select the Selection tool.
2. Drag a selection around the base of the glass.
3. Choose Modify > Group.
4. Double-click the newly created group to edit it.
5. With the Selection tool, select the center area of the base
shape. Start drawing the selection area from outside thegroupeither
above or below itto prevent moving the entire base.
6. Click the Fill Color icon in the T ools panel, and select
white or type #FFFFFF in the Color Picker.
Page 52
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
7. Click the Scene 1 icon to return to the main scene.
Using the Lasso Tool
T o make the drink more believable, you'll curve or slope the
top of the liquid in the glass. T he Lasso tool is an ideal tool
for this jobbecause you can use it to make an irregular
selection.
1. Select the Lasso tool ( ). 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.
Page 53
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
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 T ools panel, and select
white in the Color Picker. T he water bitmap is replaced with a
solidwhite fill in the selected area.
4. T o ensure the glass is displayed during the entire
animation, select frame 35 in the Glass layer in the T imeline, and
chooseInsert > T imeline > Frame. Flash extends frame 1 to
frames 2 through 35.
Page 54
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
T he drink itself is complete! All that's left to do is to add
bubbles and fizz.
Page 55
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Drawing OvalsT he 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 drinkingglass. 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 > T imeline > Layer to add a layer for
the bubble.
3. Name the layer Bubble.
[View full size image]
4. Select the Oval tool ( ), which is grouped with the Rectangle
tool.
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.
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 (
) and the Fill color to white (#FFFFFF).
[View full size image]
Page 56
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
8. Select the Free T ransform tool ( ) to resize the bubble.
9. Hold down the Shift key to retain the bubble's proportions,
and drag a corner handle inward to make the bubble smaller. T
heresized 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.
(T heProperty inspector displays the bubble's height and
width.)
By default, the object is scaled relative to the upper-left
corner. If you press Alt (Windows) or Option (Mac OS), theobject is
scaled relative to its transformation point, represented by the
circle icon. You can drag the transformation point anywhere inthe
object, or even outside of the object.
Page 57
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Page 58
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Creating a Simple AnimationLater lessons cover animation in
greater detail, but for this project, you'll use a motion tween to
create a simple frame-by-frameanimation. You'll convert the bubble
to a symbol, apply the motion tween, and then copy the layer to
create additional animatedbubbles.
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 ofyour 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.
[View full size image]
Animating an Object
T he 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 thenapply 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.
PressEnter or Return to apply the value.
T he larger bubble moves up to the top of the glass.
[View full size image]
Page 59
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
6. Select any frame between 1 and 20 on the Bubble layer.
7. In the Property inspector, select Motion from the T ween
menu.
[View full size image]
8. T o see the bubble animation, choose Control > T est
Movie. T he bubble floats to the top of the glass and out of it,
and then theanimation 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
Bubblelayer to create additional layers. T hen, 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.
3. In the T imeline, click frame 1 in the Bubble layer, and then
press the Shift key and click frame 20 to select frames 1-20.
[View full size image]
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
thefirst frame is a few frames further down the T imeline.
[View full size image]
5. Copy the same frames to each layer, so that the starting
keyframe for each layer is at a different position, from frame 1
toframe 15.
[View full size image]
Page 60
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
6. Select the first keyframe in the Bubble2 layer, press Ctrl+A
(Windows) or Command+A (Mac OS) to select the bubble onthat 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 aposition 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
aposition directly above its starting position.
T o see each bubble's path more clearly, hide all the bubble
layers except the one you're working with.
[View full size image]
9. T o preview the animation, choose Control > T est
Movie.
T he fizzy drink is now bubbly!
Page 61
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Working with LinesT he Line tool draws straight lines, which you
can combine to create new objects. T o add some sparkle to the
drink, you'll create poppingfizz shapes above the glass.
Matching the Color of an Existing Object
T he 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 Bubble10 layer (the top layer) in the T
imeline.
2. Choose Insert > T imeline > 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
thedrink.
6. Set the Stroke Height to 3 and the Fill Color to none (
).
7. Draw a small circle above the drink.
Adding Lines
You'll add lines to the oval to create a star shape.
1. Select the Line tool ( ) and select Object Drawing mode (
).
2. Hold down the Shift key while you draw a line across the
center of the oval. T he line should be about three times as long
asthe oval is wide.
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 > T ransform > Rotate 90 CCW to rotate
the second line so that it is perpendicular to the first one.
6. Select the Selection tool.
Page 62
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
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.
10. Choose Modify > T ransform > Scale And Rotate.
11. T ype 45 in the Rotate box, and click OK.
T he second set of lines are perpendicular to the first set,
creating a star.
[View full size image]
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
convertthe 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.
4. Select each line segment in the center of the circle and
delete it.
Page 63
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Manipulating ObjectsYou can combine multiple objectswhether they
were drawn using object drawing mode or notto copy, paste,
reposition, andotherwise work with them more efficiently. T o
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. T hese guides
can help you align objects quickly, and you can snap the object
you'removing to a guide or to another object. For this project,
however, you want to place the fizz elements randomly, so you'll
deselect SnapT o Guides and Snap T o Objects.
1. Choose View > Snapping > Snap T o Guides.
2. Choose View > Snapping > Snap T o Objects.
Grouping Objects
T o 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.
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.
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.
Page 64
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
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. T he objects will move on the screen
everyfive frames. You must create a keyframe at each frame where
the objects move.
1. In the T imeline, select frame 5 in the Fizz layer, which
contains the fizz objects.
2. Choose Insert > T imeline > Keyframe.
[View full size image]
3. Add a keyframe for every fifth frame through frame 30. (T hat
is, create keyframes at frames 10, 15, 20, 25, and 30.)
[View full size image]
4. In the T imeline, 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 eachkeyframe.
7. Choose Control > T est Movie to preview the popping fizz
you've created, and then close the preview window.
Page 65
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Masking ObjectsA 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 amask 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 T imeline, select the Bubble10 layer, beneath the Fizz
layer.
7. Choose Insert > T imeline > Layer.
8. Choose Edit > Paste In Place. T he drink fill shape is
pasted into the new layer.
[View full size image]
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.
[View full size image]
Page 66
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
11. In the T imeline, select all the layers from Bubble to
Bubble9.
T o select multiple contiguous layers, click the first layer,
press the Shift key, and click the last layer.
12. In the T imeline, drag the selected layers onto the Bubble10
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.
Page 67
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Testing a MoviePreview your animation to make sure it's behaving
as you expect. In fact, you should preview the movie frequently so
that you cantroubleshoot or simply tweak your animation.
T o preview the movie, choose Control > T est Movie. You see
the full effects of the drink, the bubbles, and the fizzall created
withrectangles, ovals, and lines. You've created an animated fizzy
drink!
T o use this animation in other projects, you can copy all
keyframes from the main T imeline and paste them into a newmovie
clip symbol, which you can then place wherever you want to use
it.
Page 68
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
ReviewReview Questions
1 What are the three drawing modes in Flash, and how do they
differ?2 How can you draw a perfect circle using the Oval tool?3
When would you use each of the selection tools in Flash?4 What does
a mask do?
Review Answers1 T he three drawing modes are merge drawing mode,
object drawing mode, and primitive drawing mode.
In merge drawing mode, shapes drawn on the Stage merge to become
a single shape. In object drawing mode, each object is distinct and
remains separate, even when it overlaps another object. In
primitive drawing mode, you can modify the angles, radius, or
corner radius of an object.
2 T o draw a perfect circle, hold down the Shift key as you drag
the Oval tool on the Stage.3 Flash includes three selection tools:
the Selection tool, the Subselection tool, and the Lasso tool.
Use the Selection tool to select an entire shape or object. Use
the Subselection tool to select a specific point or line in an
object. Use the Lasso tool to draw a freeform selection area.
4 A mask restricts the visible area of the layers beneath it.
Only the area that is covered by the mask shows through.
Page 69
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
3. Creating and Editing Symbols
Movie clip, graphic, and button symbols keep your file size
small while increasing your flexibility. A single symbolcan be used
countless times in a project, but the file's data only has to be
included once.
Lesson Overview
In this lesson, you'll learn how to do the following:
Import Illustrator files Create new symbols Understand the
difference between symbol types Adjust transparency Import assets
into the library Use library assets Convert bitmap graphics to
vectors Reduce the file size of Flash documents Apply web-safe
colors
T his lesson will take about an hour to complete. If needed,
remove the previous lesson folder from your hard drive, and copy
theLesson03 folder onto it.
Page 70
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Getting StartedFirst, view the final project to see what you'll
be creating as you learn to work with symbols.
1. Double-click the 03End.swf file in the Lesson03/03End folder
to view the final project in Flash. Move the mouse over thebuttons
to see their rollover states.
T he project is a DVD interface, designed to help a viewer
navigate among the options on a DVD. In this lesson, you'll use
Illustratorgraphic files, imported JPEG files, and symbols to
create an attractive, useful interface. You'll create buttons and
position them in theinterface, so they would be ready for
scripting.
2. Close the 03End.swf file.
3. Double-click the 03Start.fla file in the Lesson03/03Start
folder to open the initial project file in Flash.
4. Choose File > Save As. Name the file 03_workingcopy.fla,
and save it in the 03Start folder. Saving a working copy
ensuresthat the original start file will be available if you wish
to start over.
Page 71
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Importing Illustrator FilesAs you learned in Lesson 2, you can
draw objects in Flash using the Rectangle, Oval, and Line tools.
However, for complex drawings, youmay prefer to create the artwork
in another application. Adobe Flash CS3 supports native Adobe
Illustrator files, so you can createoriginal artwork in Illustrator
and then import it into Flash.
When you import an Illustrator file, you can choose which layers
in the file to import, and how Flash should treat those layers.
You'llimport an Illustrator file to serve as the main component of
a DVD interface.
1. Choose File > Import > Import T o Stage.
2. Select the DVD_interface_layout.ai file in the
Lesson03/03Start folder.
3. Click Open (Windows) or Import (Mac OS).
4. In the Import T o Stage dialog box, make sure all layers are
selected. A check mark should appear in the check box next to
eachlayer.
5. Choose Flash Layers from the Convert Layers T o menu, and
select Place Objects At Original Position. T hen, click OK.
[View full size image]
Flash imports the DVD interface image, and three layers appear
in the T imeline: Menu, Preview Boxes, and Menu Background.
[View full size image]
Page 72
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Using Adobe Illustrator with FlashFlash CS3 can import native
Illustrator files, automatically recognizing layers, frames, and
symbols. If you're more familiar withIllustrator, you may find it
easier to design layouts in Illustrator and then import them into
Flash to add animation and interactivity.
Save your Illustrator artwork in Illustrator CS3 AI format, and
then choose File > Import T o Stage or File > Import T o
Library toimport the artwork into Flash. Alternatively, you can
even copy artwork from Illustrator and paste it into a Flash
document.
Importing LayersWhen an imported Illustrator file contains
layers, you can import them in any of the following ways:
Convert Illustrator layers to Flash layers Convert Illustrator
layers to Flash frames Convert each Illustrator layer to a Flash
graphic symbol Convert all Illustrator layers to a single Flash
layer
[View full size image]
Page 73
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Importing SymbolsWorking with symbols in Illustrator is similar
to working with them in Flash. In fact, you can use many of the
same symbol keyboardshortcuts in both Illustrator and Flash; press
F8 in either application to create a symbol. When you create a
symbol in Illustrator, theSymbol Options dialog box lets you name
the symbol and set options specific to Flash, including the symbol
type (such as movie clip),and registration grid location.
If you want to edit a symbol in Illustrator without disturbing
anything else, double-click the symbol to edit it in isolation
mode.Illustrator dims all other objects on the artboard. When you
exit isolation mode, the symbol in the Symbols paneland all
instances ofthe symbolare updated accordingly.
Use the Symbols panel or the Control panel in Illustrator to
assign names to symbol instances, break links between symbols
andinstances, swap a symbol instance with another symbol, or create
a copy of the symbol.
For a video tutorial on using symbols between Illustrator and
Flash, visit www.adobe.com/go/vid0198.
Copying and Pasting ArtworkWhen you copy and paste (or drag and
drop) artwork between Illustrator and Flash, the Paste dialog box
appears. T he Paste dialog boxprovides import settings for the
Illustrator file you're copying. You can paste the file as a single
bitmap object, or you can paste it usingthe current preferences for
AI files. (T o change the settings, choose Edit > Preferences in
Windows or Flash > Preferences in Mac OS.)Just as when you
import the file to the Stage or the Library panel, when you paste
Illustrator artwork, you can convert Illustrator layersto Flash
layers.
Page 74
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Page 75
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
About SymbolsA symbol is a graphic, button, or movie clip that
you create once in Flash and can then reuse throughout your
document or in otherdocuments. Symbols can reduce the file size and
download time for many animations. You can use a symbol countless
times in a project,but Flash includes its data only once.
Symbols are stored in the Library panel. When you drag a symbol
to the Stage, Flash creates an instance of the symbol, leaving
theoriginal in the library. An instance is a copy of a symbol
located on the Stage or nested inside another symbol
T here are three kinds of symbols in Flash, and each has
advantages and limitations. You can tell whether a symbol is a
graphic ( ),
button ( ), or movie clip ( ) by looking at the icon next to it
in the Library panel.
Movie Clip Symbols
Many designers use movie clip symbols for all kinds of objects
in Flash because movie clips are the most flexible symbols. You can
applyfilters, color settings, and blending modes to a movie clip
symbol. You can name each instance of a movie clip symbol, and
control itwith ActionScript.
Movie clip T imelines are also the most flexible. T hey can
contain sounds, interactive controls, and even other movie clip
instances.T hough they do not include the default frames for
rollover states that are in a button symbol's T imeline, you can
create a button using amovie clip symbol by using ActionScript to
create the rollover states.
Button Symbols
You can quickly create interactive buttons with standard
rollover states using button symbols. Unlike movie clip T imelines,
buttonsymbol T imelines have four frames: Up, Over, Down, and
Hit.
You can name individual button instances, and you can control
them using ActionScript. You can also apply filters, blending
modes, andcolor settings.
T he Up state is the default state. T he Over state determines
the button's appearance when the mouse rolls over it. T he Down
state determines the button's appearance when it is clicked. T he
Hit state defines the button's active area, which is the area that
responds to the mouse click.
Graphic Symbols
Use graphic symbols for static imagesthat is, images you don't
plan to animatethat are tied to the main T imeline.
Graphic symbols are the least flexible symbols. T hey don't
support ActionScript and, though you can animate a graphic
symbol,interactive controls and sounds won't work. You also can't
apply filters or blending modes to a graphic symbol.
Page 76
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Converting Objects to SymbolsT he interface layout you imported
from Illustrator includes three green boxes, which will hold
thumbnails for video clips. Beforepositioning the video clips on
the boxes, you'll convert them to movie clip symbols, so that you
could use ActionScript with them later.
1. In the T imeline, select frame 1 of the Preview Boxes layer
to select the green boxes, which are the only objects on that
layer.
[View full size image]
2. Choose Modify > Convert to Symbol.
3. Name the symbol preview_boxes.
4. Select Movie Clip for the T ype.
5. Click OK. T he preview_boxes symbol appears in the
library.
Page 77
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Importing Bitmap ImagesYou'll import JPEG images to position
over the green boxes. Earlier, you imported the DVD layout directly
to the Stage. T his time,however, you'll import images to the
library, so that you can decide later where to place them on the
Stage. Many designers import allthe assets for a project to the
library when they begin working, and then drag the assets to the
Stage as they need them.
Note
If you import images to the Stage, Flash also adds them to the
library.
About Image Formats
Flash supports JPEG, GIF, and PNG files, which are all bitmap
formats. Use JPEG files for images that include gradients and
subtlevariations, such as those that occur in photographs. Use GIF
files for images with large solid blocks of color. Use PNG files (a
nativeformat in Flash) for images that include transparency. PNG
files often have a much larger file size than JPEG or GIF
files.
In the Library panel, you can set PNG files to export as JPEG
files, with a smaller file size, while retaining
theirtransparency.
Importing Images to the Library
First, you'll import three JPEG images to the library. Later,
you'll add them to the preview_boxes symbol.
1. Choose File > Import > Import T o Library.
2. Select the Vacation_1.jpg file in the Lesson03/03Start
folder.
3. Hold down the Shift key, and select the Vacation_2.jpg and
Vacation_movie.jpg files, as well.
Hold down the Shift key whenever you want to select multiple
files.
4. Click Open (Windows) or Import T o Library (Mac OS).
Flash adds the three JPEG files you imported to the library,
without placing them on the Stage.
Page 78
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Importing Images to the Stage
T he background image for the DVD interface is an image of
people on a beach with large umbrellas. T his image will appear
behind theexisting layout, so you'll create a layer for it and move
that layer beneath the other layers. Import the image directly to
the Stage.
1. Choose Insert > T imeline > Layer.
2. Name the layer Beach Background.
3. In the T imeline, drag the Beach Background layer below the
Menu Background layer.
[View full size image]
4. Choose File > Import > Import to Stage.
5. Select Beach_umbrellas.jpg in the Lesson03/03Start
folder.
6. Click Open (Windows) or Import (Mac OS).
T he Beach_umbrellas jpg image appears beneath the other layers
on the Stage.
Page 79
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Converting a Bitmap to a Vector
You can convert bitmap images to vector objects to reduce the
file size of your movie, and also to give you more flexibility
inmanipulating the graphic. T he T race Bitmap command converts a
bitmap into a vector graphic with editable, discrete areas of
color. T oreduce the file size, you'll convert the
Beach_umbrellas.jpg file to a vector graphic.
Note
When you convert a bitmap image to a vector graphic on the
Stage, it is no longer linked to the bitmap image file in the
library. In thisproject, you're only using the Beach_umbrellas.jpg
image once, so you don't need to retain the link to the file in the
library.
1. With the Beach_umbrellas.jpg image still selected on the
Stage, choose Modify > Bitmap > T race Bitmap.
2. Enter the following settings:
Color T hreshold: 100 Minimum Area: 8 Curve Fit: Normal Corner T
hreshold: Normal
3. Click OK.
Page 80
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Page 81
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Adding Bitmaps to a Movie Clip SymbolEach symbol has its own T
imeline. You can add layers to a symbol's T imeline just as you can
to the main T imeline. As you add assets toa symbol's T imeline,
they are nested within the symbol. You'll add a layer to the
preview_boxes T imeline, and then add bitmap imagesto the
preview_boxes movie clip symbol.
1. Select the Selection tool.
2. Double-click one of the green boxes on the Stage to edit the
preview_boxes movie clip symbol. Flash opens thepreview_boxes
symbol T imeline and dims the other objects on the Stage.
Double-click an instance of a symbol on the Stage to see the
rest of the layout while you're editing the symbol. T o see onlythe
symbol as you edit it, double-click the symbol in the Library
panel.
3. Select Layer 1 and rename it Boxes. T his layer contains the
green preview boxes.
4. 4 Choose Insert > T imeline > Layer.
5. Name the layer T humbnails. You'll add the thumbnail images
to this layer.
6. Drag the Vacation_1.jpg image from the Library panel to the
first green preview box on the Stage.
Note
If the Library panel isn't visible, choose Window > Library
to display it.
7. Deselect the image. T hen, press Alt (Windows) or Option (Mac
OS), and drag the image from the first box to thesecond box. T he
image is copied to the second box.
8. In the Property inspector, click Swap.
9. In the Swap Bitmap dialog box, select Vacation_2.jpg, and
click OK. T he Vacation_2.jpg file replaces the image in the
secondbox.
Page 82
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
10. Drag the Vacation_movie.jpg image from the Library panel
onto the third box on the Stage.
Page 83
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
Working with ButtonsUse button symbols to create interactive
buttons that include rollover states, which cause the buttons to
change appearance when youclick them, roll the mouse over them, or
perform other actions. In Lesson 9, you'll use ActionScript to
assign actions to buttons, but inthis lesson, you're just creating
the button states.
Creating a Button Symbol
You could convert an existing asset to a button symbol. For this
project, though, you'll create a brand new symbol for the
buttons.
1. Choose Insert > New Symbol.
2. Name the symbol menu_button.
3. Select Button for the T ype, and click OK.
Flash adds the menu_button symbol to the library and opens the
menu_button T imeline.
[View full size image]
Importing a File with Button States
T he Up, Down, and Over button states can include any change in
graphics, color, shape, or size. If you want to create a complex
set ofbutton states, you may want to create the artwork in Adobe
Illustrator. For this lesson, you'll import an Illustrator file
that alreadycontains the artwork for three button states. Because
the menu_button symbol T imeline is open, the imported Illustrator
layers will fillthe appropriate states.
1. Choose File > Import > Import T o Stage.
2. Select the DVD_interface_button_states.ai file in the
Lesson03/03Start folder.
3. Click Open (Windows) or Import (Mac OS).
4. Select all the layers in the file. T he Illustrator file
contains three button states.
5. Select Keyframes from the Convert Layers T o menu.
Selecting Keyframes imports the layers into the proper frames in
a single layer. If you selected Flash Layers, as you did when
importingthe DVD interface, the states would import as separate
layers, and the button wouldn't work properly.
[View full size image]
Page 84
ABC Amber CHM Converter Trial version,
http://www.processtext.com/abcchm.html
-
6. Click OK.
Flash imports the button state images as states for the
menu_button symbol, and the symbol appears on the Stage for
editing.
[View full size image]
Adding a Button Symbol to the Stage
T he menu_button symbol is in the library. You'll add an
instance of the button to the Stage above each of the m