Beginning web animation with Macromedia Flash MX

Macromedia Flash is the de facto standard application for authoring rich media content on the World Wide Web. This course will
teach you how to use Flash MX, Macromedia's latest and most advanced version of the software. We'll cover the basics for new
users and set you on the right track to creating rich media Web sites of your own.

Lessons
1. What is Flash?
This lesson discusses the basics of Flash and contains all the information you need to begin using
Flash. We briefly mention the core concepts of Web development, and then discuss the pros and
cons of using Flash content. You'll also see some example uses of Flash movies on the Internet.

2. Learn the Flash interface

This lesson teaches you the basics of the Flash authoring tool. You set up your movie properties,
learn the functions of the tools palette, and draw graphics for use in the example movie Face Facts.
You learn how to use the timeline, layers, and other panels that you'll often find indispensable.

3. Animate the face

In this lesson, you learn the terms and methods used in the Flash animation process. You then apply
what you've learned to the Face Facts project and animate the face you drew in Lesson 2.

4. Add ActionScript to your movie

In this lesson, you transform Face Facts from animation into interactive media by adding user control
via buttons and ActionScript. You learn to import images into Flash and to add text with the Text tool.

5. Publish for everyone

The Web is a medium for making information available to everyone, so you need to ensure that your
content is accessible even to people with disabilities. This lesson gives reasons why accessible
content publishing is the right thing to do and shows you how to make your Flash movie more
accessible and usable to everyone. Then you'll finally get to publish your movie.
6. Keep learning
This course teaches you the basics of Flash publishing, but Flash has much, much more to offer. This
lesson discusses what you've learned and where to go to find more information.

What is Flash?

This lesson discusses the basics of Flash and contains all the information you need to begin using Flash. We briefly mention the core concepts of
Web development, and then discuss the pros and cons of using Flash content. You'll also see some example uses of Flash movies on the
Internet.
 

Let's get started

Get the software

Welcome to Beginning Flash MX. This course teaches you how to use Macromedia Flash MX, a
program for authoring and viewing multimedia content on the Web.
Macromedia Flash MX is the "must
have" tool used by over one million
professionals to deliver the best user
experiences on the web, increasing both
revenue and customer satisfaction while
lowering costs.

What to expect from this course » Macromedia® Flash 8

First, we go over a few topics to get everyone up to speed. Some students may know nothing about
Flash except the name, whereas others may have already used Flash, so there'll be a brief
introduction to what Flash is and how it's used. You also learn the basics of Web development, how
the Flash program fits into the picture, and some benefits of using Flash.

In Lesson 2, you set up your Flash program and begin learning how to use it. Drawing in Flash
differs from every other drawing program available, so learn how to use each of the different
drawing tools. You also learn what the timeline is and try your hand at beginning animation
techniques.
In Lessons 3 and 4, you get a feel for more advanced techniques, such as making symbols and
storing them in a reusable library. You also learn the basics of ActionScript, Flash's built-in
scripting language. (Don't worry; we won't delve too deeply into the code.)

In Lesson 5, we discuss ways to make your Flash Web site accessible to everyone, as well as a
variety of different ways to publish your Flash content. The key objective here is inclusive Web
design.

Finally, Lesson 6 presents best-practice techniques and common mistakes that beginning Flash
users make. If you want to learn more, we provide you with topics to research and a list of
resources, such as links, forums, and discussion groups.

What to expect from this lesson

This lesson discusses the concepts that you should know before starting this course. We talk a little
bit about the history of the Internet, differences in image file formats, how Flash came to be, and
what Flash is. After you've learned this information, you encounter the pros and cons of using Flash.
The lesson closes with some advanced examples of Flash on already existing Web sites to give you
a few ideas of what can be achieved by using Flash.
 

What you need to know

 
The Internet, as it exists today, was started in the early '90s by scholars and researchers as a way
to share documents and research papers electronically. They developed a simple method called
HTTP (Hypertext Transfer Protocol) for trading files, and a simple format called HTML (Hypertext
Markup Language) for those files. Virtually every Web site you've ever seen (including Flash Web
sites) has used these two technologies.

HTML, though a grand idea, did not originally offer much control over presentation of documents.
Soon, the language grew to include the option for images, colors, and more visual style. Web
designers began to use HTML and constantly asked for more and more control over presentation. It
quickly became obvious that the language could only go so far to please everyone, and the
researchers thought much of this control would be better suited to alternate technologies.

Some of these alternate technologies, such as JavaScript and CSS (Cascading Style Sheets), were
designed to work seamlessly alongside HTML. JavaScript adds interactivity and functionality to Web
pages whereas CSS allows a large amount of control over style properties such as colors, fonts,
and layout.

Unfortunately, not every technology could be designed this way because there weren't enough
resources to cover all the possibilities and features people requested, so the designers of HTML
decided to make a standard way to include, or embed, other functionality and content into a Web
page. These other technologies could be developed by third parties and embedded in an HTML
document by the use of a plug-in. A plug-in is a small piece of software that adds functionality to a
computer program. In the case of Flash, you use a plug-in to add functionality to a Web browser,
such as Microsoft Internet Explorer, AOL, or Netscape Navigator. Macromedia Flash is an
embedded technology.

Explore graphic formats

Another concept you need to understand to learn Flash is the difference between the two main
types of graphic formats: raster and vector.

A raster graphic is made up of a grid of pixels, or small dots of color, that when viewed together,
give the appearance of an image. Raster is the most common image format on the Web and most
raster formats are very well suited for detailed images, such as photographs. Graphic file formats
such as JPEG (Joint Photographic Experts Group), GIF (Graphic Interchange Format), and BMP
(Bitmap) are all raster graphics.

A vector graphic is made up points, lines, and shapes. Vector graphics are very well suited to line
art, corporate logos, icons, and cartoon-like illustration. Some examples of vector graphic file
formats are EPS (Encapsulated Post Script) and SVG (Scalable Vector Graphics).

These definitions may be confusing for some of you, so look at Figure 1-1. As they say, a picture is
worth a thousand words.
Figure 1-1: A close-up view of the differences between vector and raster graphics.

Figure 1-1 is a raster graphic, even though the right half represents a vector graphic.

The 45-degree line in Figure 1-1 clearly shows that the raster graphics are pixel-based and vector
graphics are line-based.

The vector version is saved as two points connected by a line. No matter how large this graphic is
scaled, it can still be represented as a smooth line. The raster version is represented as seven
separate square pixels, each one-pixel over and one-pixel up from the preceding. This method loses
quality when scaled and displays a jagged, instead of smooth, line.

Another benefit of vector graphics is smaller file size based on scalability. No matter how large the
graphic is, it's still represented by two points and a line. The raster version is saved as a nine-by-
nine pixel grid making 81 total pixels. At 16 times zoom, in order to maintain the same amount of
quality, the raster version requires 20,736 pixels.

Flash MX can incorporate both vector and raster images into a Flash movie. Now that you know the
difference, you can understand when it's appropriate to use each type to keep file size at a
minimum.
 

So what, exactly, is Flash?

 
Macromedia Flash is the de facto standard application for authoring rich media content on the Web.

As previously mentioned, Macromedia Flash is one of the Web technologies that can be embedded
in an HTML document. It's an all-inclusive way to serve multimedia content (such as text, graphics,
animation, interactivity, audio, and video) to the viewer. There are other embedded technologies
available for Web multimedia, but the popularity and adoption rate of Flash is so large that it has
become the only one worth seriously considering if you'd like a large audience. Macromedia
statistics claim that about 545 million Flash Players have been downloaded, and that more than 98
percent of Web users have the capability to receive Flash content.

Understand the terms

Throughout this course, you'll see the word Flash used in a couple of different ways. It's very
important that we clearly define the difference before continuing.

The Macromedia Flash Player is a Web browser plug-in for viewing Flash content over the Web.
The Flash Player is free and can be downloaded from the Macromedia download Web site . You
may want to ensure you have installed the latest version of the Flash Player before continuing this
lesson.

The Macromedia Flash Authoring Tool or Flash Program is a commercial software application
available for Windows and Macintosh Operating Systems. Only people interested in creating Flash
content need to install the Flash Authoring Tool. Students interested in following the lessons and
exercises should purchase and install the Macromedia Flash MX Authoring Tool on their computer.
Studio MX, another Macromedia product, includes Flash and several other applications, such as
Dreamweaver and Freehand, which work well with Flash and would be of benefit to many students.
If you haven't purchased Flash MX, consider the Studio MX package as an alternative.

The Macromedia Web site offers a free trial version of Flash MX. The trial version should be
suitable for the course material; however, serious Flash authors should purchase a license
before the trial version expires.
Let's take a look at some pros and cons of using Flash.
 

Pros and cons: why use Flash?

 
The main benefit of using Flash is that it can add richly interactive content to your Web pages.
However, some other technologies, such as DHTML, offer a similar capability to add interactive
content. We need to discuss the differences between these technologies to give you a clear view of
the pros and cons of using Flash.

Flash versus DHTML

First, what is DHTML? DHTML (Dynamic Hypertext Markup Language) simply refers to the
creative combination of HTML, JavaScript, and CSS. DHTML enables Web page authors to add
interactivity to their Web sites without being dependent on a plug-in. Although this independence is
a benefit for DHTML, it can also be a hindrance. The problem arises because not all Web browsers
are the same.

You may have heard the term cross-browser. Cross-browser compliance refers to Web pages and
code that display and work well in a variety of Web browsers. Similarly, cross-platform means that
something works well on multiple operating systems, such as Windows, Macintosh, and even Linux.

As beginning Flash users, you won't be expected to test every possible browser combination, but
serious Flash authors test many browsers to ensure that their work can be used in as many
browsers as possible. The following list contains just a few of the Web browsers available.
Internet Explorer
Netscape Navigator
Apple Safari
Opera
AOL
Mozilla / Firebird / Camino
Lynx
Various handheld devices such as mobile phones

The first major benefit of Flash over DHTML is the consistency of the Flash Player as a
presentation medium. Web developers using DHTML interfaces have always been plagued by
differences between various Web browsers; for example, some code that works on Internet Explorer
may not work on Netscape Navigator, or vice versa. Because Macromedia controls the Flash
Player, developers can ensure a cross-browser, cross-platform medium for presentation of Web
content. This gives you, as a Web developer, the piece of mind that any Web user can view and
access your content in exactly the same way, assuming there is a Flash Player plug-in developed
for that user's browser.

Another major benefit of Flash is the file size. Flash has the ability to use and animate vector
graphics. As we discussed, a vector graphic is made up of lines and points instead of pixels. Using
vector graphics for most of your Flash movie can keep the file size much smaller than an equivalent
DHTML interface.

Flash MX adds many advanced features, such as better integration with audio and video.
Seamlessly incorporating audio and video into DHTML is difficult, if not impossible.

Flash disadvantages

Unfortunately, Flash has its drawbacks, too. As we mentioned, viewing Flash content requires the
user to have installed the Flash Player plug-in. If the user does not have the plug-in, he can't get the
content at all. Fortunately for us, the people who do not have the Flash Player represent a very
small percentage of Web users.

Another drawback of using Flash has historically been handicapped accessibility. Blind users, for
example, may use a screen reader to access a Web page. A screen reader is a computer program
that speaks screen text out loud to blind or low-vision users. Although Flash MX content is still not
as accessible as plain-text content, Macromedia has added many fantastic accessibility features,
which we discuss in Lesson 5.

Let's continue by looking at some example uses of Flash on the Web today.
 

Advanced Flash use

Why are you here?

All of the following examples are very advanced uses of Flash and you should not expect to
understand them without a large amount of experience and practice using the Flash Authoring Tool.
We merely wanted to bring them to your attention so you could see the advanced possibilities Flash There's nothing like peer support in a
offers. learning environment. If you ever
Nike Lab is an interactive experiment by the Nike Shoe Company to build brand awareness and belonged to a study group in school,
promote the company image to the world. You could easily spend hours on this Web site, so you'll remember the value of putting
grab a snack first. heads together to discuss the subject
and work through solutions. The
Message Board is your online study-
group lounge -- a place where you can
meet your classmates, share your
reasons for signing up for this class, and
talk about your goals and dilemmas as
you work through this course. You never
know who has the answers you seek.

JoshuaDavis.com is developed and maintained mainly as a portfolio Web site for the site's
creator. Joshua Davis also used to maintain a Web site named PrayStation, featuring hundreds
of interactive art pieces developed in previous versions of Flash.

The Cartoon Network 's Web site is a perfect example of how vector graphics can be used
effectively. The line-art nature of the subject matter (cartoons) allows for delivery of a rich user
experience in a relatively low-bandwidth Web site.

Look for other Flash Web sites on your own. Examine them and decide what types of sites you like
and dislike. You may even want to post your examples to the Message Board so that everyone can
see and discuss them.

Moving on

This lesson covered the basics of Web development, what Flash is, and how Flash fits into the rest
of the Internet. In the Lesson 2, you start using the Flash Authoring Tool to create your very own
Flash movies.

Be sure to complete the assignment and the quiz for Lesson 1. And please bring your questions,
comments, and discussion topics to the Message Board, where you can say hello to your fellow
 students.

Assignment #1

1. If you haven't already, install Macromedia Flash MX on your computer. You'll need it for
the rest of the course exercises and examples. If you're not sure you want to purchase
the program, you can download the trial version from Macromedia .
2. Download and install the Flash Player plug-in. Even if you already have the Flash Player
plug-in, please install it again. It's always good to have the latest version, and you may
need it for some of the examples in this course.
3. Some students may want to download and install multiple standards-compliant Web
browsers. This is not required, but most Web developers like to have several. Mozilla ,
Netscape , Opera , and Internet Explorer are available for both Windows and Macintosh.
Safari and Camino are also available for Mac OS X.

Quiz: #1

Question 1:
What's the main objective of the Beginning Flash MX course? (Check all that apply.)

A) Know the pros and cons of using Flash.

B) Create your own Flash movies.

C) Use basic ActionScript for interactivity.

D) Make Flash content accessible.

E) Find out where to learn about more advanced Flash authoring.

 

Question 2:
What's a plug-in?

A) A cable for transferring files from your computer to Internet.

B) A small piece of software that adds functionality to a program.

C) A technique that allows you to plug a picture into a Flash movie or Web site.
D) A program menu for making Flash content accessible to blind and low-vision users.

 
Question 3:
Which type of image format would be better for a photograph?

A) Raster

B) Vector
 
Question 4:
What's a Flash Player?

A) An experienced Flash developer, also known as a Flash guru.

B) A software application for creating Flash content.
C) A plug-in for viewing interactive Web content.

D) A Web page that allows you to watch video in Flash.

 
Question 5:
What does the term cross-browser refer to?

A) A Web page or code that performs well on multiple programs, such as Internet Explorer, AOL, and Netscape Navigator.
B) A Web page or code that performs well on multiple operating systems, such as Windows, Macintosh, and Linux.
 
Question 6:
What's a screen reader?

A) A news announcer or politician who reads words off a teleprompter in front of a television camera.
B) A computer program that speaks screen text out loud.
C) A friend or coworker who reads screen text to a blind or low-vision computer user.

D) Scrolling text on a Web page that alerts users to news or advertisements.

 

Learn the Flash interface

This lesson teaches you the basics of the Flash authoring tool. You set up your movie properties, learn the functions of the tools palette, and draw
graphics for use in the example movie Face Facts. You learn how to use the timeline, layers, and other panels that you'll often find
indispensable.
 

Explore the Flash workspace

Time for a new system?

In the Lesson 1 we answered the question, "What is Flash?" Lesson 2 poses a new question, "What
can Flash do?" Flash MX has a host of tools and panels that enable you to create, modify, and
import content. Luckily, Macromedia has combined these powerful tools into a consistent and easily If running Flash in addition to your other
navigated interface called the workspace, shown in Figure 2-1. Let's explore the workspace and programs is causing your computer to
drawing tools first, and then later in the lesson, the fun really begins as you create the graphics for slow down dramatically, upgrade to an
your example movie Face Facts. HP business desktop PC, which offers
performance and flexibility at an
affordable price.

» HP Compaq dc5100 microtower

desktop PC

Figure 2-1: The Flash MX workspace. » Desktop buying guide

View a larger version of this image.

Play with Panels of Plenty

If you don't have the Flash program running, start it now. If this is your first time running Flash MX,
you'll see the Welcome panel in the center of the screen. This panel leads you step by step through
the process of setting up your workspace. Close this panel because this lesson shows you how to
set up your workspace.

Flash MX has panel sets for both designers and developers. These panel sets display the tools
most used by people working in these roles. Flash also enables you to customize your own panel
set. Because this is a beginning Flash course, the Designer panel set best suits your needs. Select
Window > Panel Sets > Designer [1024 x 768] .

At the center of the workspace is the Stage . Think of the Stage as your digital canvas, on which
you create your Flash masterpieces. The Stage is where you draw and import your graphics.

To the left of the Stage is a group of icons labeled Tools . This is the Toolbox, shown in Figure 2-
2. As the name implies, the Toolbox holds the tools you use to create Flash movies. There are four
distinct sections in the Toolbox, listed from top to bottom:
Graphic creation and modification tools
View navigation tools (pan and zoom)
Stroke and fill color boxes
Tool option modifiers
Figure 2-2: The Toolbox has four sections.

At the top of the Flash workspace is the Timeline, shown in Figure 2-3. The left side of the Timeline
lists the layers in your movie. Layers help you organize the many graphics that reside on the
Timeline. This list of layers is called the layer stack. The main body of the Timeline shows the
frames in your movie. Each frame represents a still image like the frames on a movie reel. This is
where the animation magic happens.

Figure 2-3: The Timeline shows layers and frames.

View a larger version of this image.

The right side of the workspace holds the panels, one of which is shown in Figure 2-4. The panels
give you extended options when you're working with your graphics on the Stage, the Timeline, and
Actions. Click a panel name to minimize that panel. Click the name again to maximize it. Because
there are many panels to work with, this is a good way to gain access to a panel and to get it out of
the way when you aren't using it.

Figure 2-4: The Align panel.

Below the Stage is the Properties Inspector, shown in Figure 2-5, which displays the most
frequently used properties for a tool or object. With no tool or object selected, the Properties
Inspector displays the settings for the Stage, which include:
Stage size
Publishing settings
Background color
Frame rate

You'll use the Properties Inspector to modify the Stage and prepare your Face Facts movie.
Figure 2-5: The Properties Inspector.

Set the stage

The size and boundaries of the Stage define the size and boundaries of your final published Flash
movie. In the Properties Inspector, click the Size button to open the Document Properties dialog
box shown in Figure 2-6. In the Dimensions field, type 550 for the width (the default size) and
500 for the height. You can also set the background color and frame rate in this dialog box. Click
the color chip next to Background Color . Your cursor changes to an eyedropper and a color
selection grid pops up. Drag your eyedropper over the colors in the selector grid. Notice that the
color under your cursor is displayed at the top of the color selector. To the right of the current color
is the color's Hex code, which you may recognize if you're familiar with HTML. You can type the Hex
code here if you want. For now, click a color chip to pick a new color for the stage. Leave the other
settings as they are, and click OK . The Stage has been resized and the background color has
changed.

Figure 2-6: The Document Properties dialog box.

Save your file

In just a few steps, you've set the Stage for your first Flash MX movie, Face Facts. Go ahead and
save this file by selecting File > Save As . Select the folder where you'd like to save your movie,
type faceFacts in the File name field, and press Enter . You should save your file periodically
during this lesson as you create Face Facts. To save your work, select File > Save in the top menu
or press Control+S ( Command+S on the Mac.) Save often while working to ensure that your
saved file is always updated. This prevents the loss of work and valuable time in the event of an
unexpected power outage, system crash, or a rampaging pet attacking the power cord of your
computer.

Click the color chip in the Property Inspector and instead of clicking a color in the selector grid,
move your cursor over any region in the Flash workspace. The eyedropper picks up the color of
whatever pixel is under your cursor. Click once to select the color. Pretty cool, huh?
 

Draw a head

 
Your example movie, Face Facts, consists of a cartoon-like face, drawn and animated by you; some
text describing the features of the face and their importance in character animation; and some
interactive buttons that enable you to navigate to each facial feature description and animation.
You'll get to the animation and interactive scripting in Lessons 3 and 4. First, you must draw a head.

Position your mouse pointer over any tool in the Toolbox. After a moment, the name of the tool
displays near your cursor. Take a minute to mouseover each of the tools in the Toolbox and
become familiar with their names.

Now click the Oval tool or press the O key on your keyboard. You'll use this tool often. In the
Colors section of the Toolbox, click the Fill Color paint chip. As it implies, the Fill Color is the color
inside of the shapes you draw in Flash MX. Select a color for your head. Now, click the Stroke Color
paint chip. The Stroke Color is the color of the outline around your shape. Select a color for the
line surrounding your head shape.

When the Oval tool is selected, the Properties Inspector displays the Oval tool name and its
options. Select the different tools in the Toolbox to see how the options in the Properties Inspector
change with each new tool you choose. This is the real power of the contextual Properties
Inspector. It enables you access to many different properties all in the same location and based on
which tool you have active. Select the Oval tool and again and look at the Properties Inspector. You
see color options, Stroke Height, and Stroke Style . Adjust these settings as you wish by
selecting a different Stroke Height and Stroke Style.

Now draw the head. Click and drag on the Stage to draw an oval, as shown in Figure 2-7. You just
created a head! It may not seem like much now, but you're just getting started.

Figure 2-7: Click and drag on the Stage to draw an oval.

Explore shapes

Let's take a minute to look at how Flash renders shapes. Click the Arrow tool in the top-left corner
of the Toolbox. Your cursor changes to the Arrow tool. This is the tool that you use to select, modify,
and move shapes and other objects in Flash MX. Select your oval by clicking once in its center.
Notice how the fill appears grainy but the stroke (outline) does not. This signifies that the fill has
been selected. Double-click the shape. Now both the fill and stroke are selected. Click anywhere
else on the Stage to deselect the oval. To select only the stroke, click once on the stroke.

You can also drag a selection rectangle, called a Marquee, around your oval to select it. On the
Stage, click and drag a Marquee around your oval as shown in Figure 2-8. Click anywhere on the
Stage to deselect the oval again.

Figure 2-8: Drag a Marquee around your oval.

Move the oval

The Move icon appears next to the Arrow when your cursor is over a selected fill or stroke. Select
the stroke, and then click and drag the stroke to a new position where it's partially overlapping the
oval fill. Figure 2-9 shows an example.

Figure 2-9: Click and drag the stroke to a new position.

Now move your cursor over the fill so that the Move icon appears next to the Arrow tool. Click and
drag the fill. Wow! The stroke has bisected your fill and you've moved only a piece of the fill to a new
position, as shown in Figure 2-10. This method of drawing is unique to Flash and enables you to
easily create complex shapes by chopping up simple ovals, rectangles, and polygons. You can also
use the Marquee to select portions of the oval. Only the portions that fall within the Marquee will be
selected. It appears you have a somewhat mutilated head on your hands now. Repeatedly click
Edit > Undo or press Control+Z ( Command+Z on the Mac) to Undo until you're back to the
original oval head shape.

Figure 2-10: Move a piece of the fill.

Snap to objects

Select the Arrow tool. In the Options section at the bottom of the Toolbox, look for a horseshoe
magnet icon called the Snap to Objects icon and make sure that it is toggled. The Snap to Objects
modifier allows you to accurately move and place objects in relation to other objects on the Stage.
Flash will signify that you are snapped to another object by placing a small outlined circle either near
the cursor or at the end of the line that you are drawing. Click and drag with the Oval tool and draw
another oval near the first but don't release the mouse button. As you are dragging the cursor near
the first oval, the cursor will snap to that oval's outline. See Figure 2-11. Drag the cursor around and
experiment with the Snap to Objects function. When you are finished, click Edit > Undo in the top
menu or press Control+Z ( Command+Z on the Mac) until you are left with only the head oval.

Figure 2-11: This image shows the cursor snapped to the outline of the oval.

Try the Free Transform Tool

Select both the oval fill and stroke by double-clicking the oval. In the Toolbox, select the Free
Transform Tool or press the Q key on your keyboard. A transform box appears around the oval on
the Stage. The box has handles, which are small boxes, on its corners and sides. Move your
mouse over any of the small boxes in the corners or center of each side. The icon showing a line
with arrows on each end, shown in Figure 2-12, represents the Scale transform.

Figure 2-12: Transform the scale of the oval.

Move your mouse just outside one of the corners. A circular arrow icon appears. It's the Rotation
transform. Now move your mouse over any of the sides, but not on the scale boxes. The icon
showing two arrows, one on top of the other, is the Skew transform. Experiment by clicking and
dragging the different transform icons. Try out each of the transforms to see how it behaves. Adjust
the oval until it is the size and shape you want for your face.

Use groups

At times you need to be able to select and move shapes as discreet objects without having them
erode each other in the manner discussed earlier. Other times, you may want to treat several
shapes as one entity. To do this, use the Group command. Select both the fill and stroke of your
oval. Choose Modify > Group or press Control+G ( Command+G on the Mac). This transforms
your oval into a group. When you select the oval, the Properties Inspector displays group as the
object type. Double-click the oval to edit it. Just above the Stage you'll see a scene clacker icon with
the underlined phrase Scene 1 and the group icon with the word Group . This tells you that
you're within the group and can edit its shapes. Click the underlined Scene 1 or double-click an
empty area of the Stage to return to the Stage. To ungroup shapes, select the group, and then
select Modify > Ungroup or press Control+Shift+G ( Command+Shift+G on the Mac).

Keyboard shortcuts are quick keystrokes that you can use to execute the commands found in Flash
MX. These shortcuts make your workflow faster. As you become more familiar with Flash, you'll pick
up shortcuts that work best for your particular style of work. Keyboard shortcuts are listed beside
their corresponding commands in the menus and appear as tool tips when you mouseover tools in
the Toolbox.
 

Organize with Layers

 
When creating your Flash movies, you'll sometimes have many groups and shapes on the stage at a
time; layers help you organize them. In Face Facts, you'll have separate features that make up your
face. Each facial feature will reside on its own layer. As mentioned earlier, the layer stack sits to the
left of the Timeline above the Stage. You currently have one layer entitled Layer 1.

Create and modify Layers

Double-click the layer name. It becomes active and you can edit the layer name. In the active text
field, type head to rename the layer. There are four icons at the bottom of the layer stack. From left
to right they are
Insert Layer
Add Motion Guide
Insert Layer Folder
Delete Layer

Insert a new Layer

Click the Insert Layer icon to add a new layer. A new layer, named Layer 2, appears above the head
layer, as shown. in Figure 2-13. New layers you insert with the Insert Layer icon appear above the
currently selected layer. Rename this new layer ears. Your ears layer is selected and displays a
pencil icon next to its name. Any new shapes that you draw are drawn on this layer until you select a
different layer. You can select different layers by clicking once on their layer names.

Figure 2-13: Add a new layer.

Change the Layer stack order

Make an ear by selecting the Oval tool and drawing another oval. This oval appears above the head
shape because the ears layer is above the head layer in the layer stack. Click and drag the ears
layer to below the head layer. Now the ear is behind the head and looks a little better.

Create a new layer and name it eyes. Move the eyes layer above the head layer. Draw an eye on
the eyes layer by making a white circle with a black stroke.

Hide, lock, and outline Layers

Another advantage of using layers is the capability to hide or lock a layer that you're not currently
editing. You can also view a layer or all layers as outlines, which helps you see details that might be
hidden beneath a fill. There are three icons at the upper-right side of the layer stack that enable you
to manipulate layers:
Eye (Show/Hide All Layers)
Lock (Lock/Unlock All Layers)
Box Outline (Show All Layers as Outlines)

Click the Eye icon at the top of the layer stack. All layers are now hidden. Click the Eye again and
all layers are shown. Each layer has a dot that corresponds to the Eye icon at the top of the stack.
To hide the head layer, click the dot beside that layer and below the Eye icon. The head layer is now
hidden and a red X has appeared in place of the dot. Click the red X to show the head layer.

Try clicking the other dots in the layer stack to see how they respond. Objects on a locked layer
cannot be modified, and new objects cannot be created on that layer while the layer is locked.
Simply unlock the layer to begin editing again. When a layer is in outlines mode, you can select the
stroke of a shape but not the fill. Now, return all layers to the unlocked, shown, and nonoutlined
positions, and fasten your seatbelt. You're moving on.

Duplicate the eyes and ears

You now have a head with one eye and one ear. Your face needs one more of each feature unless
you're drawing an otherworldly, alien face. You could do that easily if you wanted, but for this
example let's stick to a vaguely humanoid face. Faces are generally symmetrical. You could draw
two different ears and two different eyes with the Oval tool, but it might be tedious to get them both
exactly the same. To create identical features for each side of the head, you can draw only one and
then duplicate it for the other side.

Using the Arrow tool, select the ear oval (double-click). Press Control+C ( Command+C on the
Mac) to copy it and Control+V ( Command+V on the Mac) to paste the new ear onto the Stage.
You may not be able to see the new ear you just created, so hide the head layer by clicking its dot in
the Eye icon column. Go ahead and hide the eyes layer as well. Now you should only see the
original ear and the one you just pasted onto the Stage. Copying and pasting is the simplest way to
duplicate shapes on the Stage. You'll learn a more advanced method in Lesson 3.

With the Arrow tool, select your new ear and delete it by pressing the Delete key. Show the head
layer by clicking the red X in the Show/Hide column of the layer stack. This will give you a reference
for the position of the new ear. Make sure that the Snap to Objects button in the Toolbox is toggled
on. Select the original ear. Now, while holding the Alt key, click and drag the ear to the left or right
depending on which ear you're missing. While the holding the mouse button, you should see a plus
sign below the cursor to indicate duplication, as shown in Figure 2-14. If you drag directly to the
right or left, the Snap to Object circle icon appears and the object outline snaps in alignment with the
original ear. Release the mouse button when you've positioned the ear where you want it. You've
duplicated the ear and the new ear should be directly aligned with the original. Alt-dragging
enables you to quickly copy objects on the Stage.

Figure 2-14: Alt-drag to duplicate the ear.

Now, show the eyes layer by clicking the red X in the Show/Hide column. Repeat the Alt-drag
process to duplicate the eye.

Finish the eyes

Eyes look strange without some detail. Create a layer called pupils and use the Oval tool to draw
two smaller ovals within the eyes to represent the pupils of the eyes, as shown in Figure 2-15. Draw
your pupils without strokes around them. You can accomplish this in two ways. You could draw the
ovals, select only the strokes, and then delete them. Or you can select the Oval tool, and, in the
Properties Inspector or Toolbox options, click the Stroke Color chip. At the top of the Color Selector,
select the white box with a red diagonal line through it. This is the No Color selection. Then draw
the pupils. You can use the No Color selection for fills as well.
Figure 2-15: Add two ovals without strokes for the pupils.
 

Draw the mouth and hair

Visual clarity
Thus far you've drawn most of your facial features with the Oval tool. Now you'll explore a few other
tools to complete your face. Create a new layer named mouth, and another one named hair. Drag
both layers and place them above the head layer in the layer stack. Select the mouth layer. Your monitor is not just a tool, it's a
creative partner that brings your ideas to
Use the Line tool life, giving them shape, clarity, and
color. The monitor you choose makes a
tremendous difference to the way you
Select the Line tool from the Toolbox. Draw a horizontal line where you want the mouth to be. work and to the results of your work.
Select the Arrow tool and position it over the middle of the line you just drew. Notice the curved line
icon beneath the Arrow tool. Position the Arrow tool over one of the ends of the line, and you should
see a corner icon beneath the Arrow tool. Experiment with the Arrow tool by clicking and dragging
the middle of the line. As you drag, the straight line becomes curved and you can adjust the curve
up or down as well as side-to-side. Click and drag one of the ends of the line to adjust the end point
of the line. This is a smooth way to adjust any shape that you draw. You can modify fill shapes in
the same manner.
» HP Flat panel monitor L2335

Adjust your line so that it looks like the bottom of a basic smile. Select the Line tool again. Draw a
 
line between the ends (corners) of your smile. Using the Arrow tool, drag this line down as well to
complete the mouth shape. You should now have a smiling crescent-shaped mouth, like the one
shown in Figure 2-16.

Figure 2-16: Adjust the two lines to form a crescent shaped mouth. Your face is smiling.

Use the Ink Bottle tool

You may have selected the color for your mouth before you drew your lines. To change the stroke
color of a shape that's already drawn, use the Ink Bottle tool. Select the Ink Bottle tool from the
Toolbox. Select a new stroke color for the lines of the mouth. Now click the lines of the mouth with
the Ink Bottle tool. The stroke color changes to the new color.

You can use the Ink Bottle tool to change the stroke color of the other features in your face.
Remember that if your shapes are in a group, you need to double-click the group until you can edit
the shapes with it.

Use the Paint Bucket tool

Your mouth should look pretty good now but it needs a fill color. Select the Paint Bucket tool from
the Toolbox. Select a fill color and click inside the mouth shape. The mouth fills with the color you
selected.

Use the Paint Bucket tool to change the fill color on the other features of your face as you see fit.
Use the Pencil tool

Now draw the hair. Select the hair layer in the layer stack. Select the Pencil tool from the Toolbox.
The Pencil tool has three different modes in the Options section of the Toolbox:
Straighten
Smooth
Ink

Click the Pencil Mode button and select one of the modes from the drop-down list. Experiment with
the three different modes and draw hair for the head. Try using different stroke heights and styles to
achieve various hairstyles. You can draw many strands of hair, or draw filled shapes as shown in
Figure 2-17.

Figure 2-17: Three filled shapes can represent the hair.

Get perfect alignment

The Align panel to the right of the Stage is an indispensable tool for arranging objects on the
stage. Position your mouse over each button in the Align panel to see a description. Try selecting
each eye oval, and then pressing the Align Bottom Edge button. Select the eyes. Select Modify >
Group to group the eyes. Hold down the Shift key, and select the head shape. Shift+selecting is
the method you use to select multiple objects as once. Now the head and both eyes are selected.
Press the Align Horizontal Center button. The eyes symmetrically align with the center of the head,
as shown in Figure 2-18. Use the same process to get all of your features aligned as you want
them.

Figure 2-18: Align the eyes to the center of the head.

Add finishing touches

You have a fairly complete face at this point. You can add other features and change colors as you
see fit. I added a simple nose on its own layer using an unfilled oval. I then selected the top half of
the nose with the Marquee and deleted it. That complete face is shown in Figure 2-19.
 Figure 2-19: Here's a face with a nose and final adjustments made to stroke color, alignment, and
scale.

Moving on

You have now explored many of the drawing and editing tools in Flash MX. You created a face for
the character in your project, Face Facts. In Lesson 3, you'll animate the face to give it a little life
and expression. Be sure to do the assignment and test yourself with the quiz for this lesson before
moving on. Also, visit the Message Board to find out what your fellow students are up to.

Assignment #1

Now that you've learned a few of the tools in Flash MX, use your new skills to practice drawing.
Flash MX enables to you create graphics in many styles, from cartoon and lighthearted to elegant
and subtle.

Visit one of my favorite Web sites, Home Star Runner , to see great Flash cartoons.

Quiz: #1

Question 1:
What's the Flash interface in which you work called?

A) Workshop

B) Workbench
C) Stage
D) Workspace

Question 2:
What resides, by default, at the center of the Flash interface and could be considered your digital canvas?

A) Timeline

B) Toolbox
C) Stage
D) Flash Player
 
Question 3:
True or False: The left side of the Stage contains the list of Layers in the Flash movie.

A) True
B) False

 
Question 4:
True or False: The Stroke Style controls the color of the lines in a shape.

A) True
B) False

 
Question 5:
True or False: The main body of the Timeline is made up of little rectangles called Cellboxes.

A) True
B) False
 

Question 6:
What holds the many Tools you use to create graphics in Flash?

A) Lunchbox

B) Toolchest

C) Toolbox

D) Toolset

Animate the face

In this lesson, you learn the terms and methods used in the Flash animation process. You then apply what you've learned to the Face Facts
project and animate the face you drew in Lesson 2.
 

The timeline revisited

 
In Lesson 2, you created your first vector graphic, a face, using the Flash drawing tools. In this
lesson, you animate the face and bring it to life using the Timeline, as shown here.

If you don't have it open, start Flash MX and open your Face Facts file.

Explore Frames

As the name implies, the Timeline helps you edit the timing of your animation in Flash. The
Timeline is laid out as a grid of cells called frames extending from left to right beside each layer.
Look at the top of the Timeline. Frames are numbered beginning with 1, your starting frame, at the
far left of the Timeline grid, at the edge of the layer stack. Frame 1 should be highlighted in red at
the top of the Timeline. The red line running vertically through frame 1 and the red rectangle above
is called the playhead. The playhead marks the current frame being displayed on the Stage. For
layers that contain graphics, there's a filled circle in frame 1. A gray shaded frame with a filled circle
inside is called a keyframe. Flash creates a keyframe on frame 1 the first time you draw graphics
on a layer.

At the bottom of the Timeline are three text fields showing information about the Timeline. The first
shows the current frame on which in the playhead resides. The second shows the FPS (frames per
second) of the Flash movie. The third gives you the elapsed time in seconds for the position of the
playhead.

A brief history of keyframes and tweens

The term keyframe has its roots in traditional hand-drawn animation. Lead animators would draw a
series of images that roughed out the animation. These were the key frames. Junior animators
would then draw in the images between the key frames; their images were called the in-betweens,
later shortened to just tweens. Animating in Flash is similar to traditional animation. You create
keyframes for the animation of your face, and Flash fills in the tweens for you, making your
animation task much easier. Flash uses two tween types:
Shape: These tweens are useful when you want to morph shapes into other shapes. You'll use
the shape tween to animate your face's mouth.
Motion: These tweens can only be used with symbols. You'll use the motion tween to animate
the eyes and hair of your face.

Explore symbols, instances, and the Library

Symbols are a very important aspect of Flash. After you convert a graphic into a symbol, it's stored
in the Library. To view the Library, select Window > Library from the top menu or press F11 on
your keyboard. Since you have yet to create symbols, your Library should be empty.

You bring instances of symbols into your Flash movie by dragging them onto the Stage. An
instance is a copy of a symbol. For example, you want to animate a group of ducks walking across
a street. You draw just one duck on the Stage; convert it to a symbol named Duck, and then drag
instances of Duck onto the Stage. All the ducks on the stage will be instances of your Duck symbol
in the library. Now, if you want to modify the appearance of the ducks in the group, you edit the Duck
symbol in the Library and all instances of Duck on the Stage reflect your changes.

Symbols give you another advantage. When you publish your movie to the Internet, the Duck
symbol is exported only once. Flash copies the Duck symbol to the instances that you created when
it plays in the user's browser, thus shortening download time.
Converting a graphic to a symbol enables you to use a motion tween to animate certain properties of
the symbol, such as height, width, scale, and position on the screen.

Examine types of symbols

Symbols have their own unique layers, Timelines, and Stages. There are three types of symbols in
Flash:
Graphic symbols are best used for still images or for reusable animations that are tied to the
main Timeline. They aren't used for complex interactivity or sound effects.
Button symbols are used to create interactive buttons that respond to the user's mouse. When
used with ActionScript, buttons can create complex and interesting interaction for the user.
Movie Clip symbols are possibly the most used of symbols in complex Flash projects. A Movie
Clip has its own Timeline that plays independent of the main Timeline. Movie Clips are used to
create reusable animation sequences, can contain complex scripting for advanced interactivity,
and can also contain other Graphic, Button, or Movie Clip symbols.
 

Prepare your graphics for animation

Incorporating photos
It's good practice -- and usually absolutely necessary -- to have a separate layer in the Timeline for
each symbol or shape that you are animating. Animating two separate symbols on the same layer in
the Timeline has unpredictable results. So the rule to follow is: Place each symbol on its own layer. Use scanned images to personalize your
Follow this practice and you'll enjoy a reliable animation process. Flash animation. HP's high performance
scanners allow for fast scans of up to
At the end of this lesson, your Face Facts movie will consist of separate animations for the eyes, legal size documents.
mouth, and hair. In Lesson 4, you'll add interactivity to the movie, enabling the user to click on
buttons labeled Eyes, Mouth, and Hair, which will cue the animation for that specific feature. You'll
also add text that describes each facial feature as it is animating. You need to adjust the layout of
your movie to accommodate the buttons and text. Using the Arrow tool, drag a Marquee around the
entire face, making sure that every shape is selected. Click and drag the whole face and move it to
the top and center of the Stage. You may need to use the Free Transform tool to scale the face as
needed to allow enough room at the bottom. Figure 3-1 shows how the layout should look.
» HP Scanjet 7650 document flatbed
scanner series

» Scanner buying guide

Figure 3-1: Position your face near the top center of the Stage.

Create a symbol for the eyes

You're going to animate the whites of the eyes together as one element. It may seem as if you're
already breaking our rule (one symbol per layer), but you aren't. You can have as many groups and
shapes in one symbol as you want. If you wanted to animate the whites of the eyes separately, as
you would if your face were winking one eye, you'd create a symbol of one eye and place instances
of the eye on two separate layers. You'll use a similar approach when you animate the pupils.

Select the eyes in the eyes layer. Select Insert > Convert to Symbol, or press F8. In the Convert
to Symbol dialog box, type eyes in the Name field as shown in Figure 3-2. In the Behavior
section, select Graphic. Click OK. The selection on the Stage is now an instance of the eyes
Symbol.
Figure 3-2: Name the symbol eyes.

If your Library is not open, open it now by pressing F11. You should see your newly created
symbol in the Library list. To see a preview of your symbol, select the symbol in the Library. The
preview appears at the top of the Library.

Explore the Library

The Library window give you access to information about the symbols used in your movie. The list of
symbols shows you:
Name
Kind (Movie Clip, Button, or Graphic)
Use Count (number of instances of a symbol in your movie)
Linkage (not covered in this course)
Date Modified

On the right side of the Library window are two buttons for controlling the view of the Library, as
shown in Figure 3-3. Click each one to change the Library view.

Figure 3-3: These buttons control the view of the Library.

Click and drag an instance of eyes onto the Stage. This is another method to use to add instances
of symbols to the Stage. Delete the instance of eyes you just created. You're now left with the
original instance of eyes.

Create a symbol for the pupils

You're going to animate the pupils separately. Select and delete the pupil on the right side of the
face. Select the left pupil. Another method you can use to create a symbol is by using mouse to
open a drop-down menu on the Stage. Right-click ( Command+click on the Mac) the selected
pupil. A drop-down menu appears. Select Convert to Symbol from the menu. Name this symbol
pupil and set its Behavior to Graphic.

In the layer stack, rename the pupil layer to pupil left. Now create a layer for the right pupil and
name it appropriately. Select pupil right layer in the layer stack and then drag an instance of pupil
onto the Stage. Position the new pupil instance over the eye. Align as needed to get the positioning
right. You have two layers, one for each pupil, with a separate instance of pupil on each layer, and
can animate the pupils independently.

Create a symbol for the hair

Select one or all of the shapes that you drew for the hair. Convert the shape(s) to a symbol using
one of the methods you've learned. Name the symbol hair and set its Behavior to Graphic. We
chose to convert only the top portion of the hair to a symbol and put it on its own layer, as shown in
Figure 3-4.

Figure 3-4: We converted only the top hair shape into a symbol.

You can create something similar with your character's hair. Just remember to put each symbol that
you intend to animate on its own layer.
 

Animate the eyes and pupils

Scrubbing tip
Animating in Flash MX consists of adding keyframes and then adjusting the properties of your
symbols, such as position, scale, and rotation. You then add additional tween frames to adjust the
timing of the animation. You'll start by animating the eyes symbol. Sometimes while scrubbing, you'll notice
that symbols on certain frames have
Insert a keyframe in the eyes layer remained selected. This can be
distracting at times. There is an easy fix.
Scrub through the animation, and when
In the eyes layer, select frame 10. The frame is highlighted. Right-click ( Control+click on a Mac) you see a selected symbol, click
the frame and select Insert Keyframe in the drop-down menu. The frame becomes shaded and anywhere on the Stage to deselect it.
contains a filled circle. The playhead, the red vertical line, is now on frame 10 and you should see Repeat this process for any area of the
the eyes symbol on the Stage while everything else seems to have disappeared. All other frame animation you want to scrub and not see
cells on the other layers for frame 10 are empty, thus you won't see graphics. selected symbols.

You can also add keyframes by selecting Insert > Keyframe from the top menu or by pressing F6 on
your keyboard. The right-click drop-down menu is easy and convenient, so we use it often.

Select the eyes symbol on the Stage. Expand the Transform panel if it's not expanded. The
Transform panel enables you to input numerical data to transform objects on the Stage. Deselect
the checkbox named Constrain. In the Height field, type 45%, and press Enter. The eyes
should now appear narrowed as if squinting. Right-click on keyframe 1 and in the drop-down
menu, select Create Motion Tween. The tween frames turns a pale purple color and there is an
arrow from keyframe 1 to keyframe 10. Press Enter to preview the motion tween you just created.

Click and drag the playhead left and right. This action is called scrubbing. It enables you to play
through the frames to better analyze you animations. Scrubbing is a very useful process. Scrub
through the animation of the eyes now to see them animate.

Insert keyframes in the two pupil layers

At frame 10, insert keyframes for both pupil left and pupil right layers. Making sure that the
playhead is at frame 10, select and then move one of the pupils to the left corner of its eye. Make
sure the pupil is still selected. In the Transform panel, select the Constrain checkbox. This sets
both Height and Width scale factors to be equal. In either Height or Width field, type 60% to scale
the pupil. Repeat the process for the other pupil. Create motion tweens for both pupils at frame 1,
using the right-click method you learned earlier. Now both pupil left and pupil right layers are
shaded purple and show the arrow through the tween frames.

Scrub the animation to see the results. You should see the pupils shrink and move to the left within
the eyes, making the eyes appear to look left. The eyes should also narrow, giving an impression of
suspicion or contemplation.
Add frames to show the entire face

It would be nice to see the animation of the eyes in context with the other parts of the face.
Sometimes it's necessary to see other parts of your animation to make the next decision for a
keyframe or tween. To add frames to a layer, select the frame cell in the layer in which you want to
add frames and select Insert > Frame in the top menu, or press F5. To add frames to multiple
layers at once, Shift+click the frame cells in the layer in which you want to add frames, and then
select Insert > Frame. If you can't see all the layers in the stack at once, click and drag the bottom
edge of the Timeline down to expand the Timeline view.

Add frames in all layers of the face now. Shift+click the frame cells in all the layers at frame 30.
See the Timeline in Figure 3-5.

Figure 3-5: Shift+click the frame cells to select multiple frames.

View a larger version of this image.

In the top menu, select Insert > Frame or press F5. Flash fills in frames from the last keyframe or
tween frame up to the frame that you selected. These frames will be shaded gray like the keyframe
before it. The last frame in the sequence of added frames will contain a hollow box. This signifies
that the keyframe at the start of the sequence should repeat for all of the shaded frames until the
hollow box frame is reached. This allows you to maintain the state of a keyframe through the
timeline without having to insert a keyframe for every frame. Figure 3-6 shows the Timeline with
frames added to all layers up to frame 30.

Figure 3-6: All layers have frames up to frame 30 in the Timeline.

View a larger version of this image.

Scrub through your animation of the eyes now. Seeing the whole face during the animation helps
you to better analyze your work and gives you a better picture of the direction your animation is
taking.

There are two other methods for selecting the frames that you want to edit. You can click and drag
in an empty frame cell to select frames on adjacent layers in the stack. You can also Control+click
(Command+click on the Mac) individual frames on layers that are not adjacent.

Complete the animation for the eyes and pupils

Insert a keyframe at frame 20 for both pupils. Select one of the pupils at frame 20 and move it to the
opposite corner of the eye. Repeat the process for the other pupil. Don't add a motion tween here
because what you want is for the pupils to move immediately, giving the impression that the eyes
are rapidly looking in the opposite direction.

Insert a keyframe at frame 30 for the eyes. Select the eyes. In the Transform panel, change the
Height scale transform back to 100%. This returns the eyes to the open state. Once again don't
use a motion tween -- you want the eyes to pop open.

Copy frames
In Flash, you can copy and paste frames to other positions on the Timeline. You generally use this
method when you want to replicate the state of one keyframe to another, or to move many frames
from one layer to another.

Right-click keyframe 1 in the pupil left layer and in the drop-down menu, select Copy Frames. Now
Right+click keyframe 30 in the pupil left layer. In the drop-down menu, select Paste Frames.
Right+click keyframe 30 again and select Remove Tween. This removes the motion tween that
was copied from frame 1, because it isn't needed at frame 30. Repeat this process for the other
pupil. Scrub the animation to see the results. The pupils and the eyes all return to the state as seen
in frame 1. You'll use this same technique at the end of every face animation to create a consistent
starting expression for the face at the beginning and end of each animation.

Why keyframes every 10 frames?

You may be wondering why you placed all the keyframes at increments of 10. Building an
animation is easier if you rough in the keyframes first. Placing keyframes at increments of five or ten
is merely a convenience. You'll rough in the animation for all the facial features in this manner. Later
in the lesson, you'll learn to add and remove frames as necessary to adjust the timing of the
animation.
 

Animate the mouth

Printing frames
The mouth animation starts where the eyes left off, at frame 30.

Use a shape tween rather than a motion tween for the mouth. Shape tweens only work for shapes Printing the individual frames of your
on the Timeline on which the shape tween is applied, and thus the reason you didn't create a animation, either for your own review or
symbol for the mouth. You can create shape tweens on other Timelines, inside of a Movie Clip to go over with other animators,
symbol for instance, but you won't do so for this exercise. coworkers, or clients, will allow you to
make notes about details you want to
Add more frames tweak in Flash.

This time around, you're going to add the frames for the entire segment first, and then build up the
animation with keyframes. Click and drag to select all the frame cells at frame 60, for all layers. You
may need to use the scroll bar at the bottom of the Timeline to scroll to frame 60. Press F5 and
add frames to all layers. This process is similar to that shown in Figures 3-5 and 3-6 earlier in this
lesson.
» HP Color LaserJet 3600 printer
series
Insert a keyframe in the mouth layer at frame 30. This gives you a starting mouth position keyframe
from which to animate the mouth. Insert another keyframe at frame 35. Edit the mouth shape on
frame 35. Select the Arrow tool from the Toolbox and reshape the mouth by clicking and dragging
the points of the lines and the lines themselves. Recall from Lesson 2 that the cursor indicates what
you are editing when you mouseover the shape. Make whatever expression you'd like. We created a
mouth shape that seems to express confusion, as shown in Figure 3-7.

» Printer and MFP buying guide

Figure 3-7: The mouth has been reshaped to give the impression of confusion.

Making sure that keyframe 30 in the mouth layer is selected, open the Properties Inspector, which
has a frame icon on the far left. Find the drop-down menu labeled Tween, and select Shape from
the menu. Now frames 30-35 are shaded green and show an arrow through the tween portion,
similar to the motion tweens that you created previously. Scrub through the frames to see the
animated mouth. Shape tweens are very useful for animating organic shapes.

Insert a keyframe at frame 45. Again using the Arrow tool, create another expression for the mouth.
We made the mouth appear closed with the corners slightly down-turned. You won't use a shape
tween here; instead, the mouth switches immediately to the new expression on frame 45.

Insert a keyframe at frame 55. This is the starting keyframe for the return to the expression in frame
30. Insert a keyframe at frame 60. Copy and paste keyframe 30 to keyframe 60 using the
right+click method you learned earlier in the lesson. Remove the tween from keyframe 60. Select
keyframe 55 and in the Properties Inspector set the Tween to Shape. You now have a mouth that
animates through two expressions and returns to the starting expression.
 

Animate the hair

Download the source

You're nearing the end of the animation work for Face Facts. The last step you need to complete is
to animate the hair. Thus far, you've learned to animate a symbol's position and scale using a
motion tween, and to morph a shape into another shape using a shape tween. Now you'll learn to Download this zip source file and unzip
animate a symbol's Color properties. For this you'll again use the motion tween. the contents to see the techniques in
this lesson at work.
Understand the Alpha color property

Select frame 90 in all layers and press F5. This adds the additional 30 frames needed for the hair
animation. Insert a keyframe at frame 60 in the hair layer. This is the starting keyframe for the hair
animation. Insert a keyframe at frame 70.

On the Stage, select the hair symbol. Open the Properties Inspector, which shows the Graphic icon
on the far left side. Find the drop-down menu labeled Color at the right side of the Properties
Inspector. Select Alpha from the drop-down menu. The term Alpha refers to a symbol's Alpha
channel. The Alpha channel is the percentage of a symbol's opacity. By animating the Alpha
property, you can create interesting effects, the most basic of which is a fade. You can fade in or
fade out a symbol. To the right of the Color drop-down is the percentage slider. Type 0% in the
input field or use the slide to set the Alpha to zero percent. The hair symbol now has an opacity of
zero percent and is completely transparent.

Even though you cannot see the hair symbol, it's still there. Click the Stage to deselect the hair and
then click the area where the hair is. Notice that the selection box still appears around the hair
symbol, as shown in Figure 3-8.

Figure 3-8: The selection box still appears around the hair symbol, even when it is completely
transparent.

Create a motion tween at frame 60 in the hair layer. Insert keyframes at frames 80 and 90. Move the
playhead to frame 90. Select the hair symbol. From the Properties Inspector, select None in the
Color drop-down. Create a motion tween at frame 80. Scrub the frames in the hair animation to see
the results of your work. The hair should fade out for a time and then fade back in.

Tweak your timing

Now that all of the keyframes are in place for the animation, you want to adjust the timing. You do so
by adding and removing tween frames between your keyframes. Flash automatically recalculates
the tween between keyframes for you.

To insert frames into all layers in the stack, position the playhead between the keyframes where you
want to insert more frames. Press F5 to add frames. Press Shift+F5 to remove frames. Be sure
that you don't have individual frames selected. If you do, you only insert frames on the selected
layer. Use this process of adding and removing frames to adjust the timing of the face animations.

Moving on

You've learned the basic of animating in Flash MX. This is only the first step in your quest to
become a proficient Flash animator. In Lesson 4, you'll add some interactivity to Face Facts by
adding ActionScript to frames and buttons. If you've had no experience with writing script, don't
worry; we only scratch the surface of the immense power of Flash MX ActionScripting. Flash makes
adding interactivity to Flash movies simple and straightforward. You'll also add text to the project
using the Text tool.
 Before you move on to Lesson 4, take a few minutes to do the assignment and take the quiz for this
lesson. They help solidify what you've learned. Don't forget to check the Message Board and post
any questions you have.

Assignment #1

You've completed the animation process of adding keyframes to the Timeline and making changes
to the symbol properties or shapes at those keyframes. You've tweaked the timing of the keyframes
to change the pace of the animation. It often takes time to really make an animation look and feel as
you intended. It's a process of adjusting timing, adjusting again, changing a few keyframes here and
there, and re-evaluating your work. Rework your animations until you're satisfied with the final looks
and timing.

Experiment with the Color Properties you used to animate the hair. Use Tint in place of Alpha. Make
the hair change color or grow gray.

Quiz: #1

Question 1:
What's the red line running vertically through the current Frame called?

A) Player

B) Timeline
C) Framehead
D) Playhead

Question 2:
What are the frames between the Keyframes called?

A) Twains

B) Inbetweeners

C) Tweens
D) Twins
 

Question 3:
What are reusable assets that are stored in the Library called?

A) Signs
B) Cymbals

C) Books

D) Symbols
 
Question 4:
What are the three types of Symbols? (Check all that apply.)

A) Movie Clacker
B) Button
C) Push Button
D) Image

E) Movie Clip
F) Graphite
G) Graphic

 
Question 5:
True or False: To create a Motion Tween on the Timeline, you must use a Symbol.

A) True
B) False

 
Question 6:
True or False: Shape Tweens are used to morph one shape to another.

A) True
B) False
 

Add ActionScript to your movie

In this lesson, you transform Face Facts from animation into interactive media by adding user control via buttons and ActionScript. You learn to
import images into Flash and to add text with the Text tool.
 

Explore Flash ActionScript

 
ActionScript is the scripting language developed by Macromedia exclusively for Flash. It evolved
from small code snippets in earlier versions of Flash into a true object-oriented programming
language similar to JavaScript. The syntax of ActionScript is based on ECMAScript, the
standardized version of JavaScript. If you know JavaScript, you should have no trouble learning
ActionScript.

Many Web sites and books have been devoted to the vast topic of ActionScript. Visit FlashKit , a
Web site that addresses all levels of Flash programming and design. This course barely scratches
the surface of ActionScript, but we encourage you to explore more ActionScript if you're interested.

The Actions panel

Flash MX enables you to add simple scripts to your buttons without advanced programming
knowledge. The Actions panel is your interface with ActionScript. To open the Actions panel, select
Window > Actions or press F9 on your keyboard. The Actions panel appears near the Properties
Inspector.

ActionScript can be attached to frames, buttons, and movie clips. ActionScript can even be
imported at runtime or loaded externally via other Flash movies. In this lesson, we focus on using
frames and buttons to attach ActionScript, as shown here.

Control the Player

In its current state, Face Facts plays from start to finish starting at frame 1. Using ActionScript, you
can pass instruction to the Flash Player under certain conditions, such as:
When the user clicks a button
When the Player reaches a predetermined frame

Because your animation is broken up into sections and you want the user to be able to control which
section she views, you need a method to reference each section. You could reference your sections
via their beginning frame numbers. Before final tweaking, the eyes section started at frame 1, the
mouth section started at frame 30, and the hair section started at frame 60. If you adjusted the
timing of your animations as recommended at the end of Lesson 3, your start frames for your
sections have changed. Note the start frames in your animation now. Write them down if you need
to.

If you use these start frames as a reference for ActionScript, you're telling the Player, "Go to frame X
and do something (typically either play or stop)." This method works fine, unless you decide to
adjust the timing again or add additional animation in a section. Then you would have to note the
start frames again and change your ActionScript accordingly. There's another method that provides
you with more flexibility than frame numbers do: labels.

Use frame labels

You give a name to a keyframe with a frame label. No matter what frame number that keyframe
has, its label stays constant. It's good practice to create a separate layer for your labels to maintain
clarity and layer organization. Add a layer at the top of the layer stack and name it labels. Insert a
keyframe in the labels layer at the start of each animation section. You should have three
keyframes, one each for eyes, mouth, and hair.

Select the first keyframe in your labels layer, which should be on frame 1 of the Timeline. This is the
start frame for the animation of the eyes. Open the Properties Inspector. On the far left-hand side,
type the word eyes in the Frame Label input field. Repeat this process to label the other two
keyframes in the labels layer. Label each section appropriately, according to its section content:
mouth for the mouth animation and hair for the hair animation.

Attach ActionScript to frames

Remember from Lesson 3 that you made each animation section start and end at a common
expression (in our case, we had our face smiling and the eyes wide open). Now you'll see the
reason for this. When the user has viewed a particular section of Face Facts, you'll want the Player
to reset to the start of that section. No matter which animation the user selects, the animation
always returns to the same starting expression. This makes the transitions seem more fluid.

The simplest way to tell the Flash Player to "go back to the beginning when you reach the end" of a
section of animation is by attaching ActionScript to keyframes. Insert a new layer above labels in the
layer stack and name it script. Like the label layer convention used earlier, it's good practice to put
all frame ActionScript on its own layer. Insert keyframes on the last frame of each animation section
in the script layer. For instance, if the hair animation starts at frame 60, insert a keyframe at frame
59. When you've done this for all three sections, you should have three new keyframes. You're
going to place ActionScript on these keyframes that tells the Player to "go back to the beginning of
this section."

Select the keyframe in the script layer that is at the end of the eyes section and open the Actions
panel by pressing F9. There's written a description at the top of the Actions panel that says
something like, "Actions for Frame 29 of Layer Name Script." (The frame number in your case is
most likely different.) The Actions panel is divided into two main areas. On the left side is a list of
ActionScript commands organized by type and function. On the right is the Actions window where
you can see the actual text of the ActionScript you're creating. Click the arrow between the two
sections to minimize the list, because you're primarily concerned with the right side of the Actions
panel.

There are many ways to add or write ActionScript in the Actions panel. Let's focus on the easiest
method, normal mode. At the top left corner of the Actions window is a button with a + sign on it.
This button adds Actions to the window and applies them to the keyframe that you selected. Click
the Add Actions button and open the drop-down menu, which reflects the list you saw on the left
side of the Actions panel. From the drop-down menu, select Actions > Movie Control > goto. In the
Actions window you see
gotoAndPlay(1);

This is the literal ActionScript code that controls the Flash Player. Above the Actions window are a
number of options. At the top of the list, select Go to and Stop. You don't want the animation to
loop in this case. If you did, you would leave the Go to and Play option checked. From the Type
drop-down menu, select Frame Label. This option tells the Player to look for the labels you created
instead of a frame number or one of the other options available. From the Frame drop-down
menu, select eyes. You're on the last frame of the eyes animation, and you want the Player to
return to the beginning, which, in this case, is the frame you labeled eyes. The Actions window
reflect the changes you made and shows:
gotoAndStop("eyes");

Wasn't that simple? You've just added your first line of ActionScript.

Flash also lets you preview simple frame scripts in the Workspace. Select Control > Enable Simple
Frame Actions from the top menu. Position the playhead at frame 1 and press Enter on your
keyboard. The playhead plays as normal until it gets to the final frame in the eyes animation, then
immediately returns to the eyes frame and stops.

Repeat this entire process for the last frames in the other two sections. Remember to be sure the
appropriate frame is selected on the Timeline and listed in the Actions panel before you add
actions. The script for the last frame of the mouth animation should be
gotoAndStop("mouth");

For the hair animation, the script is

gotoAndStop("hair");

After you have all the Actions in place, position the playhead at the start of each section and press
Enter. The playhead should play through the animation and at the final frame return to the
beginning. Minimize the Actions panel so you can watch your animation in action.

You need to add one more Action. Select keyframe 1 in the script layer. In the Actions panel, select
Actions > Movie Control > stop. Now, when a user loads Face Facts, the playhead stops at frame 1
and waits until the user clicks one of the navigation buttons before playing any animation. Minimize
the Actions panel by clicking anywhere on the title bar of the panel.
 

Add buttons

Photos add interest

At the moment, there's no way for the user to interact with Face Facts. If you published the movie
now, the user would see only the eyes animation. You need to add buttons that allow the user to
navigate through the movie. When creating animations in Flash,
incorporating digital photos can create
Import images impact and interest in a way that simple
animation won't. HP digital cameras
 produce exceptional photos, and with
You'll use images for the graphics in your buttons. Using images instead of vector objects serves large preview screens, you can see the
two purposes in this course. First, you learn to import images in your Flash movies. Second, using photo on-camera before even
images for the buttons segues into Lesson 5, which covers accessibility issues. transferring it to your computer.

Flash enables you to import a number of different image formats. To simplify the process in this
lesson, though, we've provided image files for you, so you won't have to create the images first.
Download the images, which are in the .gif format. The images are included in a Zip file, buttons-
new.zip . Extract them and put them in the same folder as the faceFacts.fla Flash file.

Select File > Import from the top menu. The Import dialog box opens. Navigate to the folder where
» HP Photosmart M527 digital camera
you saved the images. Select all of the images for the course and click Open. The images are
series
imported into Flash and appear on the Stage. Press Delete on your keyboard. The images are now
in the Library like your symbols. To use them in Face Facts, you only need to drag instances of
them onto the Stage.

Create a button

The images for the buttons are named for the section they control and the state of the button. For
instance, btnEyesDown.gif refers to the eyes section of your movie and the down state of the
button. We'll discuss button states in more detail a little later. For now, know that there are three
images for each button.

Insert a new layer below labels and name it buttons. You'll put the buttons on one layer. This works
just fine because you won't be animating the buttons on the Timeline. Make sure the buttons layer is
selected in the layer stack. Start each button creation process with the up state of the button, so
drag an instance of btnEyesUp.gif onto the stage. Select the image with the Arrow tool. Press F8
to convert the image to a symbol. In the Name field, type btnEyes, and set the Behavior to
Button. Click OK.

Understand button states

Using the Arrow tool, double-click the button you just created. The rest of the objects on the Stage
fade out a bit and the Timeline shows four frames labeled
Up (no mouse activity)
Over (mouse over button)
Down (left mouse button pressed and in down position)
Hit (area within the symbol used to detect mouse activity)

The first three frames represent the three possible states of a button symbol in Flash. The states
reflect the button's response to the user's mouse. As the button symbol detects the user's mouse
activity, it goes to the appropriate frame. When a button is first created, there's a keyframe on the
first frame only. If you do not insert additional keyframes, the button uses the first keyframe for all
states. Insert keyframes in each of the four frames now.

You can create different effects for your buttons by making changes to the objects in each of the first
three keyframes. You could make the button get bigger when the user positions his mouse over the
button. You could also change the color of the button when the user clicks the button by changing
the color of the objects in the Down keyframe. These are the some of the most basic things you can
do in the buttons states. You could place an animated Movie Clip symbol in any of the first three
keyframes and make the button animate in response to the user's mouse. In this example, you'll use
images that simply change color each of the three button states.

The final keyframe, the Hit area, tells the mouse what area to use when determining the button
states. The Hit area uses the region that is occupied by the shape in the Hit keyframe. For vector
text, it's best to use a rectangle that covers the entire text object for the Hit area keyframe. If you
were to use only a text object, the user would have to click exactly on the text object to activate the
button; that can be troublesome and annoying. For your buttons, draw a shape in the Hit keyframe
that reflects the size and shape of the button in your images.

Create the other button states

In the layer stack, rename Layer 1 to image. Select the Over keyframe in the button Timeline.
Select the btnEyesUp image on the Stage, and press the Delete key. Drag an instance of
btnEyesOver.gif onto the Stage. In the Align panel, click the To Stage button. With this option
selected, all alignment adjustments you apply to objects are aligned to the Stage as well. Click the
Align Vertical Center and Align Horizontal Center buttons in the Align panel to align the image to
the center of the Stage. Remember, you're in the button's Timeline and not the main Timeline. Each
Timeline has its own Stage. The alignment you made put the image in the direct center of the
buttons Stage, not the main Stage. Aligning all the images to the center of the button Stage ensures
that the images are lined up properly and don't appear to jump out of place when the user interacts
with them.

Select the Down keyframe in the button Timeline. Select the btnEyesUp image on the Stage and
press the Delete key. Drag an instance of btnEyesDown.gif onto the Stage. Align this image to
the center of the Stage using the same process described above.

Select the Hit keyframe in the button Timeline. Insert a new layer above the image layer. Name this
new layer hit . Insert a keyframe in layer hit for the Hit frame. Using the Oval tool, draw an oval that
overlays the button image. You may need to scale and adjust the Oval with the Free Transform and
Arrow tools to accurately place it over the oval in the image. When you're satisfied with the Hit
shape you've drawn, select the btnEyesUp image on the Stage and press the Delete key. Your
button Timeline should look similar to Figure 4-1.

Figure 4-1: This is the final button Timeline with images on the Up, Over, and Down keyframes and
the Hit shape drawn on the Hit keyframe.

To edit the main Stage and Timeline, double-click anywhere on the Stage. Repeat the process you
just learned to create the two other buttons: Mouth and Hair.

You now have three buttons on the Stage: Eyes, Mouth, and Hair. Align them horizontally to each
other and distribute them across the Stage. There needs to be only one keyframe in frame 1 of the
buttons layer. Tween frames to last frame of animation to ensure that the buttons always remain on
Stage and don't disappear. Flash normally inserts these tween frames to the end of the Timeline for
you.
 

Add text

 
To create text to describe the three animations sections, first insert a new layer and name it text.
From the Toolbox, select the Text tool, which is used to add text to your Flash Movies. Open the
Properties Inspector to see all of the options for use with the Text tool, such as font, size, and color.
We chose Futura Book, with a Font Size of 20, and white as the color. Choose an initial font setting
for your text. You can change these settings later as needed. Click and drag a box on the Stage
where you want to place the text. We put ours below the buttons, as shown in Figure 4-2. An input
cursor and field appear where you click. In the field, type In Character animation, the eyes are one
of the most important features. They are the feature that the audience generally identifies with first.

Figure 4-2: We placed text below the buttons.

Use the Arrow tool to select the text you just created. In the Properties Inspector, adjust the settings
for Font, Size, and Color until you're satisfied with the results. You may also need to fine-tune the
position of the text. Use to the Arrow tool to move the text into the desired position.

Insert a keyframe in the text layer at the beginning of the next animation section. It has the same
frame number as your mouth frame label. Make sure that this new keyframe is selected. Double-
click the text on the Stage to edit the text. Replace the text in this keyframe with In conjunction with
the eyes, the mouth signifies a character's mood and expression.

Insert a keyframe in the text layer for the final animation section. It has the same frame number as
your hair frame label. Make sure that this new keyframe is selected. Double-click the text on the
Stage to edit the text. Replace the text in this keyframe with A character's hairstyle or lack thereof
can radically influence his or her persona.

You've now positioned text that describes the animation for each section of Face Facts.
 

Script the buttons

Download the source

You're nearing the end of your scripting work on Face Facts. It's time to add the script to your
buttons. Select the btnEyes button symbol by clicking it once, and open the Actions panel by
pressing F9. Click the Add Actions button, open the drop-down menu, and select Actions > Download this zip file that contains the
Movie Control > goto. In the Actions window, you should see this code: source files and this buttons.zip to see
on(release){ gotoAndPlay(1); } the techniques in this lesson at work and
try them for yourself.

The on (release) portion of the code is specific to buttons, and Flash inserts this code for you.
Make sure that the gotoAndPlay portion of the script is selected in the Actions window. In the
Type drop-down, above the Actions window, select Frame Label. In the Frame drop-down
menu, select eyes. The Actions window reflects these changes and shows this code:
on(release){ gotoAndPlay("eyes"); }

Minimize the Actions panel. In the top menu, select Control > Enable Simple Buttons so that you
can test simple button functionality within the Flash Workspace. Make sure that Enable Simple
Frame Actions is also selected in the Control menu. Position your mouse above the Eyes button.
The mouse cursor should change to the hand icon similar to the one used in Web Browsers. If you
did everything right, the button should switch to the Over state and turn green. Click the Eyes button
to play the eyes animation.

Test your movie another way

Here's another method to test you movies. In the top menu, select Control > Test Movie or press
Control+Enter ( Command+Enter on a Mac) on your keyboard. Flash generates a new window
and shows your movie. This window is running your movie with the Flash Player. Testing your
movie in this way is more reliable than using the Enable Simple Buttons and Enable Simple Frame
Actions methods because you are seeing the actual Flash movie in the Player.

Click the Eyes button and play the eyes animation. Now, click the button, let the animation play for a
second or two, and before it completes its cycle, click the button again. Notice that the second time
you click the button, the animation stops. This is caused by the stop Action on frame 1. When you
click the Eyes button, you're telling the Flash Player to return to frame eyes and play. The Flash
Player does so. It returns to frame eyes, which is also frame 1, the frame where you inserted the
stop Action. The Player encounters this stop Action and executes the script, stopping the playhead
in the process. There's a simple fix for this problem that you'll learn now.

Close the test window to get back to the Workspace. Select the keyframe eyes in the Timeline. Now,
click and drag the keyframe one frame to the right, placing it at frame 2. Now when the Eyes button
is clicked, the Player goes to frame eyes but does not encounter the stop Action on frame 1. Press
Control+Enter ( Command+Enter on a Mac) on your keyboard and test your movie again.

Add actions to the other buttons

Select the Mouth button on the Stage. Open the Actions panel, click the Add Actions button, and
select Actions > Movie Control > goto. Make sure that the gotoAndPlay portion of the script is
selected in the Actions window. In the Type drop-down, above the Actions window, select Frame
Label. In the Frame drop-down menu, select mouth. The Actions window reflects these changes
and shows:
on(release){ gotoAndPlay("mouth"); }

Repeat this process and add the appropriate Actions to the Hair button. Be sure to select hair as
the label in the Frame drop-down menu. The Actions window shows:
on(release){ gotoAndPlay("hair"); }

Test your movie again. Click all three buttons to test each section. Make sure that the text shows up
at the appropriate time.

Moving On

In this lesson, you learned to create buttons that control the main Timeline, to import images for use
in your movies, and to use frame labels and Actions. Although a somewhat simple project, Face
Facts contains all the basic groundwork you need to create more advanced Flash projects. Apply
 what you've learned and hone your skills on your own and by completing the assignment and taking
the quiz. Visit the Message Board to see what your fellow students are up to, and to post any
questions you may have.

In Lesson 5, you learn about Web accessibility and the importance of considering the disabled as an
important part of your audience. You'll then use the new accessibility features of Flash MX, and
finally publish your movie.

Assignment #1

Now that you've added the interactive functionality to Face Facts, do you see any additions or
modification you'd like to make? Here's a suggestion. Using what you learned in Lesson 3 about
keyframe animation, make the text that describes the animations fade in as the animation plays.
Animate the Alpha property as you did for the hair. The process is quite similar. Hint: The Alpha for
the text needs to be 100 percent on the first keyframe of each animation section. Remember, when
the playhead gets to the end of an animation section, it returns to the labeled keyframe and then
stops. The fade-in animation needs to start after the labeled keyframe.

Quiz: #1

Question 1:
True or False: The Script panel is where you add ActionScript to your movies.

A) True

B) False

 
Question 2:
True or False: ActionScript can only be attached to Buttons.

A) True

B) False
 
Question 3:
What method can you use to reference Frames in ActionScript other than Frame numbers?

A) Size
B) Elapsed Time
C) Labels

D) FPS

 
Question 4:
True or False: When you import an image into Flash, it's stored in the Library.

A) True
B) False
 
Question 5:
What are the four Frames on the Timeline of a Button labeled? (Check all that apply.)

A) Up
B) Off
C) Over

D) Down
E) Pressed
F) Hit
 
Question 6:
Which of these snippets of code will tell the Playhead to move to a labeled Frame and play?

A) gotoAndPlay(1);
B) gotoAndStop("foo");
C) gotoAndPlay("foo");
D) gotoAndStop(2);
 
Publish for everyone

The Web is a medium for making information available to everyone, so you need to ensure that your content is accessible even to people with
disabilities. This lesson gives reasons why accessible content publishing is the right thing to do and shows you how to make your Flash movie
more accessible and usable to everyone. Then you'll finally get to publish your movie.
 

Inclusive Web design

Get connected
Lesson 4 discussed the basics of ActionScript, Flash's native scripting language for interactivity.
You used your ActionScript knowledge to provide interactivity and animation to your Flash movie,
Face Facts. Now that you've completed your movie, you need to publish it for your friends and other With an HP notebook PC and a wireless
Internet users to enjoy. WAN card, you have the freedom to
work in Flash from nearly anywhere.
Know your audience

Keep in mind that not everyone can experience your content in the same way. Flash Player
provides a consistent medium for presentation of Web content, so why wouldn't everyone
experience it the same way?

» HP Wireless wide area network

The Internet is a medium for information dissemination. Anyone should be able to access your Web
page information, even if he's not a typical Web user. For example, someone may have a slow (wWAN)
Internet connection or an old computer. It's unlikely this person would get exactly the same
experience as someone with a fast connection on a new computer.

The main group of atypical Web users we want to emphasize is the disabled. There are Web users
with many types of disabilities, including
Blind or low-vision users: Those who are either completely blind or have great difficulty seeing
a computer screen. They may need a large format display or they may need to have screen text
spoken to them. Most Web accessibility concerns revolve around this group.
Deaf users: These people can't hear the audio feedback of a Flash interface or the soundtrack
of a Web video. Since we're not using audio in this course, we aren't concerned with deaf users
for now. If you continue Flash development and decide to incorporate audio, you should be
mindful of this group's special needs by providing subtitles, alternate visual feedback, or some
other audio equivalent.
Mobility-impaired users: Some people aren't able to use a typical pointing device like a
mouse. (And some nondisabled people even prefer using a keyboard instead of a mouse.) For
this group, you need to make your Flash movie accessible from the keyboard, relying on the
mouse only as a supplemental input device.
Color-blind users: These people typically have trouble distinguishing between red and green
colors, although many other types of color-blindness exist. Statistics show that about 1 out of 12
people has some sort of color vision deficiency. For these users, you must not use color as the
only distinguishing factor in an interface. For example, don't use the phrase "Press the green
button for Yes and the red button for No."
Users with cognitive learning disabilities: This category can be very broad, ranging from
disabilities such as dyslexia to severe mental retardation. Due to the wide scope of needs in
this group, it's difficult to plan specific accessibility features, but we'll discuss some accessibility
guidelines that help all people, including those with learning disabilities.

There are many different types of disabilities affecting people today. Chances are that you know a
person with a disability of some kind. Your course authors are not disabled in any way -- other than
perhaps some slight hearing loss from loud music -- but we feel strongly that the disabled can never
have too many advocates. We hope this lesson raises some awareness for their benefit and we
hope you'll keep their special needs in mind as you continue Flash and other Web content creation.

Let's discuss some specific accessibility challenges that affect these users and how AT (Assistive
Technology) can help.
 

Enable the disabled

Visit an inaccessible Web site

To provide a usable experience for people with disabilities, you must first understand the
accessibility challenges they face, and the tools they use to overcome them. There are several
standards and laws regarding Web accessibility that you should probably know about. The DRC (Disability Rights
Commission) recently published an
Standards and laws regarding Web accessibility inaccessible Web site demonstration in
Flash. The demonstration simulates how
users with disabilities might experience
Section 508, the name commonly used for Section 508 of the Rehabilitation Act of 1973, as a Web site that does not have essential
amended [29 U.S.C. ?794(d)], requires that government, educational, and many other public Web accessibility features.
sites adhere to a standardized set of accessibility guidelines. You can learn more about these
guidelines on the Section 508 Web site or on the Access Board Web site . There are demonstrations for low-vision
 and mobility-impaired users, as well as a
The W3C (World Wide Web Consortium) is an international Web standards body and think tank self- screen reader simulation of a blind
described as "a forum for information, commerce, communication, and collective understanding" user's experience.
about the World Wide Web. The W3C's WAI (Web Accessibility Initiative) has issued many
recommendations of Web technology including one for Web authoring standards called the WCAG
(Web Content Accessibility Guidelines). The Web Content Accessibility Guidelines are split into
three levels of recommendations:
Priority 1 or Level A: Web content must satisfy this checkpoint.
Priority 2 or Level AA: Web content should satisfy this checkpoint.
Priority 3 or Level AAA: Web content may satisfy this checkpoint.

WCAG Level A covers the highest priority regulations, and should be considered a bare minimum for
accessible Web content. Content must satisfy this checkpoint or some disabled users will find it
impossible to access the information. For the most part, Section 508 and WCAG Level A cover the
same topics and recommendations. Levels AA and AAA cover other recommendations to make
content more accessible and usable, but these are not technically required for an accessible Web
site.

For an in-depth analysis of the differences between Section 508 and WCAG Level A, read the
side-by-side comparison on Jim Thatcher's Web site (http://www.jimthatcher.com/sidebyside.
htm).

We encourage each of you to read the guidelines because they're invaluable resources for
understanding Web accessibility as a whole. (Despite the technical look of the document, the Web
Content Accessibility Guidelines are written in plain English and are quite easy to understand.)

Explore accessibility challenges and assistive

technology

AT (Assistive Technology) refers to tools or services used to improve the capabilities of a person
with a disability. AT can provide a more enjoyable and manageable user experience for the
disabled. Let's look at several specific AT devices commonly used today.

The accessibility challenges we're discussing mainly revolve around vision-impaired and mobility-
impaired users. These groups typically have the most difficult experiences with inaccessible Web
content and therefore justify most of our consideration.

Help low-vision and blind users

Low-vision users (some are designated as legally blind) can see but most likely have difficulty
reading small screen text. If possible, allow resizable text on a Web page or Flash movie. Many of
these people use a program called a screen magnifier that enlarges all or a portion of their
computer screen. Some of you may already have a simple screen magnifier installed on your
computer.

Windows 2000 and Windows XP users can find their screen magnifier by selecting Start > Programs
> Accessories > Accessibility > Magnifier. Mac OS X users can find their screen magnifier by
selecting the Apple Menu > System Preferences > System > Universal Access > Seeing > Turn On
Zoom.

Blind and mostly-blind people typically use an AT device known as a screen reader. As you learned
in Lesson 1, a screen reader is a computer program that speaks screen text out loud to blind or low-
vision users.

The most commonly used screen readers are

JAWS by Freedom Scientific
Window Eyes by GW Micro
Home Page Reader by IBM

Each one has different features and behaviors, although your goal remains the same: to provide
your content in an accessible way so that everyone can use it.

A screen reader can access text on the screen, but cannot describe images, graphics, or
illustrations. You can overcome this problem by providing a text alternative -- that is, associating a
bit of text with a non-text piece of content. When the screen reader encounters this item, it speaks
the text alternative you provided. You'll learn how to provide text alternatives for Flash graphics on
the next page.

Help mobility-impaired users

Users with mobility impairment may be unable to use a mouse or may use a different kind of
pointing device like a light pen or joystick. Some users, such as those suffering from carpal tunnel
syndrome, may prefer to use a keyboard even though they're physically able to use a mouse.

Whatever the situation, you should set up your Flash interface so that the use of a mouse is not
required. You'll learn how to make Flash objects accessible from the keyboard and how to create a
logical tab order through your Flash movie in this lesson.
 

Make Flash accessible

The best of both worlds

Macromedia has significantly improved the accessibility features of Flash with the release of Flash
MX. If you're familiar with previous versions of Flash, you may have noticed some of them already.
It used to be that in order to have the
Flash has many accessibility features that are outside the scope of this course, so for now, you'll freedom of a notebook PC, you had to
only learn about the most important ones: text alternatives and tab order. Text alternatives help sacrifice performance. HP notebook PCs
people using screen readers, and a logical tab order helps everyone using a keyboard. Use your tab are the best of both worlds: the
key on the movie below to see for yourself. performance of a desktop, the mobility
of a notebook, and at a price you can
afford.
Use the Accessibility panel

The Accessibility panel is a feature that enables you to provide text alternatives for each piece of
your Flash Movie. Double-click an empty area of the stage to reset the Property Inspector to its
default settings, shown in Figure 5-1. The Accessibility icon (a white figure on a blue circle) is on the
right side of the Property Inspector.

» HP Compaq nc4200 notebook PC

series

Figure 5-1: The right side the Property Inspector displays a blue Accessibility icon.

Macintosh users who found their screen zoom settings will recognize this as the icon used for the
Universal Access control panel in the OS X System Preferences.
» Notebook buying guide

Click the Accessibility icon to open the Accessibility panel or select Window > Accessibility from
the program menus. Because the Property Inspector is a contextual menu, the Accessibility icon
may not always be available, but you can always open it from the Window menu.

Like the Property Inspector, the Accessibility panel's contents are contextual. Figure 5-2 shows a
few possibilities of how the panel may appear.

Figure 5-2: The contents of the Accessibility Panel change depending the object that's selected.

View a larger version of this image.

The panel on the left displays the accessibility options for the Stage and movie. The middle panel
shows the options typically available for symbols, such as buttons or movie clips. A disabled
Accessibility panel is on the right -- plain shapes, like the ones you drew in Lesson 2, cannot have
accessibility options applied to them.

Make your movie accessible

Set the accessibility options for your Face Facts movie:

Make Movie Accessible: This checkbox enables screen readers to speak text sent from the
Flash Player. With very few exceptions, this should remain checked.
Make Child Objects Accessible: Leave this checkbox checked to make your buttons and body
text accessible.
Auto Label: A check here enables Flash to generate button and form labels automatically. For
example, if you use plain text for buttons instead of importing raster graphics, you wouldn't have
to explicitly label them. Flash can automatically look for text on, inside, or near an element and
auto-label it.
Name: Brief text that will be read in association with your movie. Name is the Flash equivalent
 of an HTML alt attribute. Type the words Face Facts into this field.
Description: This field is for an extended description, should one be needed. Description is the
Flash equivalent of an HTML longdesc attribute. Unless you want to add some other text here,
you may leave this field blank.

Make your buttons accessible

In Lesson 3, you imported raster graphics to use as buttons. If you had used Flash text for your
buttons, labeling them would be unnecessary, but since you didn't, you need to explicitly label each
button. With the Accessibility panel open, select the Eyes button on the Stage. The Accessibility
options change, and here's what to do:

1. Leave the Make Object Accessible checked.

2. Uncheck the box labeled Make Child Objects Accessible. This is irrelevant because the
buttons have no child objects, but do it for good measure. There are other reasons to
uncheck this box that we'll discuss later.
3. Type the button name in the field labeled Name. This text should correspond exactly to
the text that is visible on the each button. For the Eyes button, type Eyes, for the Mouth
button, type Mouth, and so on.
4. The Description field could also be left blank for the buttons. If you wanted to add
something here, a possible sentence might be, "Learn the importance of eyes in
animation." Our content is short, though, so a description is unnecessary and possibly
redundant. Consider using Description if you have larger amounts of content. For
example, if you use Flash for a complete Web site, a button Name might be Company
Info and its Description could be "Information about our company. Learn who we are,
what we do, and how to contact us."
5. Ideally, the Shortcut field provides a single keystroke to access a button, although
getting it to work requires more ActionScript than we cover in this course. This is the
closest equivalent to the HTML accesskey attribute. For now, leave this field blank.

If you'd like to use the Shortcut field, read up on Providing Keyboard Shortcuts and see
"Capturing key presses" in Macromedia Flash Help (http://www.macromedia.
com/macromedia/accessibility/features/flash/buttons_forms.html).

6. Repeat these steps for all three buttons.

Make your face graphic accessible

To make your face graphic accessible, you need to determine the level of detail you want to provide
to disabled users. Not enough information can make for a useless movie, but too much information
can make for an unusable movie. In future development, you'll have to weigh these options on a
case-by-case basis.

In Face Facts, your primary accessibility concern is to provide access to the button names and
related textual content. The animation is an added benefit for sighted users, but it's not necessary to
understand the content.

Since we used Graphic Symbols on the main timeline, no accessibility features are available for the
Face graphic.

If this entire graphic had been a Movie Clip symbol, you should probably not make the child objects
accessible, but make up for it by providing a detailed Description. You decide what that description
should be. The Name field should be something short and literal, such as Animated illustration of a
face.

Set logical tab order

Remember that some users may access your Flash movie without a mouse. These users primarily
use a keyboard and will navigate through your content using the Tab key. For this reason, it's
important that you give your buttons a logical tab order.

An object on the main stage can be accessed from ActionScript as _ root. plus, the instance name
of the symbol. You gave each of your buttons a unique instance name: btnEyes , btnMouth , and
btnHair .

The tabIndex property is an integer (number) that defines the tab order. This property is
equivalent to the tabindex attribute in HTML. You can access the tabIndex property of any button
by the variable _root.instanceName.tabIndex .

Make a new layer on the Timeline. Name this layer tabIndex, and open the Actions panel by
selecting Window > Actions. In the left column of the Actions Panel, select Actions > Variables >
set variable. In the Variable field, type _root.btnEyes.tabIndex and in the Value field type 1.
Repeat this process for the other two buttons but use the values 2 and 3.

When you're finished, the ActionScript code you've written should match the following:
_root.btnEyes.tabIndex = 1; _root.btnMouth.tabIndex =
2; _root.btnHair.tabIndex = 3;

Figure 5-3 shows the Actions Panel in the finished state.

Figure 5-3: Provide a logical tab order by assigning the tabIndex property through the Actions panel.

View a larger version of this image.

Previously you've used the Publish Preview feature by pressing Ctrl+Enter ( Command+Enter on
the Mac). Unfortunately, the preview function is not accessible to the keyboard so you won't be able
to test the tab order until you really publish your movie. Once you do, I encourage you to come back
to this script and rearrange the tab order, just so you can better see how it works.

You only have three buttons, so this tabIndex step was probably unnecessary; however, if
you build an interface with many buttons, the automatic the default tab order may not be
logical. Now if you run into an illogical tab order, you'll know how to fix it.

You'll learn how to publish your movie on the next page.

Bob Regan, head of the Macromedia Flash accessibility division, maintains a Web log dedicated to
the Accessibility features of Flash (http://www.markme.com/accessibility/). This Web log is an
invaluable resource for anyone interested in accessible Flash development.
 

Publish your movie

Download the source

You're finally ready to publish your movie. We know you're excited, but this won't take much longer.

Publish as Flash Download this zip file that contains the

source file and to see the techniques in
this lesson at work and try them for
Select File > Publish Settings. On the Formats tab is a list of checkboxes and filenames. For the yourself.
default setting, you have only the first two checked: Flash (.swf) and HTML (.html). These are the
ones you need to publish a Web page.

If you'd like to name your HTML file something other than faceFacts.html, uncheck the box labeled
Use default names. You may want to make it a directory index such as index.html.

On the Flash tab, you can select the Flash Player version you would like to use. This is a useful
setting for backward compatibility, but you need to leave it as Flash Player 6 or none of the
accessibility features we included will be used. Leave the other settings alone as well.

On the HTML tab, find the Template field. Use the default setting Flash Only, but take the time to
look over the other templates, because you may need to use some of them in the future. For
example, Detect for Flash 6 includes a JavaScript function that writes in the Flash object only if the
user has the Flash Player 6 plug-in installed. A detailed analysis of these templates is beyond the
scope of this course, but check the resources in Lesson 6 for help in this area.

If you consider yourself HTML-savvy and understand scripting variables, you may want to modify
the default HTML templates. Most Windows users can find them in C:\Program
Files\Macromedia\Flash MX\First Run\HTML. Most Mac OS X users can find them in
/Applications/Macromedia Flash MX/First Run/HTML. The template files are plain HTML but include
a few variables such as $WI for width, $TI for title, and so on.
 One modification we made was to place the Movie Text variable ( $MT ) inside the <embed>
element. This can benefit people using browsers incapable of receiving Flash content, such as the
text-only browser, Lynx.

Please be careful when modifying these templates. If you break them, you'll have a hard time
finding replacements and may need to reinstall the program. It's far better to save a copy to
create a new custom template (open a template and immediately Save As, using a different
filename than the original).

In the Publish Settings dialog window, click OK to confirm your changes. Now select File >
Publish or press Shift+F12 on your keyboard. That's it. You're done.

You can view these files in the same directory where you saved faceFacts.fla. If you would like to
publish them to your Web site, upload the SWF and the HTML files using any FTP (File Transfer
Protocol) program, such as WS_FTP for Windows or Transmit for Mac OS X.

Use other publishing formats

Flash can export to a variety of formats including, but not limited to, the following:
Windows AVI
Quicktime MOV
Animated GIF
Sequence of images in various formats

The benefit of publishing in other formats is that someone may be able to receive this other type of
content, but not Flash. For example, Flash can be used (or abused) to create Intro Movies. A user
without Flash cannot view this movie but might be able to view an AVI or Quicktime video.

You can publish in these other formats by selecting File > Export Movie. In the Save as type field
( Format on a Mac), select the file type and click Save. You can also publish as a stand-alone
projector file for Windows or Macintosh from the Format tab in the Publish Settings dialog
window.

If you use XHTML and would like your Flash pages to validate, read Issue No. 154 of A List Apart,
Flash Satay (http://www.alistapart.com/stories/flashsatay/).

Moving on

Take the time to do the assignment and take the quiz for this lesson. They'll help you assimilate
what you've learned. As always, should you have any questions, please bring them to the Message
Board.

In the next and final lesson, you learn some more tips and tricks for progressing your knowledge of
the Flash Authoring Tool. We provide you with best practices techniques and a list of resources
where you can learn more about Flash.

Assignment #1

Play around with your publish settings to see what works best for you. Go back and modify your
tabIndex settings to see the effect it has on your movie.

If you have access to a Web server, use an FTP program to upload your files to your Web server
and share them with the class by posting the URL to the Message Board. Unless you used the class
example files, everyone's Flash movie will look slightly different, and it's always interesting to see
other people's interpretations. You may want to try publishing in other formats as well. Send the URL
to your friends and show off what you've learned!

If you're feeling especially industrious, use what you've learned to make a new Flash movie of your
own creation. Publish it and post another note to the Message Board. We'd love to see it.

Quiz: #1

Question 1:
What type of disabled users should you consider when developing accessible Web content?

A) Vision-impaired users.
B) Hearing-impaired users.
C) Learning-impaired users.
 D) All of the above.

Question 2:
The Web Content Accessibility Guidelines state that which of the following must be met for Web content to be accessible?

A) Priority 1 or Level A

B) Priority 2 or Level AA

C) Priority 3 or Level AAA

Question 3:
Which of the following is not a popular screen reader?

A) Home Page Reader

B) Window Eyes

C) Web Speaker

D) JAWS

Question 4:
Which of the following is the correct way to access the tabIndex property of a Flash symbol in ActionScript?

A) _root.tabIndex.instanceName
B) _root.instanceName.tabIndex
C) _root.tabIndex
D) _root.symbol.instance.tabIndex
 
Question 5:
Flash MX can publish to all of the following formats except ____.

A) Animated GIF
B) Windows AVI
C) Quicktime MOV

D) Motion JPEG

E) Stand-alone projector
 
Question 6:
True or False: In the Flash MX Accessibility Panel, you should always check the box labeled Make Child Objects Accessible.

A) True
B) False
 

Keep learning

This course teaches you the basics of Flash publishing, but Flash has much, much more to offer. This lesson discusses what you've learned and
where to go to find more information.
 

What's next?

Printing your tutorials

Learning Flash MX can be a daunting task. As with any program, it's best to learn in small chunks.
We touched on many of the basics in this course, but you'll have to learn the rest without our help.
When working in Flash, it helps to have
Don't worry. There are lots of things to learn and lots of people on the Internet willing to help you hard copies of tutorials and courses to
learn them. We'll give you a few topics to research and, later on, a list of resources to help you consult easily while you're trying new
along the way. effects. Print out your guides with an HP
LaserJet, capable of printing multipage
Import material into Flash documents without missing a beat, and
at a price you can afford.

You know how to import raster graphics to use as buttons, but that's only one of the many things you
can import in Flash MX. Let's take a look at some of the other material you can import through File
> Import:
Other raster graphics: In Lesson 4, you imported GIF images to use as buttons for the movie,
Face Facts. Flash also allows you to import other raster graphic file formats, such as JPEG
(Joint Photographic Experts Group) and PNG (Portable Network Graphic). The JPEG format
» HP LaserJet 1022 printer series
can save you file size on imported photographs. The PNG format supports a native alpha
 channel that allows partial transparency on certain pixels. Experiment with each format because
they all have different benefits.
Vector graphics: Flash has the capability to import graphics from other vector-based drawing
programs, such as Macromedia Freehand or Adobe Illustrator. Vector graphics are especially
useful for their small file size and infinite scalability.
Audio: Flash can import many different sound formats, such as MP3 and WAV. You can
effectively use audio in Flash to produce short sound effects or even a longer soundtrack for » HP Care Pack services
your entire movie.
Video: Flash MX can import and control video with ease. You can import video file types such
as MOV, AVI, WMV, MPG, and so on.
Other Flash movies: One of the coolest things about Flash is its capability to import other
completed Flash movies in the SWF format. Start small. You can save little movies and then
import them as symbols to a larger movie when you're ready.

There are other ways to import content into Flash, too. Some of them can even be done on-the-fly --
that is, while a person is viewing your Flash movie.

Import external ActionScript files by using the #include directive in the first frame of your movie.
Importing ActionScript is beneficial because it enables you to share your plain-text script library
across many Flash movies. It also enables you to centralize all your code instead of adding
snippets in many different places throughout the FLA file. Here's the syntax for importing an
ActionScript file:
#include "myCustomScripts.as"

Notice that the #include directive does not have a semicolon ending the statement. This is a
special case and causes an error if you include a semicolon.

You can also import text content on-the-fly to load into your movie. The benefit of this is that you
can separate your content from your Flash movie. As plain text, it's easier to update and could even
be generated from a server-side scripting language, such as PHP (PHP Hypertext Preprocessor).

Import external symbol libraries to share all your Flash objects across multiple files. Instead of
having to re-create objects each time you create a new movie, you can start with your symbol library
ready to go.

Flash application developers commonly use XML (Extensible Markup Language) data. Flash can
import and parse XML data for use in advanced applications. For example, Google provides XML
data via its Web Services APIs , so you could theoretically build a Flash search engine running on
Google content.

Use audio

You can use audio in Flash to provide background music, sound effects, or other aural feedback. If
you play a song in the background, it's common courtesy to give the user a way to turn off the
music. If you provide sound effects on your buttons or other areas, remember, "Less is more." A
Flash Web page is not a video game (although it could be) and users can quickly be turned-off by
annoying or loud sounds. Be tasteful in your audio choices.

One common use of Flash audio is to provide an audio alternative for vision-impaired users. You
may want to record your own voice and use it for button sound effects in your Face Facts movie. For
example, when you mouse over the Eyes button, the sound-effect could speak the word eyes.
Audio feedback like this can help people with learning disabilities, too. If you add audio to the
button, you may want to uncheck the Make Object Accessible box in the Accessibility panel so that
the screen reader and your additional audio do not conflict.

For an example of this type of audio feedback in action, view one of the Homestarrunner Main
Menus (http://www.homestarrunner.com/main4.html).

Audio can be used to enhance the experience of a vision-impaired user, but be sure to consider a
deaf user's needs when adding audio. If the soundtrack provides essential information, you should
include an option for subtitles.

If you're interested in providing subtitles for your videos, research MAGpie (Media Access
Generator - http://www.homestarrunner.com/main4.html), developed by the National Center for
Accessible Media (NCAM).

Use video

Since Internet connections are getting consistently faster, you may want to include video in your
Flash movie. Keep in mind that video files are very large and can load slowly even on a broadband
connection.

Flash MX provides much more control and incorporation of video than previous versions of Flash.
Find out more about video in Flash at the Macromedia Flash Support Center .

If your video includes essential information, try to include an alternate audio track for vision-
impaired users. This alternate audio track is common on DVDs and provides a spoken description of
the video in between sections of dialog.

Learn advanced ActionScripting

We highly encourage you to learn as much as you can about Flash's native scripting language,
ActionScript. Although you don't need much for basic Flash authoring, using more advanced
ActionScript can unleash an enormous amount of control and interactivity. The possibilities are
endless.

For more information about advanced ActionScript, scour the resources section at the end of this
lesson.

Understand SWF

Macromedia recently released the Flash movie format, SWF, as an open format. What this means is
that any number of applications can bypass the Flash Authoring Tool and write SWF files by
themselves.

Vector drawing applications, such as Adobe Illustrator and Macromedia Freehand, can save directly
as a SWF file, although of course you cannot provide animation from those programs. Even some
video editing programs can export as SWF and include the video directly.

In our opinion, the best benefits of the open format are modules and libraries for various server-side
scripting languages like Ming for PHP. These modules enable developers to create Flash movies
directly from plain text programming code.

Look at some examples of Ming for PHP (http://ming.sourceforge.net/examples/). If you're

interested in how the SWF files are created, all the source code is freely available. PHP and Ming
are both open-source and free. If you have access to a Web server, you may request that your
server administrator install the Ming module for PHP.

Now that you've learned what you can do, let's take a look at what not to do.
 

Watch out for these mistakes

We can help you continue your learning

Beginning Flash authors tend to make a lot of the same mistakes. You, as a beginning Flash author, process
are no exception. Mistakes can be frustrating, but what you learn from them helps you avoid them in
the future.
Technical expertise, IT education, and
Although making mistakes is a beneficial part of programming, we'd like to tip you off to a few user training have never been easier to
mistakes we've made at times, so that our experience might save you some of the headaches and purchase or to implement, thanks to HP.
nail biting we've been through.

Avoid letterforms as Hit areas

If you use plain text for your buttons, make sure you include a larger Hit area instead of just using
your letterforms. The reason becomes obvious in practice.
» HP Total Education One

If you use only letterforms as your Hit area, the button activates only when the mouse is exactly over
the letter. Any transparent space between letters or even inside of a letter does not activate the
button. For example, if you used a text-only Hit area for the Mouth button in your movie, Face Facts,
the button would not activate inside the letter O. Instead, the user would have to click the outline of
the letter.

Don't rush to play

One common mistake is to play a movie before it is fully loaded. Sometimes it isn't necessary to
preload a movie, but in many cases it can help. Because not everyone's Internet connection is the
same, your Flash movie can take longer to load on some people's computers.

Face Facts is relatively small piece, so preloading is probably not necessary, but you may want to
preload your larger movies. It's common to place a loading graphic at the beginning of your movie
and import any external files on frame 1. We sometimes make a preloader by placing a frame
looping Movie Clip on frame 1 of the main movie. We also need a stop() command in frame 1 after
all the imports.

We can check to see if a movie is completely loaded by comparing the number of frames already
loaded to the total number of frames in the main movie ( _root ). This preloader might go on frame
two of the Movie Clip symbol:
if(_root._framesLoaded < _root._totalFrames){ prevFrame();
} else { _root.gotoAndPlay(2); }

Or, by comparing the file size loaded to the total file size of the movie:
if(_root.getBytesLoaded() < _root.getBytesTotal()){
prevFrame(); } else { _root.gotoAndPlay(2); }

In plain English, these bits of code mean, "If the main movie is not fully loaded, go back one frame in
the child Movie Clip." Because the Movie Clip is playing, frame 1 plays on through to frame 2. With
this code on frame 2, it runs again. This loop continues until the movie is completely loaded, and
the ActionScript starts the main movie playing on frame 2.

Don't worry if you don't understand all of that yet; just realize that preloading your movie can prevent
jumpy animation or trying to play a frame that hasn't loaded yet. In the same way, you can get a
logic error in ActionScript if you refer to a function, variable, or object before it is loaded. We'll get to
logic errors in the next section.
 

Common ActionScript mistakes

 
Like any programming language, ActionScript has the possibility for errors. There are two main
types of errors in programming: syntax errors and logic errors.

Syntax errors are caused by code that does not follow the basic syntax of the language. For
example, you may forget to close a quoted string:
var foo = "test; // missing second quote

Fortunately, syntax errors are usually easy to track down because the program knows where they
are. You will never have a syntax error if you use Normal Mode in the Actions panel. If you type a
syntax error while in Expert Mode, you cannot switch back to Normal Mode. Instead you get a
message that says, "This script contains syntax errors. It must be edited in Expert Mode," as shown
in Figure 6-1.

Figure 6-1: If you type a syntax error into the Actions panel under Expert Mode, you have to fix it
before you can return to Normal Mode.

View a larger version of this image.

There are many different reasons for logic errors. Unfortunately, these errors can sometimes be
very difficult to track down. We cannot go over all the different possibilities of logic errors, but we
can give you an example:
gotoAndPlay(myFrame);

The syntax of the preceding statement is fine. The function is valid and it's passed one variable. The
variable, myFrame , should either be a frame number (integer) or a frame label (string). Because
it's a variable, though, its value might change before this statement runs. myFrame could contain a
frame label that does not exist or may refer to a different data type, such as an object or floating
point number (decimal).

You can usually use the Trace Window and the Script Debugger to find logic errors. If you get an
error on a piece of code like this statement, try the following:
trace(myFrame); gotoAndPlay(myFrame);

Now use the Publish Preview, and the Trace Window will show the current value of the myFrame
variable, just before the error is thrown. If it's the wrong type, this could tip you off to finding the bug.
Because the trace() function is used only for debugging, you do not need it for the final output of
your movie. Select File > Publish Settings > Flash tab, and check the box labeled Omit Trace
actions.

Understand case sensitivity in ActionScript

In programming, case sensitivity means that uppercase and lowercase letters are treated as
completely separate characters. If a language is fully case sensitive, foo and Foo are not the same
word. If a language is not case sensitive, or case insensitive, foo and Foo are the same.

ActionScript is partially case sensitive, meaning that some words (like the reserved keywords if ,
while , and so on) are case sensitive and some (like custom variable names) are not. This can be
confusing, but it was done to ensure backward compatibility with Flash 4 and Flash 5 ActionScript.

Although certain words in ActionScript are case insensitive, we encourage you to treat everything as
if it were fully case sensitive. Precision coding helps you avoid errors.

If you have trouble tracking down an error, check the case of your code. It's quite common for
beginning programmers to overlook case-sensitivity.

Compare frame loops versus script loops

In the preloader example, you saw an example of a frame loop. A frame loop is a bit of code on
one frame that conditionally sends the playhead back to a previous frame. When the playhead
returns to the original frame, the conditional code runs again. A frame loop is a common way to run
the same bit of code over and over.

There are other types of loops, called script loops, which you can use with ActionScript. They
include for loops and while loops. Script loops have their place, but sometimes it's better to use a
frame loop. For example, we could have done our preloading with a while loop.

Do not use the following bit of code. It has a few unfortunate side effects we will discuss.

while((_root._framesLoaded < _root._totalFrames){ 0;

// this line does nothing }

In plain English, this code means, "If the movie has not fully loaded, wait." Ideally, this code
accomplishes the same thing as the previous preloader. In practical use, however, it can cause
problems. While the script loop is executing, the Flash Player plug-in can do nothing else. This
means that the Web browser may freeze or the computer may even appear to crash.

The Flash Player has a built-in mechanism to avoid infinite loops in ActionScript. Like it sounds, an
infinite loop is a loop that never stops. The following is an example of an infinite loop:
// infinite loop var foo = 1; // foo is equal to one while(foo>0){
// while foo is greater than zero foo++; // add one to foo } //
foo is still greater than zero, so loop continues

Sometimes, like in a looping animation, infinite loops are done purposefully. Other times, usually in
code, they are an accident.

If the loop runs for too long a period of time (15 seconds), the Flash Player stops executing the
script and present a message to the user that says, "A script in this movie is causing Macromedia
Flash Player 6 to run slowly. If it continues to run, your computer may become unresponsive. Do
you want to abort the script?" You may never see this problem, but a person on a slow modem
connection might. For this reason, we do not recommend a script loop for preloading.

See Pausing a Flash Movie on the Macromedia Flash Support Center for information about frame
loops and script loops (http://www.macromedia.com/support/flash/ts/documents/f5_pauser.htm).
 

Use Flash MX resources

Save on computing products

By now, you've learned enough about Flash MX to realize that this course only scratches the
surface of its use. As we've stated before, the possibilities are endless. The best thing we can do for
you now is to point you toward resources where you can learn the rest on your own. HP's specials on computing products
allow you to cut costs when you're
Find information outfitting your business.

As you have probably guessed from some of our sample URLs, the Macromedia Web site is a great
source of information about Flash.
The Macromedia Flash Support Center provides news and information about the Flash product line,
as well as code samples and articles on the Flash Authoring Tool. The Support Center also
» Save on computing accessories
provides a searchable database of information on Flash.

The Macromedia Flash Forum is a Web forum with discussion threads on all aspects of Flash
development. Sign up and read the forum overview to get started, and then search for some
interesting threads or start a new one with your own question.

Flash Kit is a Flash developer's resource Web site. It provides links to articles, news, showcases,
message board, and many other beneficial resources.

Colin Moock has written several books on Flash and ActionScript. He maintains a personal Web site
containing code samples, authoring tips, Flash examples, and links to other Web resources.

Bob Regan's Accessible Flash Web log is an excellent source of practical information and tips on
how to make your Flash movies more accessible to people with disabilities. Mr. Regan is the head of
the Macromedia Flash Accessibility team.

WCAG (Web Content Accessibility Guidelines) are not specifically related to Flash, but we
encourage you to read over them anyway. Knowledge of this subject raises your awareness and is
beneficial to anyone creating Web content.

Find inspiration

The Macromedia Web Site of the Day is a showcase of contemporary work built with Macromedia
products. It used to be mainly Flash but lately we've seen more Director (Shockwave) Web sites
showcased. In any case, the work is usually fantastic.

Homestarrunner.com is an entertainment Web site that your humble authors can't seem to get
enough of. We especially recommend Strong Bad's advice on Web site development .

Shockwave.com is another Macromedia entertainment Web site featuring games and other
interactive pieces produced mainly in Flash and Director.

We also mentioned a few Web sites in Lesson 1 that you may remember:
Nike Lab
JoshuaDavis.com
Cartoon Network
 

You've learned a lot

The final source

Let's briefly recap what you learned in this course.

In Lesson 1, you learned a little bit of the history of the Internet and how it came into being; the Download the complete and final zip file
difference between raster and vector graphics; that Flash Player is an HTML-embedded technology containing the source file and then try
that is usually viewed as part of an HTML Web page; and that the Flash Authoring Tool enables you some Flash magic of your own using the
to create and publish Flash movies. resources suggested in this lesson.

In Lesson 2, you began using the Flash Authoring Tool and learned how to draw simple graphics in
Flash; how to use some other tools to help you manipulate graphics on the stage; about the
Timeline; and how the layer stack works.
In Lesson 3, you learned about frames, keyframes, shape tweening for animation, symbols, and the
library, and then you animated eyes, mouth, and hair in Face Facts.

In Lesson 4, you added interactivity to your movie by utilizing ActionScript, Flash's native scripting
language, and then created buttons by importing raster graphics and assigning actions to them.

In Lesson 5, you learned about some problems with Web accessibility and how you could use the
new accessibility features of Flash MX to benefit users with disabilities. You also learned how to
modify your publish settings and publish your movie for the world to see.

And finally, this lesson gave you some ideas for continued Flash learning, and gave you a list of
resources to help you learn more.

Moving on

We sincerely hope that you've enjoyed this course and learned a lot. If you have any questions,
please post them to the class Message Board to see if any of your classmates can answer it. Do the
assignment and take the quiz to complete your course work.

Thank you.

Quiz: #1

Question 1:
Which of the following cannot be imported into the Flash Authoring Tool by using File > Import?

A) Video
B) XML data
C) Vector graphics

D) Audio

 
Question 2:
What's the correct syntax for importing an external ActionScript file?

A) #include myCustomScripts.as
B) #include myCustomScripts.as;
C) #include "myCustomScripts.as"
D) #include "myCustomScripts.as";
 

Question 3:
What's the common name for a script that makes sure the movie is fully loaded before allowing it to proceed?

A) Preloader

B) Load-up
C) Movie loader
D) Load balancer
 
Question 4:
Which of the following best describes ActionScript's case-sensitivity level?

A) Fully case sensitive

B) Partially case sensitive

C) Not case sensitive (case insensitive)

 
Question 5:
What's the common term for a loop that never stops looping?

A) never-ending loop

B) infinite loop
 
Question 6:
Which type of loop did we recommend for the preloading example? (Hint: There were two examples, but we recommended against using one.)

A) script loop
B) frame loop