macro media flash mx fast & easy web development

8/2/2019 Macro Media Flash MX Fast & Easy Web Development

1/211

Flash MX 20 04 fast & easy w eb developm en t By Michae l Pu le io , Jenn i fe r Tur ner Long

Ripped by: Lilmeanman

LilmeanmanDigitally signed by LilmeanmanDN: CN = Lilmeanman, C = US, O =Lilmeanman UNltd, OU = Lilmeanman UReason: I am approving this documentDate: 2004.08.31 20:30:41 -06'00'


2/211


3/211

Macromedia Flash MX Fast & Easy Web Developmentfrom Prima Tech is designed to help new and intermediate ubecome familiar with basic and intermediate features of Flash MX. Using a simple step-by-step, visual approach, th

book introduces the tools and features of Flash MX. It shows how they are used, and provides examples along the w

With this book, you can learn how to create professional looking movies that will add life to any Web page.

Flash's extreme popularity comes from its small file sizes and accessibility. Flash has the capability to take an amaznimated movie and compress it into a size small enough for use on the Internet. Compared to video streaming, Flas

much more efficient and effective way to package material. Also, Flash movies are easily played on almost allomputers. Many computers come packed with the Flash plug-in, and it is an easy download for those machines that

not. Flash is the industry standard of its field.

Most people know that Flash is a great tool for creating "eye candy," but Flash's capabilities are not just graphical in

nature. Flash's native scripting language, ActionScript, is quite robust and more and more Flash applications that wo

with data use it.

Who Should Read This Book

This book is for those people who are new to Web design and development, as well as those who have been working

Web development for a while. Contrary to popular notions, you don't have to be an artist to create elegant, image-driWeb pages. If you are familiar with Windows or Macintosh computers and want to add excitement to Web pages, th

book is for you.

The illustrations in this book focus on the Windows version of Flash MX, but the Macintosh version looks more or l

dentical. The commands should be similar as well, and in most cases both commands are included in the text.

There are four main sections to this book.

The Basics of Flash

This section provides background information on Flash and its role on the Internet. It introduces all of the tools used

he Flash workspace and provides step-by-step instructions as to how these parts fit together and flow into a movie.

Animation

This section advances your learning into the realm of motion. It introduces the different methods of creating motion

Flash and shows you how to apply them. Look for some pretty neat looking tricks demonstrated in this section!

Sound

Sound on the Internet is an interesting topic. This section provides necessary background information about sound a

how it works. It teaches you how to use Flash's compression tools to yield the smallest sound file with the highest qu

ound possible.


4/211

Finishing Touches

This section helps you put what you've learned together and introduces you to advanced concepts. It introduces HTMnd shows how Flash works in HTML. You will learn how to publish a basic Web page and how to embed your Fla

movie in it. ActionScript is introduced in this chapter, and you'll learn the building blocks of this scripting language

hands-on examples.

Helpful Hints with Every Chapter

Whether you have a Windows or Macintosh computer, and regardless of what you already know about Web

development, you can enjoy learning about Flash MX the fast and easy way.

NOTE

Tips offer hints, explain more about a special feature, and tell you how to use a shortcut to boost your productivity t

make work fun.

NOTE

Cautions warn you about potential pitfalls, explaining what might be happening and offering alternative routes you

ake.

NOTE

Notes provide additional information about a feature, or extend an idea on how to use a feature.

Part I: The Basics of Flash MX

This section starts with the fundamentals of Flash and prepares you to put components together into production. Yougain background information on Flash and its current role on the Internet. All the contents of the toolbox are thoroug

xplained with examples demonstrating how to use each one. Finally, you will learn about the Flash workspace and

reate your first movie.


5/211

Chapter 1. Getting Started with Flash MX

n this chapter, you will learn the answers to these questions:

What can Flash do? What are the new features in Flash MX? How can the development process be organized?

The Internet has exploded in recent years from a small computer network for academic researchers to an immense

medium for commercial ventures, including entertainment, education, shopping, advertising, and just plain expressi

yourself. Early Web sites were composed of static text pages containing basic text links. These pages were very sim

ndto today's Web-savvy eyeprobably pretty boring. At this early stage, the Web was about conveying informaWeb sites now differ greatly, providing a sensory overload at times, from pop-up advertisements to complex graphic

motion on many pages.


6/211

With the advent of the commercial Internet, Web developers looked for ways to make sites more interesting in an efo draw more people to their sites and to make money. Graphics became widely used, enhancing the design of pages

Scripting and interactivity were created, allowing Web sites to gather input directly from their viewers. Multimedia

ontent soon followed, enabling video and audio to be placed on the Web.

What Flash Can DoMacromedia has created a tool to assist Web developers with creating interactive, dynamic, eye-grabbing sites. Usin

Flash, developers can animate graphics, add sound, and create movies, just to name a few possibilities. From the sim

mage movement to a complex movie clip, Flash can help you create the look you want. Flash also contains a powernative scripting language, named ActionScript, as discussed in Chapter 12. ActionScript can assist you with anythin

rom automating tasks to adding data-driven functionality to your site.

As you work through this book, you will gain hands-on experience about Flash's capabilities. You will create symbo

nd buttons, learn about animation and the Timeline, and produce a complete movie clip.

Macromedia Flash MX

The most recent tool from Macromedia is Flash MX. This new tool for developers simplifies the process of creating

ites that interact with visitors and include a multimedia experience. Flash MX (also known as Flash 6) builds on thprevious generation of tools by adding new features and improving existing features. These features include the

ollowing information:

Video. Flash MX supports most common video formats. Multiple languages. Flash MX is available in 11 different languages. Multiple platforms. Flash Players are available for major Web browsers on most popular computer operatin

systems. Flash movies can be created once and viewed on almost any computer. Scripting. Flash MX includes a full-featured scripting language, ActionScript, to aid in interactive design, to

control navigation, and to enable user interaction. Flash and ActionScript have been used to create Web sitesgreeting cards, and video games.

Built-in components. Flash MX includes a number of components that simplify the design of user interfaceText input fields, buttons, and check boxes are examples of these components that can easily be added to a F

movie.

Macromedia Flash is a standard platform for Web designers and Web developers because of the flexibility and powe

he platform. You can feel confident that the vast majority of computers being used can view Flash files with no

download. And, when the Flash player does need to be downloaded, the process is quick and simple.

Organizing the Development Process

Before diving into the details of Flash, I need to cover a few basic ideas behind the development process. You'reprobably thinking, "Why do I need to know some process?" The answer is simple: Creating a Web site can quickly g

rom being a simple project to a horrible disaster if you don't have a plan.


7/211

Let's look at an example. Bob is a Web developer for a small but growing company. His boss tells him that the compWeb site needs to be redesigned so that it looks better. Bob likes a challenge, so he dives in. A few weeks later, he

merges from his office after publishing the new site. His boss looks at it, and Bob now has a to-do list as long as hi

of changes to be made to the site. Bob makes the changes, publishes the updated site, and tells his boss. The boss ishappy, so Bob tells him to check out the site. This process results in another list of changes Bob needs to make. Of

ourse, while Bob is working on this new list, people start talking about the site, and he ends up with instructions froeveral different high-level executives telling him how the site should work. Unfortunately, two of his instructions, fdifferent vice presidents, are "Get rid of the graphics on the site" and "We need more graphics on the site." Bob is no

no-win situation, but he works long hours and begins to burn out trying to keep everyone happy. In the end, he is f

not because he was a bad developer, but rather because his requirements were not identified at the beginning. Bob di

need to have his project spiral out of control. A number of processes are out there, and several books describe them.

implicity, I'll show you a simple, condensed design process. In this four-step design process, you will learn how to:

1. Gather requirements.2. Design.3. Develop.4.

Review.

Simple, right? Let's look at each step in detail from the perspective of developing a Web site. You can easily apply t

ame process to application development or moviemaking.

Gather Requirements

This step is the process of finding out what needs to be done. It can be as simple as creating a small, one-page site th

ists a company name, address, and phone number, or it can be as complex as an e-commerce system for selling 10,0

products in 12 countries. Of course, you need to gather these requirements from the decision-makers who have a stakhe projectthe CEO of a company or maybe just you, depending on the site. From this list, make sure that you kno

nswer to the following questions.

Who is your intended audience? Audience identification is crucial during the initial stages of a project. Forexample, a site designed for an association representing senior citizens looks very different from a site desig

to sell products to teens.

What is the purpose of the site? Is the site's primary purpose to convey information, complement a marketstrategy, or sell products? Again, the differences are significant.

What are the decision-makers' expectations in terms ofgeneral look and feel? Are they comfortable witblinking objects, or is subtle movement preferred? Do they have a classic design in mind or something eye-

catching?

How should the navigation work? What is the general organization of the site?After you have some foundation knowledge in these areas, you're ready to move to the next step.

Design

Now that you know what needs to be done, you can figure out how to do it. The design process often includes sketchprototypes, and storyboards. Each situation is different, and each designer is different. Find what works best for you

mportant part of the design phase is figuring out how to accomplish each requirement. For most Web site design


8/211

projects, the design usually ends with a storyboard that shows not only the different pages in the site but also theonnections and links between pages. The design also shows the interface to any back-end databases, accounting

ystems, or what-have-you. This is your opportunity to put those creative juices to work and illustrate how the entire

lows.

Develop

Now that you know what needs to be done and how it will get done, you have to actually do it. In this stage, you bui

ite. This subject is what most of this book covers: the mechanics of building graphics, buttons, movie clipswhate

you wantin Flash. Often, you'll discover that you missed an important piece of the design of the project and mustevise it before the project can be fully developed. Don't worry: This situation is normal. The design of a big project

usually a living, breathing, changing document.

Review

n the review stage, you compare the site that was developed with the design and its requirements. Test, and then tes

gain. Create as many different environment variables as possible (for example, different browsers, different monitoesolutions, and Macintosh-versus-PC) so that you have a solid idea of which audiences can access your site and are

prepared for those questions when they come your way. If you have missed something, this stage is where mistakes

aught. Update the design as needed and fix any problems (usually called bugs) that appear in the development proc

When everyone is satisfied that all the requirements are met, publish the site and congratulate yourself on a job welldone.

This design process is a simple, but powerful, tool. Now that you have some background information and organizati

ools, take a look at Flash MX.


9/211

Chapter 2. Understanding the Flash WorkspaceThe first time I saw the Flash workspace, I was almost overwhelmed by all the different windows, panels, and toolb

he screen. I didn't know where to start, so I stopped and looked at the screen in sections. Let's do that now, starting w

broad overview and then dealing with specific tools.


What are the different parts of the workspace? How can you hide, show, and move panels? How can you use each tool in the Toolbox?

Overview

Here is a quick tour of the default workspace in Flash MX:


10/211


11/211

Moving, Hiding, Closing, and Opening Panels

All the panelsthose visible by default and those hidden dock with the workspace. Dockable panels or toolbars wo cling to the edges of the screen, but you can move them around. To move a panel, follow these steps.

To dock a panel again, follow these steps, but in Step 3 move the panel toward the edge of the workspace. A darkene

border appears, showing where the panel will reside after you release the button.

Closing a panel involves right-clicking in the panel's name and choosing Close Panel.

Not all panels are visible by design. Flash MX just has too many to show at one time. If you need a panel that is not

visible on the screen, choose the name of the panel from the Window menu. The panel will appear in the workspace


12/211

One problem with so many different panels being available is that the workspace can quickly get too cluttered to wof this happens, you can restore the workspace to the default configuration by selecting Window, Panel Sets, Default

Layout.

NOTE

n the screen shots for this book, all the panels are hidden unless they are necessary to show an idea.

NOTE

CREATING A NEW MOVIE

When Flash runs, it automatically creates a new movie for you. Sometimes, you have to create a new movie yourself

ither choosing New from the File menu or pressing Ctrl+N or +N on a Macintosh computer.

The Toolbox

The Toolbox contains many tools, each of which has its uses in the right situation. Rather than explain the tools in th

order in which they appear, I discuss them by topic. The different groups of tools in the Toolbox are Selection tools,

Drawing tools, Editing tools, View tools, and Color tools.

Selection Tools

Flash has three selection tools: the Arrow Tool, the Subselection Tool, and the Lasso Tool.

The Arrow Tool

The Arrow tool allows you to choose which objects or parts of objects you want to edit. You can use the Arrow tool one of two modes. The simple way to choose objects is to click on them.


13/211

You can optionally hold down the Shift key and select multiple objects or press Ctrl+A ( +A for the Mac) to selec

objects.

The second way to use the Arrow tool to choose items is by clicking and dragging a rectangle around the item.

1.

Choose the Arrow tool from the Toolbox.

2. Move the mouse to the upper-left corner of the object or objects you want to select.3. Click and hold the mouse button.4. Drag the mouse until the selection rectangle includes all the items or parts of items you want to choose.5. Release the mouse button.

You can also use the Shift key to select multiple areas.

NOTE

Remember that most shapes you draw are composed of several pieces: Each side of the polygon is a piece, as is the

Deleting Objects

Sometimes, you may find it necessary to delete an item, object, or shape.

1. Choose the Arrow tool from the Toolbox.2.

Click on the item you want to delete.

3. Press the Delete key on the keyboard.The Subselection Tool

The Subselection tool allows the manipulation of objects. It has two modes. The first mode has a small filled square

o the mouse pointer, and it is used for selecting and moving objects. The second mode, indicated by a small hollow

quare next to the mouse pointer, is used to manipulate the vertices of the selected object.


14/211

The Lasso Tool

The Lasso tool is used for the fine selection of pieces of a drawing.

Drawing Tools

A number of tools for creating art are in the Toolbox.

The Line tool The Pen tool


15/211

The Pencil tool The Brush tool

The Line Tool

Start by drawing a few lines on the Stage.

The Pen

The Pen is a complex tool. You can use it in several different ways, each of which creates different results. The first

of the Pen draws straight lines.


16/211

You can also play connect-the-dots. This technique allows you to draw a line from Point 1 to Point 2, another line frPoint 2 to Point 3, and another from Point 4 to Point 5 (as many as you want) before ending with a double-click.

For example, to draw the letterZ, you would do the following:

Drawing simple shapes with the pen is also possible.


17/211

Another way to draw with the Pen tool is to draw curves. This technique is a little tricky and takes a bit of practice.


18/211

The Oval Tool

Flash has a special tool in the Toolbox for drawing ovals and circles: the Oval tool. Before I show you how to draw nd circles, you probably should understand how Flash sees these shapes. An oval in Flash is composed of several c

defined by a bounding rectangle. These curves are drawn from the center of one side of the rectangle to the center ofdjacent side, hitting each side at a tangent. (It sounds more confusing than it really is.)

NOTE

n Flash, shapes are composed of two elements: an outline and a fill. The outline is the line around the outside of the

hape, and thefill is the inside part of the shape. You can choose separately the colors for solid outline and the fill.


19/211

Drawing an Oval

Follow these steps to draw an oval:

Creating a Circle

A circle is a special type of oval that has a square for its bounding rectangle.


20/211

The Rectangle Tool

Drawing rectangles is simplejust follow these steps:

The Pencil

The Pencil tool allows you to draw freehand whatever you want on the screen.


21/211

The Brush

The Brush tool allows for numerous effects, depending on what options you choose.


22/211

Brush mode determines what happens when you paint on the Stage with the Brush tool.

Paint Normal. Paints wherever you move the mouse while the button is held down. Paint Fill. Covers the fill part of objects, but leaves the outlines alone. Paint Behind. Paints behind objects on the Stage.

Paint Selection. Paints the selected object or objects. Paint Inside. Paints inside and only inside whatever object you start painting in.

The Text Tool

The task of adding text to a movie is simple. You can choose from three types of text: Static, Dynamic, and Input. Fhis section, we work with only Static text. Dynamic text and Input text are introduced in Chapter 12, "Simple

ActionScript."

Adding Static text to a movie is simple, but you have lots of options.

While you are typing text, you can set some options for individual characters.

Choose which font you want to use. Pick a font size by either typing a number in the box or selecting a size from the dropdown list. Use the color selector to choose a color. Select Bold or Italicized text by clicking on the appropriate button. Choose whether a line of text should be aligned to the left, center, or right of the text box, or even justified. Determine how much space appears between each character. Create subscripted or superscripted text.


23/211

Decide whether Flash should use a font's built-in kerning. Kerning is a built-in part of a font that determines much space a specific character will occupy when it is next to another specific character.

Select the Format button to set paragraph properties, including indent spacing, line spacing, and margins. Create a hyperlink by typing a URL (Uniform Resource Locator) into the URL Link box.

NOTE

USING UNDO

Occasionally, everyone makes mistakes. In Flash, you can usually fix those mistakes as you make them by choosing

Undo. This command undoes the last action you did. If you need to undo more than just one action, you can select E

Undo more than once. If you make lots of mistakes, you can use a keyboard shortcut, Ctrl+Z or +Z, rather than go

hrough the Edit menu.

Editing Tools

The Free Transform Tool

The Free Transform tool allows you to change any object you want. Not only can the characteristics of the object be

hanged in the Properties panel, but the Free Transform tool can also resize, rotate, skew, distort, and shape.

The different modes include:

Move. Move an object by clicking and dragging the object to the desired location. Resize. Change the size by clicking on and dragging a corner or the center of a side of the selected object. Rotate. Rotate objects by clicking and dragging near a corner, when the rotation icon (a partial circle with an

arrow) is visible. The object rotates around the center dot. You can move this dot by clicking and dragging it

Skew. You skew an object by clicking and dragging on a side between the markers on the bounding rectangl


24/211

The Transform Fill Tool

When an object has a gradient or a bitmap as its fill, the Transform Fill tool manipulates the fill.

Gradient Fills

Gradients are fills that start out as a solid color and end as another color, with shades of the two colors mixed in betw

You can use two types of gradients: linear and radial. Linear gradients change from the first color to the second colo

long a line, and radial gradients change from a point outward in a circle. This explanation is a little tricky, but seein

gradient helps.

To change an existing fill to a gradient, follow these steps:


25/211

Bitmap Fills

Bitmap fills use a bitmap graphics file instead of a solid color to fill in a shape. Bitmap fills require that a bitmap exi

nd that the location of the file be known. Bitmaps can be created in Paint, Microsoft's simple graphics creation tool

reated from a Flash movie using File, Export Movie and selecting Bitmap as the file type.

To change an existing fill to a bitmap fill, follow these steps:


26/211

The Ink Bottle Tool

The Ink Bottle tool can change the color of lines, outlines, and pen strokes.

The Paint Bucket Tool

Whereas the Ink Bottle tool is used to change strokes, or outlines, the Paint Bucket tool is used to change fills. The P

Bucket tool changes any fill, including gradients and bitmap fills, to the color you choose.


27/211

The Eyedropper Tool

The Eyedropper tool is used to select colors from those already used on the Stage. The Eyedropper is also somewhat

ntelligent, so if you pick a color that was used for fills, it automatically chooses the Paint Bucket tool and you can uhe selected color immediately. Using the Eyedropper is simple.

The Eraser Tool

Not surprisingly, the Eraser erases. You can set a few options to determine exactly what gets erased when you use th

raser.


28/211

When the Eraser is activated, you use it by clicking and dragging over items on the Stage. The different modes for

rasing are:

Erase Normal. Erase everything that the mouse pointer passes over. Erase Fills. Erase only fills. Erase Lines. Erase only lines. Erase Selected Fills. Erase only those fills that were previously selected with the Arrow tool. Erase Inside. Erase only items that are inside the object you first clicked in.

To erase entire objects, outlines, or fills, click on the Faucet icon. The mouse pointer becomes a faucet, and any item

lick is erased.

The View Tools

The Toolbox has two tools in a small section labeled View.

The Hand Tool


29/211

The Zoom Tool

The Zoom tool scales the Stage to the perspective you want so that you can concentrate on the big picture or on mindetails.

Color Tools

The color tools provide many selection options. You can pick from the default range of colors or create your own cu

olor.


30/211

Chapter 3. Flash Workflow

Understanding how the separate components of Flash movies fit together is important. This knowledge benefits you

organization and enhances your hands-on skills.


What is the Stage? What is the Timeline? How do you change the properties for a movie? How do you use the Movie Explorer? How do you use scenes?


31/211

The Stage

The Stage is the central part of the Flash workspace, where the bulk of the work in creating animations is done. Thinhe stage as your scratch pad. You will use it to create the components of your movie as well as to lay out the actual

movie itself.

The Stage has several tools built into it. The first tool to note is the Zoom tool, in the upper-right corner of the StageZoom tool allows you to change the view of the stage. If you are working on a large movie and only part of it fits on

creen at a time, this tool is invaluable. Options available from this dropdown menu include the following:


32/211

The Timeline

The Timeline Panel, usually located at the top of the Flash workspace, shows vital information about your movie. Itdisplays your frame-by-frame account of what is occurring in your movie.

Before I can discuss the timeline, though, you must understand how animations are created. Flash animations are a of pictures shown rapidly in order. Each picture is a frame, and several frames are displayed every second. I know th

his description is simplified, but Chapter 7, "Animation with Motion Tweening," includes a full explanation.

Here are a few things to note about the Timeline:

Several important pieces of information are listed below the Timeline:

Some buttons on the Timeline allow for editing the movie in a few special ways:


33/211


34/211

The area to the left of the Timeline contains controls for editing and displaying layers. When new layers are added tomovie, they go on top of the existing layer. Flash, when using the default settings, will read your movie from bottom

op. Layers are a topic for an entire chapter, but for now you can think of them as a way to organize the objects in a

movie.

The different buttons in the Timeline that deal with layers are:


35/211

know that some of these descriptions are a little obscure, but most of your questions are answered in Chapter 4,

Layers."

Movie Properties

Flash movies or animations have a number of properties. These properties apply to the entire movie or documentdepending on what is selected. When the Properties panel is visible and no objects are selected, the Properties panel

hows information about the entire movie or document. These properties include:


36/211

You can access document properties by clicking on the button that displays the movie size in the Properties panel or

hoosing Modify, Document.


37/211

The Movie Explorer

The Movie Explorer is a panel that shows the different parts of your movie in an organized fashion, including scenesobjects, sounds, and ActionScripts. That may not seem important now, but for big projects this feature is very helpfu

because you get an overview of the project.

To see the Movie Explorer, choose Movie Explorer from the Panels menu.

By default, the Movie Explorer shows only information about the current scene. To show the component parts for al

cenes, right-click on the Movie Explorer panel and choose Show All Scenes.

The Movie Explorer has several buttons across the top that filter out unwanted information. When a button is selecte

he information associated with it is shown. The types of objects that can be filtered out include:

The Frames and Layers option is probably one of the most useful because it shows what objects are where in the mo


38/211

A useful feature of the Movie Explorer is that when an object is selected in it, the path to that item is displayed in thebottom of the Explorer panel. The path contains the scene name, the layer name, the frame number, and the type of o

o that you can easily find objects.

Scenes

Movies in Flash, just like movies in Hollywood, are organized into scenes. Each scene usually has a coherent theme ontains one discrete part of a movie. For interactive movies, one scene often contains the response to one type of us

ction. For example, if a user clicks on one button, the movie plays a certain scene; if the user clicks on a different

button, a different scene plays. Part of the planning stage in the design of your movie should include scene organizat

When a new scene is added to a movie, it contains one layer and one frame.

To switch between scenes in a movie, use the Scene Selector in the Stage.

Scenes can also be manipulated in the Scene panel. To show the Scene panel, choose Window, Scene.


39/211

From the Scene panel, you can:

Add a scene. Delete a scene. Copy a scene. Rename a scene. Change the order of scenes in the movie.


40/211

To delete a scene:

Of course, if you would prefer a simpler solution, you can also delete a scene by doing the following:

1. Choose the scene you want to delete from the Scene Selector on the Stage.2. Choose Remove Scene from the Insert menu. A dialog box opens to confirm that you do want to delete the s3. Click on OK in the confirmation dialog box.

To make a copy of an existing scene, use the Duplicate Scene button on the Scene panel.

You can rename a scene by following these steps:


41/211

The Scene panel is important because the order in which the scenes are shown is the order in which they are played.

earrange the order of scenes in the movie:

1. Open the Scene panel.2.

Click and drag the movie you want to move to a new position in the list.

Chapter 4. Layers

Chapter 3 introduced the concept of layers as a way to organize the objects in your movie. As you may have guessed

rom that brief description, layers can be very helpful in production.


What is a layer? How do you work with layers? What are the properties of a layer? How can you organize layers?


42/211

What Is a Layer?

You can think of layers as transparent sheets, like transparencies for overhead projectors. These transparent sheets contain text and illustrations. A group of sheets can be stacked one on top of another so that you can see the contents

ach, but more importantly so you can see the composite of all the sheets.

Flash uses layers for organizing and separating different pieces of a movie. For example, you can have a backgroundone layer, foreground objects on another, a moving object on a third, and text on a fourth. This example shows each

ontaining objects that serve a different purpose, which is a good way to think about layers as you get started. Separa

your objects onto layers makes the editing process much easier. As you will learn in this chapter, you can hide layer

re not working on so you can see only the one you want to edit.

NOTE

When adding actions to your movie, it is a good idea to create a separate layer just for them. Keep all of the actions

ogether in one place.

How Do You Work with Layers?

Working with layers is integral to the Flash process. This list shows the basic tasks you can perform with a layer:

Add a layer. Change the layer's name. Add objects to a layer. Delete a layer. Hide a layer.

Lock a layer. View layer outlines.

Adding Layers

Because adding layers is such a regular task in Flash, it is quite easy to do.


43/211

A new layer appears in the list of layers. Optionally, you can select Layer from the Insert menu. As mentioned in Ch, new layers are added to the top of the list (or above the layer that is highlighted). You may need to scroll down on

you have several to see your initial layers.

NOTE

Each and every moving object in your movie should reside on its own layer. There is no limit to the number of layer

an add.

Changing a Layer's Name

Double-clicking on the name of a layer changes the name into an edit box, where you can type a new name and then

press Enter.

Consider naming layers according to their function or along a common theme.


44/211

Adding Objects to a Layer

After you have more than one layer in your movie, you need to decide what objects should be placed on what layer. dd an object to a specific layer:

Deleting Layers

As the project progresses you may discover a need to organize the movie differently. In this case, you may need to d

layer. To delete a layer:

A movie must have at least one layer, so if only one layer exists, this option is grayed out.


45/211

Hiding a Layer

When a movie contains more than one layer, the objects on all layers are visible on the Stage by default. This featuremakes it simple to position objects relative to one another, but the Stage can get cluttered. Flash has a mechanism fo

hiding individual layers so that the Stage is less cluttered. Hide layers that are not currently being worked on to creat

more space on the stage.

You can look at the Layer area of the Timeline as though it were a spreadsheet with rows. Think of each layer as a r

Think of the dots beneath the properties as columns.

Notice that a hidden layer has an X through both the dot that was clicked on to hide it and through the pencil icon. T

under the eye icon indicates that the layer is hidden. The X through the pencil icon indicates that the laye cannot be

dited.


46/211

Locking a Layer

When you have a movie with more than one layer in it, which is usually the case, you can inadvertently make changlayer you have finished. To avoid this situation, lock layers that are complete. A locked layer cannot be changed un

t is intentionally unlocked.

Viewing Layer Outlines

Things can quickly get cluttered with numerous layers on the Stage. In some situations, however, completely hiding

ayers doesn't work because you need to be able to see, for reference, where objects reside in the context of the stagedeal with situations like this one, you can instruct Flash to show only the outlines of the objects on a layer. The final

button in each layer row in the Timeline is a square. Clicking on this square toggles the layer between normal view a

outline view, allowing you to see the location of the object.


47/211

Layer Properties

Another way to work with layers is through the Layer Properties dialog box, which provides many options for

ustomization in one place. To open the Layer Properties dialog box, either select Layer from the Modify menu or ri

lick on a layer in the Timeline list and choose Properties. From this dialog box, you can change these elements:


48/211

Organizing Layers

As previously discussed in this chapter, the number of layers used in a Flash movie can start to add up. The simplest

o organize layers is to group together in a folder several layers that are similar or that have a common theme.


49/211

n addition to grouping layers together using folders, you can adjust the order of the layers in the Timeline. Do this blicking and dragging any layer name to a new location in the list. Sometimes, organizing layers together without fo

s sufficient.


50/211

Chapter 5. Symbols and Libraries

Symbols are reusable objects that can be used to quickly build animations and movies.


What is a symbol? What are the types of symbols? How can you create symbols? How can you edit symbols and instances? What is the library? How do you work with a shared library?

What Is a Symbol?

A symbol is a graphic object (in the simplest sense of the word, not in the programming sense) created for use in you

Flash movie. More specifically, a symbol in Flash is a graphic, button, or movie clip.

Consider the many Web sites you've recently browsed. These sites are composed, in part, of graphic objects. Someti

hese graphic objects are static, and at other times they have added behaviorsthey do something when you mouse

hem or click on them. A symbol can be any type of these objects.


51/211

Symbols greatly benefit your Flash development. You can create symbols from scratch directly in Flash. Flash also

llows existing graphics to be imported and converted to symbols.

After a symbol is created, it is stored in the Library. Imported graphics converted to symbols are also stored in the

Library. Flash has a feature that allows you to import graphics directly to the Library, as well.

You can reuse symbols as an instance in any location within your Flash movie. If you edit a symbol, the changes yo

make affect every instance of the symbol in your movie. You have to make the change in only one place. Also, you dit instances in their separate locations without affecting the original symbol. I will discuss instances of symbols an

ibraries later in this chapter.

File size and playback speed are always important considerations with Flash movies. Symbols reduce the size andncrease the playback speed of your movie. By using instances, the symbol you created is downloaded to the Flash p

only once. For these reasons and others you discover throughout this chapter, the use of symbols is essential to beco

n expert in Flash.

As I mentioned, Flash uses three basic types of symbols. Each type has different capabilities.

Graphics Buttons Movie clips

A few examples of objects that might be created as symbols include the following:

Company logos, frequently used in many locations Commonly used graphical buttons, such as menu navigation buttons Background animations that loop

Any object that will be used multiple times in a movie

Let's take a closer look at each type of symbol.

Graphics

Graphic symbols have no interactivity associated with them, regardless of the user's input. These types of sym

re static images and are appropriate for only that type of use. You may use any of the tools in the Toolbox or on the

menu to create graphics.

Buttons

When you think aboutpointing and clicking on something other than on a text link (a sentence saying "Click

here," for example), that object is usually a button. If you complete a form on the Web and click on the word Submire clicking on the Submit button. Buttons have states that respond to the actions of the mouse. A button can have a

different state (or look different) when you mouse over it, click on it, or release it. After you have created the look of


52/211

button's various states, you can then assign actions to them. For example, you can add an action that changes a butto

background color to add emphasis when it is moused over.

Movie Clips

Movie clips are mini movies. I recommend creating symbols as movie clips unless you are absolutely certain

ymbol will never be animated. Animation is mentioned in this chapter, but it is covered more comprehensively in

Chapters 6, 7, and 8.

Each movie clip contains its own Timeline, complete with layers and frames. The Timeline of a movie clip, nested w

he greater Timeline of the movie, plays when the layer containing the movie clip plays, independently of the main

movie. This feature assists you in creating more complex animation.

Here is an example. Suppose that you want to create a movie that involves the planets revolving around the sun. You

reate symbols for the planets and the sun. Next, you animate the planets to move around the sun. These steps are cr

n the main Timeline. Later, you consider the option of having the Earth rotate as it revolves around the sun. But howwould you make the Earth rotate separately from the other symbols in your movie? Because the Earth is a movie clip

with its own timeline, you simply add the rotation to the Earth's Timeline. Your completed Flash movie will show th

Earth rotating as it revolves around the sun. You will create this movie as you progress.

NOTE

New to Flash MX, movie clips now contain all the functionality of buttons, enabling you to add behaviors to the diff

tates, as you would with buttons.

Creating SymbolsAs you have probably noticed, Flash provides multiple methods for performing commands. As you continue, I will

out various options for performing these commands. There is no rightway to perform an action. It is truly a matter o

personal preference, so feel free to use the method most comfortable for you.

To create a new symbol in Flash, select Insert, New Symbol or press Ctrl+F8 ( +F8 on a Mac).


53/211

Naming Symbols

NOTE

A new feature in Flash MX is a coding assistance process used in ActionScript. Although you may think that usingActionScript is a little advanced, this book will provide you with a basic introduction. If you follow the Flash MX

naming convention, the code editor provides all your options for that particular object based on its name. That may s

bit confusing, so let me clarify:

Button names should end with _btn; for example, SubmitButton_btn.

Movie clips should end with _mc; for example, Earth_mc.

Text files, which come into use with ActionScript, should end with _txt; for example, MylistofNames_txt.


54/211

Based on the ending letters of the symbol's name (_btn, _mc, or _txt), ActionScript provides a list of availableprogramming options. Although you may or may not be using ActionScript right away, you should use these naming

onventions. Using them also assists you in identifying your symbols.

Click the Advanced tab to display this menu.

Creating Symbols

Now that you understand some of the important concepts behind symbols and why they should be named as such, le

reate them. You will create a movie clip and a button.

Creating a Movie Clip

Now create a movie clip to use in your first Flash movie. You are creating a movie clip so that animation can be addt. This movie clip will be the planet Earth.

Start by creating a new symbol.


55/211

Follow these steps to select the color of the symbol.

Now use the drawing tools found in the toolbox to draw the symbol.


56/211

Now give the Earth some dimension by using the gradient tools.


57/211

At this point, you've chosen a color for your symbol, edited that color, and added a radial gradient to it. With the fina

olor selection, you have drawn a circle.

Creating a Button

Buttons can add functionality to a Flash movie. They can be used for navigation, changing the screen as in a rollover

ubmitting information. Now create a simple button to use in your movie.

Start by adding a layer to the timeline for your button.

NOTE

Remember, layers are ordered from the bottom up, so new layers are always on top of the current layer you are work

on.


58/211

Next, create a new symbol.

Again, you are in symbol editing mode. The name of the button is in bold above the Stage. The Timeline is specific earnMore_btn, not to the Timeline of the main movie. Also, four frames represent the states of the button in the

Timeline.

Begin work on your button in the Up frame. This state determines your buttons appearance at rest (when it's not beinmoused over).

1. Select a fill color (any dark color will work).2. If you want, select a stroke color also.3. Click the Rectangle tool in the Toolbox.

Next, follow the steps below to draw the shape of your button.


59/211

1. Place your mouse pointer over the Stage.2. Click the mouse and drag it over the Stage. When the rectangle is the desired size, release the mouse button.3. Select the Text tool from the Toolbox.

Often, buttons directly state their function with text.

Your text should be in a color that shows up well on your rectangle and a size that fits within its borders. You may no edit your text settings.

Make sure the text is properly aligned within the rectangle.


60/211

The Over state determines how the button will look when moused "over." You want to create an easily discernible

difference so viewers know the button does something. Follow these steps to prepare the Over state frame and chang

background color.

Edit the button so that its behavior changes whenever you mouse over it. To change the background color, follow th

teps.


61/211

Now the color of your button changes when moused over.

Converting Existing Graphics to Symbols

There will likely be times when you want to use a piece of artwork already created outside of Flash. Flash allows yo

mport that artwork easily and give it the functionality of a symbol. Flash provides many methods for the conversion

process, allowing you to also convert graphics created in Flash to symbols, as well as groups of graphics on the stage

mporting Existing Graphics

As mentioned, you can import existing graphics into your movies and convert the graphics to symbols. When youonsider the role of Flash movies on the Web, however, large files do not make sense. Although the option of impor

ophisticated graphics may be useful, you should not overuse it. Whenever possible, you should create images direc

Flash because the file sizes are likely to be significantly smaller.

Complete the following steps to import a graphic:


62/211

Your graphic has now been imported to the library.

Converting Imported Graphicsto Symbols

Follow the steps below to convert imported graphics to symbols. It is very simple,

1. Click your graphic once to select it.2. Right-click it and select Convert to Symbol.

Converting Graphics on the Stageto Symbols

Flash MX also provides the option of converting existing images on the Stage to symbols. This feature can be helpfuyou miss the initial step of inserting a new symbol. This process is also useful if you want to group several items on

Stage into one symbol. In this section, you create paths for the solar system and convert them to one symbol.

First, prepare the Stage by hiding the layers not in use.

Next, choose the appropriate color selections.


63/211

Begin drawing the path by following the steps below.

After creating three separate graphics, combine them into one and convert it to a symbol.


64/211

The steps involved in converting a graphic to a symbol are similar to those you followed when creating a new symbo

Editing Symbols and Instances

As mentioned, symbols can be used in various places. When you drag a symbol from the Library and place it on theStage, you have created an instance of that symbol. Each separate use of the symbol is an instance. The use of instan

helps to reduce the file size of your movie. Flash downloads the entire symbol only once and uses smaller bits of

nformation for each instance.

Furthermore, after you edit a symbol, all instances of that symbol reflect the change, so you have to make changes o

once. You can edit instances of the symbol without affecting other instances or the original symbol. If you want to

ustomize the name of your instance, you need to do so in the Properties panel.

You can edit symbols in many ways. By selecting an instance of a symbol on the Stage and right-clicking it, you wilhree Edit menu items:

Edit Edit in Place Edit in New Window Edit. Displays an editing window in place of the Stage. You are in symbol-editing mode and can make chang

directly to the symbol in this window.


65/211

Edit in Place. Enables you to edit the symbol directly on the Stage among the other objects on the stage. Yohave visibility of the full Stage. Other items on the Stage are shaded until you return to the main scene and th

Timeline.


66/211

Edit in New Window. Creates a new editing window in addition to the Stage. You may need to shrink yourediting window slightly to view both displays at one time, but you can alternate between the main movie stag

and the stage of your symbol.

f you have more than one scene, the scenes are listed on the Edit Scene button's shortcut menu.

The Symbol icon displays all the symbols contained in the Library.


67/211

After you have edited your symbol, you need to return to the Stage. You can do this by following one of these metho

NOTE

Navigating between the main Timeline and symbol-editing mode can be confusing because the Timeline changes. B

ure that you know which timeline you are affecting before you make changes or additions.

To edit a symbol, click the Edit Symbol button and select earth_mc.

You are now looking at Earth in symbol editing mode.


68/211

Follow the steps below to make changes to Earth:

What Is a Library?

TheLibrary serves primarily to store all your symbols and let you check out instances of them. It can also store objehat are not symbols, such as sound or video. Essentially, the Library allows you to view all your assets at a glance.

Everything contained in your movie should also reside in the Library.


69/211

You can create folders in the Library to organize your work just as you would create folders on your computer.

Three folders are in the Library: Planets, Stars (a subfolder of Planets), and Buttons. Double-click on a folder to disp

ts contents.

Note the following parts of the library:

You may also copy or share library assets between movies to add an additional layer of reusability. You can do this

opening both libraries and dragging items from one library to the other.

Working with a Shared LibraryUsing a shared library enables you to use items from one library in several different movies, cutting down ondevelopment time and improving efficiency. You can share items from the Library in two ways: runtime and author-

haring.

f you have dabbled in Web page development, you know that you can assign relative or absolute URLs to links. A

elative link looks something like\servername\foldername\filename; an absolute link looks like

http://www.fast&easy.com. The same principle applies to runtime and author-time sharing.

Runtime Sharing

As you might recall, whenever you click Advanced on the Create New Symbol window, you see check boxes that alyou to import or export runtime sharing. In runtime sharing, the item has an absolute location and can be accessed

outside the local network. If you are working on a project with a remote team member in Alaska, for example, you c

till share libraries.


70/211

Author-time Sharing

Author-time sharing involves sharing an item across a local network. Author-time items can be shared in an officebuilding among an internal team, for example.

When you are sharing assets, note that Flash has a feature that resolves library conflicts. If a library item is being copo a Flash file that already has an item designated by that name, you can choose whether you want to replace the cur

tem with the new item.

Flash does provide the option of creating a permanent library for the images used in your movie. To make a perman

ibrary, place the Flash file in the Libraries folder in the Flash's application folder on your hard drive. You can get torea by double-clicking My Computer from the Desktop, double-clicking your C drive, followed by Program Files,

Macromedia, Flash MX, First Run, Libraries.

Part II: Animation

This section introduces the fundamental concept of animation. Background information and a historical perspective

provide you with a solid foundation. You will learn the difference between motion tweening and shape tweening as

s how and when to apply both. You will see that masking allows you to create interesting effects in your animation


71/211

Chapter 6. Animation Basics

To this point, I have discussed Flash movies and animations without truly explaining what they are.

This chapter remedies that situation by answering these questions:

What is an animation? What is a frame? How do you create simple frame-by-frame animations?

What Is an Animation?

The simplest definition of an animation is a series of pictures that are rapidly shown in sequence. All the cartoons anmovies you watch in a theater are thousands and thousands of pictures that are shown for a fraction of a second each

human eye can handle only so much input at a time, and it holds an afterimage for the fraction of a second that it takwitch from one picture to the next. When pictures are shown quickly enough, with small differences between them

movement is created. Using this concept, simple movies have been in existence since the late 1800s.

Animation was, before the advent of computers, a tedious process involving large numbers of cartoonists and artistspicture, or animation cell, was created, and then a second cell, almost identical to the first, was created. The differen

between the two cells were subtle. Another cell was drawn and then another and another. Because most animatedartoons and movies are shown at a rate of 12 to 45 pictures per second (if not faster), a single half-hour cartoon

ontained at least 21,600 separate pictures. The completed cells were transferred to film, the film was then placed in

projector, and the tireless efforts of the animation staff were finally shown on the screen.

Thankfully, computers and software have simplified this process a great deal. Flash MX helps with the creation of

movies in a number of ways. However, to fully appreciate the tools Flash contains, you should create a movie the "o

ashioned" way first


72/211

What Is a Frame?

You can think of a frame as an individual picture, or animation cell. In Flash, frames can be treated almost like theirworld counterparts. All the pieces of your movies reside in frames. Flash has two types of frames: keyframes and fra

Keyframes are special frames that Flash uses as markers in an animation. Keyframes can indicate changes in the

nimation, and they hold most of the items in an animation. Frames, which fill the areas between keyframes, are eithdentical to the keyframe that precedes them in the Timeline or are used by the built-in animation tools. Different fra

re represented in the Timeline by unique characteristics.

All frames represented in the Timeline have a number of properties.


73/211

How Do You Create Simple Frame-By-Frame Animations?

Simple animations, created frame by frame, are a great way to start. They can help familiarize you with the tools tha

Flash has, and also show the tedious nature of old-fashioned animation. This comparison allows you to appreciate so

of the tools in Flash much more than you would if I presented them first.

The Basic Steps


74/211

NOTE

When you choose Insert Keyframe, the contents of the last keyframe are automatically copied into the new keyframe

When you choose Insert Blank Keyframe, none of the contents of the preceding keyframe is copied.


75/211


76/211

NOTE

When you press the Enter key, Flash plays the movie from the selected frame to the end. If you are on the last frame

Flash plays the movie from the beginning. Pressing Enter again, while the movie is playing, stops the movie at the

urrent frame.

Create a Simple Movie with Motion Tweening

Creating a movie frame by frame with one layer is simple but time-consuming. However, a movie like the one you jreated is relatively boring. To create a movie with three different elements, you need the following:

A background Text that moves from right to left An object that moves from left to right

Create a Background

First, you need to create the background to provide some foundation to your movie.


77/211

NOTE

Save early; save often. Whenever you want to do something major to your movie, save it first. Use several different

names. This way, you can always go back to a workable movie, even if you make a major mistake. With the long fil

name support in most newer operating systems, you can create descriptive file names, like

MyMovie_JustFinishedBkgd.fla"

Add Moving Text

You are done with the background for a moment. I know that it has a duration of only one frame, but will I show yo

how to fix that problem in a bit. Now, you need to add the moving text.


78/211

NOTE

The simplest way to move an object is to select it with either the Arrow tool or the Subselection tool and then use th

rrow keys on the keyboard. Each keypress with the arrow keys moves the selected object in the desired direction a

bit. To move the object more than a little bit, hold the Shift key and press an arrow key.


79/211

NOTE

The farther an object moves between two frames, the faster it seems to move in the movie.

Use the Onion Skin Tool

Now you have completed two of three parts of your movie. Let's take a moment to use one of the other tools in theTimeline: the Onion Skin tool.

Add a Moving Object


80/211

Next, you will add more motion to your movie with the addition of a moving object. You will create objects that begone area of the stage and move to another. There are many ways objects can move or change. The different ways are

ddressed in Chapter 7, "Animation with Motion Tweening" and Chapter 8, "Animation with Shape Tweening."


81/211

NOTE

t may seem odd to delete all the frames that Flash added to the new layer for you. Unfortunately, in this case, deleti

he frames and replacing them with keyframes is simpler. By adding keyframes one by one, after moving the object


82/211

preceding keyframe, Flash does a bit of extra work for you, by copying the contents of the preceding keyframe. This

ction saves a great deal of work using copy and paste.

All this work has created a very rough movie. To preview it, follow these steps:

Troubleshooting

Now, if you followed all of the steps in this section it is likely that you have two problems:

The background is visible for only a short time at the beginning of the movie. Either the text or the moving object disappears before the end of the movie.

Thankfully, both these problems are easy to solve. In fact, they are the same problem. A number of frames exist in oayer, but not in the others. So, you need to fill in the rest of the frames for the layers that finish too quickly. To fix t

background first, follow these steps:


83/211

The background should remain visible during the entire movie.

NOTE

t is usually obvious that one layer finishes before another when you look at the Timeline. You can see pretty easily

ast frame used in each layer. However, sometimes you want one layer to finish before another, for example, if an ob


84/211

s supposed to move off the Stage and not be seen again in the movie. In this case, the last frame in the layer with th

moving object might finish well before the last frame of the movie.

Unless both the moving text and the moving object were completed on the same frame number, one of the other laye

till disappears before the end. If so, you can skip the steps below, otherwise, you need to do the following:

The movie should look a little more polished than before. To finish working on the movie, run through the following

hecklist and fix any problems that might exist.


85/211

Does the animation run smoothly? Does anything look bad? Do you see anything that does not belong? Are the colors too loud or too soft? Is everything you want seen on the Stage in the work area? Does the movie convey the ideas you want?


86/211

Chapter 7. Animation with Motion Tweening

So far, I have covered the different tools available in Flash and how to create a movie the hard way. Now, you will l

how to create a movie the easy way.


What is motion tweening? What can you do with tweening? Does tweening work with color? How do you use motion guides with tweening?

Motion Tweening

Motion tweening is a tool Flash gives you to easily create animations. Tweening is short for "in be tween." Basically

an create a keyframe with an object, create another keyframe on the same layer with the same object in a differentocation, and Flash will supply the frames in between the two keyframes. Rather than defining the look for objects p

rame, Motion tweening allows you to identify the keyframe of change and let Flash do the rest. Try it out.

The Basic Steps


87/211

Creating a Simple Movie with Motion Tweening

Using tweening is much simpler than drawing every single frame. To do something a little more complex, you can c

movie with three moving objects that start and stop at different times. Here's a list of what this movie will contain:


88/211

A background. The first object moves from off the left edge of the Stage to the lower-right corner. This process happens from

Frames 5 to 25.

The second object moves from off the right edge of the Stage to the lower-left corner. Frames 20 through 45contain this object.

The third object, some text, moves from off the bottom of the Stage to center itself on the Stage. Frames 15through 50 contain the moving text.

Create a Background

Begin by creating the background.

NOTE

Get into the habit of locking layers when you are finished with them, to prevent accidentally changing part of a layer

s complete.


89/211

Add Objects

The background is complete. Now add the first object in frames 5 to 25 by following these steps:


90/211

NOTE

When you use motion tweening, every moving item should be on its own layer. If you have more than one moving o

on a layer, Flash can get confused when you create the tween.

The second object moves from right to left from Frame 20 to Frame 45. The procedure is similar to what you have

lready done.


91/211

The moving text moves from the bottom to the top from Frames 15 to 50.


92/211

You should pat yourself on the back because, in just a few minutes, you have created a movie with several moving

objects.

Tweening Effects

By this time, you have probably noticed that the Properties panel has a few more items in it when you select a frame

s part of a tween, compared to a regular frame or keyframe. These new properties are:


93/211

Resizing an Object in a Motion Tween

Let's work with a few of these new properties. Start by resizing an object in a motion tween.


94/211


95/211

To skew an object as part of a tween, follow the preceding steps; in Step 8, however, use the Free Transform tool to

he object, not resize it. Or, you can do both.

NOTE

n this example, you created the tween and then changed the last frame. This technique works for moving, scaling,

otating, and skewing.

Rotating an Object with a Motion Tween

Rotating objects with a motion tween works similarly to the process of resizing objects just discussed.


96/211

So far, these tweens have been simple because you changed only one thing at a time. Let me introduce a new panel, Transform panel, and see what you can do with it and tweens.

The Transform panel is accessed by choosing Window, Transform or pressing Ctrl+T ( +T on the Mac). This paneontains eight items:


97/211

For practice, now apply the above steps to the earth symbols created in Chapter 5, adding rotation to the earth.


98/211

Transforming an Object with a Motion Tween

Now let's play with the Transform panel and tweens. You will create two objects. The first object expands and rotatnd the second one shrinks and gets skewed.


99/211


100/211

Tweening with Color

Colors are another option you can change in a motion tween. You can change a few different attributes with colors amotion tweens, including the following:

Brightness Tint Alpha Any or all of these options, via the Custom option

NOTE

One concept you should understand about changing colors in motion tweens is that the process is somewhat limited,ince motion tweens can deal with only symbols and instances. In fact, if you create a motion tween using objects th

not symbols, Flash creates a symbol in the library for you, and from that point you are editing only instances of that

ymbol.

The Basic Steps

You can change all these characteristics via the Properties panel. Start by changing the brightness of an object.


101/211

Using Color Tweening in a Simple Movie

Change the tint next. Rather than create a new movie, you can simply edit the one you just finished.


102/211

NOTE

Did you notice that when you change the tint, brightness reverts to its original settings? Changing more than one opt

possible only by using the Advanced setting, which I will cover shortly.


103/211

The alpha setting is not only fun to play with, but also useful. Think of the alpha setting as how strongly the object isvisible. For example, 100 percent alpha is completely there, while 0 percent alpha is completely invisible or transpar

By using alpha settings, you can make objects fade in and out, which can be great for pop-up menus, special effects,

ransitions.

Advanced Features

Now create a new movie in which an object fades in and then fades out. It fades in from Frames 1 through 15, stays

until Frame 30, and then disappears by Frame 45.


104/211

The other color tween you can work with is the Advanced tween. Using the advanced options, you can change both int and alpha settings. However, the advanced settings are a little bit tricky and require that you understand RGB co

Colors can be represented by three numbersone for each color: red, green, and blue. All colors, as far as computer

oncerned, can be created by mixing these three colors.

RGB values are a combination of three numbers, and each number is between 0 and 255. The first number represent

much red is in the color; the second, how much green; and the last, how much blue. Black is represented by (00,00,0

white is represented by (255,255,255), and gray is (128,128,128).

The Advanced Colors Tween settings, which assume that you know about RGB colors, allow you to change the colo

lpha settings by using a simple formula. For each setting (red, green, blue, and alpha), you can fill in two values: a

percentage of the original value to use and an amount to add to thator, more simply:

The new value = (the original value * percentage) + new number (0 255)

This formula should become a bit clearer after you see it in action. Let's try working with these advanced settings.


105/211

Although there are limits to what you can do with color tweening, it is still an important and useful tool in Flash.


106/211

Motion Guides

With motion guides, animation can get interesting. Objects in a tween do not necessarily need to move in a straight ls in all the previous examples of this chapter. Instead, you can create a path for the object to follow during the twee

This process is simple, as you will see.

NOTE

For the examples in this section, only one object is usedan arrow that points upso that you can see how orientat

an change in a few circumstances.

The Basic Steps

The following instructions introduce you to the concept of motion guides and how they work.


107/211

The Orient to Path option is a little difficult to explain. The best way to explain it is to show a frame from a moviewithout the option turned on and then show the same frame with the option enabled.


108/211

Applying What You've Learned

Now, you can pull together all the different motion tweens and create an animation in which one object moves alongmotion guide, changes colors, rotates, and fades out. For simplicity, you work with only one object, and it does

verything at once in a four-second movie.


109/211


110/211

Chapter 8. Animation with Shape Tweening

Thus far, this book has covered how to create animations by drawing every single frame and by using motion tweenHowever, sometimes these techniques do not work effectively to create complex animations. Shape tweening offers

nimation with a different look. Whereas motion tweening generally takes an object from one location to another an

llows for some changes to the shape (such as height, width, or x and y position), shape tweening allows an object tobecome something completely different. For example, a circle gradually morphing into a triangle illustrates the conc

of shape tweening.


What is shape tweening? How can you use text in shape tweens? How do shape tweens work with color and other properties? What are shape hints, and how do you use them?

What Is Shape Tweening?

Shape tweening is similar to motion tweening. In motion tweening, you create an object and tell Flash where to mov

object, and Flash handles the rest. With shape tweening, you create the object as you want it and then create a new

object, and you let Flash fill in the work in between the two. As previously mentioned, shape tweening, which involhanging one shape into another, can be as simple as a circle becoming a square or as complex as a row of boxes

becoming letters in a word. Basically, any shape or object can become another.

NOTE

Shape tweens are often referred to as morphs, so don't let the interchangeable terminology confuse you.


111/211

The Basic Steps

Let's begin with the simple task of having a square become a circle. You can do this in several ways, but the simpleshown in these steps.


112/211

NOTE

Flash MX provides feedback to indicate when problems occur with tweens. In the Timeline, an incomplete tween ap

s a dashed line. A complete tween appears as an elongated arrow between keyframes. You can have an incomplete

ween preceded and followed by complete tweens or vice versa. When problems do appear, look at both the first and

keyframes in the incomplete tween to try to discover the problem. In some instances, Flash also displays a warning io the right of the Ease drop-down list in the Properties panel. Clicking on this icon reveals a message that can be ve

helpful in troubleshooting.

NOTE

ust as with motion tweening, Flash behaves much better when each animated object is on its own layer. Otherwise,Flash may confuse the other objects on the layer as part of the shape that is being tweened. This situation can result i

odd behavior.

Working with Complex Shapes

Pay attention to one caveat in shape tweening: It works with only simple items. Complex shapes, objects, importedgraphics, and text must be simplified into pieces for shape tweening to work properly. To convert an object to its

omponent parts, select Modify, Break Apart or press the shortcut Ctrl+B (+B for the Mac). Here is an example of h

o use an imported graphic in a shape tween.


113/211

NOTE

When taking a graphic through theBreak Apartprocess, the desired result is for the graphic to be converted to a fill.Depending on the graphic, this can take a few tries. For example, when working with a complex graphic, I needed to

press Ctrl+B ( +B for the Mac) three times before the graphic became a fill. If you have forgotten how Flash deno

ill, draw a square and click on it once with the Arrow tool. The many dots covering the square indicate the fill. You

graphic should look like this after the Break Apart process.


114/211

n this example, you may notice that the fill changes at the last instant while the shape changes and moves gradually

s one of the limitations of using preformed graphics files in a shape tween.


115/211

Text Effects with Shape Tweening

Working with text in a shape tween is a little more complex than changing a square into a circle. The reason is that ymust break apart text twice. The first time separates the single text block into many blocks, one for each layer. The

econd time you break up text, each of the letters becomes a fill that looks just like the text character, but is, in fact, j

graphic.

The Basic Steps

n this simple example, five rectangles become the word Flash.


116/211

NOTE

have noticed a possible problem with Flash and shape tweens. Sometimes, when you fix an incomplete tween (as

ndicated by a dashed line in the Timeline) by adding the last piece needed, the dashed line does not become an arro

ell you that everything should work. When you think the shape tween is complete, click on a different frame in the

Timeline, and Flash should be forced to update the display. Or try playing the movie and see if all items display prop

Working with Complex Text

That simple example shows how to create a morph of shapes into letters. How about morphing one word into anothe

hen morphing the second word into a third? An example is the opening credits for your Flash movie, with a name li

Premier Press changing topresents, which then changes to Flash MX. Another example is part of a movie describin

your company, where, as the movie progresses, the captions or headings change with the topic of the movie. For

xample, the first part of the movie might be a background about the company with the heading Our Company Histo

he top. Then the text could morph into the words Our CompanyToday as the content changes and then change to W

WeAre Headedwhen the company's future is discussed.

NOTE

Morphs and shape tweens are often subtle, not abrupt, changes that blend into the rest of the movie. If the changes ar

brupt or complex, they can take attention away from the content or subject matter that the movie is trying to convey

Try creating a simple example:


117/211

NOTE

When you are creating shape tweens with text, the text can be in different fonts, colors, and sizes. Just change these

properties before you break the text apart. After you have selected Break Apart on the letters to change them into

graphics that Flash can use in the tween, you cannot change the font, and changing the size is difficult. For interestin

ffects, vary the location, size, colors, and fonts to see what sort of neat transitions you can create.

Working with Shape Hints

So far in this chapter, I have covered simple shape tweens and text tweens. However, sometimes things are too compor Flash's built-in tweening tools. In this simple example, you will create a rectangle that becomes an oval. Then yo

will identify and fix the problems that occur. In a new Flash file, follow these steps:


118/211

Notice that when you play the movie, the rectangle rotates as it becomes the oval. The tweening tool thinks that this hould happen, but it just doesn't look right. What can you do to stop the rotation?

The wonderful people at Macromedia anticipated problems like this one. They even added a feature that can mitigate

problems with shape tweens: You can add hints to keyframes to show that a specific point on the shape in the firstkeyframe will become a specific point in the last keyframe. For example, to stop the rotation of the rectangle into the

quare, you can place a hint in the middle of the topside of the rectangle in the first frame and place a hint at the top

of the oval in the last keyframe.

Continue working with the file you began work on, and follow these steps:


119/211

NOTE

Hints are a great tool. There are, however, a few important things to remember:

Hints apply to a single tween from one keyframe to the next. Hints can be placed only in keyframes. Red hints are not attached to a shape. Yellow hints are hints attached to a shape in the first keyframe of a tween. Green hints are attached to a point in the last frame of a tween. Hints are labeled with letters. The first hint added is a, the second is b, and so on. Hints are paired. Hint A in the first keyframe moves to Hint A in the last keyframe. In the next tween, Hint B

the first keyframe moves to Hint B in the last keyframe.

When watching the movie, you probably noticed that the point that was marked in the first keyframe moved to wher

hint in the last frame was. This move didn't s

macro media flash mx fast & easy web development

Documents