Adobe Flash CS3 Professional Classroom in A Book

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.
html
Adobe Flash C S 3 Profe ssion al C lassroom in a Book

by Adobe Creative T eam
P ublisher: Adobe Pre ss
P ub Date: April 27, 2007
P rint ISBN-10: 0-321-49982-4
P rint ISBN-13: 978-0-321-49982-0
P ages: 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 of
the 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 their
projects. T hey'll also learn how to prepare and export their finished projects for Web and broadcast. Of course, readers will also learn
how to take advantage of the new features of Flash CS3--the streamlined user interface, native support for Photoshop and Illustrator
files, revamped drawing tools, new video encoding features, code editing enhancements, and much more. T he companion CD provides
users 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
Copyright
T he Official T raining Workbook from Adobe Systems
2007 Adobe Systems Incorporated and its licensors. All rights reserved.
Adobe Flash CS3 P rofessional 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 furnished
under license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, no
part 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 permissions@peachpit.com. P lease note that the content in this guide is protected under copyright law even if it is not
distributed with software that includes an end user license agreement.
P lease 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. P lease be
sure to obtain any permission required from the copyright owner. Any references to company names in sample templates are for
demonstration 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 P hotoshop are trademarks
of Adobe Systems Incorporated.
Apple, Mac OS, Macintosh, and Safari are trademarks of Apple registered in the U.S. and other countries. Microsoft, Windows, and
Internet Explorer are either registered trademarks or trademarks of Microsoft Corporation in the U.S. and/or other countries. All other
trademarks are the property of their respective owners.
Adobe Systems Incorporated, 345 P ark 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 used
in 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-1
through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being
licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users
pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe Systems
Incorporated, 345 P ark Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all
applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the
Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as
amended, and the regulations at 41 CFR P arts 60-1 through 60-60, 60-250, and 60-741. T he affirmative action clause and regulations
contained in the preceding sentence shall be incorporated by reference.
Adobe P ress books are published by Peachpit, Berkeley, CA. T o report errors, please send a note to errata@peachpit.com.
P rinted in the U.S.A.
ISBN-13: 978-0-321-49982-0
987654321
Writer: Brie Gyncild
Design Director: Andrew Faulkner, afstudio design
Designers: Annie T sou, Heather Landry, Rachel Lightfoot
P roduction: Dawn Dombrow-T hompson, dtstudio
We offer our sincere thanks to the following people for their support and help with this project: Colin Smith, P aul 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 it
without you.
Page 2
Richard Galvan
Sr. P roduct 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 helping
new users get up to speed quickly, Adobe Flash CS 3 P rofessional Classroom in a Book covers many new features, including an
introduction 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
Getting Started
Adobe Flash CS3 provides a comprehensive authoring environment for creating interactive websites and digital animation. Flash is
widely used to create engaging applications that are rich with video, graphics, and animation. You can create content in Flash or import
it from other Adobe applications, quickly design simple animations, and use Adobe ActionScript 3.0 to develop sophisticated
interactive projects.
Page 4
About Classroom in a Book

Adobe Flash CS3 P rofessional 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 and
features you'll need to use the program. Classroom in a Book also teaches many advanced features, including tips and techniques for using
the 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 to
streamline projects, importing symbols from Adobe Illustrator layers, integrating Adobe After Effects video, and more.
Page 5
[*]
What's on the CD
[*]
Here is an overview of the contents of the Classroom in a Book CD
Lesson Files ... and S o Much More

T he Adobe Flash CS3 P rofessional Classroom in a Book CD includes the lesson files that you'll need to complete the exercises in this
book, as well as other content to help you learn more about Flash CS3 and use it with greater efficiency and ease. T he diagram below
represents the contents of the CD, which should help you locate the files you need.
Page 6
Prerequisites
Before beginning to use Adobe Flash CS3 P rofessional Classroom in a Book, make sure that your system is set up correctly and that
you've installed the required software. You should have a working knowledge of your computer and operating system. You should know
how to use the mouse and standard menus and commands, and also how to open, save, and close files. If you need to review these
techniques, see the printed or online documentation included with your Microsoft Windows or Apple Mac OS software.
Page 7
Installing Flash
You must purchase the Adobe Flash CS3 software either as a stand-alone application or as part of the Adobe Creative Suite. Flash CS3
requires Apple QuickT ime 7.1.2 or higher. For system requirements and complete instructions on installing the software, see the
Adobe 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 the
on-screen instructions.
Make sure that your serial number is accessible before installing the application; you can find the serial number on the registration card
or on the back of the DVD case.
Page 8
Optimizing Performance
Creating animations is memory-intensive work for a desktop computer. Flash CS3 P rofessional requires a minimum of 512 MB of
RAM; 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
Copying the Lesson Files

T he lessons in Adobe Flash CS3 P rofessional Classroom in a Book use specific source files, such as image files created in Adobe
Illustrator , video files created in Adobe After Effects , audio files, and prepared Flash documents. T o complete the lessons in this
book, you must copy these files from the Adobe Flash CS3 P rofessional Classroom in a Book CD (inside the back cover of this book) to
your hard disk.
1.
On your hard disk, create a new folder in a convenient location and name it FlashCS3_CIB, following the standard procedure
for 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 Professional
Classroom 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, and
other 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 afterward
if desired. Some lessons build on preceding lessons; in those cases, a starting project file is provided for you for the second lesson or
project. 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 S ample 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 compare
your work in progress with the project files used to generate the sample movies. T he end project files vary in size from relatively small
to 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 for
each lesson as needed, and then delete it when you finish that lesson.
Page 10
How to Use these Lessons

Each lesson in this book provides step-by-step instructions for creating one or more specific elements of a real-world project. Some
lessons build on projects created in preceding lessons; most stand alone. All of these lessons build on each other in terms of concepts and
skills, so the best way to learn from this book is to proceed through the lessons in sequential order. In this book, some techniques and
processes 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 a
keyboard shortcut. Only one or two of the methods are described in any given procedure so that you can learn different ways of working
even 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 with
symbols on real-world design projects over several lessons, rather than in just one chapter.
Page 11
Additional Resources
Adobe Flash CS3 P rofessional Classroom in a Book is not meant to replace documentation that comes with the program. T his book
explains only the commands and options actually used in the lessons, so there's much more to learn about Flash. Classroom in a Book
aims to give you confidence and skills so that you can start creating your own projects. For more comprehensive information about
program features, see:
T he Adobe Flash CS3 User Guide, which is included as a P DF file on the Adobe Flash CS3 application DVD and contains
descriptions 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 the
application. 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 and
other 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 or
by 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 design
inspiration and instructional content.
Adobe Developer Center (www.adobe.com/devnet/), where you can find tutorials, articles, and sample applications. You can
learn the industry trends you need to master Adobe development-oriented products and technologies.
Page 12
Adobe Certification
T he Adobe T raining and Certification P rograms are designed to help Adobe customers improve and promote their product-proficiency
skills. 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 a
catalyst 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 a
wide range of Adobe resources.
Adobe Authorized T raining Centers offer instructor-led courses and training on Adobe products, employing only Adobe Certified
Instructors. 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
1. Getting Acquainted
In Flash, the Stage is where the action takes place, the T imeline organizes frames and layers, and other panels let
you 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 P roperty 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 P rofessional Classroom in a
Book CD onto your hard drive if it's not already there.
Page 14
Starting Flash and Opening a File

T he first time you start Flash, you'll see a Welcome screen with links to standard file templates, tutorials, and other resources. In this
lesson, you'll complete an animation for a bottled-water company. Most of the artwork is already in place. As you get to know the Flash
workspace, you'll add an object from the Library panel to the Stage and animate it.
1.
Start Adobe Flash. In Windows, choose Start > All P rograms > Adobe Flash CS3. In Mac OS, double-click Adobe Flash CS3 in
the 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 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.
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 in
different frames.
5.
Choose File > Save As. Name the file 01_workingcopy.fla, and save it in the 01Start folder. Saving a working copy ensures
that the original start file will be available if you wish to start over.
Page 15
Getting to Know the Work Area

T 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 adding
elements to your movie. You can create all the objects for your animation in Flash, or you can import elements you've created in Adobe
Illustrator, Adobe P hotoshop, Adobe After Effects, and other compatible applications.
By default, Flash displays the menu bar, T imeline, Stage, T ools panel, P roperty 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 the
Workspace menu in the Edit bar just above the Stage.
[View full size image]
About the S tage

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 that
appear 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 web
browser 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 > P asteboard.
T o scale the Stage so that it fits completely in the application window, choose View > Magnification > Fit in Window. You can also
choose view options from the pop-up menu just above the Stage.
Page 16
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 that
frame 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.
T he T imeline also contains layers, which help you organize the artwork in your document. T hink of layers as multiple film strips
stacked on top of each other. Each layer contains a different image that appears on the Stage, and you can draw and edit objects on one
layer without affecting objects on another layer. T he layers are stacked in the order that they appear in the T imeline, so that objects on
the 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'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.
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 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.
Page 17
5.
Click the lock icon next to the P our layer to unlock it.
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.
1.
Select frame 18 on the P our layer. As you select a frame, Flash displays the frame number beneath the T imeline.
2.
Choose Insert > T imeline > Keyframe.
Page 18
Page 19
Working with the Library Panel

T he Library panel is where you store and organize symbols created in Flash, as well as imported files, including bitmaps, graphics, sound
files, 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. 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 symbols you create. T hat way, you can easily access the items to add them to the Stage again, edit
them, 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 is
animated, 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 for
the pour_bottle symbol. Now you'll drag an instance of that symbol onto the Stage.
1.
2.
Choose Window > Library to open the Library panel if it isn't already open.
Select the keyframe you created at frame 18 of the Pour layer.
Page 20
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.
Page 21
Page 22
Using the Property Inspector

T he P roperty inspector gives you quick access to the attributes you're most likely to need. What appears in the P roperty inspector
depends on what you've selected. For example, if a frame is selected, the Property inspector includes a T ween option; if an object on the
Stage is selected, the Property inspector shows its x and y coordinates. You'll use the P roperty inspector to move the bottle to its initial
and final positions on the Stage, and then to add a motion tween that animates the bottle.
Frame properties
Object properties
Positioning an Object on the S tage

First, you'll move the bottle into its initial position using the P roperty inspector. You'll also use the T ransform panel to rotate the
bottle.
1.
Select the bottle that you dragged onto the Stage.
2.
In the P roperty inspector, type 689 for the X value and -59 for the Y value. P ress Enter or Return to apply the values. T he
bottle moves to the right, above the Stage.
Note
If the Property inspector is not open, choose Window > Properties > P roperties, or press Ctrl+F3 (Windows) or Command+F3 (Mac
OS).
3.
4.
Choose Window > T ransform to open the T ransform panel.
In the T ransform panel, select Rotate, and type 35 in the Rotate box. Press Enter or Return to apply the value.
Page 23
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 in
the T imeline, 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. 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 P roperty 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 P our bottle layer.
Page 24
6.
In the P roperty inspector, choose Motion from the T ween menu. Flash adds an arrow to the frames in the T imeline to show
that a motion tween has been applied.
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. P ress 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 to
constrain 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 P roperty inspector. T he
T imeline displays an arrow to show that a motion tween has been applied. If you move the playhead from frame 42 to frame 59, the
bottle moves off the Stage.
Working with Panels

Just about everything you do in Flash involves a panel. In this lesson, you use the Library panel, T ools panel, P roperty 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, and
other panels that let you control various aspects of your project. Because panels are such an integral part of the Flash workspace, it pays
to 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 a
submenu, such as Window > Properties > P roperties, or Window > Other Panels > History.
Page 25

By default, the P roperty inspector, Filters panel, and Parameters panel appear together at the bottom of the screen, the T imeline is at
the 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 move
a 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
Using the Tools Panel

T 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 to
the 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 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. T hen, you'll use the Oval tool to draw an outline around the logo
circle.
S electing 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.
2.
3.
Select the Zoom tool in the T ools panel.
Select the Enlarge icon (
) in the options area of the T ools panel.
Click the aqua circle with the letters in it to enlarge it on the screen.
S electing 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 the
tool 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 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.
1.
Select the Pour layer in the T imeline, and then click the Insert Layer icon (
).
Page 27

2.
Name the new layer Outline.
3.
Lock the P our 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.
5.
6.
7.
8.
9.
Click and hold the Rectangle tool in the T ools panel, and then select the Oval tool from the pop-up menu.
Click the Stroke Color icon (
) in the options area of the T ools panel. T he Adobe Color P icker opens.
Select black in the Color P icker.
Click the Fill Color icon (
) in the options area of the T ools panel. T he Color Picker opens again.
Select No Color in the Color P icker.
Page 28
10.
Hold down the Shift key as you draw an oval around the logo circle.
Note
P ressing the Shift key as you draw constrains the tool to draw a perfect circle. You can modify many tools by pressing a key while you
use them. For example, press the Alt (Windows) or Option (Mac OS) key as you use the Zoom tool to change it from Enlarge mode to
Reduce mode.
11.
Select the Selection tool (
12.
In the P roperty 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.
), and then select the oval.
In the P roperty inspector, change the Stroke Height to 4.
Tools Panel Overview

T he T ools panel contains selection tools, drawing and painting tools, and navigation tools. T he options area in the T ools panel lets you
modify the selected tool.
Page 29
Page 30
Undoing Steps in Flash

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.
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've
undone, 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 you
opened the current document. Closing a document clears its history.
T o open the History panel, choose Window > Other P anels > 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 Undo
command, and then remove the entire Outline layer using the History panel.
1.
2.
Choose Edit > Undo to change the Stroke value back to 1.

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 the
History panel, and they are removed from the project. T o add a step back, move the slider back down.
Page 31
Note
If you remove steps in the History panel and then perform additional steps, the removed steps will no longer be available.
Page 32
Previewing Your Movie

As 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 see
how an animation or movie will appear to a viewer, choose Control > T est Movie. You can also press Ctrl+Enter (Windows) or
Command+Return (Mac OS) to preview your movie.
1.
Choose Control > T est Movie. Flash opens and plays the movie in a separate window.
2.
Page 33
Publishing Your Movie

When you're ready to share your movie with others, publish it from Flash. For most projects, Flash will create an HT ML file, a SWF
file, 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 file
ensures that browsers work well with your movie. You'll need to upload all three files to the same folder on your web server. Always test
your 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 P ublish.
Page 34

5.
6.
Click OK to close the dialog box.

Navigate to the Lesson01/01Start folder to see the files Flash created.
Page 35
Using Flash Help

For complete information about using panels, tools, and other application features, refer to Flash Help. T o open Flash Help, choose
Help > Flash Help.
Flash Help is divided into several books. T he Using Flash book includes how-to tips, tutorials, and explanations of Flash concepts and
feature descriptions. P rogramming ActionScript 3.0, ActionScript 3.0 Language and Components Reference, and Using ActionScript 3.0
Components 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 create
animations 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 contents
to see more information about what's new in Flash CS3.
1.
Choose Help > Flash Help.
Page 36

2.
Expand the Using Flash book to view the table of contents.
3.
Click Getting Started > What's New > New Features to see links to new features in Flash CS3.
S earching 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 or
term, 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.
Page 37
3.
4.
Click Search.
Select "Using the History Panel" to read about the History panel.
Page 38
Using Adobe Online Services

Another way to get information about Flash and to stay abreast of updates is to use Adobe online services. With an active Internet
connection, 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 artists
around the world, the latest product information, and troubleshooting and technical information.
Page 39

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 lesson 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.
Page 40
Review
Review Questions
1
2
3
4
5
What is the Stage?

How do you open a panel in Flash?
What's a hidden tool, and how can you access it?
Name two methods to undo steps in Flash, and describe them.
How can you find answers to questions you have about Flash?
Review Answers
1
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 the
movie.
2
T o open a panel in Flash, choose Windows > [panel name]. Some panels, such as the History panel, are in the Other
P anels 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 in
the group is displayed. (T he tool you most recently used is the one shown.) Small triangles appear on tool icons to indicate that
hidden 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 hidden
tool 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, choose
Edit > 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 ActionScript
3.0. Choose Help > Help Resources Online or visit www.adobe.com to see tutorials, tips, and other resources for Flash users.
Page 41
2. Working with Graphics
You can use rectangles, ovals, and lines to create interesting, complex animations in Flash. Combine them with
imported graphics for even greater possibilities.
Lesson Overview
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, and
copy the Lesson02 folder onto it.
Page 42
Getting Started
First, view the finished movie to see the animation you'll be creating in this lesson.
1.
Double-click the 02End.swf file in the Lesson02/02End folder to play the animation.
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's
attention while a web page loads. T his animation is for Fizzy Drink, a fictional company. In this lesson, you'll draw the shapes, modify
them, and animate them.
2.
Double-click the 02Start.fla file in the Lesson02/02Start folder to open the initial project file in Flash.
3.
Page 43
Creating Rectangles
Flash includes several drawing tools, which work in different drawing modes. Many of your creations will begin with simple rectangles, so
it's important that you're comfortable drawing them, modifying their shapes, and applying fills and strokes.
You'll begin by drawing the glass for the fizzy drink.
1.
Select the Rectangle tool (
). Make sure the Object Drawing mode icon (
any color, but make sure a color is selected for each.
) is not selected. T he stroke and fill can be
2.
On the Stage, draw a rectangle that is about twice as tall as it is wide. You'll specify the exact size and position of the rectangle
in step 5.
Note
Flash applies the default fill and stroke to the rectangle, which is determined by the last fill and stroke you applied. You'll specify a
different fill and stroke for the rectangle in the following sections.
3.
Select the Selection tool.
4.
Drag the Selection tool around the entire rectangle to select the stroke and the fill. When a shape is selected, Flash displays it
with white dots.
Page 44
5.
In the P roperty inspector, type 95 for the width, and 135 for the height. P ress Enter or Return to apply the values.
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, JP EG, 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'll
import an image of water to use as the fill. You can import a bitmap file in the Color panel.
1.
2.
Make sure the entire rectangle is still selected. If necessary, drag the Selection tool around it again.
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 P icker, which you
don't need when you're importing a bitmap.
3.
4.
5.
Select Bitmap from the T ype menu.
In the Import to Library dialog box, navigate to the Water.tif file in the Lesson02/02Start folder.
Select the Water.tif file and click Open.
T he rectangle fills with the water image.
Page 45
S pecifying S troke 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 of
the fill; you can also specify that the object has no stroke. You'll give the rectangle a solid gray outline.
1.
Select the rectangle on the Stage, if it isn't already selected.
2.
In the P roperty inspector, click the Stroke Color box (
3.
).
In the Color P icker, 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 the
colors you use most often.
4.
T ype 4 in the Stroke Height box, and press Enter or Return to apply the value.
T he rectangle should now have the water bitmap fill and a thick gray stroke.
Page 46

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.
2.
Select the Free T ransform tool (
).
Drag the Free T ransform tool around the rectangle on the Stage to select it. T ransformation handles appear on the rectangle.
3.
P ress Ctrl+Shift (Windows) or Command+Shift (Mac OS) as you drag one of the corners inward. P ressing these keys lets you
move 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 Modes

Flash provides three drawing modes, which determine how objects interact with each other on the Stage, and how you can edit them. By
default, Flash uses merge drawing mode, but you can enable object drawing mode, or use the Rectangle Primitive or Oval P rimitive tool
to use the primitive drawing mode.
Merge Drawing Mode

In this mode, Flash merges drawn shapes, such as rectangles and ovals, where they overlap, so that multiple shapes appear to be a single
shape. If you move or delete a shape that has been merged with another, the portion that was overlapping is permanently removed.
Object Drawing Mode

In this mode, Flash does not merge drawn objects; they remain distinct and separate, even when they overlap. T o enable object drawing
mode, 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 a
shape to an object (object drawing mode), select it and choose Modify > Combine Object > Union.
Page 47
Primitive Drawing Mode

New to Flash CS3 is the primitive drawing mode. When you use the Rectangle P rimitive tool or the Oval P rimitive tool, Flash draws the
shapes as separate objects. Unlike regular objects, however, you can modify the corner radius of rectangle primitives, and the start and
end angle and the inner radius of oval primitives using the P roperty inspector.
Page 48
Using a Gradient Fill

In a gradient, one color gradually changes into another. Flash can create linear gradients, which change color horizontally, vertically, or
diagonally; or radial gradients, which change color moving outward from a central focal point. You'll use a linear gradient fill to add
weight and depth to the base of the drinking glass.
1.
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. A
color pointer determines where the gradient changes from one color to the next. Add color pointers beneath the gradient definition bar
to add color transitions.
You'll add a color pointer and adjust the existing pointers to create a gradient that moves from black to white to black in the base of the
glass.
1.
Click beneath the gradient definition bar to create a new color pointer.
Page 49
2.
Drag the new color pointer to the middle of the gradient.
3.
Select the new color pointer (the triangle above it turns black when selected) and then type #FFFFFF to specify white for the
pointer. P ress 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 the
gradient in the glass, you'll use the Gradient T ransform tool.
Page 50

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 to
stretch the gradient.
3.
Drag the square handle on the side of the bounding box to stretch the gradient until the gradient color matches the stroke
color of the glass. T he gradient should blend into the edge of the glass.
Page 51
Making Selections
T 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 specific
point or line in an object. With the Lasso tool, you can draw a freeform selection.
S electing S ections 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 accidentally
selecting or modifying any part of the water fill, you'll group the glass base section.
1.
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 the
groupeither 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 P icker.
Page 52
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 job
because you can use it to make an irregular selection.
1.
Select the Lasso tool (
). Make sure the P olygon Mode icon (
) is not selected.
Note
When the Polygon Mode icon is selected, the Lasso tool is constrained to draw polygons.
Page 53
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 solid
white 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 choose
Insert > T imeline > Frame. Flash extends frame 1 to frames 2 through 35.
Page 54

T he drink itself is complete! All that's left to do is to add bubbles and fizz.
Page 55
Drawing Ovals
T 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 drinking
glass. So that you can easily animate the bubble later, you'll create it on a new layer.
1.
Lock the Glass layer, so that you don't accidentally change it while you're working with the bubble.
2.
Choose Insert > T imeline > Layer to add a layer for the bubble.
3.
Name the layer Bubble.
4.
Select the Oval 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.
7.
), which is grouped with the Rectangle tool.
Drag the Selection tool around the entire circle to select both the fill and the stroke.
In the P roperty inspector, set the Stroke color to No Color (
) and the Fill color to white (#FFFFFF).
Page 56
8.
) 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 he
resized circle should be about 8 pixels wide and 8 pixels tall. You may find it easier to resize the bubble if you zoom in on it. (T he
P roperty 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), the
object is scaled relative to its transformation point, represented by the circle icon. You can drag the transformation point anywhere in
the object, or even outside of the object.
Page 57
Page 58
Creating a Simple Animation

Later lessons cover animation in greater detail, but for this project, you'll use a motion tween to create a simple frame-by-frame
animation. You'll convert the bubble to a symbol, apply the motion tween, and then copy the layer to create additional animated
bubbles.
Converting a S hape to a S ymbol

A symbol is a graphic, button, or movie clip that you create once in Flash and then reuse as many times as you like, reducing the size of
your movie file. Additionally, there are ways you can use symbols that you can't use other shapes. You'll learn more about symbols in
Lesson 3. Now, you'll convert the bubble to a symbol so that you can animate it.
1.
With the Selection tool, select the bubble.
2.
Choose Modify > Convert to Symbol.

Name the symbol bubble, and select Graphic for the symbol type. Click OK to close the Convert to Symbol dialog box.
3.
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 then
apply a motion tween. A motion tween automatically creates the frames between the beginning and the end of the animation.
1.
Select the bubble on the Stage and move it to the bottom half of the glass.
2.
Select frame 20 in the Bubble layer, and press F6 to insert a keyframe.
3.
Select the bubble on the Stage.

In the P roperty inspector, enter the following values:
4.
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. P ress
Enter or Return to apply the value.
T he larger bubble moves up to the top of the glass.
Page 59

6.
7.
Select any frame between 1 and 20 on the Bubble layer.

In the P roperty inspector, select Motion from the T ween menu.
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 the
animation repeats.
Adding Animation Layers

A drink needs more than one bubble, but you don't need to go through all the steps to create each one. Instead, you'll copy the Bubble
layer to create additional layers. 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.
4.
P ress Alt (Windows) or Option (Mac OS) as you drag the layer to one of the new layers above it, shifted slightly so that the
first frame is a few frames further down the T imeline.
5.
Copy the same frames to each layer, so that the starting keyframe for each layer is at a different position, from frame 1 to
frame 15.
Page 60
6.
Select the first keyframe in the Bubble2 layer, press Ctrl+A (Windows) or Command+A (Mac OS) to select the bubble on
that layer, and then drag the selected bubble to a different position in the glass.
7.
Select the last keyframe in the layer, press Ctrl+A (Windows) or Command+A (Mac OS), and move the final bubble to a
position above its new starting point, so that the bubble travels straight up in the glass.
8.
Repeat steps 5-7 for the remaining bubble layers, so that each bubble begins in a different position in the glass and ends in a
position directly above its starting position.
T o see each bubble's path more clearly, hide all the bubble layers except the one you're working with.
9.
T o preview the animation, choose Control > T est Movie.
T he fizzy drink is now bubbly!
Page 61
Working with Lines

T 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 popping
fizz 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 P roperty inspector, click the Stroke Color box, and then use the Color P icker's eyedropper to click on a dark area of the
drink.
Set the Stroke Height to 3 and the Fill Color to none (
6.
).
Draw a small circle above the drink.
7.
Adding Lines
You'll add lines to the oval to create a star shape.
Select the Line tool (
1.
) 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 as
the 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 > P aste In P lace to paste a copy in exactly the same position.
Choose Modify > T ransform > Rotate 90 CCW to rotate the second line so that it is perpendicular to the first one.
5.
6.
Page 62

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 > P aste In P lace.
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.
Breaking Objects Apart

You used the object drawing mode to create the lines. Now, to remove the overlapping lines from the center of the circle, you'll convert
the lines into separate line segments.
1.
With the Selection tool, drag a selection around the entire star so that all four lines and the circle are selected.
2.
Choose Modify > Break Apart.
3.
Click a blank area on the Stage to deselect the star.
4.
Select each line segment in the center of the circle and delete it.
Page 63
Manipulating Objects
You can combine multiple objectswhether they were drawn using object drawing mode or notto copy, paste, reposition, and
otherwise work with them more efficiently. T o create multiple fizz elements, you'll group the components of the star.
Disabling S nap 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're
moving to a guide or to another object. For this project, however, you want to place the fizz elements randomly, so you'll deselect Snap
T 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.
P ress Alt (Windows) or Option (Mac OS), and drag the group to an open area above the drink.
P ressing 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 S hapes
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.
2.
Select the Oval tool.

Hold down the Shift key, and draw a circle.
Page 64
3.
With the Selection tool, select the circle.
4.
P ress 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 every
five frames. You must create a keyframe at each frame where the objects move.
1.
2.
In the T imeline, select frame 5 in the Fizz layer, which contains the fizz objects.
Choose Insert > T imeline > Keyframe.
3.
Add a keyframe for every fifth frame through frame 30. (T hat is, create keyframes at frames 10, 15, 20, 25, and 30.)
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 each
keyframe.
7.
Choose Control > T est Movie to preview the popping fizz you've created, and then close the preview window.
Page 65
Masking Objects
A mask provides a hole through which underlying layers show, so that you can limit the area of the layers that is visible. You'll use a
mask to keep the bubbles in the glass.
1.
2.
Unlock the Glass layer.

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 > P aste In P lace. T he drink fill shape is pasted into the new layer.
9.
10.
Name the layer Mask.

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.
Page 66
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
Testing a Movie
P review your animation to make sure it's behaving as you expect. In fact, you should preview the movie frequently so that you can
troubleshoot or simply tweak your animation.
T o preview the movie, choose Control > T est Movie. You see the full effects of the drink, the bubbles, and the fizzall created with
rectangles, 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 new
movie clip symbol, which you can then place wherever you want to use it.
Page 68
Review
Review Questions
What are the three drawing modes in Flash, and how do they differ?
How can you draw a perfect circle using the Oval tool?
When would you use each of the selection tools in Flash?
What does a mask do?
1
2
3
4
Review Answers
1
2
3
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.
T o draw a perfect circle, hold down the Shift key as you drag the Oval tool on the Stage.
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.
A mask restricts the visible area of the layers beneath it. Only the area that is covered by the mask shows through.
Page 69
3. Creating and Editing Symbols
Movie clip, graphic, and button symbols keep your file size small while increasing your flexibility. A single symbol
can be used countless times in a project, but the file's data only has to be included once.
Lesson Overview
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 the
Lesson03 folder onto it.
Page 70
Getting Started
First, 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 the
buttons 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 Illustrator
graphic files, imported JP EG files, and symbols to create an attractive, useful interface. You'll create buttons and position them in the
interface, so they would be ready for scripting.
2.
Close the 03End.swf file.
3.
4.
Page 71
Importing Illustrator Files

As you learned in Lesson 2, you can draw objects in Flash using the Rectangle, Oval, and Line tools. However, for complex drawings, you
may prefer to create the artwork in another application. Adobe Flash CS3 supports native Adobe Illustrator files, so you can create
original 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'll
import 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 each
layer.
5.
Choose Flash Layers from the Convert Layers T o menu, and select P lace Objects At Original P osition. T hen, click OK.
Flash imports the DVD interface image, and three layers appear in the T imeline: Menu, P review Boxes, and Menu Background.
Page 72
Using Adobe Illustrator with Flash

Flash CS3 can import native Illustrator files, automatically recognizing layers, frames, and symbols. If you're more familiar with
Illustrator, 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 to
import the artwork into Flash. Alternatively, you can even copy artwork from Illustrator and paste it into a Flash document.
Importing Layers
When 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
Page 73
Importing Symbols
Working with symbols in Illustrator is similar to working with them in Flash. In fact, you can use many of the same symbol keyboard
shortcuts in both Illustrator and Flash; press F8 in either application to create a symbol. When you create a symbol in Illustrator, the
Symbol 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 of
the symbolare updated accordingly.
Use the Symbols panel or the Control panel in Illustrator to assign names to symbol instances, break links between symbols and
instances, 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 Artwork

When you copy and paste (or drag and drop) artwork between Illustrator and Flash, the P aste dialog box appears. T he P aste dialog box
provides import settings for the Illustrator file you're copying. You can paste the file as a single bitmap object, or you can paste it using
the current preferences for AI files. (T o change the settings, choose Edit > P references in Windows or Flash > P references 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 layers
to Flash layers.
Page 74
Page 75
About Symbols
A symbol is a graphic, button, or movie clip that you create once in Flash and can then reuse throughout your document or in other
documents. 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 the
original 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 S ymbols

Many designers use movie clip symbols for all kinds of objects in Flash because movie clips are the most flexible symbols. You can apply
filters, color settings, and blending modes to a movie clip symbol. You can name each instance of a movie clip symbol, and control it
with 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 a
movie clip symbol by using ActionScript to create the rollover states.
Button S ymbols
You can quickly create interactive buttons with standard rollover states using button symbols. Unlike movie clip T imelines, button
symbol 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, and
color settings.
T he
T he
T he
T he
Up state is the default state.

Over state determines the button's appearance when the mouse rolls over it.
Down state determines the button's appearance when it is clicked.
Hit state defines the button's active area, which is the area that responds to the mouse click.
Graphic S ymbols
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
Converting Objects to Symbols

T he interface layout you imported from Illustrator includes three green boxes, which will hold thumbnails for video clips. Before
positioning 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 P review Boxes layer to select the green boxes, which are the only objects on that layer.
2.
Choose Modify > Convert to Symbol.
3.
Name the symbol preview_boxes.
4.
5.
Select Movie Clip for the T ype.
Click OK. T he preview_boxes symbol appears in the library.
Page 77
Importing Bitmap Images

You'll import JP EG 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 all
the 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 JP EG, GIF, and P NG files, which are all bitmap formats. Use JPEG files for images that include gradients and subtle
variations, such as those that occur in photographs. Use GIF files for images with large solid blocks of color. Use PNG files (a native
format 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 P NG files to export as JP EG files, with a smaller file size, while retaining their
transparency.
Importing Images to the Library

First, you'll import three JP EG 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.

Hold down the Shift key, and select the Vacation_2.jpg and Vacation_movie.jpg files, as well.
3.
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
Importing Images to the S tage

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 the
existing 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.
2.
Name the layer Beach Background.
3.
In the T imeline, drag the Beach Background layer below the Menu Background layer.
4.
Choose File > Import > Import to Stage.
5.
Select Beach_umbrellas.jpg in the Lesson03/03Start folder.
6.
T he Beach_umbrellas jpg image appears beneath the other layers on the Stage.
Page 79
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 in
manipulating the graphic. T he T race Bitmap command converts a bitmap into a vector graphic with editable, discrete areas of color. T o
reduce 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 this
project, 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.
With the Beach_umbrellas.jpg image still selected on the Stage, choose Modify > Bitmap > T race Bitmap.
1.
Enter the following settings:
2.
3.
Color T hreshold: 100

Minimum Area: 8
Curve Fit: Normal
Corner T hreshold: Normal
Click OK.
Page 80
Page 81
Adding Bitmaps to a Movie Clip Symbol

Each 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 to
a 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 images
to the preview_boxes movie clip symbol.
1.
2.
Double-click one of the green boxes on the Stage to edit the preview_boxes movie clip symbol. Flash opens the
preview_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 only
the 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.
Drag the Vacation_1.jpg image from the Library panel to the first green preview box on the Stage.
6.
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 the
second box. T he image is copied to the second box.
8.
9.
box.
In the P roperty inspector, click Swap.
In the Swap Bitmap dialog box, select Vacation_2.jpg, and click OK. T he Vacation_2.jpg file replaces the image in the second
Page 82
10.
Drag the Vacation_movie.jpg image from the Library panel onto the third box on the Stage.
Page 83
Working with Buttons

Use button symbols to create interactive buttons that include rollover states, which cause the buttons to change appearance when you
click them, roll the mouse over them, or perform other actions. In Lesson 9, you'll use ActionScript to assign actions to buttons, but in
this lesson, you're just creating the button states.
Creating a Button S ymbol

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.
Importing a File with Button S tates

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 of
button states, you may want to create the artwork in Adobe Illustrator. For this lesson, you'll import an Illustrator file that already
contains the artwork for three button states. Because the menu_button symbol T imeline is open, the imported Illustrator layers will fill
the appropriate states.
1.
2.
Select the DVD_interface_button_states.ai file in the Lesson03/03Start folder.
3.
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 importing
the DVD interface, the states would import as separate layers, and the button wouldn't work properly.
Page 84
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.
Adding a Button S ymbol to the S tage

T he menu_button symbol is in the library. You'll add an instance of the button to the Stage above each of the menu options in the main
T imeline.
1.
Choose Edit > Edit Document to return to the main T imeline.
2.
Select the Menu layer.
3.
4.
Name the layer Buttons, and select the first frame in the Buttons layer.
Page 85
5.
Drag the menu_button symbol from the Library panel onto the Stage, and position it over the words Play Movie. Flash adds an
instance of the symbol to the Stage.
6.
Drag instances of the menu_button symbol over Scene Selection, Special Features, and Setup.
Adding a Hit S tate to a Button

You imported three button states for the menu buttons. However, those states won't have any effect if the Hit state doesn't exist. T he
Hit state defines the button's active area, the area that responds to the mouse click. You'll draw a rectangle to represent the button area
for the Hit state, but the area will be invisible in the final movie. Creating a Hit state for the symbol automatically applies it to each
instance of the symbol.
You don't have to draw a rectangle or any other shape to define the Hit state. If you want the button's active area to
match the graphic in the Up, Down, or Over state exactly, press Alt (Windows) or Option (Mac OS) and drag the dot from one of the
other states in the T imeline to the Hit state.
Page 86

1.
Using the Selection tool, double-click the first menu_button instance to edit the symbol in place. Flash opens the menu_button
T imeline and dims everything but the button on the Stage.
2.
3.
In the menu_button T imeline, select the Hit frame.

Choose Insert > T imeline > Blank Keyframe.
4.
Select the Rectangle tool.
5.
Draw a rectangle that covers the text and the button above it. Select a fill color. Any color is fine, but a fill color must be
selected for the area to be included in the Hit state. Because you're editing the symbol, the Hit state is added to all the instances on the
Stage.
6.
Click Scene 1 to return to the main Stage.
7.
Choose Control > Enable Simple Buttons. T his command lets you preview button behaviors on the Stage.
8.
Hover the mouse over the buttons and click them to see the appearance for each state.
Note
T he appearance changes for each button state because you've added a state to each frame in the menu_button T imeline. However, the
buttons are not scripted, so no action results from clicking them.
Page 87
Creating an Invisible Button

In Flash, buttons don't have to look like buttons. In fact, anything can behave like a button if you place an invisible button over it.
When you roll over or click an invisible button, the appearance on screen changes or some action occurs, but the screen isn't cluttered
with buttons when they're not in use. When and how you use invisible buttons is a design decision. In this project, you'll add invisible
buttons to the thumbnails for the video clips, so that later you could script the thumbnails to play the videos when they are clicked.
1.
Choose Insert > New Symbol.
2.
Name the symbol invisible_button.
3.
Select Button for the T ype, and click OK.
4.
In the invisible_button T imeline, select the Hit frame.
5.
Choose Insert > T imeline > Blank Keyframe.
6.
7.
Use the Rectangle tool to draw a rectangle of any size.

In the P roperty inspector, set the width and height to 85 and the X and Y values to 0.
8.
P ress Enter or Return to apply the values.
9.
Click Scene 1 to return to the main T imeline.
Page 88

10.
11.

Name the layer Invisible Buttons.
12.
Drag an instance of the invisible_button symbol to the Stage, and center it over the first thumbnail.
13. Choose Control > Enable Simple Buttons to deselect the command, so that buttons aren't active on the Stage. You can see
invisible buttons on the Stage, though they won't be visible in the final SWF file.
14.
Select the Selection tool, and deselect the instance.
15.
P ress Alt (Windows) or Option (Mac OS) and drag the instance of the invisible_button symbol over the second box.
16.
Deselect the instance, and then repeat step 15 to duplicate the instance for the third green box.
Page 89
Adding Transparency
In Flash, transparency is determined by the alpha value for a symbol or color. Decreasing the alpha value decreases the opacity and
increases the amount of transparency. You can change the alpha value for a symbol, or for an individual instance of a symbol.
Changing the Alpha Value for an Instance

T o reduce the opacity for the menu background, you must first convert it to a symbol.
1.
In the main T imeline, select frame 1 of the Menu Background layer.
2.
Choose Modify > Convert T o Symbol.
3.
Name the symbol menu_background.
4.
5.
6.
Select Graphic for the T ype, and click OK.
In the P roperty inspector, select Alpha from the Color menu.

Enter 85 for the percentage.
Changing the Alpha Value for a Color

You'll alter the alpha value for the green color of the preview boxes, making them slightly transparent. First, though, you'll need to
separate the green boxes.
1.
With the Selection tool, double-click the instance of the preview_boxes symbol to edit it in place.
2.
In the preview_boxes T imeline, select frame 1 of the Boxes layer.
3.
Choose Modify > Break Apart.
Note
You can use either the Ungroup command or the Break Apart command to separate the boxes. In general, the Break Apart command is
more powerful because it can break apart a bitmap or instance into editable parts, as well as ungrouping grouped objects.
4.
Click on any part of the selected green shapes.
5.
In the P roperty inspector, click the Fill Color box.
Page 90

6.
Enter 85 in the Alpha box.
7.
Click Scene 1 to return to the main T imeline. T he orange foreground and green boxes are less opaque, so you can see the
beach image behind them.
Using Web-S afe Colors

When you view files in a web browser using a 256-color display, many colors appear dithered. T he web-safe palette in Flash includes 216
colors that are most likely to appear as you expect, without dithering, on different computers using different operating systems and web
browsers. T he web-safe palette is the default color palette in Flash. Appendix A shows the colors in the web-safe palette and their
corresponding hexadecimal values.
Most current computers display thousands or millions of colors, making web-safe colors less important than they once were. However,
handheld devices and cell phone displays have more limited colors, so if you're creating SWF files to be viewed on those devices, it's best
to use web-safe colors. T o ensure you're using the web-safe palette when you add color to objects in Flash, choose Web 216 from the
Swatches panel menu.
When you import artwork, it may contain additional colors. You'll change the orange rectangle in the menu background to a web-safe
color.
1.
With the Selection tool, double-click the instance of the menu_background symbol to edit it in place. T he menu_background
T imeline opens.
P ress Alt (Windows) or Option (Mac OS) and click the lock icon for the Menu Background layer in the T imeline to leave
Page 91

that layer unlocked but lock all the other layers, so that you don't accidentally select objects on those layers.
2.
Double-click the large orange rectangle to edit its group.
3.
Select the rectangle.
4.
In the P roperty inspector, click the Fill Color box.
5.
T ype #FF6600 in the color value field to apply a web-safe orange color.
P ress Enter or Return to apply the color.
6.
7.
T he DVD interface has its background, its buttons, and its video clip thumbnails. It's ready to go. T o make it interactive, all you need is
ActionScript, which you'll learn about in Lessons 7, 8, 9, and 10.
Page 92
Review
Review Questions
1
2
3
4
5
What is a symbol, and how does it differ from an instance?

Name two ways that you can import an asset into Flash.
When you import an Illustrator file, what happens if you choose to import layers as layers? As keyframes?
Describe the four button states in a button symbol's T imeline.
How can you change the opacity of a color or instance in Flash?
Review Answers
1
A symbol is a graphic, button, or movie clip that you create once in Flash and can then reuse throughout your
document or in other documents. An instance is a copy of a symbol located on the Stage or nested inside another symbol.
2
You can import an asset file to the library, which adds the asset only to the Library panel. You can also import an
asset file to the Stage, which places the asset on the Stage and automatically adds the asset to the Library panel.
3
When you import layers in an Illustrator file as layers, Flash recognizes the layers in the Illustrator document and
adds them as separate layers in the T imeline. When you import layers as keyframes, Flash adds each Illustrator layer to a separate
frame in the T imeline, and creates keyframes for them.
Button symbols include four states: Up, Over, Down, and Hit.
Up is the default state for the button.
Over determines the button's appearance when the mouse rolls over it.
Down determines the button's appearance when it is clicked.
Hit defines the active area, which is the area that responds to the mouse click.
5
T he opacity (or transparency) of a color or instance is determined by its alpha value. T o change the opacity of a
color, change the alpha value in the Color Picker. T o change the opacity for an instance, select Alpha from the Color menu in the
P roperty inspector, and then change the alpha percentage.
Page 93
4. Working with Text
T extdynamic or staticcan play a critical role in a Flash movie. You can animate it easily using a simple mask,
apply a filter to create a special effect, or use it to provide the viewer with essential information.
Lesson Overview
Create text in Flash

Format text
Convert text fields to symbols
Use masks to animate text
Organize layers in a T imeline
Work with layer folders
Copy objects from one layer to another
Apply filters to text
Use tweening to animate objects quickly
Page 94
Getting Started
You'll start the lesson by viewing the animated birthday card that you'll create as you learn to work with text in Flash.
1.
T he project is a whimsical animated electronic birthday card. In this lesson, you'll animate the cellphone graphic, create and format
text for the phone screen, and use a mask to reveal the text gradually.
2.
3.
Page 95
Organizing Layers in a Timeline

T he 04Start.fla file contains a single layer, called Assets. T he Assets layer contains symbols you'll use as you create the birthday card.
You'll need additional layers for the project, and it's good practice to organize the layers in a T imeline when you start a project.
You can import assets directly into the Library panel, but you may prefer to import them onto the Stage, so that you can arrange them
all at once before separating them into the layers that are appropriate for the animation you plan.
Adding a Layer for Actions

T o stop the sound file from looping, you'll use a simple action. T ypically, designers place actions on their own layer, making it easier to
troubleshoot or revise them later. In fact, the Actions layer is usually the top layer in the T imeline, so you can find it easily if you need
to modify the animation. T o keep things neat, you'll create a layer for the sound file directly below the Actions layer.
1.
Select the Assets layer, and click the Insert Layer icon twice.
2.
Name the top layer Actions.
3.
Name the second layer Sound.
Creating Layer Folders

Layer folders can help you keep your folders organized, especially in projects that require numerous layers. T hink through your project
before beginning, and create your layer folders before you need them. You'll save time later, as you'll know exactly where to look for a
specific layer, and you won't need to rearrange layers to make animations work as expected. For this project, you'll create a layer folder
to contain the text and battery layers.
1.
Select the Assets layer, and click the Insert Layer Folder icon (
2.
Name the folder T ext And Battery.
).
Adding Layers to Layer Folders

You'll add the text and battery layers to the T ext and Battery folder, and you'll add separate layers for the background objects and other
assets. As you arrange layers, remember that Flash displays the layers in the order they appear in the T imeline, with the top layer at the
front and the bottom layer at the back.
1.
Click the Insert Layer icon.
2.
Drag the new layer into the T ext And Battery folder, and name it Low Batt.
3.
Click the Insert Layer icon five times. Because the Low Batt layer was selected, the new layers are added to the T ext And Battery
Page 96

folder.
4.
Name the layers, from top to bottom: Birthday Message, Incoming T ext Message, Hi, Just Wanted, and I Hope.
5.
Select the Assets layer, and click the Insert Layer icon.
6.
Name the new layer Background.
7.
With the Background layer selected, click the Insert Layer icon, and name the new layer Cellphone.
Changing the Appearance of the Timeline

You can adjust the T imeline's appearance to accommodate your workflow. When you want to see more layers, select Short from the
Frame View pop-up menu in the upper-right corner of the T imeline. T he Short command decreases the height of frame cell rows.
You can also change the width of the frame cells by selecting T iny, Small, Normal, Medium, or Large.
Page 97
Placing Assets on Layers

All of the assets for this project were originally imported to the Stage, arranged on the Assets layer. You'll move them from the Assets
layer to the appropriate layers.
1.
Select the Assets layer. All of the objects on the Assets layer are selected. Click outside the Stage to deselect them.
2.
Holding down the Shift key, select the flower, floor, table, and wallpaper images on the Stage.
3.
Choose Edit > Cut.
4.
Select the Background layer, and choose Edit > Paste In P lace.
5.
Hide the Background layer by clicking the dot beneath the eye icon.
6.
Repeat steps 1-4 to move the battery from the Assets layer to the Low Batt layer, in the T ext And Battery folder.
7.
Repeat steps 1-4 to move the graphic of the cellphone and hand from the Assets layer to the Cellphone layer. (T he graphic is on
the pasteboard beneath the Stage; scroll down to see it.)
Deleting a Layer
You may work with some layers temporarily, using them to store assets, or to test effects. T o keep the T imeline tidy, delete layers you
no longer need. Because the Assets layer is now empty, you can safely delete it.
1.
Select the Assets layer.
2.
Click the Delete Layer icon. (
3.
Show the Background layer again to reveal its contents.
Moving an Object on the Timeline

T he battery shouldn't appear on the Stage until much later in the animation, so you'll move it from frame 1 to frame 199 in the
T imeline.
1.
Select the keyframe on frame 1 of the Low Batt layer.
2.
Drag the keyframe to frame 199.
Not sure which frame you've selected? T he current frame number is shown in the bar beneath the T imeline.
Adding a S ound File

A song plays with the animation in the birthday card. You'll add the song file to the Sound layer, and set it to synchronize with the
actions on Stage. T hen, add a stop action (using ActionScript) to keep the movie from looping back to the beginning it ends.
1.
Select the Sound layer.
2.
Select frame 47, and press F7 to insert a blank keyframe.
3.
In the P roperty inspector, select Corny_birthday.wav from the Sound menu. T he WAV file is already in the library.
4.
Select Stream from the Sync menu in the Property inspector.
Note
T he Sync option forces the graphics to sync to the audio, so that animation appears at the points you expect in the sound file.
Page 98
5.
Select frame 253 on the Actions layer, and press F7 to insert a blank keyframe. Frame 253 is where the audio file ends on the
Sound layer.
6.
7.
Choose Window > Actions to open the Actions panel. You type ActionScript in the Actions panel.
In the Actions panel, type
stop();
8.
Close the Actions panel.
Page 99
Using Tweens to Animate Objects

T weening is a quick way to create animation, whether you're moving an object to a new position, changing its brightness, or increasing
its size. You set up the objects and their properties in the first frame, set up the final properties in the last frame, and then apply tweens
to create all the steps in between.
T here are two kinds of tweens in Flash: motion tweens and shape tweens. Motion tweens affect movement or shifts in properties; shape
tweens actually morph an object from one shape to another.
For this project, you'll use motion tweens to gradually change the brightness of the background at the beginning of the animation, and
then to move the cellphone and hand onto the screen.
Tweening Brightness
T he background sets the stage for the greeting card. You'll tween the brightness so that the background objects gradually appear during
the first ten frames. First, you need to convert the objects on the Background layer to a single movie clip symbol so that you can apply
a motion tween to them.
Note
You could also tween alpha (transparency) values, but tweening the brightness is less processor-intensive and can therefore occur more
quickly.
1.
Select frame 1 of the Background layer. All the objects on the layer are selected.
2.
P ress F8 to convert the objects to a symbol. Name the symbol background_objects. Select Movie Clip for the T ype, and click
OK.
3.
Select frame 10 on the Background layer, and press F6 to insert a keyframe.
4.
Select any frame between frames 1 and 10 on the Background layer.
5.
6.
Select frame 1 in the Background layer, and click outside the Stage to deselect the contents and change the focus in the P roperty
inspector.
7.
8.
Select the instance of the background_objects symbol on the Stage.

In the P roperty inspector, choose Brightness from the Color menu. T ype 100 for the percentage.
9.
Lock the Background layer.
10.
Scrub the T imeline by moving the playhead across the frames. Flash displays each frame as you move the playhead.
Tweening Movement
You can also use a motion tween to tween an object's movement, as you did in Lessons 1 and 2. In this project, the graphic of the
cellphone and hand is currently in frame 1 of the Cellphone layer, and it's positioned below the background objects on the Stage. In the
birthday card, the cellphone appears on the Stage after the phone rings once in the sound file. So that the phone appears at the
appropriate time, you'll move the graphic to frame 77, and then move it fully onto the Stage by frame 84.
1.
Click the keyframe on frame 1 in the Cellphone layer, and drag it to frame 77.
2.
Select frame 84 in the Cellphone layer, and press F6 to insert a keyframe.
3.
Select any frame between frames 77 and 84 on the Cellphone layer.
Page 100

4.
5.
Select the keyframe on frame 84.
6.
Select the cellphone on the pasteboard.
7.
In the P roperty inspector, set the X value to 321 and the Y value to 267. P ress Enter or Return to apply the values. T he
cellphone's position matches that of the battery that will appear later.
8.
Scrub the T imeline to see the cellphone move up onto the Stage.
Page 101
Creating Text
T he phone message is a critical part of this birthday card animation. You'll create the text and format it, positioning it in the T imeline
to appear at the proper moment in the animation. T hen, you'll use masks to reveal the text more gradually, the way it would appear in a
text message on a cellphone. Later, you'll rotate the text to match the angle of the cellphone's screen.
About Text in Flash

What can you do with text in Flash? Just about anything. You can create text directly in Flash, or import it from another file. You can
orient text horizontally or vertically. You can format text, setting attributes such as font, text size, bold or italic, paragraph alignment,
and line spacing. You can rotate a text field, resize it, or convert it to a symbol. You can animate text and apply a filter, such as a drop
shadow or glow. You can even create dynamic text, with a variable defined differently at different points in the movieeven based on
the viewer's input. T his lesson can't cover all the ways you can use text in Flash, but it will give you a feel for the potential.
Adding Text to a Layer

T o create text in Flash, select the T ext tool, click on the Stage, and start typing. You'll begin by typing the text for the first two phone
messages and formatting them.
1.
Select frame 88 on the Incoming T ext Message layer (in the T ext And Battery folder), and press F7 to insert a blank keyframe.
2.
Select the T ext tool (
).
3.
In the P roperty inspector, select Static T ext from the pop-up menu. If Dynamic T ext is selected, the text won't appear in the
movie. (Dynamic text changes based on ActionScript. You'll work with dynamic text in Lesson 10.)
4.
Click an insertion point in the upper-left corner of the phone screen on the Stage.
5.
T ype Incoming, press Enter or Return, and then type text msg... T wo lines of text will appear on the phone screen.
6.
Choose Edit > Select All to select all the text.
7.
In the P roperty inspector, select Arial from the typeface menu, click the Bold icon, select black (#000000) for the color, and
type 13 for the text size.
8.
Click the Edit Format Options icon (
), and select 2 pts from the Line Spacing menu.
9.
Select frame 103 on the Incoming T ext Message layer and press F7 to insert a blank keyframe. T he text you typed will disappear
at frame 103.
10.
Select frame 108 on the Hi layer, and press F7 to insert a blank keyframe.
11.
Select the T ext tool, and click an insertion point at the upper-left corner of the phone screen.
Page 102

12.
T ype hi. it's, press Enter or Return, and then type me.
13. Choose Edit > Select All, and then format the text in the Property inspector with the following attributes: Arial, Bold, 16 point
text size, 4 point line spacing.
14. Select frame 126 on the Hi layer, and press F7 to insert a blank keyframe. T he text appears between frames 108 and 126 in the
movie.
Copying Text
You could create each set of text from scratch, but because the formatting will be the same for the remaining messages, it's easier to
copy and paste the text box and then replace the words.
1.
2.
Select frame 125 in the Hi layer.

With the Selection tool, select the text on the Stage.
Note
When you're working with text as type, such as when you're formatting characters, select it with the T ext tool. When you're
manipulating a text box as an object, such as when you're copying or rotating the text, select it with the Selection tool.
3.
Choose Edit > Copy.
4.
Select frame 130 on the Just Wanted layer, and press F7 to insert a blank keyframe.
5.
6.
Using the T ext tool, change the first line to jst wnted and the second line to 2 say.
7.
Select frame 151 on the Just Wanted layer, and press F7 to insert a blank keyframe. T he new text appears between frames 130
and 151 on the T imeline.
8.
Select frame 155 on the I Hope layer, and press F7 to insert a blank keyframe.
9.
Choose Edit > P aste In P lace. T he clipboard still contains the text from the Hi layer, so that text is pasted on the Stage.
10.
Using the T ext tool, change the first line to i hope u and the second line to hve a vry.
Page 103

11.
P ress Enter to add a third line, and type happy.
12. Select frame 199 on the I Hope layer, and press F7 to insert a blank keyframe. T his text appears between frames 155 and 199 on
the T imeline.
13.
Select frame 199 on the Low Batt layer, and choose Edit > Paste In P lace.
Note
You do not need to add a keyframe to frame 199 on the Low Batt layer because there is already a keyframe there. At frame 199, the
image of the battery appears on the Stage.
14.
Using the T ext tool, change the first line to low batt..., and delete the rest of the text.
Rotating Text
T he text doesn't match the angle of the phone. T he low battery warning should be above the battery icon, and it should be parallel to it.
You can rotate text using the T ransform panel.
1.
Using the Selection tool, shift the text so that it appears above the battery icon.
2.
3.
Select the text with the Selection tool.
4.
T ype -22 in the Rotate box in the T ransform panel, and press Enter or Return to apply it.
Page 104
5.
If you need to adjust the message further, select it with the Selection tool, and then nudge it with the arrow keys on your
keyboard.
Converting Text to a S ymbol

If you're going to use text multiple times, convert it to a symbol. Flash can use the same text over and over again, but only needs to
include the text in the file once, reducing the file size. Additionally, if you need to edit the text, you'll only need to do it once, and the
same changes will appear in every instance of the symbol.
1.
Select the text with the Selection tool.
2.
P ress F8 to open the Convert T o Symbol dialog box.
3.
Select Graphic for the T ype, name the symbol low_batt_text, and click OK.
Page 105
Animating Text with Masks

T here are many different ways to animate objects in Flash. In this project, you'll make the text gradually appear on the screen using
masks. In fact, it's actually the mask that is animatedyou'll stretch the mask to reveal more of the text as the movie proceeds. T his
method also makes it easier to edit the text if you need to, as you only need to change it in one place.
About Masks
Don't let the concept of Halloween masks confuse you about the purpose of masks in graphic applications such as Flash or Adobe
P hotoshop. A mask serves as a window to objects beneath it. T hat is, anything directly under the mask on the layers that lie beneath it
is visible; anything not included in the mask area is not visible on the screen. In Flash, a mask item can be a filled shape, a type object,
an instance of a graphic symbol, or a movie clip. You can mask multiple layers at once for a sophisticated effect.
T o use a mask, first create a mask layer. Place the mask item on the layer. Move the layer into the correct position in the T imeline. A
mask layer always masks the layer directly below it; to mask more than one layer, nest them under the mask layer. T hen, choose the
Mask command. T he layer immediately below the mask layer is linked to it, and the masked layer's name is indented in the T imeline.
You won't see the masking effect until you lock the mask layer and the layer or layers it affects.
Drawing Masks
You'll use a simple rectangle to mask the text, and then stretch the mask over time to reveal more text. Because there are multiple
screens of text, you'll need to create and resize the rectangle several times, but you only need one mask layer.
1.
Select the Incoming T ext Message layer, and click the Insert Layer icon.
2.
Name the new layer Mask.
Lock all the layers beneath the Mask layer to ensure you don't accidentally move anything on them.
3.
T o lock multiple layers at once, click the dot in the lock column for one layer and drag through the dots for the other
layers you want to lock.
4.
Select frame 88 on the Mask layer, and press F7 to insert a blank keyframe. T his keyframe should be directly above
the first keyframe on the Incoming T ext Message layer.
Select the Rectangle tool, and deselect the Object Drawing icon. Set the rectangle to have no stroke and a bright red fill.
5.
Note
You can use any color you want for the fill color of a mask; it won't show in the final movie. Bright red is easy to see.
6.
Zoom in to view the phone screen.
7.
Draw two overlapping rectangles that completely cover the words on both lines. However, on the second line, don't cover the
ellipsis (...).
Page 106
8.
Select frame 91 on the Mask layer, and press F6 to insert a keyframe.

9.
), and use it to stretch the mask shape to cover the first dot in the ellipsis.
Note
You can have only one mask item on the Stage at a time. In merge drawing mode, the overlapping rectangles merge to become a
single object, so that both lines of text are masked.
10.
Select frame 94 on the Mask layer, and press F6 to insert a keyframe.
11.
With the Free T ransform tool, stretch the mask shape to cover the second dot.
12.
Select frame 97, press F6, and stretch the mask shape to cover the third dot.
13.
Select frame 103, and press F7 to insert a blank keyframe. T his mask isn't needed past this keyframe, because the text
disappears from the screen at this frame.
14.
Select frame 108 on the Mask layer, and press F7 to insert a blank keyframe. T his keyframe should be directly above
the first keyframe in the Hi layer.
Page 107

15.
With the Rectangle tool, draw a rectangle covering the word hi.
16.
Using the same method you used on the first message, gradually cover the text with the mask: at frame 112, press F6
to add a keyframe and then cover all the text on the first line; at frame 116, press F6, and then stretch the mask shape down to
cover the word me.
Select frame 126, and press F7 to create a blank keyframe that ends this mask.
17.
18.
Select frame 130 on the Mask layer and press F7 to insert a blank keyframe. T his should be directly above the first
keyframe of the Just Wanted layer.
19.
With the Rectangle tool, draw a rectangle covering the word jst.
20.
Gradually stretch the mask over the text at the screen: At frame 136, press F6, and then cover the first line. At frame
141, press F6, and then draw a rectangle to cover 2. (Make sure the rectangles overlap, becoming one object.) At frame 146, press
F6, and draw an overlapping rectangle to cover the rest of the second line.
21.
Select frame 151 on the Mask layer, and press F7 to insert a blank keyframe.
22.
Select frame 155, and press F7 to insert a blank keyframe directly above the first keyframe in the I Hope layer.
23.
Draw a rectangle covering i on the first line.
24.
As you have for other messages, gradually cover the text by creating new keyframes and adjusting the mask. At frame 161,
cover i hope. At frame 167, cover the first line. At frame 173, draw a rectangle to cover hve. At frame 179, cover the second line. At
frame 186, draw a rectangle to cover happy.
Note
Don't forget to create a keyframe for each change, and make sure the rectangles overlap to become a single shape.
25.
Select frame 199 on the Mask layer, and press F7 to insert a blank keyframe.
Page 108
Creating a Blinking Effect

In the birthday card, the text is interrupted by a low battery message. T o make that battery icon blink, you'll simply insert keyframes
and blank keyframes, so that the battery appears and disappears from the Stage.
1.
Select the Low Batt layer.
2.
P ress F6 to insert keyframes at the following frames: 206, 213, and 220.
3.
P ress F7 to insert blank keyframes at the following frames: 203, 210, 217, and 224.
Applying the Mask

You've drawn the rectangles to mask the text, but the mask doesn't take effect until you apply it.
1.
Right-click (Windows) or Ctrl+click (Mac OS) the Mask layer.
2.
Choose Mask from the context menu. Flash indents the first layer under the Mask layer. You'll nest other layers later to mask
them, too.
Applying Onion S kinning

Onion skinning lets you see multiple frames on the Stage at once, so you can see how your animation moves. Here, you'll use it to see
the text as you rotate multiple layers at the same time.
1.
Click the lock icon above all the layers to lock them all.
2.
Unlock the Mask layer and the text layers beneath it, through the I Hope layer.
3.
Click the Edit Multiple Frames icon (
4.
) beneath the T imeline.
Click the Modify Onion Markers icon (
) beneath the T imeline, and select Onion All from the pop-up menu.
Page 109
5.
Click the Show As Outlines icon (
) for the Mask layer. With the masked rectangles as outlines, you can see all the text.
Rotating Multiple Layers

As you typed it, the message was at a different angle from the cellphone screen. You'll fix that now, by rotating all the relevant
layerstext and mask layersat once.
1.
Choose Edit > Select All. All of the text and masks are selected.
2.
In the T ransform panel, type -22 in the Rotate box, and press Enter or Return. All the text boxes and the masks rotate to
match the cellphone screen.
Note
If the T ransform panel isn't open, choose Window > T ransform.
Page 110
3.
With the Selection tool, move all the selected text to the center of the phone screen. You can use the arrow keys to nudge the
text into position.
4.
Deselect the Edit Multiple Frames icon.
Nesting Layers
By default, a mask layer affects one layer beneath it. However, you can use it to mask multiple layers if you nest them under the Mask
layer. When you lock the Mask layer and the affected layers, you can see the effects of the mask on the screen.
1.
Select the Incoming T ext Message layer, and then press Shift and select the Low Batt layer to select all the layers in between.
2.
Drag the layers on top of the Mask layer name; the mask icon darkens when the layers are positioned correctly. When you
release the mouse, all the selected layers are indented beneath the Mask layer.
3.
4.
Lock the Mask layer, and all the indented layers.

Scrub the T imeline to preview the animated text.
Page 111
Page 112
Using Tweens to Simulate a Shaking Motion

After the low battery message, the cellphone shakes. You'll create that shaking motion using motion tweens and rotation settings.
1.
Unlock the Cellphone layer.
2.
Select frame 228 in the Cellphone layer, and press F6 to insert a keyframe.
3.
Select frame 238, and press F6 to insert a keyframe.
4.
With frame 238 selected, select the phone graphic on the Stage.
5.
In the T ransform panel, type -18 in the Rotate box, press Enter or Return, and then use the Selection tool to move the
phone under the table.
Note
You may need to change the view to see the entire Stage. You can use the View pop-up menu above the Stage, or use the Zoom tool in
Reduce mode.
6.
Select any frame between frames 228 and 238. In the P roperty inspector, select Motion from the T ween menu.
7.
Select frame 230, press F6 to insert a keyframe, and then select the cellphone graphic on the Stage.
8.
In the T ransform panel, type -18 in the Rotate box, and press Enter or Return to apply it. Use the Selection tool to shift the
phone to the left.
9.
Select frame 232, press F6, and select the phone graphic.
10.
T ype 42 in the Rotate box, and press Enter or Return.
11.
Shift the phone to the right until it is almost to the right edge of the background.
12.
Select frame 234, press F6, and select the phone graphic.
13.
T ype -18 in the Rotate box, and press Enter or Return.
14.
Shift the phone to the left so that it is in a similar position as on frame 230.
Page 113

15.
Scrub through the T imeline from frames 228 to 238 to see the animation.
Applying Filters to Text

Filters are graphic effects that you can apply to text, buttons, and movie clips. Each filter includes settings that you can use to
customize its effect. After you type the text for the final birthday message, you'll apply a Glow filter to the word CHARGE to make it
stand out from the normal text around it.
1.
Unlock the Birthday Message layer.
2.
Select frame 241, and press F6 to create a keyframe.
3.
With the T ext tool, drag a text box across the right half of the top of the Stage.
4.
In the P roperty inspector, select Static T ext from the pop-up menu on the left.
5.
Select the following formatting: White (#FFFFFF), Arial, 28 points, Centered (
6.
).
T ype the name of the person you're making the card for. If you aren't making it for anyone in particular, type Andrew.
Note
If the text doesn't fit on one line, click the square in the upper-right corner of the text box and drag it to the left until the box is large
enough for the text.
7.
Create a second text box just below the first, and change the formatting to 25 points, Bold, and -2 line spacing. (T o edit line
spacing, click the Edit Format Options icon.)
8.
T ype T hought you would get a.
9.
Create another text box just below the second one, and change the text size to 48 points and the color to purple (#7F4484).
10.
T ype CHARGE.
11.
Create a final text box below CHARGE.
12.
Change the formatting to 25 points and white (#FFFFFF).
13.
T ype out of this card, and press Enter or Return.
14.
T ype HAP P Y BIRT HDAY! for the last line.
Page 114
15.
With the text tool, select CHARGE.
16.
In the P roperty inspector, click the Filters tab to open the Filters panel.
17.
Click the Add Filter icon (
), and select Glow from the pop-up menu.
18.
Specify the following settings for the filter: Blur X: 20; Blur Y: 20; Strength: 100%; Quality: High; Color: #FFFF00.
Page 115
19.
With the Selection tool, adjust the text boxes as needed.
20.
Choose Control > T est Movie to preview the card.
You've created an animated birthday card to brighten someone's day. You can adapt this card using different names or messages. Better
yet, use the techniques you learned in this lesson to create your own masterpiece.
Page 116
Review
Review Questions
1
2
3
4
5
How do you format text in Flash?

Which tool do you use to select text to edit it? Which tool do you use to rotate or move a text box?
How do you add a sound file to a layer?
What is a motion tween and how do you apply it?
How do you apply a filter to text?
Review Answers
1
T o format text, select it with the T ext tool, and then select options in the P roperty inspector. You can change the
typeface, text size, type style, paragraph alignment, and so on. Click the Edit Format Options icon to change the options related to
the text box, such as the indent, margins, and line spacing.
2
T o edit or format text, select it with the T ext tool. T o rotate, move, resize, or otherwise manipulate a text box,
select it with the Selection tool.
3
T o add a sound file to a layer, select a keyframe in the layer, and then select a sound file from the Sound menu in the
P roperty inspector. T he Sound menu lists sound files that are in the Library panel.
4
A motion tween applies incremental changes to frames, so that you don't need to reposition or modify objects for
each frame. T o apply a motion tween, specify the settings or position for an initial keyframe and for a final keyframe. T hen, click
between the keyframes in the T imeline, and select Motion from the T ween menu in the P roperty inspector.
5
T o apply a filter to text, first select the text with the T ext tool. T hen, click the Filters tab in the Property
inspector. Click the Add Filter icon, and select a filter. You can customize the filter settings in the Filters panel.
Page 117
5. Adding Animation
Using Flash CS3, you can change almost any aspect of an object over time: position, color, transparency, size,
rotation, and more. Using shape tweens, you can even morph one object into another.
Lesson Overview
Animate objects using motion tweens

Morph objects using shape tweens
Understand the difference between motion and shape tweens
Nest symbols
Animate motion along a path
Use masks to animate objects
Animate transparency
T his lesson will take approximately two hours to complete. If needed, remove the previous lesson folder from your hard drive, and copy
the Lesson05 folder onto it.
Page 118
Getting Started
Start by viewing the finished movie file to see the animated title page that you'll create in this lesson.
1.
T he project is an animated title page for a cartoon about an alien creature. In this lesson, you'll animate the alien's arms to move up
and down, use a mask to make the eyes blink, use motion tweens to enlarge the alien and position it on the Stage, use a motion guide to
loop a spaceship across the Stage, and use shape tweens to morph the smoke from the spaceship into the letter O in the title.
2.
3.
4.
Choose Fit In Window from the View pop-up menu above the Stage, so that you can see the alien on the pasteboard.
5.
Page 119
About Animation
Animation is the movement, or change, of objects through time. Animation can be as simple as moving a box across the Stage from one
frame to the next. It can also be much more complex. As you'll see in this lesson, you can animate many different aspects of a single
character: each limb, for example, as well as eyes, ears, or tongue. You can move objects across space, change their color or
transparency, change their size, and even change them into different shapes.
T o animate objects in Flash, you create keyframes on the T imeline. You've used keyframes in earlier lessons. At each keyframe, Flash
records the current state of the Stage: the objects' position, color, size, shape, and other attributes. T o create a gradual animation, you
can create a keyframe for each frame, and change the objects a small amount for each one. It's faster and easier, though, to take
advantage of motion and shape tweens in Flash: you create the first keyframe and the last, and Flash sets up the intermediate frames for
you.
Motion tweens create animation frames for changes in position on the Stage and for changes in size, color, or other attributes. You've
used motion tweens in earlier lessons to animate the movement or brightness of objects on the Stage. Shape tweens create animation
frames to change one shape into another. For example, in this lesson, you'll morph a cloud of smoke into a letter O. T here is no way to
make that change by setting different attributes for the object; the initial object and the final object in the animation are inherently
different. Shape tweens make the transformation from one to the other appear smooth.
Flash also provides a way to quickly animate motion that is more complicated than a straight path. You can create a motion guide with
as complex a path as you like, and then attach your object to it, and apply motion tweening. Flash keeps the object on the path as it
progresses through the frames.
Page 120
Setting Up the Project File

T he 05Start.fla file contains a single layer called Alien. An alien character is next to the Stage, and the symbols that make up that
character are included in the Library panel. Other objects have been created in Illustrator, including the title text, a spaceship, a planet,
and a cloud of smoke. Before you animate the objects on the Stage, you'll import layers and symbols from Illustrator and set up the
T imeline.
Importing Layers from an Illustrator File

Many designers prefer to draw objects in Illustrator and then import them into Flash. As you've done in previous lessons, you'll import
Illustrator layers as Flash layers, and they'll appear in the T imeline. You'll import the objects to the Stage so they appear next to the
alien. First, set the preferences for the Illustrator import filter so that the symbols automatically import with a center registration point.
1.
2.
Choose Edit > P references (Windows) or Flash > P references (Mac OS). Click AI File Importer in the list on the left.
For Movie Clip Registration, select the center registration point, and then click OK to close the dialog box.
3.
4.
Select Assets.ai from the Lesson05/05Start folder, and click Open (Windows) or Import (Mac OS).
5.
In the Import T o Stage dialog box, select all the layers and symbols. T he graphics on each layer are already movie clip symbols,
denoted by the movie clip icon in the dialog box.
Page 121

6.
Select Flash Layers from the Convert Layers T o menu.
7.
Select P lace Objects At Original P osition.

Click OK.
8.
Flash imports the layers into the T imeline. It adds the symbols to the library, and places instances of them next to the Stage with the
alien. Flash placed the instances in the same positions they occupied in the Illustrator file. T hey're next to the Stage, easy to select, but
the Stage itself remains empty until you move objects onto it.
Organizing the Timeline

T he layers appear in the T imeline in the order they were listed in Illustrator. You'll add layers for actions and sound, and move the Alien
layer between two other layers. T hen you'll extend the layers to have 150 frames.
1.
Select the Cloud Morph layer, and then click the Insert Layer icon two times to create two new layers.
2.
Name the first layer Actions, and the second layer Audio.
Move the Alien layer between the T itle: Spaced and Spaceship layers. T he layers in the T imeline should be in this order:
3.
Actions
Audio
Cloud Morph
T itle: O
T itle: U
T itle: T
T itle: Spaced
Alien
Spaceship
P lanets
4.
Select frame 150 on the Actions layer, and then press Shift and select frame 150 on the Planets layer, so that frame 150 is
selected on all the layers.
5.
P ress F5 to insert frames to frame 150.
T he content from frame 1 is extended to every frame through frame 150.

Page 122
Page 123
Animating a Movie Clip Symbol

Movie clip symbols have their own T imelines, so they provide great flexibility for animation. You can also nest movie clip symbols
within each other. In fact, the alien character is a symbol, with other symbols for the head, arms, and so forth nested inside it.
Editing a S ymbol
T o edit a symbol, double-click it on the Stage or in the Library panel. When you double-click it on the Stage, you can edit it in place;
Flash dims the other objects on the Stage, but you can still see them. When you double-click the symbol in the Library panel, only the
symbol is visible while you edit it.
When you edit a movie clip symbol, you can add layers and keyframes to its T imeline. In fact, you can do just about anything with a
movie clip symbol T imeline that you can do with the main T imeline.
You'll use a motion tween to resize and move the planet graphic as the movie plays.
1.
Choose View > Magnification > 50% so that you can see everything on the pasteboard.
2.
Select the planet on the pasteboard, and in the Property inspector, type 0 for the X value and 0 for the Y value. T he planet
moves onto the Stage.
3.
1.
Double-click the planet on the pasteboard. Flash opens the planet symbol's T imeline, which includes a single layer named Layer
4.
Select frame 280 in Layer 1, and press F6 to insert a keyframe.
5.
Select frame 140, and press F6 to insert another keyframe.
6.
With frame 140 selected, select the planet on the pasteboard.
7.
In the P roperty inspector, type 100 for the X value and 100 for the Y value. Press Enter or Return to apply the value. T he
planet graphic shifts down and to the right.
8.
9.
Select any frame between frames 1 and 140, and select Motion from the T ween menu in the P roperty inspector.
You've created two motion tweens: one will animate movement from frame 1 to frame 140, as the planet moves one direction and
grows smaller; and the other will animate movement from frame 140 to frame 280, as the planet moves the other direction and grows
larger.
10.
Select frame 140, and then select the planet instance on the Stage.
11.
12.
Change both the width and height to 50% in the T ransform panel, and press Enter or Return to apply the change.
If you're changing width and height the same amount, click Constrain in the T ransform panel. T hen, you only need to
enter the value once; the other one will change automatically.
Duplicating an Animated S ymbol
Page 124

You edited the planet symbol to include animation that causes the planet to move and to change size as the movie progresses. You'll
create additional instances of the planet symbol, and then modify each instance to create planets of different sizes.
1.
Click Scene 1 in the Edit bar above the Stage to return to the main T imeline.
2.
Select the planet on the pasteboard.
3.
P ress Alt (Windows) or Option (Mac OS), and drag the instance to another area of the Stage to copy it.
4.
Repeat step 3 twice, creating two more instances of the symbol.
5.
Select the first new instance, and change its width and height to 30 in the P roperty inspector.
6.
Change the width and height for the second new instance to 20, and for the third instance to 10. You now have four planets
on the Stage, each a different size.
7.
P ress Alt (Windows) or Option (Mac OS) as you drag multiple copies of each instance onto the Stage, so that you have at least
five planets of each size.
8.
P osition the planets to appear random (similar to the planets in the following image).
9.
Choose Control > T est Movie to view your animation. T he planets move in one direction, gradually getting smaller, and then
back again, gradually returning to their original size. If the planets seem too close together or appear too orderly, adjust their positions,
and then test the movie again.
Page 125
Working with Nested Symbols

A symbol may itself contain symbols; in fact, you can nest symbols within symbols within symbols, several layers deep. You can animate
each nested symbol separately, to create complex animations. In this project, you'll animate the alien's arms and eyes in nested symbols,
and then animate the entire body, as well.
T o edit a symbol, double-click it on the Stage or in the Library panel. If you want to edit a nested symbol on the Stage, you must first
edit the symbol that contains it, and then double-click the nested symbol.
Adding Layers to a S ymbol's Timeline

You'll edit the body symbol, nested in the alien symbol, to add layers for the blinking eyes.
1.
Select the Alien layer, and then select the alien_mc instance on the pasteboard.
Note
T he symbol is named alien, but the instance on the Stage is named alien_mc. You can give each instance of a symbol a unique name,
which is essential if you use ActionScript to control the instance.
2.
In the P roperty inspector, type 145 for the X value and 255 for the Y value to position the alien on the Stage. Press Enter or
Return to apply the values.
3.
Double-click the alien_mc instance on the Stage to edit the alien symbol. Flash displays the T imeline for the alien symbol.
4.
Select the Body layer in the T imeline, and click the Insert Layer icon twice.
5.
Name the top layer Left Blink and the second layer Right Blink.
6.
Select frame 100 on the Left Blink layer, and then press Shift and select frame 100 on the Right Arm layer to select frame 100
for all the layers.
7.
P ress F5 to extend each layer to frame 100.
Animating Nested S ymbols

T he alien symbol contains several nested symbols, including the arm symbols. You'll use motion tweens to animate the arms so that they
move up and down.
1.
Select frame 100 on both the Left Arm and Right Arm layers, and press F6 to insert a keyframe for each.
2.
Select frame 50 on both the Left Arm and Right Arm layers, and press F6 to insert a keyframe for each.
3.
Select any frame between frames 1 and 50 on the Left Arm layer, and select Motion from the T ween menu in the P roperty
inspector.
4.
Repeat step 3 to create a motion tween for the Right Arm layer.
5.
Select any frame between frames 50 and 100 on the Left Arm layer, and select Motion from the T ween menu in the P roperty
inspector.
6.
Repeat step 5 to create a motion tween for the Right Arm layer.
7.
Select frame 50 on the Left Arm layer, and then select the left arm on the Stage.
8.
In the T ransform panel, type -9 in the Rotate box, and press Enter or Return.
Note
Page 126

If the T ransform panel isn't visible, choose Window > T ransform.
9.
Select frame 50 on the Right Arm layer, and select the right arm on the Stage.
10. In the T ransform panel, select Skew, and then type 10 for the horizontal skew and -170 for the vertical skew. Press Enter or
Return to apply the values.
You can use the Free T ransform tool to rotate or skew the object on the Stage, but the Rotate and Skew options in the
T ransform panel give you precise control over movement.
Creating Nested S ymbols

Within the alien symbol is the alien_body symbol, which, in turn, contains the alien_head symbol, which contains the alien_head_eye
symbol. You'll use the alien_head_eye symbol as the basis for new symbols that will create the blinking effect.
1.
Use the Zoom tool to zoom in on the alien's head so that you'll be able to see the eye clearly. T o pan the Stage, press the
spacebar as you drag the mouse across the Stage.
2.
Double-click the alien's body on the Stage to edit the alien_body symbol.
3.
Double-click the alien's head on the Stage to edit the alien_head symbol. Flash displays the T imeline for the alien_head symbol,
which contains five layers.
4.
Select the Left Eye layer, and then select the left eye on the Stage.
5.
Choose Edit > Copy to copy the eye.
6.
Click alien on the Edit Bar above the Stage to return to the alien T imeline.
7.
Select frame 18 on the Left Blink layer, and press F7 to insert a blank keyframe. Do the same for the Right Blink layer.
8.
Select the empty keyframe on frame 18 of the Left Blink layer, and choose Edit > P aste In Center. T he left eye you copied
appears on the Stage.
Page 127
9.
Use the Selection tool to move the copy of the eye so that it is directly above the eye that is part of the body graphic. You may
need to use the arrow keys to nudge the eye into place.
10.
Lock the Body, Right Arm, and Left Arm layers so that you don't accidentally select them.
11.
Select the eye graphic that you just placed, and press F8 to convert it to a symbol.
12.
Select Graphic for the type, and name it alien_eyeblink. T hen, click OK.
Page 128
Using a Mask to Animate a Symbol

You've used masks in previous lessons to slowly reveal parts of a layer. In this lesson, you'll use a mask to show and hide the underlying
eye, creating a blinking effect. When the eye is blinking, the eyelid, which is the same color as the face, will show. When the eye is
open, the full eye will show.
Breaking Apart S ymbols

You just created a symbol, but now you need to break it apart so that you can work separately with the fill, pupil, and outline.
1.
Double-click the alien_eyeblink instance on the Stage to edit the symbol.
2.
Select the left eye on the Stage.
3.
Choose Modify > Break Apart. T he eye becomes editable pixels.
4.
Click in a blank area of the Stage to deselect the eye.
Preparing the Layers that will be Masked

You'll create the eyelid, which will appear when the eye is blinking.
1.
Select the pupil in the eye, and delete it.
2.
Select the white fill in the eye, and delete it. In the Library panel preview, you should see only the outline of the eye.
3.
Select the Paint Bucket tool (
4.
) in the T ools panel.
Click the Fill Color icon in the options area of the T ools panel, type #619AD2 for the color, and then press Enter or Return.
You're applying a color to the eyelid that is the same color as the alien's head.
5.
With the P aint Bucket tool, click anywhere inside the outline of the eye on the Stage. T he outline is filled with the blue color.
6.
With the Selection tool, select the fill.
7.
Choose Edit > Cut.
Page 129

8.
Click the Insert Layer icon, and name the new layer Inner Eye.
9.
Select the empty keyframe on frame 1 of the Inner Eye layer, and choose Edit > Paste In P lace.
10.
Rename Layer 1 Outer Eye.
11.
Move the Outer Eye layer above the Inner Eye layer in the T imeline.
12.
Select the Inner Eye layer, and then select the inner eye on the Stage.
13. Select the Stroke Color icon in the options area of the T ools panel, and enter color #619AD2 to match the color of the alien's
head.
Creating the Mask

You'll add the mask layer, and then draw two versions of the mask.
1.
Select the Inner Eye layer, and then click the Insert Layer icon.
2.
Name the new layer Mask.
3.
Select the Inner Eye layer, and then select the shape on it.
4.
Choose Edit > Copy.
5.
Select frame 1 on the Mask layer, and choose Edit > Paste In P lace.
6.
Change the fill color on the Mask layer to bright green, and then click outside the eye to deselect it.
Note
You can fill a mask with any color. Green is a good choice for this mask because it shows up well against the background elements.
7.
Select frame 3 in the Outer Eye layer, and then press Shift and select frame 3 in the Inner Eye layer to select frame 3 in all three
layers in the T imeline.
8.
9.
P ress F5 to extend all three layers to frame 3.

P ress Alt (Windows) or Option (Mac OS) as you drag the first frame of the Mask layer to frame 3 to duplicate the keyframe.
10. Select frame 3 on the Mask layer, and press Alt or Option as you drag it backwards one frame to duplicate the keyframe. Frames
1, 2, and 3 on the Mask layer should all have black dots, indicating keyframes.
11.
Lock the Inner Eye and Outer Eye layers.
12.
Click outside the mask to deselect it.
13. Select the Lasso tool (

), and then select the P olygon Mode icon (
Mode, the Lasso tool draws straight lines.
) in the options area of the T ools panel. In Polygon
14. With the Lasso tool, select a thin diagonal section across the eye, at a slight slant. Click the Lasso tool at each corner of the
polygon to change direction as you draw.
15.
P ress Delete to remove the section you drew from the mask.
Page 130
16.
Select the Mask layer, and then choose Modify > T imeline > Layer P roperties.
17.
Select Mask and Lock, and click OK.
18.
Drag the Inner Eye layer onto the Mask layer in the T imeline. T he Inner Eye layer is indented below the Mask layer, so the
mask applies to it.
T he preview should look similar to the one in the following image.
19.
Unlock the Mask layer.
20.
P ress Alt or Option as you drag the second keyframe to the first frame of the Mask layer to duplicate it.
21.
With the Lasso tool, select a diagonal section a little larger than the first, and then delete it.
22.
Lock the Mask layer to activate the mask.
23.
Unlock the Outer Eye layer.
24.
Select frame 5 on the Outer Eye layer, and press F6 to create a keyframe.
25.
With the Selection tool, select the oval on frame 5. In the P roperty inspector, change its stroke size to 5.
Page 131
Duplicating the Masked S ymbol

You've created one blinking eye. Now you need to duplicate it for the right eye. T he mask will automatically be included with the
graphic.
1.
Click alien in the Edit bar above the Stage to return to the alien symbol T imeline.
2.
Select the alien_eyeblink instance you just edited, and choose Edit > Copy.
3.
Select the empty keyframe on frame 18 on the Right Blink layer, and choose Edit > P aste In P lace.
4.
With the eye you just pasted still selected, choose Modify > T ransform > Flip Horizontal.
5.
Using the Selection tool, move the graphic directly above the right eye in the body symbol. You may need to use the arrow keys
to nudge the graphic.
Animating the Mask

T he alien will blink three times during the animation, and each blink should last just three frames. You'll add keyframes and then
duplicate the blinking frames twice to add blinks further in the T imeline.
1.
Select frame 21 in the Left Blink and Right Blink layers. (P ress Shift to select frames in multiple layers.)
2.
P ress F7 to insert blank keyframes. Frame 21 is the fourth frame after the blinking starts at frame 18; the blink will end at
frame 21.
3.
Select frame 18 on the Left Blink layer, and then press Shift, and select frame 21 on the Right Blink layer to select frames 18-21
on both layers.
4.
5.
P ress Alt (Windows) or Option (Mac OS), and drag the set of frames so that the first keyframe is on frame 50.
Select the set of frames 18-21 on both layers again, and then press Alt or Option as you drag the set of frames to frame 90.
T he blink animation now occurs at frame 18, frame 50, and frame 90. T o test the animation, choose Control > T est Movie.
Page 132
Page 133
Moving Objects Across the Stage

You've animated nested symbols so that the arms move and the eyes blink. Now you'll animate the alien so that he moves across the
Stage and grows larger, until he's in his final position.
1.
2.
Select frame 145 of the Alien layer, and press F6 to insert a keyframe.
3.
4.
Select frame 145 of the Alien layer, and then select the alien graphic on the Stage.
5.
In the T ransform panel, set the width and height to 160%, and press Enter or Return.
In the P roperty inspector, type 180 for the X value and 380 for the Y value, and press Enter or Return.
6.
P ress F6 to insert keyframes on the Alien layer at frames 29, 50, 63, 85, 110, 122, and 146.
7.
8.
Using the P roperty inspector and the T ransform panel, set the following values for each keyframe (remember that you need
to select the alien on the Stage each time):
Frame 1: X=42, Y=176, width and height=20%, rotate = 34 degrees

Frame 50: X=170, Y=260, width and height=130%, rotate = -5 degrees
Page 134
Page 135
Adding Sound
You'll add an electronic, space-age soundtrack to loop while the animation takes place.
1.
Select the empty keyframe on frame 1 of the Audio layer.
2.
In the P roperty inspector, select Blipsong.wav from the Sound menu.
3.
Select Start from the Sync menu and Loop from the pop-up menu next to it.
Page 136
Adding a Stop Action

You'll add a stop action at frame 150 to keep the animation from looping. Once the alien and title appear in their final position, they'll
stay there.
1.
Select frame 150 on the Actions layer, and press F7 to insert a blank keyframe.
2.
Select the blank keyframe you just created.
3.
Choose Window > Actions to open the Actions panel.
4.
stop();
Page 137
Animating Titles
You'll use motion tweens to animate the first word of the title, and then you'll animate the individual letters of the second word.
Animating Text as an Object

Currently, the word Spaced appears next to the Stage on the first frame. You'll move it to frame 54, and then use motion tweens to
animate it so that it's in its final position by frame 139.
1.
Select the T itle: Spaced layer.
2.
Select the title_spaced symbol on the pasteboard, and choose Edit > Cut.
3.
Select frame 54 on the T itle: Spaced layer, and press F7 to insert a blank keyframe.
4.
With the new keyframe selected, choose Edit > Paste In P lace.
Select frame 139 of the T itle: Spaced layer, and press F6 to insert a keyframe.
5.
6.
Select any frame between frames 54 and 139 on the T itle: Spaced layer, and select Motion from the T ween menu in the P roperty
inspector.
Insert a keyframe (press F6) at frames 70 and 133 on the T itle: Spaced layer.
7.
Using the P roperty inspector and the T ransform panel, set the following values for the title word at each of these keyframes:
8.
Frame
Frame
Frame
Frame
54: X=824, Y=108, width=70%, height=100%

70: X=324, Y=108, width=70%, height=100%
133: X=324, Y=108, width=100%, height=100%
139: X=324, Y=108, width=92%, height=95%
Animating Individual Letters

You'll place each of the letters from the word Out individually, starting with different frames, so that they appear one at a time.
1.
Select the T itle: O layer, and select the letter O on the pasteboard.
2.
Choose Edit > Cut.
3.
Select frame 141 on the T itle: O layer, and press F7 to insert a blank keyframe.
4.
5.
Select the letter O on the pasteboard. In the Property inspector, type 448 for the X value and 233 for the Y value. Press Enter
or Return to apply the values.
6.
Select the T itle: U layer, and then select the U on the pasteboard.
7.
Choose Edit > Cut.
8.
Select frame 142 on the T itle: U layer, and press F7 to insert a blank keyframe.
9.
10.
Select the U on the pasteboard, and move it to the right of the O on the Stage, aligned with the bottom of the O.
Page 138

11.
Select the T itle: T layer, select the T on the pasteboard, and choose Edit > Cut.
12.
Select frame 145 on the T itle: T layer, and press F7 to insert a blank keyframe.
13.
14.
Select the T on the pasteboard, and move it to the right side of the U, aligned with the bottom of the O.
Page 139
Morphing Objects
Shape tweens make it possible to smoothly transform one object into another, even when they're very different objects. You'll use shape
tweens to morph a puff of smoke into the letter O in the word Out.
T o apply shape tweening to groups, instances, or bitmap images, you must first break the elements apart.
S etting Up the Initial Object

You'll create a cloud and animate it to move to the position where it will morph into the letter O.
1.
Select the Cloud Morph layer, and then select the cloud graphic on the pasteboard.
2.
Choose Edit > Cut.
3.
Select frame 136 of the Cloud Morph layer, and press F7 to insert a blank keyframe.
4.
5.
Select the Show As Outlines icon (
objects behind it.
) for the Cloud Morph layer. T he cloud is outlined on the pasteboard, so that you can see
6.
Select frame 141 so that you can see the O on the Stage.
7.
Select the cloud graphic on the pasteboard and move it so that it covers and is centered above the O in the word Out. T o
move an outlined object, you must click on the outline itself.
8.
Deselect the Show As Outlines icon for the Cloud Morph layer.
9.
Select frame 136 of the Cloud Morph layer, and then press Alt (Windows) or Option (Mac OS) and drag it to frame 132 to create
a duplicate keyframe.
10. Select frame 132, and then select the cloud graphic. In the T ransform panel, set the width and height to 20%, and press Enter or
Return. In the Property inspector, select Brightness from the Color menu, and select 100%. P ress Enter or Return to apply the values.
11.
Page 140
12.
Select frame 137 of the Cloud Morph layer, and press F6 to insert a keyframe.
13.
Select the keyframe, and then select the cloud graphic.
14.
Choose Modify > Break Apart. Choose Modify > Break Apart two more times so that the cloud appears as an editable shape
on the Stage.
Note
When you import a symbol from Illustrator, it may be grouped multiple times. Each time you choose Modify > Break Apart, you
separate one group or break apart one object.
Using S hape Tweens to Transform an Object

You'll use shape tweens to transform the cloud into the O shape.
1.
Select frame 140 of the Cloud Morph layer, and press F7 to insert a keyframe.
2.
Select frame 141 on the T itle: O layer, and then select the O on the Stage.
3.
Choose Edit > Copy. Lock the T itle: O layer so you don't select it by accident.
Page 141

4.
Select the empty keyframe on frame 140 of the Cloud Morph layer.
5.
6.
Select the O that you just pasted on the Stage, and choose Modify > Break Apart three times until the fill appears as a shape
and the strokes are drawing objects. Click outside the O to deselect it.
7.
Select the inner stroke and delete it, and then select the outer stroke and delete it. Only the orange shape should remain.
8.
Select any frame on the Cloud Morph layer between frames 137 and 140, and select Shape from the T ween menu in the P roperty
inspector.
9.
Select frame 141 on the Cloud Morph layer, and press F7 to insert a blank keyframe.
Scrub the T imeline to view the transition from the cloud to the letter O.
Page 142
Page 143
Fading Objects In
In Flash, an object's alpha value determines its transparency or opacity. You'll animate the alpha values for the letters U and T so that
they start fully transparent and fade in to become opaque.
1.
Select frame 145 of the T itle: U layer, and press F6 to insert a keyframe.
2.
Select any frame between frames 142 and 145 on the T itle: U layer, and then select Motion from the T ween menu in the
P roperty inspector.
3.
Select frame 142 in the T itle: U layer, and then select the letter U on the Stage.
4.
In the P roperty inspector, select Alpha from the Color menu, and enter 25 for the percentage.
5.
Select frame 148 of the T itle: T layer, and press F6 to insert a keyframe.
6.
7.
Select frame 145 in the T itle: T layer, and then select the letter T on the Stage.
8.
In the P roperty inspector, select Alpha from the Color menu, and enter 25 for the percentage.
Page 144
Animating Motion on a Path

T o animate an object along a path, first create a motion guide; Flash creates a separate layer for the guide. T hen, draw the guide on the
Stage. Finally, align the object with the guide. You'll use a motion guide to loop a spaceship across the Stage so that it appears to produce
the puff of smoke that you animated to morph into the O.
Creating a Motion Guide

You can use a motion guide to draw just about any path for an object to follow on the Stage. You'll draw a motion guide that loops
around once, flies through the O, and then continues off the Stage.
1.
Select the Spaceship layer, and then select the spaceship on the pasteboard.
2.
Choose Edit > Cut.
3.
Select frame 92 of the Spaceship layer, and press F7 to insert a blank keyframe. T hen, choose Edit > Paste In P lace.
4.
Right-click (Windows) or Control-click (Mac OS) the Spaceship layer, and choose Add Motion Guide. Flash adds a Guide:
Spaceship layer above the Spaceship layer.
5.
Select frame 92 on the Guide: Spaceship layer, and press F7 to insert a blank keyframe.
6.
panel. (
Select the Pencil tool (
), and specify a blac k stroke. Select the Smooth curve option in the options area in the T ools
).
7.
With the P encil tool, draw a path across the Stage that loops at least once and flies through the middle of the O in the word
Out. Your path should look similar to the one in the following image.
Page 145
Aligning an Object with a Motion Guide

Once you've drawn the motion guide, you need to create motion tweens, and position the object at the beginning and the end of the
motion guide.
1.
Select frame 140 of the Spaceship layer, and press F6 to insert a keyframe.
2.
3.
In the P roperty inspector, select Orient T o P ath, Sync, and Snap.
4.
Select frame 140 on the Spaceship layer, and then use the Selection tool to select the spaceship on the pasteboard. Place the
spaceship at the end of the path so that it is off the Stage.
Note
T he transformation point of an object, displayed as a white circle, snaps to the motion path.
5.
Select frame 92 on the Spaceship layer, and then select the spaceship on the pasteboard.
6.
Move the spaceship to the start of the motion guide, on the left side of the Stage.
7.
Scrub through the T imeline to find the frame just before the dip in the motion guide (approximately frame 125), and press F6 to
insert a keyframe at that frame.
8.
Select any frame between the new keyframe and frame 140, and in the P roperty inspector, deselect Orient T o P ath.
T he Orient T o P ath option shifts the object so that it follows the path naturally. For example, the nose of the spaceship points up
when it's climbing and down when it's falling. Deselect Orient T o P ath when you no longer need or want the object to change its angle.
Page 146
9.
Choose Control > T est Movie to view the animation. You may want to make some adjustments to the motion guide. T he
smoke should appear to come from the spaceship, and then the smoke morphs into the O in the word Out.
Your cartoon title page is complete. You've successfully animated text and objectseven changing a cloud into the letter Oto
create an entertaining introduction to a whimsical character.
Page 147
Review
Review Questions
1
2
3
4
How does a motion tween differ from a shape tween?

How do you create a shape tween?
What is a motion guide, and how do you create one?
How can you edit a nested symbol?
Review Answers
1
A motion tween creates animation frames for changes in an object's position, size, transparency, color, or other
attributes. A shape tween creates animation frames to morph one object into another. Use a shape tween when the initial object has
a different shape from the final object.
2
T o create a shape tween, position the original object on the initial keyframe and the final object on the last
keyframe, and then click a frame between the keyframes and select Shape from the T ween menu in the P roperty inspector. You can
apply a shape tween to shapes you draw on the Stage, but to apply one to a group, instance, or bitmap image, you must first break
the element apart.
A motion guide provides a path for an object to follow in the frames included in a motion tween.
T o create a motion guide, right-click (Windows) or Control-click (Mac OS) the layer that contains the object you're animating, and
choose Add Motion Guide. Flash adds a guide layer to the T imeline. Insert a keyframe on the guide layer for the beginning of the
motion guide, and then draw a path on the Stage. Create a motion tween on the object's layer, beginning on the same frame as the
motion guide. In the P roperty Inspector, select Orient T o P ath, Sync, and Snap. Finally, place the object at the beginning of the
motion guide for the first keyframe and at the end of the motion guide for the final keyframe.
4
T o edit a nested symbol, double-click it in the Library panel. T o edit it in context, double-click the symbol that
contains it on the Stage, and then double-click the nested symbol.
Page 148
6. Creating Interactive Files
Let your viewers in on the action with buttons, menus, and other interactive elements that encourage them to
explore your site. Symbols and ActionScript work together to create consistent, effective user interfaces.
Lesson Overview
Manipulate gradients
Create buttons
Create animated rollover states
Duplicate buttons
Use a single symbol for multiple images
Edit nested symbols
Create and use frame labels
Name instances for use in ActionScript
Page 149
Getting Started
T o begin, view the photography portfolio page that you'll create as you learn to make buttons interactive in Flash.
1.
T he project is an interactive web page for a photographer. After the initial movie plays, viewers can click a button to see an enlarged
version of a photo. In this lesson, you'll create a background and add interactive buttons for the photos. ActionScript is already included
in the project file, but you'll set up the file so that the ActionScript works.
2.
3.
Double-click the 06Start.fla file in the Lesson06/06Start folder to open the initial project file in Flash. T he file includes seven
layers, and several assets are in the library. Frame 10 of the Actions layer already contains ActionScript.
4.
Page 150
About Interactive Files

Interactive files are files that change based on the viewer's actions. For example, when the viewer clicks a button, a larger version of an
image is displayed. Or when the viewer clicks a menu item, a different page appears on the screen. Interactivity can be complex,
requiring multiple calculations, or it can be as simple as changing a button's color.
In Flash, you use ActionScript to achieve most interactivity. In this project, ActionScript loads the initial movie, as well as the
appropriate photo when the viewer clicks a button. T he ActionScript is already included in this file, so you just need to create the
buttons, active selection marker, and other pieces that the ActionScript calls. You'll learn more about ActionScript 3.0 in Lesson 7.
Page 151
Designing a Layout
T he featured image won't fill the entire screen. You'll create an interesting background fill, simple frames for the loaded images and the
background, and a title to identify the page.
Creating a Gradient Fill

Create a gradient fill to add interest to the top of the Stage, and then flip a copy of it for the bottom of the Stage.
1.
2.
Select the empty keyframe on frame 1 of the Background layer.

Select the Rectangle tool. Select no stroke and the black-white linear gradient fill.
3.
Draw a rectangle on the Stage.
4.
Select the rectangle with the Selection tool.
5.
In the P roperty inspector, set the width to 800, height to 300, X to 0, and Y to 0. T he gradient fills the top half of the
Stage, which is 800 pixels by 600 pixels.
6.
Select 25% from the View pop-up menu on the Edit bar just above the Stage, so that you can see the entire gradient.
7.
Select the Gradient T ransform tool (
), grouped with the Free T ransform tool.
8.
Using the rotation icon in the upper-right corner of the gradient, rotate it 90 degrees, so that the gradient is black on the
bottom and white on the top.
Page 152
9.
Shorten the gradient by moving the bottom bar up, and then move the gradient center point so you see the gray transition
only at the top. Your gradient should look similar to the one in the image below.
Page 153
Select the gradient, and press F8 to convert it to a symbol.
10.
11.
In the Convert T o Symbol dialog box, select Movie Clip, set the registration point to the upper-left corner, and name the
symbol background_half. Click OK.
12.
Select the background_half symbol on the Stage with the Selection tool, and choose Edit > Copy.
13.
14.
Select the copy you just pasted, and choose Modify > T ransform > Flip Vertical.
In the P roperty inspector, enter 600 for the Y value.
15.
Creating half the background and duplicating it makes it much easier to create symmetrical gradients. Editing the symbol
automatically changes both instances, and keeps the file size small.
16.
17.
Select Show All from the View pop-up menu on the Edit bar above the Stage.
Lock the Background layer.
Page 154
Adding a S imple Frame

You'll create a 2-pixel frame that will appear around the content that loads, and then a 2-pixel frame border around the entire movie.
1.
Select the empty keyframe on frame 1 of the P hoto Frame layer.
2.
Select the Rectangle tool, and select the Object Drawing icon in the options area of the T ools panel.
3.
Select no fill and select #333333 for the stroke color.
4.
Draw a rectangle on the Stage.
5.
In the P roperty inspector, enter 2 for the stroke height, and then set the width to 734, the height to 404, the X value to 35,
and the Y value to 144.
Note
You created a rectangle that is 4 pixels wider and taller than the content area specified in ActionScript, placed 2 pixels to the left and
above it, to create a 2-pixel frame.
6.
Select the rectangle, and press F8 to convert the border to a symbol.
7.
In the Convert T o Symbol dialog box, select Movie Clip and name it photo_frame. Click OK.
8.
Select frame 10 on the P hoto Frame layer, and press F6 to insert a keyframe.
Page 155
9.
10.
Select frame 1 on the P hoto Frame layer, and then select the instance of the photo_frame symbol on the Stage.
11.
In the T ransform panel, set the width and height to 20%, and press Enter or Return.
12.
Unlock the Background layer, and select it. Click off the Stage to deselect the background gradients.
13.
Select the Rectangle tool. Set the fill to none, and the stroke color to #999999.
14. Draw a rectangle on the Stage, and then set the following values in the P roperty inspector: stroke height=2 pixels, width=800,
height=600, X=0, Y=0.
15.
Lock the Background layer again.
Adding a Title
In this project, the title appears on the background of the page, no matter what else is displayed.
1.
Select frame 1 on the T itle layer.
2.
Select the T ext tool, and click an insertion point in the upper-left corner of the Stage.
3.
T ype Leon Kritch P hotography.
4.
Select all the text. In the Property inspector, select Static T ext from the pop-up menu, select Arial for the typeface, and select
42 for the text size. Click the Left Align icon.
5.
Select just Leon Kritch, and change the text color to #FFCC00.
6.
Select just Photography, and change the text color to #333333.
7.
Select the text with the Selection tool. In the Property inspector, set the X value to 30 and the Y value to 10.
Page 156
Creating a S election Marker

You'll create a small rectangle that will appear above the selected button.
1.
Select frame 10 of the Marker layer, and press F6 to insert a keyframe.
2.
Select the Rectangle tool; specify no stroke and a fill color of #FFCC00.
3.
Draw a small rectangle under the word Leon.
4.
Select the rectangle. In the Property inspector, enter the following values: width=100, height=4, X=37, and Y=73.
5.
6.
With the rectangle selected, press F8 to convert it into a symbol.
In the Convert T o Symbol dialog box, select Movie Clip, and name the symbol marker. Click OK.
Page 157
Page 158
Creating Buttons
You can assign many different actions to buttons. In this project, each button displays a larger version of the button's image in the
content area of the Stage. You'll create several symbols to achieve this: graphic, movie clip, and button symbols all play a role.
A graphic symbol contains the images, and is set to display a particular frame. A movie clip symbol animates the Over state for the
button, so that the image expands slightly when selected. T he button symbol contains the graphic and movie clip symbols in its rollover
states.
You'll create one button with its symbols and rollover states, and then duplicate it to create additional buttons, which require only minor
modifications.
Creating a Graphic S ymbol with Multiple Frames

T he basis of the button will be a graphic symbol that contains all the button images, each on its own frame in a single layer. Start by
creating the graphic symbol, setting it to display only a single frame. T hen, distribute the images to separate layers, align them so that
they're stacked on top of each other, and move them to individual frames on the Graphics layer within the symbol.
1.
Select all the frames on the Assets layer, and drag them to the Buttons layer. All the images that were on the Assets layer are
now on the Buttons layer.
2.
Delete the Assets layer.
3.
Select the Buttons layer.
4.
5.
Select all the images on the pasteboard and drag them onto the Stage, beneath the word Leon.
With all the images selected, press F8 to convert them into a symbol.
6.
In the Convert T o Symbol dialog box, select Graphic, set the registration point to the upper-left corner, and name the symbol
small_previews. Click OK.
Page 159
7.
Select the small_previews symbol on the Stage. In the P roperty inspector, choose Single Frame from the pop-up menu next
to the Swap button.
Note
T he Single Frame option lets you display just one frame from a graphic symbol. You can display a different frame for each button, but
use the same graphic symbol for all of them.
8.
9.
Double-click the small_previews symbol to edit it.

Select all the images, and choose Modify > T imeline > Distribute T o Layers.
Flash adds a layer for each image file.

10.
Select all the images on the Stage.
11.
Choose Window > Align to open the Align panel.
12.
In the Align panel, select T o Stage (
13.
Select the Align Left Edge (
) to align the objects relative to the Stage.
) and Align T op Edge (
) icons. T he images are stacked on top of each other.
Page 160
14.
In the P roperty inspector, set the X value to 37 and the Y value to 79.
15.
Select Layer 1, and click the Insert Layer icon. Name the top layer Actions and rename Layer 1 Graphics.
16.
Select frame 7 of the Actions layer and frame 7 of the Graphics layer, and then press F5 to insert frames.
17.
Select all 7 frames on the Graphics layer, and press F7 to insert blank keyframes.
18.
Select frame 7 of the Actions layer, and press F7 to insert a blank keyframe.
19.
20.
Add a stop action by typing
21.
Select frame 1 on the Home.bmp layer, and drag it to the first keyframe on the Graphics layer.
stop();
22. Drag frame 1 from the P hoto1.bmp layer to the second keyframe on the Graphics layer, the P hoto2.bmp layer to the third
keyframe, and so on, until each image is on a separate keyframe in the Graphics layer.
23.
Delete the Home.bmp layer and each of the other image layers, which are now empty.
Page 161

24.
Creating a Button S ymbol

You'll use the small_previews symbol as the basis for the button symbol, which will include rollover states. For the Down state, you'll
change the brightness and add the sound of a camera shutter. For the Over state, you'll create a movie clip symbol that you'll animate to
zoom in slightly when the button is selected.
1.
Select the small_previews instance on the Stage, and press F8 to convert it to a button symbol, which will include frames for
rollover states.
2.
In the Convert T o Symbol dialog box, select Button, and name the symbol home_button. Click OK.
3.
Double-click the home_button symbol on the Stage to edit it.
4.
Click the Insert Layer icon. Name the top layer Sound, and rename Layer 1 Graphics.
5.
Select the Hit frames for both layers, and press F5 to add frames. Because the Hit frame contains the same content as the Up
frame, the hit area will be defined by the symbol shape.
6.
Select the Down frame in the Sound layer, and press F7 to insert a blank keyframe.
7.
Select the keyframe in the Down frame of the Sound layer, and in the P roperty inspector, select Camera_shutter.wav from
the Sound menu. Select Start from the Sync menu.
T he sound of a camera shutter will play when a viewer clicks the button.
8.
Select the Over and Down frames in the Graphics layer, and press F6 to insert keyframes.
Page 162

9.
10.
Select the Down frame on the Graphics layer, and then select the graphic symbol on the Stage.
In the P roperty inspector, select Brightness from the Color menu, and select 70 for the percentage.
Move the playhead between the Up and Down frames to see the effect. When the button is selected, its brightness will fade.
Animating a Rollover S tate

In the final website, a button's image is magnified when the mouse rolls over it. T o animate the Over state for the thumbnail button, you
need to create a movie clip symbol.
1.
Select the Over frame on the Graphics layer, and then select the graphic symbol on the Stage.
2.
P ress F8 to convert it to a symbol. In the Convert T o Symbol dialog box, select Movie Clip, set the registration point to the
upper-left corner, and name the symbol home_over_anim. Click OK.
3.
4.
Double-click the home_over_anim symbol on the Stage to edit it.

Click the Insert Layer icon 3 times. Name the layers, from top to bottom, Actions, Sound, Mask, and Image.
5.
Select frame 9 on the Actions layer. P ress the Shift key, and select frame 9 of the Image layer, so that frame 9 is selected on all
four layers. T hen, press F5 to add frames.
Page 163

6.
Select frame 9 on the Actions layer, and press F7 to insert a blank keyframe.
7.
Choose Window > Actions to open the Actions panel. Enter a stop action by typing
stop();
8.
Select frame 1 in the Sound layer. In the P roperty inspector, select Camera_zoom.wav from the Sound menu. Select Start
from the Sync menu.
T he sound of a camera zoom lens will play when the viewer moves the mouse over a button.
9.
10.
Select frame 1 on the Mask layer. Select the Rectangle tool, with no stroke and a bright green fill.
Draw a rectangle over the image on the Stage. It should be the same size as the photo.
11.
12.
Select the rectangle. In the Property inspector, assign the following values: width=100, height=55, X=0, and Y=0.
Lock the Mask layer. Click the outline icon for the Mask layer to display the mask in outline mode.
Page 164
T he mask restricts the part of the image that is visible. Even when the thumbnail is magnified, only the part of it that fits the
dimensions of the button will be visible.
13. Select frame 9 on the Image layer, and press F6 to insert a keyframe. T hen, select any frame between frames 1 and 9, and in the
P roperty inspector, select Motion from the T ween menu.
14. Select frame 5 on the Image layer, and press F6 to insert a keyframe. Select the graphic on the Stage, and in the T ransform
panel, enter 150% for the width and height.
15.
In the P roperty inspector, set the X value to -75 and the Y value to -132. T hen select Brightness from the Color menu, and
select 60 for the percentage.
Note
If the T ransform panel isn't open, choose Window > T ransform.
Page 165
16.
Right-click (Windows) or Control-click (Mac OS) the Mask layer. Select Mask from the context menu.
Flash indents the Image layer below the Mask layer, and locks them both, so the mask is applied.
17.
18.
Choose Control > Enable Simple Buttons.
19.
Click the button. You should hear the shutter sound and see the Down state of the button.
20.
Choose Control > Enable Simple Buttons again to deselect it.
Creating Additional Buttons

Now that you've created one button, the others are much easier. You'll duplicate the button and the animation symbol for the Over
state, and then modify them to display a different frame in the small_previews symbol.
1.
In the Library panel, right-click (Windows) or Control-click (Mac OS) the home_button symbol. Select Duplicate from the
context menu.
Page 166
2.
In the Duplicate Symbol dialog box, select Button, and name it section1_button. Click OK.
3.
In the Library panel, right-click or Control-click the home_over_anim symbol, and select Duplicate from the context menu.
4.
In the Duplicate Symbol dialog box, select Movie Clip, and name the new symbol section1_over_anim. Click OK.
5.
In the Library panel, double-click the icon for the section1_over_anim symbol to edit it.
6.
Unlock the Image layer, and select frame 1 on the Image layer.
7.
Select the instance of the small_previews symbol on the Stage.
8.
In the P roperty inspector, type 2 in the First box to display the second frame.
9.
Select frame 9 on the Image layer, select the instance of the small_previews symbol on the Stage, and type 2 in the First field in
the P roperty inspector.
10. Select frame 5 on the Image layer, select the instance of the small_previews symbol on the Stage, and type 2 in the First field in
the P roperty inspector.
11.
In the Library panel, double-click the section1_button symbol to edit it.
Page 167

12. Select the Up frame on the Graphics layer, select the instance of the small_previews symbol on the Stage, and then type 2 in the
First field in the P roperty inspector.
13.
Select the Down frame, select the instance of the symbol on the Stage, and type 2 in the First field in the Property inspector.
14.
Select the Over frame in the Graphics layer, select the instance of the home_over_anim symbol on the Stage, and click Swap
in the P roperty inspector.
15.
16.
In the Swap Symbol dialog box, select section1_over_anim, and click OK.
17.
Drag an instance of the section1_button symbol from the Library panel onto the Stage. P lace it next to the instance of the
home_button symbol.
18.
Choose Control > Enable Simple Buttons. T est both buttons, and then choose Control > Enable Simple Buttons again to
deselect it.
Note
T o save time, we've duplicated the buttons for you. If you prefer to duplicate the buttons yourself, repeat steps 1-15 for each of the
remaining images.
19.
Drag an instance of each button from the Section Buttons folder in the Library panel into position on the Stage. Arrange
them from left to right, next to the buttons you've already positioned. Be sure to drag the buttons and not the animated movie clips
Page 168

from the Section Buttons folder.
Aligning Buttons
T he buttons are all on the Stage. Now you just need to line them up tidily above the photo frame.
1.
Select frame 10 in the Buttons layer so the photo frame is full-size on the Stage.
2.
Align the left edge of the home button with the left edge of the photo frame on the Stage. Align the right edge of the section
6 button with the right edge of the photo frame.
3.
Select all seven buttons. In the Align panel, deselect T o Stage, click the Distribute Horizontal Center button, and then click
the Align T op Edge button.
4.
With all the buttons still selected, in the Property inspector, enter 77 for the Y value.
Page 169
Activating the Buttons

You've created buttons that include rollover states. Frame 10 of the Actions layer in the main T imeline already includes ActionScript
that listens for the button clicks and displays the appropriate image when the button is released. Now the buttons need to have the
names used in the ActionScript. T o call the button, the ActionScript refers to an instance name. You'll name each button instance to
match the ActionScript references.
You'll also animate the marker symbol you created earlier to identify the active selection.
Naming Instances
Name each button instance so that it can be referenced by ActionScript.
1.
Select the Buttons layer, and then click the pasteboard to deselect the buttons.
2.
Select the first button on the Stage.
3.
T ype btn1_btn in the Instance Name box.
4.
Name each of the other buttons btn2_btn, btn3_btn, btn4_btn, btn5_btn, btn6_btn, and btn7_btn.
5.
Lock the Buttons layer.
Labeling Frames
You can label frames in Flash to make it easier to reference frames in ActionScript, and to give you more flexibility. If you want to
change the frame at which an action occurs, you can move the label, rather than having to locate every reference to the frame number
in the script. You'll label frames to use when animating the selection marker for the buttons.
1.
2.
Select frame 10 on the Marker layer. T hen select the marker on the Stage.
In the P roperty inspector, type marker_mc in the Instance Name box.
3.
Double-click the marker_mc instance on the Stage to edit the symbol.
4.
Click the Insert Layer icon.
5.
Name the new layer Labels, and rename Layer 1 Active Selection.
6.
Select frame 49 in both the Labels and Active Selection layers, and press F5 to insert frames.
7.
Select frame 7 in the Labels layer, and press F6 to insert a keyframe.
8.
In the Labels layer, add keyframes to frames 14, 21, 28, 35, and 42.
Page 170

9.
Select frame 1 on the Labels layer.
10.
In the P roperty inspector, type home in the Frame Label box.
11.
Label the remaining keyframes section1, section2, section3, and so on.
Animating the Active S election Marker

You've labeled the frames so that each section represents one of the buttons. Now, you'll move the active selection marker to
correspond with each button. In order to move the marker, you must first convert it to a symbol that you can animate within the
marker symbol.
1.
Select frame 1 of the Active Selection layer, and select the marker symbol on the Stage.
2.
P ress F8 to convert it to a symbol. Select Movie Clip, and name the symbol active_selection, and then click OK.
3.
Select the active_selection symbol on the Stage, and align its left edge with the left edge of the home button. Nudge it so that
it is slightly above the button.
4.
Select frame 7 in the Active Selection layer, directly beneath the section1 label. Press F6 to insert a keyframe.
5.
Select the active_selection symbol on the Stage, and press the Shift key as you move it over the second button. P ressing the
Shift key constrains the movement so it's easier to keep the object horizontal.
Page 171
6.
Select frame 14 in the Active Selection layer, press F6 to insert a keyframe, and move the active_selection symbol over the third
button.
7.
Repeat step 6 to move the active_selection symbol over the fourth button for frame 21, the fifth button for frame 28, the
sixth button for frame 35, and the last button for frame 42.
8.
Select frame 1 in the Labels layer, and choose Windows > Actions to open the Actions panel.
It's good practice to create a separate Actions layer for ActionScript, so that you can quickly find, edit, and troubleshoot the script.
However, you can apply script to a frame in any layer. Because you're only creating a simple stop action, you don't need a separate
Actions layer in this symbol's T imeline. When you apply ActionScript, Flash adds a lowercase a to the frame.
stop();
9.
Enter a stop action in the Actions panel by typing
10.
Close the Actions panel, and click Scene 1 to return to the main T imeline.
11.
Choose Control > T est Movie. Click each button. When the button is released, the appropriate photo should load in the
center of the Stage.
Page 172

T he website is interactive, so viewers can see each photo up close and return to the initial movie file. You created the background, the
buttons, the selection marker, and the other elements that worked with ActionScript to make it possible. In the next chapter, you'll
learn how to write your own ActionScript.
The ActionScript Behind the Scenes

You created the symbols, named the instances, and put everything into place for the ActionScript. Here's how the ActionScript used the
instance names you put in place. You'll learn about ActionScript in Lesson 7.
When the event listener recognizes that the first frame is playing (that is, that the website has been opened), ActionScript loads the
movie home.swf at the coordinates of the photo frame.
T hen it moves the marker_mc instance (the active selection marker you created) to the frame labeled "home." At that frame, you
positioned the marker above the first button.
stop();
var myloader:Loader = new Loader();
addEventListener(Event.ENTER_FRAME, home);
function home(e:Event):void {
removeEventListener(Event.ENTER_FRAME, home);
var request:URLRequest = new URLRequest("home.swf");
myloader.load(request);
addChild(myloader);
myloader.x=36;
myloader.y=145;
marker_mc.gotoAndStop("home");
}
Each remaining section of the script activates one button. An event listener listens for the mouse click, and then ActionScript loads the
appropriate photo at the photo frame coordinates, and it moves the marker_mc instance to the corresponding frame label.
Note that the buttons are referred to by their instance names (btn1_btn, and so on), and that the marker is referred to by its instance
name, marker_mc.
btn1_btn.addEventListener(MouseEvent.CLICK, image1);
function image1(event:MouseEvent):void {
var request:URLRequest = new URLRequest("home.swf");
addChild(myloader);
myloader.x=36;
myloader.y=145;
marker_mc.gotoAndStop("home");
}
btn2_btn.addEventListener(MouseEvent.CLICK, image2);
function image2(event:MouseEvent):void {
var request:URLRequest = new URLRequest("photo1.jpg");
addChild(myloader);
myloader.x=36;
myloader.y=145;
marker_mc.gotoAndStop("section1");
}
Page 173
Review
Review Questions
How can you label frames, and when is it useful?
Which tool lets you change the direction for a gradient?
How can you test a button on the Stage?
How do you name an instance, and why is it necessary?
Describe a quick way to create multiple layers, each containing a separate object.
1
2
3
4
5
Review Answers
1
T o label a frame, create a keyframe for it, and then type a name in the Frame Label box in the Property inspector.
You can label frames in Flash to make it easier to reference frames in ActionScript, and to give you more flexibility. If you want to
change the frame at which an action occurs, you can move the label, rather than having to locate every reference to the frame
number in the script.
2
T he Gradient T ransform tool, grouped with the Free T ransform tool, lets you rotate, resize, or change the center
point for a gradient.
3
T o test a button on the Stage, choose Control > Enable Simple Buttons.
4
T o name an instance, select it on the Stage, and then type in the Instance Name box in the P roperty inspector. You
need to name an instance if you plan to refer to it in ActionScript.
5
T o quickly move objects to individual layers, select the objects on the Stage, and then choose Modify > T imeline >
Distribute T o Layers.
Page 174
7. ActionScript Basics
ActionScript 3.0 dramatically extends the functionality of Flash. It's a robust language, worth getting to know
whether you want to create simple interactivity or complex applications.
Lesson Overview
Create basic scripts using ActionScript

Use the Actions panel
Use Script Assist
Add a stop action
Work with conditional statements
Load data from a URL
Work with event listeners
Assign actions to buttons
T his lesson will take approximately an hour to complete. If needed, remove the previous lesson folder from your hard drive, and copy
the Lesson07 folder onto it.
Page 175
Getting Started
In this project, you'll add scripting to a website that promotes the DVD for which you created an interface in Lesson 3.
1.
Open the 07End.swf file in the Lesson07/07End folder to see the final website. Click each button; the text in the center of the
page changes to describe the cast, crew, and release dates for the movie. Close the file.
You'll create the script that loads the appropriate text when each button is clicked: home, cast, crew, and release dates. Additionally,
you'll use a conditional statement to loop to the first frame until the movie finishes loading.
2.
In Flash, choose File > Open. Select the 07Start.fla file in the Lesson07/07Start folder, and click Open. All of the creative work
is done for you. You just need to add the script to load the file and make the buttons function properly.
3.
Page 176
Working with ActionScript 3.0

Adobe Flash CS3 uses ActionScript 3.0, a robust scripting language, to extend the functionality of Flash. While ActionScript 3.0 may
seem intimidating to you if you're new to scripting, you can get great results with some very simple scripts. As with any language, you'll
do best if you take the time to learn the syntax and some basic terminology.
About ActionS cript

ActionScript, similar to JavaScript, lets you add more interactivity to Flash animations. In this lesson, you'll use ActionScript to attach
behaviors to buttons, load text files from a URL, and stop a preloader when the main file has finished loading. As you've done in earlier
lessons, you can use ActionScript for such simple tasks as stopping an animation from looping, but you can also use it for much more
complex programming tasks.
You don't have to be a scripting expert to use ActionScript. In fact, for common tasks, you may be able to copy script that other Flash
users have shared. However, you'll be able to accomplish much more in Flash and feel more confident using the applicationif you
understand how ActionScript works.
T his lesson isn't designed to make you an ActionScript expert. Instead, it introduces common terms and syntax, walks you through a
simple script, and provides an introduction to the ActionScript language. Additionally, the ScriptAssist.mov movie in the
Movies\Lynda.com folder on this book's CD provides an introduction to ActionScript, and especially to its Script Assist feature.
If you've used scripting languages before, the documentation included in the Flash Help menu may provide all the additional guidance you
need to use ActionScript proficiently. If you're new to scripting and want to learn ActionScript, you may find an ActionScript 3.0 book
for beginners helpful.
Understanding S cripting Terminology

Many of the terms used in describing ActionScript are similar to terms used for other scripting languages. T he following terms are used
frequently in ActionScript documentation:
Variable
A variable represents a specific piece of data, which may or may not be constant. When you create, or declare, a variable, you also
assign a data type, which determines what kind of data the variable can represent. For example, a String variable holds any string of
alphanumeric characters, while a Number variable must contain a number.
Suppose you wanted to assign a variable to count the number of frames in a movie. You could name the variable frames, assign an initial
value of 0, and set the script to add 1 when it moves to another frame.
var frames = 0;
currentframes = frames + 1;
Note
Variable names must be unique, and they are case-sensitive. T he variable frames is not the same as the variable Frames. Variable names
can contain only numbers, letters, and underscores, and they cannot begin with a number. For example, you can name a variable
frames_2 or frames2, but not 2frames or frames 2.
Ke yword
In ActionScript, a keyword is a reserved word that is used to perform a specific task. For example, var is a keyword, used to create a
variable.
You can find a complete list of keywords in Flash Help. Because these words are reserved, you can't use them as variable names or in
other ways. ActionScript always uses them to perform their assigned tasks.
Param e te rs
P arameters provide specific details and are the values between parentheses () in a line of code. For example, in the code
gotoAndPlay(3); the parameter instructs the script to go to frame 3.
Fu n ction
A function is a group of statements that you can refer to by name. Using a function makes it possible to run the same set of statements
without having to type them repeatedly into the same script.
For example, you could script a button to scale a movie clip by a certain percentage. T he script might contain three lines. T hat's fine
for one button, but if you want five buttons to perform the same task, you can create a function that contains three lines, and then refer
to the function name to apply those lines of code for each button.
C lass
In ActionScript 3.0, every object is defined by a class, which is an abstract representation of an object. You've already worked with
Page 177

MovieClip and Button classes in Flash. A class is a category of objects that share the same methods and properties. For example, if Dog
is a class, its properties include four legs, fur, and a tail.
ActionScript contains more than 100 built-in classes, which are the predefined data types you use to make things work. T o access the
methods and properties associated with a class, you have to create an instance of the class by declaring the variable and setting its data
type.
S cope
T he scope defines the area in your Flash file in which a variable can be referenced: local, global, and timeline. Local variables are
referenced only in a certain area, such as a frame or a function. As soon as that area stops executing, the local variable no longer exists.
In a function, a local variable is declared between the curly brackets {}.
Global variables are available anywhere at any time to anything. You can declare a global variable and then use it in other frames as well
as in other SWF files or movie clips that are loaded into the main movie file.
T imeline variables are available only to any script within the same T imeline. After a variable is declared on a T imeline, it is available to
all the frames that follow.
Me th ods
Methods are the keywords that result in action. For example, two methods associated with the MovieClip class are
gotoAndPlay().
stop() and
Prope rtie s
P roperties describe the object in a class. For example, the properties of a movie clip include its height and width, x and y coordinates,
and scale.
Using Proper S cripting S yntax

If you're unfamiliar with program code or scripting, ActionScript code may be challenging to decipher. Once you understand the basic
syntax, which is the grammar and punctuation of the language, you'll find it easier to follow a script.
T he semicolon at the end of the line tells ActionScript that it has reached the end of the code line and to go to the next line
in the code.
As in English, every open parenthesis must have a corresponding close parenthesis, and the same is true for brackets and curly
brackets. If you open something, you must close it.
T he dot operator (.) provides a way to access the properties and methods of an object. T ype the instance name, followed by a
dot, and then the name of the property or method.
Whenever you're entering a string or the name of a file, use quotation marks.
You can add comments that ActionScript won't read to remind yourself or others what you are accomplishing with different
parts of the script. T o add a comment for a single line, start it with two slashes ( //). T o type a multi-line comment, start it
with /* and end it with */.
Flash provides assistance in the following ways as you write scripts in the Actions panel:
Words that have specific meanings in ActionScript, such as keywords and statements, appear in blue as you type them in the
Actions panel. Words that are not reserved in ActionScript, such as variable names, are in black. Strings are in green.
Comments, which ActionScript ignores, are in gray.
As you work in the Actions panel, Flash can detect the action you are entering and display a code hint. T here are two types of
code hints: a tooltip that contains the complete syntax for that action, and a pop-up menu that lists possible ActionScript
elements.
T o check the syntax of a script you're writing, click the AutoFormat icon (
) (which will also format the script according
to conventions so that it is easier for others to read) or click the Check Syntax icon (
). Syntax errors are listed in the
Compiler Errors panel.
Navigating the Actions Toolbox

T he Actions toolbox gives you quick access to the core elements of ActionScript. It groups them by category. T o add an element to
your script, double-click it in the toolbox.
Page 178
T here are several categories listed in the Actions toolbox. T he T op Level category lists many common classes; if you select a class, you
can access its methods and properties. Browse the T op Level and Language Elements categories to get a feel for what's included.
If you know you need a particular set of code, but aren't sure how to format it, you can find it listed alphabetically in the Index category.
For example, you can find an If statement by clicking Language Elements > Statements, Keywords & Directives > Statement > If; or
simply Index > If.
You don't need to use the toolbox to add code to your script, but it can help you ensure that you're using the code correctly.
Page 179
Working with Conditional Statements

A conditional statement requires the script to determine whether something is true or false, and then to act based on that determination.
You can use conditional statements for many purposes. In this lesson, you'll use one to determine whether the movie has finished
loading. You could also use a conditional statement to evaluate input from a user (such as a password, survey answer, or button click) and
to act on that input.
About Conditional S tatements

T he most common type of conditional statement is the if statement. T he if statement checks a value or expression in its parentheses.
If the value is true, the lines of code in curly brackets are carried out; otherwise, they are ignored. You can add an else statement to
provide alternative instructions if the condition is not true.
Add methods within the curly brackets after the if and else statements to give the script instructions.
For example, the following script checks for a proper password. If the password is wrong, the script goes to a frame labeled Rejection; if
the password is correct, it goes to a frame labeled Acceptance. T he script uses an if statement that determines whether the password is
equal to null; a gotoAndStop() method that is in effect if the if statement is true; an else statement that determines whether the
password is equal to T om; and a gotoAndPlay() method that is in effect if the else statement is true.
if(password == null) {
gotoAndStop("Rejection");
} else if (password = "Tom") {
gotoAndPlay ("Acceptance");
}
Adding an If S tatement
Start by adding an if statement to frame 2 on the Actions layer. You're adding the if statement to frame 2 so that the movie will loop
back to frame 1 if the full movie hasn't loaded yet.
You'll use the Actions toolbox to add an if statement that determines whether the number of bytes loaded equals the total number of
bytes in the movie. T hen you'll add an else statement, which will be active if the if statement is false.
Select frame 2 in the Actions layer.
1.
P ress F6 to insert a keyframe.
2.
3.
T o open the Actions panel quickly, press F9 (Windows) or Option+F9 (Mac OS).
4.
In the Actions toolbox, click Language Elements > Statements, Keywords & Directives > Statement.
5.
Double-click the if statement to add it to the Script pane in the Actions panel. T he word if appears with open parentheses
following it.
Page 180
6.
In the open parentheses of the if statement, type the following so that ActionScript will determine whether the movie has
completely loaded:
this.bytesLoaded==this.bytesTotal
Note
T he == operator compares the values surrounding it to determine whether it's true or false. If the condition is true, the script
performs an action; you'll add an else statement to provide an action if the condition is false.
After the closing bracket, add an else statement by typing
7.
else{}
8.
Click the Auto Format (
syntax errors.
) button to format the script. Auto Format shifts the brackets, and it verifies that there are no
Note
If errors are reported, compare your script with the script in the following image. You can also open the 07End.fla file, select frame 2 in
the Actions layer, and view the ActionScript in the Actions panel.
Adding Methods to the S tatement

Remember that methods create action. So far, you've created the if and else statements to determine whether the movie has loaded. Now
you need to add the actions the script will perform based on those conditions. If the movie has fully loaded, you simply want it to play;
if it hasn't, you want the script to return to frame 1.
Page 181

1.
Inside the first set of brackets, following
this.bytesTotal, type
play();
2.
Inside the set of brackets following
else, type
gotoAndPlay(1);
3.
Click the Auto Format (
verifies the syntax, as well.
) button to format the script. It shifts the script text to match that in the image below, and it
T he conditional statement determines how long to play the preloader; it loops to the first frame until the movie has
loaded. You don't need a preloader when you're streaming a movie and it does not rely on ActionScript. T hen the movie plays as it
streams.
Page 182
Adding a Stop Action

You've used stop actions in previous lessons. A stop action simply stops the movie from continuing; in this case, you'll use it to stop the
movie from continuing to loop once the movie has fully loaded.
1.
2.
3.
P ress F6 to insert a keyframe.

stop();
Page 183
Using Variables
Variables represent data, and their values can change. You'll use the variable fileName to identify the text file that the script should load
when a button is clicked. T he variable's value will change for each button, so that a different file is loaded each time.
About S cript Assist

Some actions are simple, such as stop actions. But others require parameters, and if you're unfamiliar with ActionScript, you may have
difficulty remembering which options are availableor requiredfor each type of action. Script Assist mode prompts you to add the
methods, parameters, or variables related to the action, and then it assembles the information using the correct syntax for you.
Script Assist won't write the script for you. You still have to know what you want to do and which variables, methods, or functions to
use. However, it can help you put the pieces together coherently, so that you don't have to return to the script multiple times to
troubleshoot syntax errors.
T o use Script Assist, click Script Assist in the Actions panel. T hen, double-click an item in the Actions toolbox to add it to the Script
pane. T he upper section of the Actions panel displays fields and options that are available for that item. Select options and enter values
as appropriate for your script.
You'll use Script Assist in the following section, as you declare a variable.
Declaring a Variable
Before you can use a variable, you need to declare it. T o declare a variable, you use the var keyword, name the variable, and assign a
value to it. You'll use Script Assist to declare the variable fileName with the value content_home.txt. Content_home.txt is the name of
the text file ActionScript imports when the movie first runs or when the Home button is clicked.
1.
Click Script Assist in the Actions panel to enter Script Assist mode.
2.
In the Actions toolbox, click Language Elements > Statements, Keywords & Directives > Definition Keyword.
3.
Double-click the
Attributes.
var keyword to add it to the Script pane. T he Script Assist pane displays three fields: Variables, T ype, and
4.
In the Variables field, type
fileName = "content_home.txt"
As you type, the proper syntax appears in the Script pane below.
Page 184
5.
Select String from the T ype menu.
6.
Click Script Assist to exit Script Assist mode.
Page 185
Downloading Data from a URL

T here are different ways to load data from external files, such as a SWF file or a website, into a movie. One common way is to use the
URLLoader and URLRequest classes.
About the URLLoader and URLRequest Classes

T he URLLoader class downloads data from a URL. It is useful for downloading text files, XML, or other information to be used in a
dynamic, data-driven application. A URLLoader object downloads all of the data from a URL before making it available to ActionScript.
T he URLRequest class captures all of the information in a single HT T P request. URLRequest objects are passed to the load()
method of URLLoader to initiate the URL download.
Using URLLoader and URLRequest Classes

You'll use the URLRequest class to capture the data from the text file and pass it to the URLLoader class, which will load it onto the
page. T o use the classes, you'll first create variables that you can refer to later in the script.
1.
With frame 3 of the Actions layer still selected, type the following line in the Actions panel to create a loader variable for a
URLLoader object:
var loader:URLLoader = new URLLoader();

Note
P ress Enter or Return after each line to move to the next line in the Actions panel.
2.
Create another variable for the URLRequest object:
var requestURL:URLRequest = new URLRequest(fileName);

3.
Use the variables to request and load the URL data:
loader.load(requestURL);
Page 186
Working with Events

An event is something that is initiated by a button click, a key press, or the end of a video. An event listener, also called an event
handler, is a function that is executed in response to specific events. An EventDispatcher object notifies the event listener of an event.
You'll add an EventDispatcher object and an event listener to recognize and respond to the button click and load the appropriate text
file.
Adding an Event Listener and Function

T o make the loaded data available, you need to add an event listener to the URLLoader object you created earlier. You'll use the
Event.COMP LET E type of event listener, which means that it will be dispatched when the content has been completely loaded. T hen,
define a function that will be called when the event occurs. T he function uses the loader you created earlier to load the text. Finally,
create a function to handle the data and pass it to the text field where you want it to appear.
1.
loader.addEventListener(Event.COMPLETE,completeHandler);
2.
function completeHandler(event:Event):void {
var loader:URLLoader = URLLoader(event.target);
var pageText:String = loader.data;
this.pageText_txt.text = pageText;
}
Note
Be sure to include the final curly bracket, or the function won't work.
3.
Choose Control > T est Movie. T he page content is loaded from the Content_home.txt file.
If you receive an error, check to make sure you've typed the script correctly. Refer to the error message to see which line
of the script contains the error. You can refer to the lines of script in the 07End.fla file; you can even copy the lines of script from
that file and paste them into the Actions panel in your project file.
Page 187
Page 188
Using Events to Script Buttons

In ActionScript 3.0, you add all code to buttons dynamically. You'll use another event listener to respond to a mouse click on one of the
buttons (named b1, b2, b3, and b4).
You'll create a function that updates the URLLoader object you created earlier, identifying the appropriate filename for each button, and
you'll use the event listener type MouseEvent.CLICK to call the function.
Note
If you have used ActionScript 2.0, you may have applied the
possible in ActionScript 3.0.
1.
on(release) method to the buttons themselves, but that is not
In the Actions panel, add another event listener to the script:
b1.addEventListener(MouseEvent.CLICK, b1Listener);
2.
T ype the following lines to add event listeners to the other buttons, as well:
3.
T o create the function that will be called when the first button is clicked, type the following:
function b1Listener(event:MouseEvent):void {
loadFile("content_home.txt");
}
4.
Create the functions for the other buttons:
loadFile("content_cast.txt");
}
Page 189

loadFile("content_crew.txt");
}
loadFile("content_release_dates.txt");
}
5.
Create the loadFile function by typing the following:
function loadFile(fileName:String):void{
requestURL.url = fileName;
loader.load(requestURL);
}
Note
T he loadFile function expects to find a string and passes that string to the URLRequest object. T he URLRequest object finds that file,
gathers the data, and passes it to the loader, which displays the text on the page.
6.
Choose Control > T est Movie to see the final project. Click each button to see the appropriate text appear.
If you receive an error, don't despair. You may simply have left out a space, semicolon, or parenthesis. Refer to the error
message to see which line contains the error. Compare your script with the one in the 07End.fla file to see how they differ. You can
copy the lines of script from that file and paste them into the Actions panel in your project file.
Page 190
With ActionScript 3.0, you were able to keep the movie from playing until it had loaded and then load different text files depending on
the selected button. You'll use conditional statements, event handlers, and data loaders frequently as you become more familiar with
ActionScript.
Page 191
Page 192
Review
Review Questions
1
2
3
4
5
What is a variable, and how do you declare one?

What is a function?
How can you add comments that will be ignored when the script is run?
What is a conditional statement?
What is an event? What is an event listener?
Review Answers
1
A variable represents a specific piece of data, which may or may not be constant. Before you can use a variable, you
need to declare it. T o declare a variable, you use the var keyword, name the variable, and assign a value to it.
2
A function is a group of statements that you can refer to by name. Using a function makes it possible to run the
same set of statements without having to type them repeatedly into the same script.
3
You can add comments that ActionScript won't read to remind yourself or others what you are accomplishing with
different parts of the script. T o add a comment for a single line, start it with two slashes ( //). T o type a multi-line comment, start
it with /* and end it with */.
4
A conditional statement requires the script to determine whether something is true or false, and then to act based on
that determination. T he most common type of conditional statement is the if statement. T he if statement checks a value or
expression in its parentheses. If the value is true, the lines of code in curly brackets are carried out; otherwise, they are ignored. You
can add an else statement to provide alternative instructions if the condition is not true.
5
An event is something that is initiated by a button click, a key press, or the end of a video. An event listener, also
called an event handler, is a function that is executed in response to specific events.
Page 193
8. Using Components
Components are prebuilt movie clips that give you a head start, especially when you are creating user interface
elements such as scroll bars, menus, and text fields.
Lesson Overview
Add a simple component to a project

Modify a component's parameters
Configure an interactive component
Use ActionScript to enable a component
T his lesson will take less than an hour to complete. If needed, remove the previous lesson folder from your hard drive, and copy the
Page 194
Getting Started
In this lesson, you'll use components to create an interactive display of minerals; when the viewer clicks the image of a mineral, text
about it appears. You'll start by viewing the final document.
1.
Double-click the 08End.swf file in the Lesson08/08End folder.
2.
Click an image in the grid on the left. T he text on the right changes. Introductory text appears at the top of the screen.
You'll create three components: one for the introductory text, one for the grid, and one for the mineral text. You'll use ActionScript to
change the text display when the viewer clicks an image.
3.
4.
Double-click the 08Start.fla file in the Lesson08/08Start folder to open it in Flash.
T he Flash document contains the background image.

5.
6.
Open the 08End.fla file, so that you can refer to it when you create ActionScript.
Page 195
About Components
Components are prebuilt movie clip symbols with defined parameters that you can use to add user interface elements, such as buttons,
check boxes, or scroll bars, to your document. You can modify the parameters to change a component's appearance and behavior.
In addition to creating simple user interface elements, such as buttons, components can create content, such as lists or grids. You can
drag components from the Components panel onto the Stage and simply modify the parameters. However, for more complex user
interface elements, use ActionScript 3.0 to modify the components.
Each component has a unique set of ActionScript methods, properties, and events that make up its application programming interface
(AP I). T he AP I also allows you to create new, custom components of your own. You can download components that have been built by
members of the Flash community on the Adobe Exchange at www.adobe.com/exchange/.
Page 196
Adding a Text Component

At the top of the document is a box containing introductory text. You'll create that box using a T extArea component from the
Components panel. T his is a simple user interface element that doesn't require any ActionScript.
Dragging a Component to the S tage

Components are listed in the Components panel. You'll drag the T extArea component onto the Stage. Flash will automatically add the
T extArea component, as well as a UIScrollBar component and a Component Assets folder, to the Library panel.
1.
2.
Lock the Background layer in your working copy of the start file.
Select the Background layer and click the Insert Layer icon. Name the new layer Components.
3.
Choose Window > Components to open the Components panel.
Note
Which components are listed in the Components panel depends on the version of ActionScript specified in Document Settings. A
document can use only one version of ActionScript. In this book, we always use ActionScript 3.0.
4.
Select the T extArea component in the User Interface folder in the Components panel.
5.
Drag the T extArea component onto the Stage.
Note
Page 197

After you drag the T extArea component, the Library panel contains the T extArea component; the UIScrollBar component, which will
appear if there is too much text to contain in the text box; and the Component Assets folder, which enables you to run any component.
Inserting Text in the Component

T he text area should fit neatly between the title and the grid, and it should be partially transparent. After you've resized and modified the
appearance of the text box, you'll add text from the Intro.txt file to the component using the P roperty inspector.
1.
Select the T extArea component with the Selection tool.
2.
In the P roperty inspector, set the width to 600, height to 60, X value to 47, and Y value to 65. T he text box appears beneath
the heading.
3.
Select Alpha from the Color menu, and select 57 for the percentage.
T hough the transparency of the component has changed, it still appears white on the Stage. However, it will be partially transparent
when you test the movie.
4.
Open the Parameters panel by clicking the P arameters tab in the Property inspector or by choosing Window > P roperties >
P arameters.
5.
Scroll to the text parameter.
6.
Open the Intro.txt file in a text editor or word processing application. T he Intro.txt file is in the Lesson08/08Start folder you
copied from the book's CD.
Page 198

7.
8.
Select the text and choose Edit > Copy, or the Copy command for your text editor.
In Flash, click in the text parameter, and press Ctrl+V (Windows) or Command+V (Mac OS) to paste the text.
Note
You can also paste text into the text parameter in the Component inspector, but it's easier to work with text in the Parameters panel.
Alternatively, you can assign the text using ActionScript.
9.
Choose Control > T est Movie. T he text appears, and if you click in it, you can edit it. If you're working with Flash for
Windows, a scroll bar may appear in the text area.
10.
Modifying a Component's Parameters

T he introductory text should not be editable. You'll change parameters using the Component inspector to ensure that the text is not
editable and that no scroll bar appears. T he Component inspector and Parameters panel display the same options, so you can use
Page 199

whichever one you prefer.
1.
Select frame 1 in the Components layer, and then select the text area on the Stage.
2.
Choose Window > Component Inspector.
3.
Click the editable parameter, and select false so that the text can't be changed.
4.
Click the verticalScrollP olicy parameter, and select off.
5.
Choose Control > T est Movie. Now there is no scroll bar and the text is no longer editable.
Note
You didn't name the instance because you won't need to refer to it in ActionScript.
Page 200
6.
Page 201
Using Components to Create Interactivity

ActionScript lets you create more complex user interface elements. You'll use the T ileList component and another T extArea
component to create the grid of mineral types and the area that displays text about each mineral when its thumbnail is clicked.
Configuring Component Parameters

First, drag the components to the Stage, resize and position them, and name the instances so you can refer to them using ActionScript.
1.
In the Components panel, select the T ileList component from the User Interface folder.
2.
Drag the T ileList component to the Stage.
3.
In the P roperty inspector, set the width to 270, height to 318, X value to 47, and Y value to 150.
4.
Name the instance thumbnails_tl to represent the thumbnails tile list.
5.
Click the P arameters tab to set the parameters for the instance.
6.
In the parameters grid, change the columnWidth value to 125 and the rowHeight value to 125. T hese values determine the
size of each section in the grid.
7.
Click the scrollP olicy parameter, and select on to display a scroll bar.
Page 202

8.
Click the direction parameter and select vertical to make the scroll bar vertical instead of horizontal, which is the default.
9.
Drag a T extArea component from the Components panel to the right of the grid on the Stage.
Note
T he Library contains a single T extArea component and a single Component Assets folder, no matter how many components you drag
to the Stage. You can create multiple instances from a single component.
10. Select the new instance of the T extArea component. In the Property inspector, set the text area's width to 290, height to 318,
X value to 360 and Y value to 150.
11.
Select Alpha from the Color menu, and select 0 for the percentage.
A partially transparent box is included on the background image. An alpha value of 0% leaves the background of the text area
completely transparent, so the original box shows through.
12.
Name the instance mineral_ta to represent the mineral text area.
Enhancing Components with ActionS cript

You've created the grid and the text display area. Now, you need to add the ActionScript to make this all work. An event listener will
trigger a response when a thumbnail is clicked; the response is the display of the appropriate text. As you write the ActionScript,
remember that you named the T ileList instance thumbnails_tl and the T extArea instance mineral_ta. Also, note the path to the
thumbnail images; they're in the T humbnails folder.
1.
Note
In ActionScript 3.0, actions can be applied only to frames, not movie clip symbols. T herefore, you must select a frame before applying
actions.
2.
If you are uncertain about the ActionScript spacing or punctuation, refer to the 08End.fla file you opened earlier. Select
the first frame in the Actions layer to see the final ActionScript in the Actions panel.
Page 203

3.
Create the event listener for the tile list by typing
thumbnails_tl.addEventListener(Event.CHANGE, thumbnailClicked);
In this line, thumbnails_tl, the grid, is the event target; you're adding an event listener that is listening for a change event, which will
trigger the event response called thumbnailClicked when a thumbnail image in the grid is clicked.
Note
Capitalization is very important in ActionScript. In the line above, make sure the instance name is lowercase and that other letters
are capitalized exactly as they appear in the text.
4.
Create the function, or event response, named thumbnailClicked by typing
function thumbnailClicked(event:Event):void{
mineral_ta.text = event.target.selectedItem.data;
}
T he function is named thumbnailClicked, and it's the event response that is called in the first line you typed. Its object is an event
which has the data type Event. T his may seem a little confusing, but each object must be identified with a type in ActionScript 3.0,
and you're simply telling ActionScript that the event is of the type Event.
A function is always defined inside curly brackets. T his function assigns variable text to the text area you named mineral_ta. You
could type exact text within quotation marks after the equal sign, but for this project, the text will change, depending on which
mineral graphic was clicked. T he text is the data for the selected item in the event target, which is the tile list.
5.
From the Actions panel menu, choose Word Wrap. Flash will wrap the text within the panel so you can see all of it, regardless
of line endings in the text.
Page 204
6.
Add the information for the first image in the tile list, including the label and source. T ype
thumbnails_tl.addItem({label:"OBSIDIAN", source:"thumbnails/Obsidian.jpg"
data:"."});
For each item in the list, you'll identify the grid (thumbnails_tl) and use the addItem() method. Everything else goes inside
parentheses and curly brackets. T he label appears as text on top of the box; include quotation marks around it, and type it in all
capital letters so it will display that way. Following the comma is the source, which is the path to the image you want to display.
T he third property is called data; this is the text that will appear in the mineral_ta box. You'll paste that text in later.
7.
Choose Control > T est Movie. T he obsidian thumbnail should appear on the left. When you click it, a period appears in the
text area on the right. If the movie doesn't play as expected, check for typos, spaces, or any other errors in your script. You can
compare your file to the ActionScript in the 08End.fla file.
Page 205
8.
Copy the line you just typed, and paste it 14 times to create lines for each of the other minerals.
9.
Substitute the appropriate mineral name for the label and source file in each line: Granite, Basalt, Scoria, Rhyolite, Shale,
Breccia, Sandstone, Conglomerate, Limestone, Slate, Marble, Quartzite, Gneiss, Schist.
10.
document.
Open the text document called Minerals.txt in any text editor. Copy the text from the Obsidian section of the
11.
In the Actions panel in Flash, select the period between the quotation marks after the word data in the first
addItem() line, and press Ctrl+V (Windows) or Command+V (Mac OS) to paste the text.
12.
Delete paragraph returns (line endings) from the obsidian text. Add \n where you want paragraph breaks to occur. T ype \n\n
where you want space to appear between the paragraphs. T here should be no spaces between \n and the words that follow it.
Page 206
13.
Choose Control > T est Movie. Click the image of obsidian. T he obsidian text should appear. If the movie flickers or
returns an error, return to the Actions panel and confirm that you've typed everything correctly and removed all paragraph returns
from the text.
14.
Copy and paste the text for each of the other minerals, removing paragraph returns within the text.
T o see line endings you might have missed, resize the Actions panel. When the text reflows, line endings (paragraph
returns) become more obvious.
15.
Choose Control > T est Movie. Click each mineral thumbnail to see the corresponding text in the text area. If you encounter
any errors, return to the Actions panel to confirm that you've removed all the line endings in the text. Remember that you can refer to
the 08End.fla file for comparison.
Page 207
Using two different types of components, you created an interactive display. You can use the same basic process to use other
components in your own projects.
Quick Interactivity with Flash Components

Get a head start on a project by using components for standard interface objects, such as radio buttons, play buttons, scroll bars, and
drop-down menus. Drag one from the Components panel, customize its parameters, and presto! Add a little ActionScript to take it even
further. Below is a sample interface with some commonly used components along with a list for your reference.
Page 208
Page 209
Review
Review Questions
1
2
3
What is a component?
What's the difference between the Component inspector and the P arameters panel?
How can you change a parameter for a component?
Review Answers
1
Components are prebuilt movie clip symbols with defined parameters that you can use to add user interface
elements, such as buttons, check boxes, or scroll bars, to your document. You can modify the parameters to change a component's
appearance and behavior.
2
T he same parameters are available in the Component inspector and the P arameters panel. However, in the
P arameters panel, you can also name the component instance and specify its dimensions and location on the Stage.
3
Select the component, and then open either the Component inspector or the Parameters panel. Scroll through the
parameters grid, and select the parameter you want to change. T hen, select a parameter setting from the pop-up menu in the grid, or
type a new value.
Page 210
9. Working with Sound and Video

Sound and video files add new dimensions to your projects. Import files polished in other applications, such as
Adobe After Effects, or perform simple edits on sound files directly in Flash CS3.
Lesson Overview
Edit sound files

Import video files
Use video components
Work with video that contains alpha channels
Understand video import options
Page 211
Getting Started
Start the lesson by viewing the finished animated zoo kiosk. You'll create the kiosk by adding sound and video files to a project in Flash.
1.
View the movie of the zoo director, who appears on the screen, speaks, and then disappears. Click a sound button to hear an animal
sound. Click a thumbnail button to view a short movie about the animal.
In this lesson, you'll create the sound buttons and import audio files for them. You'll create movie thumbnail buttons, import movies,
and use ActionScript to attach the buttons to the movies. You'll also animate the zoo director video so that it moves onto the screen
appropriately.
2.
3.
Page 212
Prepare the Project File

T o set up the file, import the assets from an Illustrator file and add an Actions layer.
1.
2.
In the Import dialog box, select the Lesson09_assets.ai file in the Lesson09/09Start folder, and click Open or Import.
3.
In the Import T o Stage dialog box, select all the layers. Select Flash Layers from the Convert Layers T o menu. Select P lace
Objects At Original P osition; no other options should be selected.
4.
Still in the Import T o Stage dialog box, select the Video Button 1 layer, and select Create Movie Clip. Name the instance
video_button1.
5.
Repeat step 4 to create movie clips for the Video Button 2, Video Button 3, and Video Button 4 layers. Name the instances
video_button2, video_button3, and video_button4, respectively. Click OK to import the file.
6.
In Flash, select the Sound Buttons layer (the top layer), and click the Insert Layer icon. Name the new layer Actions. Lock all
the layers except the Sound Buttons layer.
T o lock all the layers at once, click the lock icon above the layer names. T hen, you can quickly unlock a single layer.
Page 213
7.
Select Show All from the View menu in the Edit bar to see all the elements on the Stage.
Page 214
Creating Sound Buttons

T here are three sound buttons in the final kiosk, each playing a different animal sound. You'll create a button symbol, configure its
rollover states, and import a sound for the button. T hen, you'll duplicate that button and adapt it to create buttons for two additional
sounds.
Creating Button S ymbols

Button symbols include four rollover states in the T imeline: Up, Down, Over, and Hit. You'll convert the speaker icon and text to a
button, configure the rollover states for the button, and draw a rectangle background for the button's hit area.
1.
Select the Sound Buttons layer. T he group in the lower-right corner (Sound 1 and a speaker symbol) is selected.
2.
Choose Modify > Convert T o Symbol. In the Convert T o Symbol dialog box, select Button, and name the button
sound_button1. Click OK.
3.
Double-click the instance of sound_button1 on the Stage to edit it. You may need to zoom in a little to see the button more
clearly.
4.
Select Layer 1, and then select the group on the Stage. Choose Modify > Break Apart to break the group into pieces. Click
elsewhere on the Stage to deselect the objects.
5.
Select the speaker symbol, and choose Edit > Cut.
6.
Click the Insert Layer icon, and with the new layer selected, choose Edit > P aste In P lace. T he speaker symbol appears on the
new layer.
7.
Name the new layer Icon and rename Layer 1 T ext.
8.
Click the Insert Layer icon two times to create two more layers. Name the new layers Sound and Highlight.
9.
Rearrange the layers to appear in the following order, from top to bottom: Sound, Icon, T ext, Highlight.
10.
Select the Down frame on the T ext layer, and press F5 to insert frames across all the button states.
11.
Select the Down frame on the Icon and Sound layers, and press F6 to create a keyframe for each layer.
12.
Select the Down frame on the Icon layer, and then select the speaker symbol on the Stage. In the T ransform panel, scale the
symbol to 150%.
Note
If the T ransform panel isn't visible, choose Window > T ransform.
13.
Select the Over frame on the Highlight layer, and press F7 to create a blank keyframe.
Page 215
14.
Select the Rectangle tool. Specify no stroke. Select a black fill with an Alpha value of 50%. Draw a rectangle approximately
the same size as the red rectangle above the button (behind Guess this animal sound).
15.
Using the Selection tool, move the rectangle behind the Sound 1 text and the speaker icon. You may need to use the arrow
keys to nudge the rectangle into position.
Page 216
16. Select the Down frame on the Highlight layer, and press F6 to insert a keyframe. Select the black rectangle on the Stage, and
change its fill color to #B52823, with an Alpha value of 100%.
17.
Select the Hit frame on the Highlight layer, and press F5.
Note
T he Hit frame determines the active area of the button. Because the hit area is the same as the rectangle shape, the button will be active
whenever the mouse hovers over or clicks the rectangle.
Importing S ound Files

Most sound files, especially short WAV files, are small enough that you can import the full file into a Flash document. T wo sound files
are already included in the library, but you'll import the Monkey.wav file and assign it to the button symbol you created.
1.
Choose File > Import > Import T o Library.
2.
Select the Monkey.wav file in the Lesson09/09Start/Sounds folder, and click Open (Windows) or Import T o Library (Mac OS).
3.
Select the Down frame on the Sound layer.
4.
In the P roperty inspector, select Monkey.wav from the Sound menu, and select Start from the Sync menu.
5.
Choose Control > T est Movie to preview the button. When you click the button, you should hear a monkey screeching. Close
the preview window.
Editing a S ound Clip

T he sound clip you imported is a bit longer than you need. You'll shorten the sound file using the Edit Envelope dialog box, so that only
the first two sections of the waveform remain. T hen, you'll apply a fade so that the sound gradually decreases as it ends.
Page 217

1.
Select the Down frame on the Sound layer. In the P roperty inspector, click Edit.
2.
In the Edit Envelope dialog box, click the Zoom Out icon until you can see the entire waveform, which includes four distinct
sections.
3.
Drag the right end of the time slider to the middle of the waveform, so that the sound ends after the second section.
Page 218
4.
Select Fade Out from the Effect menu so that the volume diminishes gradually at the end of the sample. Click OK to accept
the changes you've made.
5.
Choose Control > T est Movie, and click the button again. T he sound should be about half as long as it was the first time.
Duplicating Buttons
You need three buttons for animal sounds, and they're all similar. You'll duplicate the first button, and then make a few adjustments to it
to reuse it for the second and third buttons.
1.
Right-click (Windows) or Control-click (Mac OS) the sound_button1 symbol in the Library panel, and choose Duplicate.
Note
If the Library panel is not visible, choose Window > Library.
Page 219

2.
3.
4.
In the Duplicate Symbol dialog box, select Button, and name the new button sound_button2. Click OK.
Duplicate the button one more time, naming the third button sound_button3.
5.
Select the Sound Buttons layer. Drag an instance of the sound_button2 symbol onto the Stage, placing it beneath the first button.
Double-click the second button to edit it.
6.
Select the text with the T ext tool, and change the number to 2.
7.
Select the Down frame on the Sound layer. In the P roperty inspector, select Lion.wav from the Sound menu, and select Start
from the Sync menu.
8.
9.
Select the Sound Buttons layer, drag an instance of the sound_button3 symbol beneath the other buttons on the Stage, and
double-click it to edit it.
10.
Change its text to Sound 3, select the Down frame in the Sound layer, select the Elephant.wav sound file, and select Start from
the Sync menu.
Page 220

11.
Aligning Buttons
In the kiosk, the buttons appear in a column. T he easiest way to arrange them is to use the Align panel, which you've used in other
lessons.
1.
Choose Window > Align to open the Align panel.
2.
Select all three buttons on the Stage. Make sure Align T o Stage is deselected in the Align panel, and then click the Align
Horizontal Center icon.
3.
With all three buttons still selected, use the arrow keys on your keyboard to nudge the buttons so that they are centered beneath
the text that reads Guess this animal sound.
4.
Click elsewhere on the Stage to deselect the buttons. T hen, select the instance of the sound_button3 symbol.
5.
Using the arrow keys, nudge the button so that it's aligned with the bottom of the semi-transparent thumbnail bar.
6.
Select all three buttons, and click the Space Evenly Vertically icon in the Align panel.
7.
8.
Lock the Sound Buttons layer.

Choose Control > T est Movie. T est each button, and then close the preview window.
Page 221
Page 222
Creating Movie Thumbnail Buttons

T here are four movie thumbnail buttons on the kiosk, and each plays a short movie of an animal at the zoo. You'll apply the drop
shadow filter to the thumbnail movie clip symbols you imported earlier, and then you'll create a button symbol with distinct rollover
states. As you did with the sound buttons, you'll duplicate the initial button and make changes to it for the other movie thumbnail
buttons.
Note
You can apply the drop shadow filter to the thumbnails because they are movie clip symbols. If you had imported them as graphic
symbols, you wouldn't be able to apply filters.
Creating Thumbnail Button S ymbols

You imported thumbnails in the Illustrator file, converting them to movie clip symbols as you did so. Now, you'll add drop shadows to
each, and then convert them to button symbols. As you did with the sound buttons, you'll configure rollover states.
1.
Unlock the Video Button layers, and select the four movie clip thumbnails on the Stage. (Zoom out to see them, if necessary.)
2.
In the Filters panel, click the Add Filter icon (
to 10, the Distance to 10, and the Strength to 80%.
) and select Drop Shadow from the menu. Set the Blur X and Blur Y values
Note
T he Filters panel is typically docked with the P roperty inspector. Click the Filters tab to display the Filters panel.
3.
Click elsewhere on the Stage to deselect the thumbnails. T hen, select the first thumbnail (the image of penguins), and press F8 to
convert it to a symbol. Select Button, set the registration point to the center, name the symbol video_button1, and click OK.
4.
Double-click the video_button1 symbol in the Library panel to edit it.
5.
P ress Shift and select all four frames in Layer 1, and then press F6 to insert a keyframe in each one.
6.
Select the Over frame, and select the button on the Stage. In the Property inspector, select Brightness from the Color menu,
and select -35 for the percentage.
7.
Select the Down frame, and select the symbol on the Stage. In the Property inspector, select Brightness from the Color menu and
select -35% for the percentage.
8.
With the Down frame still selected, click the Filters tab, and adjust the drop shadow settings: change the Blur X and Blur Y values
to 5, and change the Distance to 5.
9.
Select the symbol on the Stage and press the Down Arrow key three times and the Right Arrow key three times to nudge the
thumbnail so that the center point is slightly off-center from the button.
Page 223
10.
11. Choose Control > T est Movie. Roll the mouse over the first button; the image should darken. Click the first button; the button
should appear as if it is pressed toward the Stage. Close the preview window.
Duplicating Thumbnail Buttons

You've created one thumbnail button, and you'll duplicate it to create the remaining three buttons. You'll swap the movie clip in each
button, and then replace the video button movie clips on the Stage with the video_button buttons.
1.
Right-click (Windows) or Control-click (Mac OS) the video_button1 symbol in the Library panel, and select Duplicate. In the
Duplicate Symbol dialog box, select Button, and name the symbol video_button2. Click OK.
2.
3.
Double-click the video_button2 symbol in the Library panel to edit it.
Select the Up frame in Layer 1, and then select the symbol on the Stage. In the P roperty inspector, click Swap.
4.
In the Swap Symbol dialog box, select Lesson09_assets.ai > Video Button 2 > Video Button 2. T he preview displays an image
of a mandrill. Click OK.
Page 224
5.
Repeat steps 3 and 4 to swap the video file for the Over and Down frames.
Note
You do not need to swap video files for the Hit frame, because the Hit state is not displayed; it just determines the active area of the
button.
6.
Scrub the T imeline. T he thumbnail is different from that in the first button, but the filter and property adjustments remain the
same.
7.
Repeat steps 1-5 to create buttons named video_button3 and video_button4, applying images from the Video Button 3 and Video
Button 4 folders, respectively.
8.
9.
Select the Video Button 1 layer, and then select the first video button on the Stage.
10.
In the P roperty inspector, name the instance video_button1.
11.
Select the Video Button 2 layer, and then select the second video button on the Stage.
12.
In the P roperty inspector, click Swap. Select the video_button2 symbol, and click OK.
Note
Be sure to select video_button2 in the Swap Symbol dialog box, and not Video Button 2.
13.
Select Button from the Instance Behavior pop-up menu (Movie Clip is currently displayed). T ype video_button2 for the
instance name, if it isn't already there.
14.
15.
Repeat steps 11-13 for the third and fourth buttons.

Lock the Video Button 1, Video Button 2, Video Button 3, and Video Button 4 layers.
Page 225
16. Choose Control > T est Movie. As you move the mouse over the thumbnails, they should display the appropriate Up, Down, and
Over states. Close the preview window.
Page 226
Extending the Timeline

Currently, many layers contain just a single frame. You need to create new layers for frame labels, the pop-up video of the zookeeper,
and the video player. T hen, add frames to all the layers so that they each have at least 50 frames. Next, you'll label frames and add stop
actions so that the script will stop while the movie plays.
1.
Select the Sound Buttons layer, and click the Insert Layer icon three times. Name the new layers Labels, Pop Up Video, and
Video P layer.
2.
Select frame 50 on the Actions layer, and then press Shift and select frame 50 on the Background P hoto layer, so that frame 50
is selected on all the layers. Press F5 to insert frames for all layers.
3.
Select frame 10 in the Actions and Labels layers, and press F6 to insert a keyframe on each layer. Add keyframes to frames 20,
30, and 40 in the Actions and Labels layers.
4.
Select frame 10 in the Labels layer. In the Property inspector, type penguins in the Frame Label box.
5.
Repeat step 4 to label frame 20 mandrill, frame 30 tiger, and frame 40 lion.
6.
Choose Window > Actions to open the Actions panel, and then select frame 1 in the Actions layer.
7.
In the Actions panel, add a stop action by typing
stop();
8.
Add stop actions to frames 10, 20, 30, and 40 in the Actions layer. Close the Actions panel.
Page 227
Page 228
Preparing Flash Video Content

You've created the thumbnail movie buttons. Now you need to prepare the movies to play when the buttons are depressed. You'll import
one video file and encode it in FLV format; the other movies are already in FLV format for you. T hen, use the FLV playback
component controls to link the appropriate movie file with the frame for each button, and to turn autoplay on or off. Finally, you'll use
ActionScript to move the T imeline to the appropriate frame when each button is clicked.
About Importing Video

When you import video, you can choose to embed it, which places the video in the T imeline so that it becomes part of the Flash
document, or load it externally, so that it remains a separate file. Embedded video works best for smaller video clips without audio
tracks; if you're using video clips longer than 10 seconds, load external video files and download the video progressively (so the viewer
can watch it as it is downloading) or stream video using Flash Video Server.
Importing Video Files

You can import video files into Flash and convert them into FLV files at the same time. T he Import Video wizard creates an FLV
playback component, which contains the video file and the skin, or controls, that you've selected.
1.
Select frame 1 on the Video Player layer.
2.
Choose File > Import > Import Video.
3.
In the Import Video wizard, select On Your Computer, and click Browse (Windows) or Choose (Mac OS).
4.
In the dialog box, select P enguins.mov from the Lesson09/09Start folder, and click Open. Click Next or Continue in the wizard.
5.
From the deployment options, select P rogressive Download From A Web Server. Click Next or Continue.
Note
P rogressive download lets the video file play as it downloads to the viewer's computer.
6.
Select the Encoding Profiles tab, and then select Flash 8 High Quality (700 kbps) from the profile menu.
7.
Select the Crop And Resize tab. Select Resize Video, and type 480 in the Width field and 320 in the Height field. Click Next or
Continue.
8.
Select SkinUnderP layStopSeekMuteVol.swf from the Skin menu, and select color #666666. Click Next or Continue.
Page 229
Note
T he skin determines the look and feel of the video's controls. You can use one of the skins provided with Flash, or you can customize
your own. T o preview a skin, select it from the Skin menu.
9.
Review the settings for the imported video file, and then click Finish to encode the file. By default, your video file will be
named penguins.flv and saved in the same folder as the Flash document you're working on, which is also where your final swf file will be
saved.
Note
T he encoding process can be complex. How long it takes depends on your computer's processor speed and memory, the complexity and
length of the video, and the encoding options you choose.
10.
When Flash has encoded the video, a black box with the selected skin appears on the Stage. Align the video box in the middle
of the transparent square on the left side of the Stage.
Page 230
11. Choose Control > T est Movie. T he video begins streaming. Use the controls to play, stop, and change the volume for the movie.
Import Video Wizard Options

T he Flash Import Video wizard includes many options. Which options you choose depends on your target audience, the size of the video
you're importing, and the initial format of the movie file.
Deployment Options
P rogressive Download From A Web Server

T his option lets you stream the video using HT T P streaming. If you use this option, you need to upload the FLV file to the
server along with the SWF file.
Stream From Flash Video Streaming Service

T his option lets you upload your video to a Flash Media Server, if your service provider hosts one.
Stream From Flash Media Server

T his option lets you upload your video to a Flash Media Server that you host, rather than one your service provider hosts.
As Mobile Device Video Bundled In SWF

T his option is only available if you are creating a Flash document for Flash Lite 2.0 or later. It bundles a device video file
within the SWF file for use with Flash Lite 2.0 enabled devices (such as mobile phones and handheld computers).
Embed Video In SWF And P lay In T imeline

T his option embeds the video in the Flash document and includes its frames in the T imeline. However, embedding is only
recommended for short video clips with no audio track. Additionally, embedding a video file substantially increases the SWF
file size.
Linked QuickT ime Video For Publishing to QuickT ime

T his option lets you publish your Flash content as a QuickT ime 4 movie and creates a pointer to a QuickT ime video file. You
must publish the SWF file as a QuickT ime video. You cannot display a linked QuickT ime clip in SWF format.
Encoding Options
If you're converting a video file to FLV format, you'll have several encoding options.
Encoding profiles contain settings optimized for specific versions of Flash Player and for different download speeds. When you select a
profile, a summary of its settings appears. You can customize those settings by clicking the Video or Audio tab and selecting a different
option.
Skinning Options
Page 231

T he video's skin determines the look and feel of the controls, and their position on the Stage. Select a skin to see a preview of its
appearance. You can design a custom skin in Flash, save it as an SWF file, and link to it from the Skinning window of the Import Video
wizard.
Controlling the Video Playback

T he FLV playback component lets you control which video plays, whether the video plays automatically, and other aspects of playback.
You'll turn autoplay off for the initial penguin movie, so that it doesn't begin playing until the viewer presses the P lay button. T hen
you'll change the FLV playback component options at different frames to play the appropriate movies for each button, and to turn
autoplay on, so that the movies start playing immediately when the button is pressed.
1.
2.
Select the video component on the Stage.

Click the P arameters tab in the Property inspector. In the Parameters panel, change the autoP lay parameter to false.
3.
T est the movie again. T he penguin video doesn't begin playing until you press the P lay button.
4.
Select frame 10 of the Video Player layer, and press F6 to insert a keyframe.
5.
Select the FLV playback component on the Stage. In the P arameters panel, change the autoP lay parameter to true.
Note
In the final movie, when you click the penguin button, the script will move to frame 10 in the T imeline, and the movie will play
immediately.
6.
Select frame 20 of the Video Player layer, beneath the mandrill frame label. Press F6 to insert a keyframe.
7.
Select the FLV playback component on the Stage. In the P arameters panel, click the source parameter. In the box next to it,
click the magnifying glass icon.
8.
In the Content Path dialog box, click the folder icon, select the Mandrill.flv file in the Lesson09/09Start folder, and click
Open. T hen click OK to close the Content Path dialog box.
Note
T he autoP lay parameter should already be set to true because the keyframe has the properties of the previous keyframe.
Page 232

9.
Select frame 30 of the Video Player layer, press F6 to insert a keyframe, and change the source parameter to the T iger.flv file.
10.
Select frame 40 of the Video Player layer, press F6 to insert a keyframe, and change the source parameter to the Lion.flv file.
S cripting Video Buttons

A different video file is associated with each section of the T imeline (Penguins.flv with frame 10, Mandrill.flv with frame 20, and so
on). Now you need to write the ActionScript that moves the playhead to the appropriate frame in the T imeline when the button is
clicked.
You can use the same set of code for each button, with minor changes. T he first line of code adds an event listener, similar to the one
you used in Lesson 7. T he event listener listens for the button click, and then runs the function (clickListener1, clickListener2, and so
on), which you define in the following lines. T he function moves the playhead to the appropriate frame in the T imeline. When the
playhead moves, the appropriate video file plays, according to the controls in the FLV playback component.
1.
Select frame 1 in the Actions layer, and open the Actions panel.
Note
T o open the Actions panel, choose Window > Actions.
2.
Add an event listener for the first button by typing the following line in the Actions panel:
this.video_button1.addEventListener(MouseEvent.CLICK,clickListener1);
3.
Define the clickListener1 function by typing the following lines in the Actions panel:
function clickListener1(event:MouseEvent):void {
gotoAndPlay("penguins");
}
4.
Copy and paste the lines you just added three times, and then modify each set for the appropriate video:
first copy: video_button2, clickListener2, and "mandrill"

second copy: video_button3, clickListener3, and "tiger"
third copy: video_button4, clickListener4, and "lion".
Note
You can also copy the lines of the script from the Actions panel in the 09End.fla file.
function clickListener2(event:MouseEvent):void {
gotoAndPlay("mandrill");
}
function clickListener3(event:MouseEvent) {
gotoAndPlay("tiger");
}
function clickListener4(event:MouseEvent) {
gotoAndPlay("lion");
}
Page 233
5. Close the Actions panel.
Page 234
Working with Video that Includes Alpha Channels

For the thumbnail buttons, you used video files that fill the FLV playback component. Sometimes, though, you want to use a video file
that doesn't include a background. For this project, the zoo director was filmed in front of a green screen, which was removed using
Adobe After Effects. When you use the video in Flash, the zoo director appears to be in front of the Flash background.
You'll import the video file, which is already in FLV format, into an FLV video component. However, you won't include a skin. T he zoo
director will appear directly on the Stage.
You'll convert the FLV file to a movie clip symbol, so that you can apply the drop shadow filter to set it off from the background.
T hen, you'll animate and mask the clip, so that the zoo director appears just before he begins speaking and disappears when he has
finished.
Importing the Video Clip

Use the Import Video wizard to import the P opup.flv file.
1.
Select the first frame in the Pop Up Video layer, and choose File > Import > Import Video.
2.
In the Import Video wizard, select On Your Computer, and click Browse or Choose. Select the P opup.flv file in the
Lesson09/09Start folder, and click Open. Click Next or Continue to proceed to the next window in the wizard.
3.
4.
From the deployment options, select P rogressive Download From A Web Server. Click Next or Continue.
Select None from the Skin menu, and click Next or Continue.
5.
6.
Click Finish to import the video.

Use the Selection tool to position the new video just above the red bar and the sound buttons.
Page 235
T o see the entire Stage, choose Show All from the pop-up menu just above the Stage
7.
Choose Control > T est Movie to see the video file that uses alpha channels. Close the preview window.
P rofessionals often film people in front of solid green or blue backgrounds, so that they can easily remove, or key, the
background in a video-editing application such as Adobe After Effects. T hen, the person is merged with a different background. T he
image of the zoo director was filmed in front of a green screen, which was removed in After Effects.
Shoot footage in front of a green screen.
1.
2.
Use a green background that is flat, smooth, and free of shadows, so that the color is as pure as possible.
Minimize the light that reflects off the green screen onto the subject.
Keep movement to a minimum for Flash video; use a tripod if possible.
Remove the background in After Effects.
Import the file as footage into After Effects, create a new composition, and drag it onto the Composition T imeline.
Create a garbage mask to roughly outline the shape and remove most of the background. But be sure the subject never moves outside the
mask!
Use the Color Range keying effect to delete the rest of the background. You may need to do some fine-tuning with the Matte Choker
and Spill Suppressor effects. A spill suppressor removes the light that splashes onto the edges of the subject.
Page 236
3.
Export to FLV format
Export the video file to Flash Video (FLV) format directly from After Effects. Be sure to select Encode Alpha Channel. T he alpha
channel is the selection around the subject. Encoding the alpha channel ensures that the video exports without a background.
Adding a Drop S hadow to a Movie Clip

T o distinguish the video from the background, apply a drop shadow filter. First, convert the video to a movie clip symbol so that you
can animate the clip. T hen, within that movie clip symbol, convert the video to a movie clip symbol so that you can apply a drop
shadow to it.
1.
Select the Popup.flv video file on the Stage, and press F8 to convert it to a symbol. Select Movie Clip, name the symbol popUp,
set the registration point to the upper-left corner, and then click OK.
2.
Double-click the movie symbol on the Stage to edit it. Rename Layer 1 Video in the symbol T imeline.
3.
Select the video file on the Stage, and press F8 to convert it into a symbol again. Select Movie Clip, set a center registration
point, and name the symbol popUp_video. T hen click OK.
4.
5.
Select the movie clip symbol on the Stage. In the Filters panel, click the Add Filter icon, and select Drop Shadow.
Set the Blur X and Blur Y options to 10, set the Distance to 10, and set the Strength to 50%.
Animating a Movie Clip
Page 237

Use motion tweens to animate the clip so that it slides in before it plays and slides out when it has finished.
1.
Select the Video layer, and then click the Insert Layer icon. Name the new layer Actions.
2.
Select frame 15 on the Video layer, and press F6 to insert a keyframe.
3.
Select any frame between the keyframes on frames 1 and 15. In the P roperty inspector, select Motion from the T ween menu.
4.
Select frame 1 on the Video layer, and then select the instance of the movie clip on the Stage.
5.
6.
7.
Drag the movie clip straight down below the Stage.
Select frame 175 on the Video layer, and press F6 to add a keyframe. Add another keyframe at frame 190.
Select any frame between 175 and 190. In the Property inspector, select Motion from the T ween menu.
8.
Select frame 190 in the Video layer, select the video on the Stage, and drag the video straight down below the Stage.
Note
You've animated the video clip to move off the screen as the zoo director finishes speaking. However, the exact timing of the end of
the speech depends on the computer playing the video. You may need to move the motion tween earlier or later in the T imeline.
9.
Select frame 190 on the Actions layer, and press F7 to insert a blank keyframe. With that keyframe selected, open the
Actions panel, and type
stop();
Page 238
T he stop action keeps the script from repeating the motion tween.
Masking a Movie Clip

A mask will show the movie clip only within a specific area of the Stage. You'll create a simple mask using the Rectangle tool.
1.
Select the Video layer, and click the Insert Layer icon. Name the new layer Mask.
2.
Select the Rectangle tool, with no stroke and a solid fill in any color.
3.
Draw a rectangle on the Stage, and select it with the Selection tool.
4.
In the P roperty inspector, set the width and height of the rectangle to 300. Set the X and Y values to 0.
5.
Right-click (Windows) or Control-click (Mac OS) the Mask layer, and select Mask.
6.
Choose Control > T est Movie to see the effect. T he video should disappear when it slides off the Stage.
You've made an ordinary project much more engaging with sound and video files imported from other sources.
Page 239
Review
Review Questions
1
2
3
4
How can you edit the length of a sound clip?

What is a skin for a video?
What are the limitations for embedded video clips?
What is a green screen and how is it used?
Review Answers
1
T o edit the length of a sound clip, select the frame that contains it, and click Edit in the Property inspector. T hen,
move the time slider in the Edit Envelope dialog box.
2
T he skin is the combination and appearance of video controls, such as P lay, Fast Forward, and P ause buttons. You
can choose from a wide array of combinations, with the buttons in different positions, and you can customize the skin. If you don't
want viewers to have control over the video, apply no skin.
3
When you embed a video clip, it becomes part of the Flash document and is included in the T imeline. Because
embedded video clips significantly increase the size of the document and produce audio synchronization issues, it's best to embed
video only if it is less than 10 seconds in length and contains no audio track.
4
A green screen is a solid color background shot behind a video subject. T he solid background is then removed from
the footage in an application such as After Effects, so that the subject can be placed in front of a different background.
Page 240
10. Loading and Optimizing Flash Content
A preloader keeps your viewers engaged while the primary movie file loads. Be creative in designing the preloader,
and then use ActionScript to put it to work.
Lesson Overview
Load a SWF file

Monitor the loading progress
Use ActionScript to animate a preloader
Work with dynamic text
Make symbols visible and invisible
Cache bitmaps to improve performance
Page 241
Getting Started
You'll start the lesson by viewing the finished movie, which includes a preloader similar to the one you created in Lesson 2.
1.
Double-click the 10End.swf file in the Lesson10/10End folder to view the final movie.
T he preloadera glass filling with fizzy waterappears. As the promotional movie for the Aqua Zero fizzy drink company loads,
the glass fills and the percentage printed beneath the glass increases. When the entire movie has loaded, the preloader disappears and
the movie plays.
T he preloader and promotional movie have already been created. In this lesson, you'll use ActionScript to load the movie and to run
the preloader until it has loaded.
2.
Open the 10End.fla file in the Lesson10/10End folder. You may want to compare your working file with it, especially when
you're adding ActionScript.
3.
Open the 10Start.fla file in the Lesson10/10Start folder.
T he preloader animation is already on the Stage.
4.
Page 242
Assembling the Preloader Elements

When you first open the 10Start.fla file, the bubbles in the water are animated, but the glass is always full. You'll add a mask that you can
animate with ActionScript, so that it reveals the liquid in the glass as the movie loads. You'll also add a text box that displays the
percentage of the movie that has loaded.
1.
Double-click the glass on the Stage to edit the preloader symbol.
T he preloader symbol contains several layers that include the drawn elements and that animate the bubbles and fizz. When you select
the liquid in the glass object, the Property inspector reports that its instance name is loadingBar_mc.
2.
Double-click the glass on Stage again to edit the loader symbol.
Page 243
T he loader symbol contains only one layer, which contains the water shape. You'll add text and a mask to hide the water.
3.
Click the Insert Layer icon, and name the new layer T ext. Rename Layer 1 Liquid.
4.
Select the first frame in the T ext layer.
5.
With the T ext tool, drag a text box beneath the glass.
6.
In the P roperty inspector, select Dynamic T ext from the menu above the instance name. Select Arial for the typeface, 16 for
the text size, and a dark gray (#666666) for the text color.
Dynamic text changes based on viewer input or other events in the ActionScript. For this lesson, you will be writing ActionScript to
change the text as the movie loads.
7.
Name the instance loaderT ext_txt.
You'll refer to the loaderT ext_txt instance in the ActionScript.
Page 244

8.
9.
In the text box on the Stage, type 0% loaded.
Use the Selection tool to resize and reposition the text box so that it is centered below the glass.
10.
Select the Liquid layer, and click the Insert Layer icon. Name the new layer Mask.
11.
Select frame 1 in the Mask layer.
12.
Drag the loaderMask symbol from the Library panel onto the Stage. P osition it so that it covers the liquid in the glass.
13.
Select the instance of the loaderMask symbol on the Stage. In the Properties inspector, name the instance loaderMask_mc.
Page 245

You'll refer to the loaderMask_mc instance in the ActionScript.
14.
Right-click (Windows) or Control-click (Mac OS) the Mask layer, and choose Mask.
Flash indents the Liquid layer and locks both the Mask and Liquid layers.
15.
Page 246
Loading the Movie

You'll use ActionScript to load the promotional movie called WaterIntroAnimation.swf and the preloader. T o load the movie file you'll
use a request object called a URLRequest.
1.
2.
P ress F9 (Windows) or Option+F9 (Mac OS) to open the Actions panel.
3.
T ype the following lines, exactly as they appear here. T hese lines load the WaterIntroAnimation.swf file.
Note
T o compare punctuation, spacing, spelling, or any other aspects of the ActionScript, view the Actions panel in the 10End.fla file.
var requestObj:URLRequest = new URLRequest("waterIntroAnimation.swf");

var loaderObj:Loader = new Loader();
addChild(loaderObj);
loaderObj.load(requestObj);
T he first line declares a variable called requestObj, which is of the type URLRequest, and it defines the variable as a new request for
the file called WaterIntroAnimation.swf.
T he second line declares a variable called loaderObj, which is of the type Loader, and it creates a new instance of the class
Loader.
T he third line adds the loaderObj variable as a display object that is added to the Stage.
T he fourth line loads the requestObj variable, which was defined in the first line as the WaterIntroAnimation.swf file.
4.
Choose Control > T est Movie to see your movie so far.
T he preloader appears as the movie loads, but the preloader doesn't change. You'll add more ActionScript to animate the text and the
mask to reflect how much of the movie has loaded.
T o see how your movie will appear when it's downloading, choose View > Simulate Download Settings in the preview
window. T o change the simulation for different speeds, such as a 56K modem, DSL, or a T 1 line, choose View > Download Settings.
Page 247
Animating the Preloader

You used event listeners in earlier lessons. An event listener waits for an event, such as a mouse click, and then reports the event so that
the appropriate response can occur. In this case, you want to monitor how much of the SWF file has loaded and display that information
on the screen. T hat is, you're looking for progress.
You'll add an event listener to register and report the progress of the preloader. T hen, you'll define a function that will be called
repeatedly as the file loads. T he function will update the text box that reports how much of the file has loaded and raise the mask to
reveal more of the liquid.
1.
Add the following line to the ActionScript in the Actions panel:
loaderObj.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,
preloadProgress);
T his line adds an event listener of the ProgressEvent type that listens to the loaderObj variable you defined earlier. Once the
file has started loading, ActionScript creates a LoaderInfo object. You're using the contentLoaderInfo property to
access the information in that object. T he event listener, which is also a function, is called preloadP rogress.
2.
Add the following lines to define the function called preloadP rogress
function preloadProgress(event:ProgressEvent):void {
var loadedPercent:int = event.bytesLoaded /event.bytesTotal * 100;
preloader_mc.loadingBar_mc.loaderText_txt.text =
loadedPercent + "%";
preloader_mc.loadingBar_mc.loaderMask_mc.scaleY = loadedPercent / 100;
}
T he first line identifies the function called preloadP rogress as a ProgressEvent type of event, and identifies its data type as void,
which means that it is undefined.
T he lines between the curly brackets define the function itself. First, you've declared a variable called loadedP ercent;
it is an integer; its value equals the result of the bytes that have been loaded divided by the total bytes times 100.
int indicates that
Page 248

T he next line provides the path to the dynamic text. You named the instance loaderT ext_txt, and it's nested inside the loadingBar_mc
instance, which is in turn nested inside the preloader_mc instance. T his line calls for text equal to the value of the loadedPercent
variable plus the % sign, which is included in a string.
Note
You could put any text in the string. For example, you could add the word "loaded" or precede the loadedPercent variable with the words,
"P lease don't leave. You're at" so that it would appear on the screen as "P lease don't leave. You're at 14%".
T he final line in the function traces the path to the mask, which you named loaderMask_mc. Like the text instance, it is nested inside
the loadingBar_mc instance, which is nested inside the preloader_mc instance. T his line scales the mask on its y axis (the vertical axis)
to equal the value of the loadedP ercent variable divided by 100.
All functions are surrounded by curly brackets, so a closing curly bracket completes this function.
3.
Choose Control > T est Movie to preview the movie. In the preview window, choose View > Simulate Download to see the
animated preloader.
As the movie loads, the glass fills and the percentage changes on the screen.
Page 249
Changing the Visibility of Movie Clips

T he preloader does its job now: you can tell how much of the movie is loaded, and it's entertaining. However, if you watch the movie
long enough, you'll see that the preloader appears whenever the movie fades. T o correct that problem, you'll change the visibility of the
preloader instance so that it no longer appears once the movie has loaded.
1.
In the Actions panel, add an event listener to determine when the file has loaded:
loaderObj.contentLoaderInfo.addEventListener(Event.COMPLETE,preloadComplete);
As before, you're adding an event listener to access the Loaderinfo object for the loaderObj loader you created. T his time,
however, you aren't listening for progress. T he event listener only dispatches when the file has completely loaded. T hen it calls the
function called preloadComplete.
2.
Define the preloadComplete function by adding these lines in the Actions panel:
function preloadComplete(event:Event):void
preloader_mc.visible = false;
}
In this function, which is called when the movie has loaded, the visible property of the preloader_mc instance is set to false, meaning
that it is no longer visible.
Page 250
Page 251
Caching Bitmaps
Flash includes a bitmap caching feature, which enables you to play back complex animated vector graphics without sacrificing the quality
of the movie's performance. You can specify that an object be cached as a bitmap at the time the movie is run, preventing Flash from
having to continually redraw the symbol.
Bitmap caching is ideal for complex movie clips where the position of the objects changes, but the shape or content does
not change.
1.
Close the Actions panel.
2.
Select the Preloader layer, and then select the preloader_mc instance on the Stage.
3.
In the P roperty inspector, select Use Runtime Bitmap Caching.
Note
You can apply bitmap caching in the Property inspector, or you can simply add a line of ActionScript. T o apply bitmap caching
through ActionScript for this project, you would add this line of script:
preloader_mc.cacheAsBitmap = true;
Page 252

T he fizzy drink lets the viewer know that the main site is loading, and keeps the viewer entertained at the same time. You can use this
basic process to activate a preloader for a wide range of websites.
Page 253
Review
Review Questions
1
2
3
What is a preloader?
What is the advantage of caching a bitmap?
How can you make an instance invisible?
Review Answers
1
A preloader is an animated image that plays while the main movie or website loads. It entertains viewers while
reassuring them that something is happening, and in many cases, lets them know how much of the file has loaded.
2
T he bitmap caching feature enables you to play back complex animated vector graphics without sacrificing the
quality of the movie's performance. You can specify that an object be cached as a bitmap at the time the movie is run, preventing
Flash from having to continually redraw the symbol.
3
T o make an instance invisible, use ActionScript to set the visible property of the instance to false.
Page 254
11. Publishing Flash Documents

When you've finished your animation, publish it as a SWF file for a website or a DVD, or save frames from the
animation as image files.
Lesson Overview
T est a Flash document

Change publish settings for a document
Understand the difference between image file types
Add metadata
P ublish a SWF file
Detect the version of Flash P layer a viewer has installed
P ublish a self-contained projector file
Page 255
Getting Started
In this lesson, you'll publish the animation that you created in Lesson 5. You'll publish the movie for a website, capture specific frames
as images, and save the movie so that it will play even when Flash P layer isn't present.
1.
Double-click the 11Start.fla file in the Lesson11/11Start folder to open it in Flash.
2.
Page 256
Testing a Flash Document

T roubleshooting is a skill you develop over time, but it's easier to identify the cause of problems if you test your movie frequently as you
create content. If you test after each step, you know which changes you made and, therefore, what might have gone wrong. A good
motto to remember is "T est early. T est often."
One fast way to preview a movie is to choose Control > T est Movie, as you've done in earlier lessons. T his command creates a SWF file
so that you can play the movie; it does not create the HT ML file or any other files necessary to play the movie from a website or DVD.
When you believe you've completed your movie, or a portion of the movie, take the time to make sure all the pieces are in place and
that they perform the way you expect them to.
1.
Review the storyboard for the project, if you have one, or other documents that describe the purpose and requirements of the
project. If such documents do not exist, write a description of what you expect to see when you view the movie. Include information
about the length of the animation, any buttons or links included in the movie, and what should be visible as the movie progresses.
2.
Using the storyboard, project requirements, or your written description, create a check list that you can use to verify that the
movie meets your expectations.
3.
Choose Control > T est Movie. As the movie plays, compare it with your check list. Click buttons and links to ensure they work
as expected.
4.
Choose File > Publish to publish the files required for your movie. Package the files and distribute them to colleagues or friends
who can help you test the movie. Ask them to run the movie and to ensure that all the files are included, and that the movie meets the
criteria on your check list. Encourage testers to use the movie as they would if they were its target audience.
5.
Make changes and corrections as necessary to finalize the movie, and then test it again to ensure it meets your criteria.
Note the mistakes you find, so that you can avoid them in the future, or at least recognize them more quickly when you
troubleshoot future issues.
Page 257
Adding Metadata
Metadata is information about data. Metadata includes a document's title, a description, keywords, the date the file was created, and any
other information about the document itself. You can add metadata to a Flash document, and that metadata is published in the HT ML
document that accompanies the SWF file. Metadata makes it easier for people to search for your movie.
1.
Choose Modify > Document.
2.
In the Document Properties dialog box, type Martian Mike Gets Spaced Out in the T itle field.
3.
In the Description field, type Spaced Out animation showcases our favorite outer space buddy, Martian Mike. Animation,
Martian, Spaced Out, Martian Mike, Spaceship animation, mini movie, space, science fiction, cute space animation, Flash animation,
webisode.
T here is no Keywords field, but you can add keywords to the Description field. Include different ways of describing the file,
such as animation, mini movie, and webisode above.
4.
Click OK to close the dialog box. T he metadata will be saved with the Flash document, and included in the HT ML file
Flash creates when you publish the file.
Page 258
Publishing a Movie for the Web

When you publish a movie for the web, Flash creates a Flash SWF file, an HT ML document that inserts your Flash content in a browser
window, and a JavaScript file named AC_RunActiveContent.js that lets your SWF file play automatically in active content-compliant
browsers. You need to upload all three of these files, along with any other files your SWF file references, to your web server. T he P ublish
command saves all the required files to the same folder.
Note
Active content is content that opens a separate application, such as Adobe Flash Player or Adobe Reader. Active content-compliant
browsers open the appropriate application without requiring input from the viewer.
You can specify different options for publishing a movie, including whether to detect the version of Flash Player installed on the
viewer's computer. When you change the settings in the P ublish Settings dialog box, they are saved with the document.
S pecifying Flash File S ettings

You can determine how Flash publishes the SWF file, including which version of Flash P layer it requires, which version of ActionScript it
uses, and whether the movie is compressed.
1.
Choose File > Publish Settings.
2.
Click the Formats tab, and select Flash (SWF) and HT ML. You may also choose to publish the file in additional formats.
3.
Select the Flash tab.
4.
Select a version of Flash P layer. Some Flash CS3 features will not play as expected in versions of the player earlier than Flash
P layer 9.
5.
Select the appropriate ActionScript version. You've used ActionScript 3.0 in lessons in this book.
6.
Select Compress Movie if the file is large and you want to reduce download times. If you select this option, be sure to test the
final movie before uploading it.
Page 259
7.
Click the HT ML tab.
8.
Select Flash Only from the T emplate menu.
Note
T o learn about other template options, select one and then click Info.
Detecting the Version of Flash Player

Some Flash features require specific versions of Flash P layer to play as expected. You can automatically detect the version of Flash
P layer on a viewer's computer; if the Flash Player version is not the one required, a message will prompt the viewer to download the
updated player.
1.
On the HT ML tab of the P ublish Settings dialog box, select Detect Flash Version.
Page 260
2.
Click P ublish, and then click OK to close the dialog box.
Flash publishes the file, creating a SWF, HT ML, and JavaScript file, all saved to the same folder as the Flash document.
Note
Adobe also provides a Flash Detection Kit, which is a series of sample code and files that includes more options for informing viewers
about the required Flash Player version and how to obtain it. T he detection kit is updated when popular browsers make significant
changes that affect the way Flash P layer is accessed. T o learn more about the Flash Detection Kit, or to download it, visit
www.adobe.com/products/flashplayer/download/detection_kit/.
Page 261
Alternative Publishing Options

By default, Flash creates SWF, HT ML, and AC_RunActiveContent.js files for a document. However, you can also choose to save
specific frames of the movie as images, or to save the file as a projector, which can play on computers that do not have Flash P layer
installed.
S aving Frames as Images

Sometimes you don't want to share an entire movie, but want to display a particular frame. Exporting a frame as a GIF, JP EG, or P NG
image might be useful if you need an image for a portfolio or want to provide an end image to a viewer who doesn't have Flash Player.
You can also use individual images to compile a storyboard of multiple scenes to share with a client before the Flash file is interactive.
1.
2.
Choose File > Publish Settings, and then click the Formats tab. Flash (.swf) and HT ML are selected by default.
Select GIF Image (.gif), JPEG Image (.jpg), and PNG Image (.png), and click OK to close the dialog box.
T hese options export the frame currently selected in the Flash document.
3.
Select the last frame in the T imeline (frame 150). T his is the frame that Flash will export as image files.
Page 262

4.
Choose File > Publish. Flash publishes the files to the folder that contains the Flash document file.
5.
Navigate to the Lesson11/11Start folder in Windows Explorer or the Mac OS Finder. T he folder contains SWF, HT ML, GIF,
P NG, and JP EG files. Open each file to view it. A JavaScript file is also saved in the folder.
Note
Which file format you choose depends on the type of content. If the frame contains an illustration with flat, simple colors, GIF is a
good option. If the frame is more photographic and you don't mind compressing image data, JPEG may be the best choice. If the frame
includes transparency, choose P NG.
Publishing Movies for Mobile Devices

You can create content for mobile phones and other mobile devices using Flash Lite. T o create a Flash Lite document easily, choose File
> New, select Flash File (Mobile) and click OK, and then select the target devices in Adobe Device Central. Flash automatically opens
the file with the appropriate settings.
Before you publish the file, use Device Central to preview the content in specific mobile devices. T o learn more about publishing Flash
Lite files for mobile devices, refer to both Flash Help and Device Central Help.
Page 263
Creating a Projector
Most computers have Flash P layer installed, but you may need to distribute a movie to someone who doesn't have Flash Player, or who
has an older version. You can save your movie as a projector, which includes all the files necessary to play the movie without any
additional applications. Because they contain the player data as well, projector files are larger than SWF files.
1.
2.
Choose File > Publish Settings, and click the Formats tab.
Deselect GIF, JPEG, and PNG. Select Windows P rojector and Macintosh Projector.
Page 264
3.
Click P ublish.
4.
When the file has been published, click OK to close the dialog box.
5.
Open the Lesson11/11Start folder in Windows Explorer or Mac OS Finder.
6.
Open the projector file for your platform (Windows or Mac OS). T he Windows P rojector file has an EXE extension. T he Mac
OS projector file is in a folder with an AP P extension.
You've published a file that you could post on a web server or share on a CD or DVD. You can use these publishing methods to finalize
any Flash projects you create and share them with the world.
Made for TV
Most Flash content is published for websites or portable media devices. However, you can also use Flash to create video for television
broadcast. T he key is to ensure that you've used the appropriate frame rate and screen dimension. Broadcast requires a screen
dimension of 720 x 480 and a frame rate of 26 frames per second.
Page 265
Page 266
Review
Review Questions
1
2
3
4
What files do you need to upload to a server to ensure your video plays as expected in a web browser?
How can you tell which version of Flash Player a viewer has installed, and why is it important?
Define metadata. How do you add it to a Flash document?
What is a projector file?
Review Answers
1
T o ensure your movie plays as expected in web browsers, upload the Flash SWF file, the HT ML document that
inserts the Flash content into a browser window, and the JavaScript file named AC_RunActiveContent.js, which lets your SWF file
play automatically in most current web browsers. You also need to upload any files your SWF file links to, such as video or image
files, and be sure that they are in the appropriate folders (usually the same folder as the final SWF file).
2
Select Detect Flash Version in the HT ML panel of the P ublish Settings dialog box to automatically detect the
version of Flash Player on a viewer's computer. Some Flash features require specific versions of Flash Player to play as expected.
3
Metadata is information about data. Metadata includes a document's title, a description, keywords, the date the file
was created, and any other information about the document itself. Metadata in a Flash document is published in the HT ML
document that accompanies the SWF file, making it easier for people to search for your movie. T o add metadata to a Flash
document, choose Modify > Document, and enter a title and description, which may include keywords.
4
A projector includes all the files necessary to play the movie without any additional applications, so people who
don't have Flash P layer, or who don't have the current version, can view your movie.
Page 267
Appendix A. Hexadecimal Color Codes

T hroughout the book, we've referred to colors by their hexadecimal values, which are commonly used in HT ML and other web
programming. Using a hexadecimal value enables you to be very precise about the color you're using, rather than referring to it as "blue"
or "green." Hexadecimal values are especially useful when you're using the Adobe Color P icker or other tools that don't list color names.
T his chart shows 216 standard web colors and their hexadecimal color codes, as well as the RGB (red, green, and blue) values that
combine to create the color. Use this as a reference to select colors, but consider it a starting point. T here are many more colors
available. Search the web for "hexadecimal color codes" to find a variety of tools to help you select colors and find their corresponding
hexadecimal codes.
Page 268
Contributors
Andrew Chew Andrew has developed award-winning and industry-leading online training based on Flash since 2000 with Ninth House
Network and Vitesse Learning. In 2005, he started his own company, Andrew Chew Interactive, offering custom interactive online
solutions. http://www.andrewchew.com
T yler Munson T yler, who lent his design and art direction to several lessons, launched the design and branding firm munsonDesign in the
South of Market district of San Francisco. T yler has successfully led the creation of programs for clients including Gap, Palm, Oracle,
and music producer Paul Oakenfold. http://www.munsondesign.com
Nader Nejat Nader founded Omega Mobile, a leading provider or rich mobile multimedia experiences, products, services, and training.
Omega Mobile was among the first in the industry to design content and applications using Flash for mobile devices.
http://www.omegamobile.com
Colin Smith Colin is a best-selling author, trainer, and award-winning new-media designer who has caused a stir in the design community
with Flash and Adobe P hotoshop expertise. He is the author of How to Wow with Flash from Peachpit P ress.
http://www.photoshopcafe.com
P aul Smith P aul studied digital design at Expression College for Digital Arts in Emeryville, California. As a New Media intern at afstudio,
he helped develop lessons for this book. P aul was especially helpful in the creation of Lesson 9. www.paulclaytonsmith.com
Lee Unkrich Lee, a filmmaker at P ixar Animation Studios, lent his photography skills to provide professional images, including the zoo
photos used in Lessons 6 and 9.
Page 269

Adobe Flash CS3 Professional Classroom in A Book

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Adobe Flash CS3 Professional Classroom in A Book

Încărcat de

Drepturi de autor:

Formate disponibile

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.

Adobe Flash C S 3 Profe ssion al C lassroom in a Book

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

Adobe Systems, Inc.

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

About Classroom in a Book

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

Here is an overview of the contents of the Classroom in a Book CD

Lesson Files ... and S o Much More

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

Copying the Lesson Files

About Copying the S ample Movies and Projects

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

How to Use these Lessons

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

Adobe Certified Expert (ACE)

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

Open a file in Flash

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

Starting Flash and Opening a File

Close the preview window.

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

Getting to Know the Work Area

About the S tage

) to zoom out, or choose View > P asteboard.

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

Understanding the Timeline

Select the Mask layer in the T imeline.

[View full size image]

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

[View full size image]

[View full size image]

Choose Insert > T imeline > Keyframe.

[View full size image]

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

Working with the Library Panel

About the Library Panel

Adding an Item from the Library Panel

[View full size image]

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

Select the pour_bottle symbol in the Library panel.

[View full size image]

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

Using the Property Inspector

Positioning an Object on the S tage

Select the bottle that you dragged onto the Stage.

Choose Window > T ransform to open the T ransform panel.

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

Using Motion Tweens to Animate an Object

Select frame 24 in the Pour layer, and press F6 to insert a keyframe.

Select the bottle you positioned on the pasteboard.

[View full size image]

ABC Amber CHM Converter Trial version, http://www.processtext.com/abcchm.html

Select frame 59, and press F6 to insert a keyframe.

Working with Panels