View
224
Download
1
Category
Preview:
Citation preview
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'
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
2/211
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
n this chapter, you will learn the answers to these questions:
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:
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
10/211
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
21/211
The Brush
The Brush tool allows for numerous effects, depending on what options you choose.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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:
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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:
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
n this chapter, you will learn the answers to these questions:
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?
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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:
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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:
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
33/211
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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:
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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:
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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:
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
n this chapter, you will learn the answers to these questions:
What is a layer? How do you work with layers? What are the properties of a layer? How can you organize layers?
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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:
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
50/211
Chapter 5. Symbols and Libraries
Symbols are reusable objects that can be used to quickly build animations and movies.
n this chapter, you will learn the answers to these questions:
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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).
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
56/211
Now give the Earth some dimension by using the gradient tools.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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:
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
75/211
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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."
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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:
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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?
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
n this chapter, you will learn the answers to these questions:
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
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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:
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
89/211
Add Objects
The background is complete. Now add the first object in frames 5 to 25 by following these steps:
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
91/211
The moving text moves from the bottom to the top from Frames 15 to 50.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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:
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
94/211
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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:
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
97/211
For practice, now apply the above steps to the earth symbols created in Chapter 5, adding rotation to the earth.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
99/211
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
105/211
Although there are limits to what you can do with color tweening, it is still an important and useful tool in Flash.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
109/211
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
n this chapter, you will learn the answers to these questions:
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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.
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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:
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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:
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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:
8/2/2019 Macro Media Flash MX Fast & Easy Web Development
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
Recommended