Documentos de Académico
Documentos de Profesional
Documentos de Cultura
html
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
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
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
Page 5
[*]
What's on the CD
[*]
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
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.
Page 10
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:
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:
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
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.
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
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
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.
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.
Page 18
Page 19
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.
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.
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
Object properties
[View full size image]
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).
[View full size image]
3.
4.
In the T ransform panel, select Rotate, and type 35 in the Rotate box. Press Enter or Return to apply the value.
Page 23
You'll animate the bottle so that it appears to be pouring, and then move the bottle off the Stage.
1.
2.
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.
[View full size image]
7.
In the T imeline, select frame 42 in the Pour layer, and press F6 to insert a keyframe.
8.
Select the bottle on the Stage, and in the T ransform panel, type 35 in the Rotate box. P ress Enter or Return.
9.
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.
[View full size image]
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
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.
2.
3.
Click the aqua circle with the letters in it to enlarge it on the screen.
Select the Pour layer in the T imeline, and then click the Insert Layer icon (
).
Page 27
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.
) in the options area of the T ools panel. T he Adobe Color P icker opens.
) in the options area of the T ools panel. T he Color Picker opens again.
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.
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.
Page 29
Page 30
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
Choose Control > T est Movie. Flash opens and plays the movie in a separate window.
2.
Page 33
2.
Click Formats.
3.
4.
Click P ublish.
Page 34
Page 35
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.
Page 36
3.
Click Getting Started > What's New > New Features to see links to new features in Flash CS3.
2.
Page 37
3.
4.
Click Search.
Select "Using the History Panel" to read about the History panel.
Page 38
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.
[View full size image]
Page 39
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
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
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
In this lesson, you'll learn how to do the following:
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.
Choose File > Save As. Name the file 02_workingcopy.fla, and save it in the 02Start folder. Saving a working copy ensures
that the original start file will be available if you wish to start over.
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.
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.
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.
2.
Make sure the entire rectangle is still selected. If necessary, drag the Selection tool around it again.
).
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.
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.
Page 45
2.
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
).
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.
T he bottom of the rectangle is narrow, and the top is wide. It looks much more like a drinking glass.
Page 47
Page 48
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.
Click beneath the gradient definition bar to create a new color pointer.
Page 49
2.
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.
Page 50
2.
).
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.
2.
3.
4.
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.
) 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
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.
4.
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.
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 (
Page 56
8.
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
2.
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.
3.
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.
[View full size image]
Page 59
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.
Click the Insert Layer icon nine times to create nine new layers.
2.
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.
[View full size image]
5.
Copy the same frames to each layer, so that the starting keyframe for each layer is at a different position, from frame 1 to
frame 15.
[View full size image]
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.
[View full size image]
9.
Page 61
2.
Choose Insert > T imeline > Layer, and name the layer Fizz.
3.
4.
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.
6.
).
7.
Adding Lines
You'll add lines to the oval to create a star shape.
Select the Line tool (
1.
).
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
Hold down the Shift key and select both the horizontal and vertical lines.
8.
9.
10.
11.
T he second set of lines are perpendicular to the first set, creating a star.
[View full size image]
With the Selection tool, drag a selection around the entire star so that all four lines and the circle are selected.
2.
3.
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.
1.
2.
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.
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.
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.
Page 64
3.
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.
5.
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.
3.
4.
Choose Edit > Deselect All to prevent the fill from sitting above the outline.
5.
6.
In the T imeline, select the Bubble10 layer, beneath the Fizz layer.
7.
8.
Choose Edit > P aste In P lace. T he drink fill shape is pasted into the new layer.
9.
10.
Flash locks the Mask layer and indents the layer beneath it.
[View full size image]
Page 66
11.
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
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
In this lesson, you'll learn how to do the following:
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.
3.
Double-click the 03Start.fla file in the Lesson03/03Start folder to open the initial project file in Flash.
4.
Choose File > Save As. Name the file 03_workingcopy.fla, and save it in the 03Start folder. Saving a working copy ensures
that the original start file will be available if you wish to start over.
Page 71
2.
3.
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.
[View full size image]
Page 72
Importing Layers
When an imported Illustrator file contains layers, you can import them in any of the following ways:
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.
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 (
),
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
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
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.
3.
4.
5.
Page 77
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.
2.
3.
Hold down the Shift key whenever you want to select multiple files.
4.
Flash adds the three JPEG files you imported to the library, without placing them on the Stage.
Page 78
2.
3.
In the T imeline, drag the Beach Background layer below the Menu Background layer.
4.
5.
6.
T he Beach_umbrellas jpg image appears beneath the other layers on the Stage.
Page 79
1.
2.
3.
Click OK.
Page 80
Page 81
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.
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 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
2.
3.
Flash adds the menu_button symbol to the library and opens the menu_button T imeline.
2.
3.
4.
Select all the layers in the file. T he Illustrator file contains three button states.
5.
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.
[View full size image]
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.
[View full size image]
2.
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.
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
4.
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.
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
2.
3.
4.
5.
6.
7.
8.
9.
Page 88
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.
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.
2.
3.
4.
5.
6.
With the Selection tool, double-click the instance of the preview_boxes symbol to edit it in place.
2.
3.
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.
5.
Page 90
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.
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
3.
4.
5.
T ype #FF6600 in the color value field to apply a web-safe orange 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
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
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
In this lesson, you'll learn how to do the following:
T his lesson will take approximately 90 minutes to complete. If needed, remove the previous lesson folder from your hard drive, and
copy the Lesson04 folder onto it.
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.
Double-click the 04End.swf file in the Lesson04/04End folder to play the animation.
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.
Double-click the 04Start.fla file in the Lesson04/04Start folder to open the initial project file in Flash.
3.
Choose File > Save As. Name the file 04_workingcopy.fla, and save it in the 04Start folder. Saving a working copy ensures
that the original start file will be available if you wish to start over.
Page 95
Select the Assets layer, and click the Insert Layer icon twice.
2.
3.
Select the Assets layer, and click the Insert Layer Folder icon (
2.
).
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
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.
7.
With the Background layer selected, click the Insert Layer icon, and name the new layer Cellphone.
Page 97
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.
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.
2.
3.
2.
Not sure which frame you've selected? T he current frame number is shown in the bar beneath the T imeline.
2.
3.
In the P roperty inspector, select Corny_birthday.wav from the Sound menu. T he WAV file is already in the library.
4.
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.
[View full size image]
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();
[View full size image]
8.
Page 99
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.
4.
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.
9.
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.
3.
Page 100
5.
6.
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.
[View full size image]
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.
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.
).
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.
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.
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
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.
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.
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
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.
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.
2.
3.
Select Graphic for the T ype, name the symbol low_batt_text, and click OK.
Page 105
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.
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.
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.
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.
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.
[View full size image]
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
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.
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
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.
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.
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.
4.
) beneath the T imeline, and select Onion All from the pop-up menu.
Page 109
5.
) for the Mask layer. With the masked rectangles as outlines, you can see all the text.
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.
[View full size image]
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.
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.
Page 111
Page 112
2.
Select frame 228 in the Cellphone layer, and press F6 to insert a keyframe.
3.
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.
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.
14.
Shift the phone to the left so that it is in a similar position as on frame 230.
Page 113
Scrub through the T imeline from frames 228 to 238 to see the animation.
2.
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.
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.
[View full size image]
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.
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.
12.
13.
14.
Page 114
15.
16.
In the P roperty inspector, click the Filters tab to open the Filters panel.
17.
18.
Specify the following settings for the filter: Blur X: 20; Blur Y: 20; Strength: 100%; Quality: High; Color: #FFFF00.
Page 115
19.
20.
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
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
In this lesson, you'll learn how to do the following:
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.
Double-click the 05End.swf file in the Lesson05/05End folder to play the animation.
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.
Double-click the 05Start.fla file in the Lesson05/05Start folder to open the initial project file in Flash.
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.
Choose File > Save As. Name the file 05_workingcopy.fla, and save it in the 05Start folder. Saving a working copy ensures
that the original start file will be available if you wish to start over.
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
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
7.
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.
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.
Page 122
Page 123
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.
5.
6.
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.
Select any frame between frames 140 and 280, 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.
[View full size image]
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.
Page 124
Click Scene 1 in the Edit bar above the Stage to return to the main T imeline.
2.
3.
P ress Alt (Windows) or Option (Mac OS), and drag the instance to another area of the Stage to copy it.
4.
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
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.
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
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.
[View full size image]
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.
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
2.
3.
4.
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.
4.
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.
7.
Page 129
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.
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.
Select the Inner Eye layer, and then click the Insert Layer icon.
2.
3.
Select the Inner Eye layer, and then select the shape on it.
4.
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.
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.
12.
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.
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.
[View full size image]
19.
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.
23.
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
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.
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.
[View full size image]
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.
[View full size image]
Page 132
Page 133
2.
Select frame 145 of the Alien layer, and press F6 to insert a keyframe.
3.
Select any frame between frames 1 and 145, and select Motion from the T ween menu in the P roperty inspector.
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):
Page 134
Page 135
Adding Sound
You'll add an electronic, space-age soundtrack to loop while the animation takes place.
1.
2.
3.
Select Start from the Sync menu and Loop from the pop-up menu next to it.
Page 136
Select frame 150 on the Actions layer, and press F7 to insert a blank keyframe.
2.
3.
4.
stop();
[View full size image]
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.
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
Select the T itle: O layer, and select the letter O on the pasteboard.
2.
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.
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
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.
Select the Cloud Morph layer, and then select the cloud graphic on the pasteboard.
2.
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.
Select any frame between frames 132 and 136, and select Motion from the T ween menu in the P roperty inspector.
Page 140
12.
Select frame 137 of the Cloud Morph layer, and press F6 to insert a keyframe.
13.
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.
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
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.
Select any frame between frames 145 and 148, and select Motion from the T ween menu in the P roperty inspector.
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
Select the Spaceship layer, and then select the spaceship on the pasteboard.
2.
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. (
), 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
Select frame 140 of the Spaceship layer, and press F6 to insert a keyframe.
2.
Select any frame between frames 92 and 140, and select Motion from the T ween menu in the P roperty inspector.
3.
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
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
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
In this lesson, you'll learn how to do the following:
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
T his lesson will take approximately 90 minutes to complete. If needed, remove the previous lesson folder from your hard drive, and
copy the Lesson06 folder onto it.
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.
Double-click the 06End.swf file in the Lesson06/06End folder to play the animation.
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.
Choose File > Save As. Name the file 06_workingcopy.fla, and save it in the 06Start folder. Saving a working copy ensures
that the original start file will be available if you wish to start over.
Page 150
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.
3.
4.
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.
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
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
2.
Select the Rectangle tool, and select the Object Drawing icon in the options area of the T ools panel.
3.
4.
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.
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.
Select any frame between frames 1 and 10, and select Motion from the T ween menu in the P roperty inspector.
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.
Adding a Title
In this project, the title appears on the background of the page, no matter what else is displayed.
1.
2.
Select the T ext tool, and click an insertion point in the upper-left corner of the Stage.
3.
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.
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
2.
Select the Rectangle tool; specify no stroke and a fill color of #FFCC00.
3.
4.
Select the rectangle. In the Property inspector, enter the following values: width=100, height=4, X=37, and Y=73.
5.
6.
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.
3.
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.
[View full size image]
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.
10.
11.
12.
13.
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.
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
In the Convert T o Symbol dialog box, select Button, and name the symbol home_button. Click OK.
3.
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.
[View full size image]
8.
Select the Over and Down frames in the Graphics layer, and press F6 to insert keyframes.
Page 162
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.
[View full size image]
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.
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
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.
[View full size image]
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.
[View full size image]
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.
[View full size image]
17.
18.
19.
Click the button. You should hear the shutter sound and see the Down state of the button.
20.
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.
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.
Page 167
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.
[View full size image]
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
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
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.
3.
4.
Name each of the other buttons btn2_btn, btn3_btn, btn4_btn, btn5_btn, btn6_btn, and btn7_btn.
5.
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.
4.
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.
8.
In the Labels layer, add keyframes to frames 14, 21, 28, 35, and 42.
Page 170
9.
10.
11.
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.
[View full size image]
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.
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
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");
myloader.load(request);
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");
myloader.load(request);
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
[View full size image]
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
In this lesson, you'll learn how to do the following:
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.
Choose File > Save As. Name the file 07_workingcopy.fla, and save it in the 07Start folder. Saving a working copy ensures
that the original start file will be available if you wish to start over.
Page 176
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
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.
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.
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
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.
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.
[View full size image]
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.
[View full size image]
Page 181
this.bytesTotal, type
play();
2.
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
2.
3.
stop();
[View full size image]
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.
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.
fileName = "content_home.txt"
As you type, the proper syntax appears in the Script pane below.
[View full size image]
Page 184
5.
6.
Page 185
loader.load(requestURL);
[View full size image]
Page 186
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.
[View full size image]
Page 187
Page 188
b1.addEventListener(MouseEvent.CLICK, b1Listener);
2.
T ype the following lines to add event listeners to the other buttons, as well:
b2.addEventListener(MouseEvent.CLICK, b2Listener);
b3.addEventListener(MouseEvent.CLICK, b3Listener);
b4.addEventListener(MouseEvent.CLICK, b4Listener);
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");
}
[View full size image]
4.
function b2Listener(event:MouseEvent):void {
loadFile("content_cast.txt");
}
function b3Listener(event:MouseEvent):void {
Page 189
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.
[View full size image]
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.
[View full size image]
Page 191
Page 192
Review
Review Questions
1
2
3
4
5
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
[View full size image]
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
In this lesson, you'll learn how to do the following:
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
Lesson08 folder onto it.
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.
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.
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
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.
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.
Note
Page 197
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.
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
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.
[View full size image]
10.
Page 199
Select frame 1 in the Components layer, and then select the text area on the Stage.
2.
3.
Click the editable parameter, and select false so that the text can't be changed.
4.
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.
[View full size image]
Page 200
6.
Page 201
In the Components panel, select the T ileList component from the User Interface folder.
2.
3.
In the P roperty inspector, set the width to 270, height to 318, X value to 47, and Y value to 150.
4.
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.
[View full size image]
7.
Click the scrollP olicy parameter, and select on to display a scroll bar.
Page 202
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.
[View full size image]
12.
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
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.
function thumbnailClicked(event:Event):void{
mineral_ta.text = event.target.selectedItem.data;
}
[View full size image]
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.
[View full size image]
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.
[View full size image]
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.
[View full size image]
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.
[View full size image]
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.
[View full size image]
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.
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
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
In this lesson, you'll learn how to do the following:
T his lesson will take approximately 90 minutes to complete. If needed, remove the previous lesson folder from your hard drive, and
copy the Lesson09 folder onto it.
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.
Double-click the 09End.swf file in the Lesson09/09End folder to play the animation.
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.
[View full size image]
2.
Double-click the 09Start.fla file in the Lesson09/09Start folder to open the initial project file in Flash.
3.
Choose File > Save As. Name the file 09_workingcopy.fla, and save it in the 09Start folder. Saving a working copy ensures
that the original start file will be available if you wish to start over.
Page 212
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.
[View full size image]
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
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.
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.
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.
2.
Select the Monkey.wav file in the Lesson09/09Start/Sounds folder, and click Open (Windows) or Import T o Library (Mac OS).
3.
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.
Page 217
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.
[View full size image]
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.
[View full size image]
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
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
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.
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.
Page 221
Page 222
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.
[View full size image]
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.
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.
[View full size image]
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.
3.
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.
[View full size image]
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.
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.
[View full size image]
14.
15.
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
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.
stop();
[View full size image]
8.
Add stop actions to frames 10, 20, 30, and 40 in the Actions layer. Close the Actions panel.
Page 227
Page 228
2.
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.
[View full size image]
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.
Close the preview window.
Deployment Options
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
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.
[View full size image]
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
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.
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:
this.video_button2.addEventListener(MouseEvent.CLICK,clickListener2);
function clickListener2(event:MouseEvent):void {
gotoAndPlay("mandrill");
}
this.video_button3.addEventListener(MouseEvent.CLICK,clickListener3);
function clickListener3(event:MouseEvent) {
gotoAndPlay("tiger");
}
this.video_button4.addEventListener(MouseEvent.CLICK,clickListener4);
function clickListener4(event:MouseEvent) {
gotoAndPlay("lion");
}
[View full size image]
Page 233
Page 234
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.
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.
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 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.
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%.
Page 237
Select the Video layer, and then click the Insert Layer icon. Name the new layer Actions.
2.
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.
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.
[View full size image]
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
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
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
In this lesson, you'll learn how to do the following:
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
Lesson10 folder onto it.
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.
4.
Choose File > Save As. Name the file 10_workingcopy.fla, and save it in the 10Start folder. Saving a working copy ensures
that the original start file will be available if you wish to start over.
Page 242
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.
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.
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.
[View full size image]
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.
Page 244
9.
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.
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
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
2.
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.
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.
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
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.
Page 248
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
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.
[View full size image]
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.
[View full size image]
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.
2.
Select the Preloader layer, and then select the preloader_mc instance on the Stage.
3.
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
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
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
In this lesson, you'll learn how to do the following:
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
Lesson11 folder onto it.
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.
2.
Choose File > Save As. Name the file 11_workingcopy.fla, and save it in the 11Start folder. Saving a working copy ensures
that the original start file will be available if you wish to start over.
Page 256
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.
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
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.
2.
Click the Formats tab, and select Flash (SWF) and HT ML. You may also choose to publish the file in additional formats.
3.
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.
8.
Note
T o learn about other template options, select one and then click Info.
On the HT ML tab of the P ublish Settings dialog box, select Detect Flash Version.
Page 260
2.
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
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
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.
[View full size image]
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.
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
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