toc

Team LiB
Next Section

Macromedia Flash MX 2004 Fast & Easy Web Development
Macromedia Flash MX 2004 Fast & Easy Web Development
by Lisa A. Bucki ISBN:159200119x
Premier Press © 2004

This step-by-step text presents solution-oriented techniques for creating dynamic animations and graphics for the Web, and demonstrates the technologies of Macromedia Flash MX 2004, while presenting practical applications as well.

Table of Contents
 | Macromedia Flash MX―Fast&Easy Web Development
 | Introduction
 | Part I - The Basics of Flash MX
 | Chapter 1 | - | Getting Started with Flash MX
 | Chapter 2 | - | Understanding the Flash Workspace
 | Chapter 3 | - | Flash Workflow
 | Chapter 4 | - | Layers
 | Chapter 5 | - | Symbols and Libraries
 | Part II - Animation
 | Chapter 6 | - | Animation Basics
 | Chapter 7 | - | Animation with Motion Tweening
 | Chapter 8 | - | Animation with Shape Tweening
 | Chapter 9 | - | Masking
 | Part III - Sound
 | Chapter 10 | - | Sound
 | Part IV - Finishing Touches
 | Chapter 11 | - | Publishing in Flash
 | Chapter 12 | - | Simple ActionScript
 | Appendix A | - | Quick Reference Glossary
 | Appendix B | - | What's Next?
 | Index

Team LiB
Next Section


backcover

Team LiB

Back Cover

What better way for readers to learn the newest version of Flash than with the Fast & Easy series! Macromedia Flash MX 2004 Fast & Easy Web Development presents solution-oriented techniques for creating dynamic animations and graphics for the Web. Through illustrated step-by step instructions, this title demonstrates the technologies of Macromedia Flash MX 2004 while providing practical applications as well. Covering both the Windows and Mac versions, readers will learn important Flash skills such as using symbols and tweening, using vector-based content for faster downloads, and optimizing animations for the Web. Using a hands-on approach to yield fast results and downloadable sample files to practice techniques, this book is suitable for both beginners and current users aspiring to learn the newest features of Flash.

About the Author

Lisa A. Bucki has spent six years as a consultant, author, technical writer developer, and trainer. She has more than twelve years of experience with computer book publishing. She has developed over 100 computer book titles and has been an author, co-author, contributor to more then 35 books and multimedia titles, including Keynote Fast & Easy, Macromedia Flash MX 2004 Fast & Easy Web Development, Adobe Photoshop Digital Darkroom, Mac OS X Version 10.2 Jaguar Fast & Easy, and Managing Microsoft Project 98 (all from Premier Press).

Team LiB


Macromedia Flash MX―Fast&Easy Web Development

Michael Puleio and
Jennifer Turner Long

Copyright © 2002 by Premier Press, a division of Course Technology.

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system without written permission from Premier Press, except for the inclusion of brief quotations in a review.

The Premier Press logo and related trade dress are trademarks of Premier Press, Inc. and may not be used without written permission. All other trademarks are the property of their respective owners.

Publisher: Stacy L. Hiquet

Marketing Manager: Heather Buzzingham

Managing Editor: Sandy Doell

Acquisitions Editor: Kevin Harreld

Book Packager: Justak Literary Services

Editorial Assistants: Margaret Bauer Elizabeth Barrett

Technical Reviewer: Michelle Jones

Copyeditor: Rebecca Whitney

Interior Layout: Bill Hartman

Cover Design: Mike Tanamachi

Indexer: Sharon Hilgenberg

Proofreader: Lara SerVaas

Macromedia Flash MX is a registered trademark of Macromedia Corporation in the United States and other countries.

All other trademarks are the property of their respective owners.

Important:

Premier Press cannot provide software support. Please contact the appropriate software manufacturer's technical support line or Web site for assistance.

Premier Press and the author have attempted throughout this book to distinguish proprietary trademarks from descriptive terms by following the capitalization style used by the manufacturer.

Information contained in this book has been obtained by Premier Press from sources believed to be reliable. However, because of the possibility of human or mechanical error by our sources, Premier Press, or others, the Publisher does not guarantee the accuracy, adequacy, or completeness of any information and is not responsible for any errors or omissions or the results obtained from use of such information. Readers should be particularly aware of the fact that the Internet is an ever-changing entity. Some facts may have changed since this book went to press.

ISBN: 1-592001-19-x

ISBN: 1-931841-59-4

Library of Congress Catalog Card Number: 2002104490

Printed in the United States of America

02 03 04 05 BA 10 9 8 7 6 5 4 3 2 1

Premier Press, a division of Course Technology
2645 Erie Avenue, Suite 41
Cincinnati, Ohio 45208

About the Authors

Michael Puleio started programming in BASIC on a Commodore 64 at the age of nine. Since then, fascinated by the power and capabilities of computers, he has used a number of programming languages and other tools to create software, including Pascal, FORTRAN, Visual Basic, C/C++, Java. C#, Active Server Pages, and Macromedia Flash. In addition, he has been a systems administrator and developed Web sites for small companies and large universities. He also worked as a software engineer on projects ranging from airline reservations to geophysics tools. In his spare time, he enjoys playing computer games, reading, and spending time with his wife.

Jennifer Turner Long is a Web developer for an IT services company that supports organizations in the senior health care industry. She has worked in a variety of roles, including project management and network administration, in addition to Web development. Outside of programming languages, she enjoys working with a number of tools including Macromedia's Flash MX and Fireworks, as well as Adobe's Photoshop and Premiere, to create cool graphics and multimedia. She lives in Pennsylvania with her husband and her maroon-bellied conure. In her spare time she enjoys gardening, dancing, and reading.


Introduction

Macromedia Flash MX Fast & Easy Web Development from Prima Tech is designed to help new and intermediate users become familiar with basic and intermediate features of Flash MX. Using a simple step-by-step, visual approach, this book introduces the tools and features of Flash MX. It shows how they are used, and provides examples along the way. 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 amazing animated movie and compress it into a size small enough for use on the Internet. Compared to video streaming, Flash is a much more efficient and effective way to package material. Also, Flash movies are easily played on almost all computers. Many computers come packed with the Flash plug-in, and it is an easy download for those machines that do 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 work 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 in Web development for a while. Contrary to popular notions, you don't have to be an artist to create elegant, image-driven Web pages. If you are familiar with Windows or Macintosh computers and want to add excitement to Web pages, this book is for you.

The illustrations in this book focus on the Windows version of Flash MX, but the Macintosh version looks more or less identical. 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 in the 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 in 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 and how it works. It teaches you how to use Flash's compression tools to yield the smallest sound file with the highest quality sound possible.

Finishing Touches

This section helps you put what you've learned together and introduces you to advanced concepts. It introduces HTML and shows how Flash works in HTML. You will learn how to publish a basic Web page and how to embed your Flash movie in it. ActionScript is introduced in this chapter, and you'll learn the building blocks of this scripting language with 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.

Tip

Tips offer hints, explain more about a special feature, and tell you how to use a shortcut to boost your productivity to make work fun.
Note

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

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


Part I: The Basics of Flash MX

Chapter List

Chapter 1: Getting Started with Flash MX
Chapter 2: Understanding the Flash Workspace
Chapter 3: Flash Workflow
Chapter 4: Layers
Chapter 5: Symbols and Libraries

Part Overview

This section starts with the fundamentals of Flash and prepares you to put components together into production. You will gain background information on Flash and its current role on the Internet. All the contents of the toolbox are thoroughly explained with examples demonstrating how to use each one. Finally, you will learn about the Flash workspace and create your first movie.


Chapter 1: Getting Started with Flash MX

Overview

In 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 expressing yourself. Early Web sites were composed of static text pages containing basic text links. These pages were very simple and—to today's Web-savvy eye—probably pretty boring. At this early stage, the Web was about conveying information. Web sites now differ greatly, providing a sensory overload at times, from pop-up advertisements to complex graphics to motion on many pages.

With the advent of the commercial Internet, Web developers looked for ways to make sites more interesting in an effort to 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 content soon followed, enabling video and audio to be placed on the Web.


What Flash Can Do

Macromedia has created a tool to assist Web developers with creating interactive, dynamic, eye-grabbing sites. Using Flash, developers can animate graphics, add sound, and create movies, just to name a few possibilities. From the simplest image movement to a complex movie clip, Flash can help you create the look you want. Flash also contains a powerful, native scripting language, named ActionScript, as discussed in Chapter 12. ActionScript can assist you with anything from 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 symbols and 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 Web sites that interact with visitors and include a multimedia experience. Flash MX (also known as Flash 6) builds on the previous generation of tools by adding new features and improving existing features. These features include the following 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 operating 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 sites, greeting cards, and video games.

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

Macromedia Flash is a standard platform for Web designers and Web developers because of the flexibility and power of the 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're probably thinking, "Why do I need to know some process?" The answer is simple: Creating a Web site can quickly go from being a simple project to a horrible disaster if you don't have a plan.

Let's look at an example. Bob is a Web developer for a small but growing company. His boss tells him that the company Web site needs to be redesigned so that it looks better. Bob likes a challenge, so he dives in. A few weeks later, he emerges from his office after publishing the new site. His boss looks at it, and Bob now has a to-do list as long as his arm of changes to be made to the site. Bob makes the changes, publishes the updated site, and tells his boss. The boss is happy, so Bob tells him to check out the site. This process results in another list of changes Bob needs to make. Of course, while Bob is working on this new list, people start talking about the site, and he ends up with instructions from several different high-level executives telling him how the site should work. Unfortunately, two of his instructions, from different vice presidents, are "Get rid of the graphics on the site" and "We need more graphics on the site." Bob is now in a no-win situation, but he works long hours and begins to burn out trying to keep everyone happy. In the end, he is fired not because he was a bad developer, but rather because his requirements were not identified at the beginning. Bob didn't need to have his project spiral out of control. A number of processes are out there, and several books describe them. For simplicity, 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 the same 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 that lists a company name, address, and phone number, or it can be as complex as an e-commerce system for selling 10,000 products in 12 countries. Of course, you need to gather these requirements from the decision-makers who have a stake in the project—the CEO of a company or maybe just you, depending on the site. From this list, make sure that you know the answer to the following questions.

  • Who is your intended audience? Audience identification is crucial during the initial stages of a project. For example, a site designed for an association representing senior citizens looks very different from a site designed to sell products to teens.

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

  • What are the decision-makers' expectations in terms of general look and feel? Are they comfortable with blinking 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 sketches, prototypes, and storyboards. Each situation is different, and each designer is different. Find what works best for you. The important part of the design phase is figuring out how to accomplish each requirement. For most Web site design projects, the design usually ends with a storyboard that shows not only the different pages in the site but also the connections and links between pages. The design also shows the interface to any back-end databases, accounting systems, or what-have-you. This is your opportunity to put those creative juices to work and illustrate how the entire site flows.

Click To expand

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 build the site. This subject is what most of this book covers: the mechanics of building graphics, buttons, movie clips—whatever you want—in Flash. Often, you'll discover that you missed an important piece of the design of the project and must revise it before the project can be fully developed. Don't worry: This situation is normal. The design of a big project is usually a living, breathing, changing document.

Review

In the review stage, you compare the site that was developed with the design and its requirements. Test, and then test again. Create as many different environment variables as possible (for example, different browsers, different monitor resolutions, 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 are caught. Update the design as needed and fix any problems (usually called bugs) that appear in the development process. When everyone is satisfied that all the requirements are met, publish the site and congratulate yourself on a job well done.

This design process is a simple, but powerful, tool. Now that you have some background information and organizational tools, take a look at Flash MX.


Chapter 2: Understanding the Flash Workspace

Highlights

The first time I saw the Flash workspace, I was almost over-whelmed by all the different windows, panels, and toolbars on the screen. I didn't know where to start, so I stopped and looked at the screen in sections. Let's do that now, starting with a broad overview and then dealing with specific tools.

In 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:

Click To expand
Click To expand


Moving, Hiding, Closing, and Opening Panels

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

  1. Move the mouse pointer over the dotted design to the left of the panel's name.

  2. Click and hold the mouse button.

    Click To expand

  3. Move the panel while holding down the mouse button.

  4. Release the mouse button when the panel is where you want it.

To dock a panel again, follow these steps, but in Step 3 move the panel toward the edge of the workspace. A darkened border appears, showing where the panel will reside after you release the button.

Click To expand

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.

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

Note

In the screen shots for this book, all the panels are hidden unless they are necessary to show an idea.
CREATING A NEW MOVIE

When Flash runs, it automatically creates a new movie for you. Sometimes, you have to create a new movie yourself, by either choosing New from the File menu or pressing Ctrl+N or z+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 the 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 in one of two modes. The simple way to choose objects is to click on them.

  1. Select the Arrow tool from the Toolbox.

    Click To expand

  2. Click on an object.

You can optionally hold down the Shift key and select multiple objects or press Ctrl+A (z+A for the Mac) to select all 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 fill.

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 next to the mouse pointer, and it is used for selecting and moving objects. The second mode, indicated by a small hollow square next to the mouse pointer, is used to manipulate the vertices of the selected object.

  1. Choose the Subselection tool from the Toolbox.

    Click To expand

  2. Mouse over the outline of your object. See the filled square by the mouse pointer.

  3. Click on the outline of your object and notice the vertices that display as points.

  4. Mouse over the vertices and notice the hollow square by the mouse pointer. The hollow square means these points can be dragged to manipulate your figure.

  5. Click and drag a point to change the look of your object.

The Lasso Tool

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

  1. Select the Lasso tool from the Toolbox.

    Click To expand

  2. Click and hold the mouse button while you draw a circle around which-ever object you want to select.

  3. Release the mouse button.

Drawing Tools

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

  • The Line tool

  • The Pen tool

  • The Pencil tool

  • The Brush tool

The Line Tool

Start by drawing a few lines on the Stage.

  1. Select the Line tool from the Toolbox.

    Click To expand

  2. Select from either the Color Mixer's Stroke color tool or the Properties panel Stroke color tool to choose the color you want for the line.

  3. Choose the thickness of the line you want to draw from the Stroke Height tool in the Properties panel.

  4. Choose the type of line you want to draw from the Properties panel.

  5. On the Stage, place the mouse pointer where you want the line to start.

    Click To expand

  6. Click and hold the mouse button, move the mouse pointer to where you want the line to end, and release the mouse button. A line should now be on the Stage.

  7. Repeat Steps 2–6 to draw a few more 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 use of the Pen draws straight lines.

  1. Select the Pen tool from the Toolbox.

    Click To expand

  2. Choose the characteristics for the line in the Properties panel.

  3. Click on the Stage where you want the line to start.

  4. Move the mouse and double-click where you want the line to end.

You can also play connect-the-dots. This technique allows you to draw a line from Point 1 to Point 2, another line from Point 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 letter Z, you would do the following:

  1. Select the Pen tool from the Toolbox.

  2. Choose the characteristics for the line in the Properties panel.

    Click To expand

  3. Click on where you want to start one of the lines.

  4. Move the mouse pointer to the end of the first horizontal line and click.

  5. Move the mouse pointer to the end of the diagonal line and click.

  6. Move the mouse pointer to the end of the second horizontal line and double-click to finish.

Drawing simple shapes with the pen is also possible.

  1. Select the Pen tool from the Toolbox.

    Click To expand

  2. Choose the characteristics for the line in the Properties panel.

  3. Select a color for the inside of the shape from the Fill Color tool in the Properties panel.

  4. Click on the Stage where you want the first corner to be placed.

  5. Position the mouse pointer to the second corner's location and click.

    Click To expand

  6. Position the mouse pointer to the third corner's location and click.

  7. Position the mouse pointer back to the first point and click one last time. You now have a filled triangle.

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

  1. Select the Pen tool from the Toolbox.

  2. Choose the characteristics for the line in the Properties panel.

    Click To expand

  3. Click on the Stage where the curve should start.

  4. Move the mouse pointer to where the curve will end.

  5. Click and hold the mouse button and move the mouse pointer a bit. This step should create a curve between the two points you clicked and a line centered on the second point. This new line is a tangent to the endpoint of the curve. The length of the new line corresponds to how steep the curve will be. Moving the mouse pointer changes these two properties.

  6. Move the mouse pointer until the curve looks correct.

  7. Release the mouse button.

    Click To expand

  8. Click on the endpoint.

Of course, you can combine all the methods in this section and create all sorts of interesting designs.

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 ovals and circles, you probably should understand how Flash sees these shapes. An oval in Flash is composed of several curves defined by a bounding rectangle. These curves are drawn from the center of one side of the rectangle to the center of the adjacent side, hitting each side at a tangent. (It sounds more confusing than it really is.)

Note

In Flash, shapes are composed of two elements: an outline and a fill. The outline is the line around the outside of the shape, and the fill is the inside part of the shape. You can choose separately the colors for solid outline and the fill.

Drawing an Oval

Follow these steps to draw an oval:

  1. Select the Oval tool from the Toolbox.

  2. Choose a color to fill the oval with.

  3. Select the weight, style, and color you want for the outline.

    Click To expand

  4. On the Stage, place the mouse pointer where you want the upper-left corner of the defining rectangle for the oval to be placed.

  5. Click and hold the mouse button and drag the mouse until it reaches the lower-right corner of the defining rectangle.

  6. Release the mouse button.

Creating a Circle

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

  1. Select the Oval tool from the Toolbox.

  2. Set the properties for the outline.

    Click To expand

  3. Choose a fill color.

  4. Move the pointer to where you want the upper-left corner of the bounding square to be placed.

  5. Press and hold the Shift key.

    Click To expand

  6. Click and hold the mouse button, drag the mouse to the lower-right corner of the imaginary bounding square, and release the mouse button.

  7. Release the Shift key.

The Rectangle Tool

Drawing rectangles is simple—just follow these steps:

  1. Select the Rectangle tool from the Toolbox.

  2. Choose the characteristics of the rectangle in the Properties panel.

    Click To expand

  3. If you want the rectangle to have rounded corners, click on the Round Rectangle Radius button in the Options section of the Toolbox. This option replaces with an arch the sharp 90-degree angle between two sides of the rectangle. Type a number to indicate the radius the arch should have and then choose OK. A larger number indicates a more rounded corner, and a value of 0 does not round the corners.

  4. On the Stage, place the mouse pointer where you want the top-left corner to be located. Click the mouse button and drag the mouse to where you want the opposite corner to be located. Release the mouse button. Optionally, you can hold down the Shift key while drawing the rectangle to create a square.

The Pencil

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

  1. Select the Pencil tool from the Toolbox.

  2. Choose characteristics (like color, size, and line type) for the pencil from the Properties panel.

    Click To expand

  3. Decide which drawing mode you want Flash to use from the Options tool in the Toolbox. The Pencil tool has three possible modes:

    • Straighten. Evaluates what you draw and straightens all the lines and shapes.

    • Smooth. Softens the lines.

    • Ink. Leaves the lines as you draw them.

  4. On the Stage, click and drag the mouse from where you want a line to begin to where you want it to end, and then release the mouse button.

The Brush

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

  1. Select the Brush tool from the Toolbox.

  2. Pick a color to paint with from the Properties panel or the Colors area of the Toolbox.

    Click To expand

  3. Select a brush mode (see the following description).

  4. Choose a brush size.

  5. Decide what brush shape you want to paint with.

  6. On the Stage, click and drag the mouse, move the mouse over the areas you want affected, and release the mouse button.

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. For this 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.

  1. Select the Text tool from the Toolbox.

  2. Set the characteristics for the text in the Properties panel. All the properties are described in the bulleted list following these instructions.

    Click To expand

    1. Click on the Stage where you want the text to start.

    or

    2. Click on and drag on the Stage a rectangle that will contain the text.

  4. Type the text.

  5. When you're finished, click on the Stage outside the text box.

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.

  • Decide whether Flash should use a font's built-in kerning. Kerning is a built-in part of a font that determines how 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.

USING UNDO

Occasionally, everyone makes mistakes. In Flash, you can usually fix those mistakes as you make them by choosing Edit, Undo. This command undoes the last action you did. If you need to undo more than just one action, you can select Edit, Undo more than once. If you make lots of mistakes, you can use a keyboard shortcut, Ctrl+Z or z+Z, rather than go through 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 changed in the Properties panel, but the Free Transform tool can also resize, rotate, skew, distort, and shape.

Click To expand

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 rectangle.

The Transform Fill Tool

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

  1. Select the Transform Fill tool from the Toolbox.

  2. Click on the fill you want to edit. If you click and a selection rectangle does not appear, the fill you are trying to change is neither a bitmap nor a gradient.

    Click To expand

  3. Use the handles around the selection rectangle to rotate or resize the fill by clicking and dragging them. You can also skew the bitmap 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 between. You can use two types of gradients: linear and radial. Linear gradients change from the first color to the second color along a line, and radial gradients change from a point outward in a circle. This explanation is a little tricky, but seeing a gradient helps.

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

  1. Choose the Arrow tool from the Toolbox.

    Click To expand

  2. Select the fill you want to change by clicking on it.

  3. Open the Color Mixer panel, if it is not visible, by choosing Window, Color Mixer.

    Click To expand

  4. Select the type of fill, either Linear or Radial, from the dropdown list in the Color Mixer panel.

  5. Click on the leftmost marker along the Gradient Definition bar.

  6. Choose a color for the left side of a linear gradient or the center of a radial gradient from the Color selection area.

  7. Choose an intensity level for this color from the Brightness Control bar.

  8. Click on the rightmost marker on the Gradient Definition bar.

  9. Repeat Steps 6–8 for the second color.

  10. Move the Gradient Definition bar markers until the gradient looks right by clicking and dragging them. The distance between the left edge of the bar and the first marker indicates the proportion of the fill to be solid with the first color. The distance between the two markers indicates the proportion of the fill to be shaded with both colors. The distance between the second marker and the right edge indicates the proportion of the fill to be solid with the second color.

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 exist and that the location of the file be known. Bitmaps can be created in Paint, Microsoft's simple graphics creation tool, or created 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:

  1. Create the bitmap and save it using whatever tools you want to use.

    Click To expand

  2. Choose the Arrow tool from the Toolbox.

  3. Select the fill you want to change by clicking on it.

  4. Open the Color Mixer panel, if it is not visible, by choosing Window, Color Mixer.

  5. From the selection box, choose Bitmap. A window labeled Import to Library should appear.

  6. Choose the file you want to use. Click on Open. This step closes the Import to Library window and replaces the selected fill with the bitmap you selected.

The Ink Bottle Tool

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

  1. Select the Ink Bottle from the Toolbox.

    Click To expand

  2. Use the Stroke Color tool in the Options area of the Toolbox to choose a color.

  3. Click on any object to change the outline color.

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 Paint Bucket tool changes any fill, including gradients and bitmap fills, to the color you choose.

  1. Click on the Paint Bucket tool in the Toolbox.

  2. Choose the color from the Fill Color tool in the Options section of the Toolbox.

    Click To expand

  3. Click on the fill you want to change. The fill color changes to the selected color.

The Eyedropper Tool

The Eyedropper tool is used to select colors from those already used on the Stage. The Eyedropper is also somewhat intelligent, so if you pick a color that was used for fills, it automatically chooses the Paint Bucket tool and you can use the selected color immediately. Using the Eyedropper is simple.

  1. Select the Eyedropper from the Toolbox.

  2. Click on an example of the color you want to use. The Eyedropper determines from the location of the color you picked whether the Paint Bucket tool or the Ink Bottle tool is appropriate.

    Click To expand

  3. Use the new color by using the automatically selected tool.

The Eraser Tool

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

  1. Click on the Eraser in the Toolbox.

  2. Choose a mode for the Eraser from the dropdown list.

    Click To expand

  3. Select the Eraser's shape from the dropdown list in the Options section of the Toolbox.

  4. Click and drag over anything you want to erase.

When the Eraser is activated, you use it by clicking and dragging over items on the Stage. The different modes for erasing 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 you click is erased.

The View Tools

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

The Hand Tool

Click To expand

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 minute details.

  1. Select the Zoom tool from the Toolbox.

  2. Decide whether you want to zoom in or zoom out by clicking the appropriate button in the Options area of the Toolbox.

    Click To expand

  3. Click on the Stage.

Color Tools

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

Click To expand
Click To expand


Chapter 3: Flash Workflow

Overview

Understanding how the separate components of Flash movies fit together is important. This knowledge benefits your organization and enhances your hands-on skills.

In 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?


The Stage

The Stage is the central part of the Flash workspace, where the bulk of the work in creating animations is done. Think of the 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 Stage. The Zoom 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 the screen at a time, this tool is invaluable. Options available from this dropdown menu include the following:

  • Preset zoom percentages, where 100 percent is full size.

Click To expand
Click To expand


The Timeline

The Timeline Panel, usually located at the top of the Flash workspace, shows vital information about your movie. It displays 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 series of pictures shown rapidly in order. Each picture is a frame, and several frames are displayed every second. I know that this description is simplified, but Chapter 7, "Animation with Motion Tweening," includes a full explanation.

Here are a few things to note about the Timeline:

  • The right area of the timeline shows the frames that compose the movie in order from left to right.

Click To expand

Several important pieces of information are listed below the Timeline:

Click To expand

  • Current Frame. The frame number of the selected frame.

  • Frame Rate. The rate at which the frames are displayed in the movie, in frames per second (fps). The default setting is 12 fps.

  • Elapsed Time. The time from the beginning of the movie to the selected frame.

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

Click To expand

  • Center Frame. When you are working with a long movie, with a large number of frames, the Timeline may show only a portion of them. This button centers the Timeline on the selected frame.

Click To expand

  • Onion Skin. This button shows several frames of the movie superimposed on one another so that you can see the movement of an animation. Markers appear on the Timeline and bracket the frames to which the onion skinning applies.

  • Onion Skin Outlines. This button shows the outlines of the moving objects in a group of frames, all superimposed on the Stage.

Click To expand

  • Edit Multiple Frames. This button allows more than one frame to be edited at one time.

  • Edit Onion Skin Markers. The last button in this group allows several different options to be set. These options include:

    • Always Show Markers. This option shows the markers that bracket the frames shown in Onion Skin mode, whether or not the mode is turned on.

    • Anchor Onion. The onion skin markers usually move in relation to the selected frame or frames. This option sets the markers and keeps them from moving.

    • Onion 2. Two frames on either side of the selected frame are shown in Onion Skin mode.

    • Onion 5. Five frames on either side of the selected frame are shown in Onion Skin mode.

    • Onion All. Every frame in the animation is shown when Onion Skinning is turned on.

The area to the left of the Timeline contains controls for editing and displaying layers. When new layers are added to the movie, they go on top of the existing layer. Flash, when using the default settings, will read your movie from bottom to top. 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:

Click To expand

  • Insert Layer. This button adds a new layer to the movie.

  • Add Motion Guide. This button adds a new motion guide layer to the movie.

  • Insert Layer Folder. Layers can be grouped together with folders. This button adds a folder in which layers can be placed.

  • Show All Layers As Outlines. Sometimes, a scene can get cluttered with too many objects that blend together, and viewing the outlines of the objects is useful. This button switches between regular and outline views of all objects on all layers.

  • Lock/Unlock All Layers. This button locks or unlocks all the layers in a scene so that they cannot be changed.

  • Show/Hide All Layers. Layers are visible by default, but this button toggles the visibility of all layers. Keep in mind that layers that are not visible cannot be changed.

I 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 document depending on what is selected. When the Properties panel is visible and no objects are selected, the Properties panel shows information about the entire movie or document. These properties include:

Click To expand

You can access document properties by clicking on the button that displays the movie size in the Properties panel or by choosing Modify, Document.

Click To expand

  • Movie Dimensions. Both the height and width of the movie can be changed. You can manually set new dimensions by typing the sizes into the edit boxes. Or, you can select one of the programmed sizes noted by the buttons described in this list. However you set the dimensions, they must be greater than 1 by 1 pixel and smaller than 2880 pixels by 2880 pixels. The available buttons are:

    Click To expand

    • Printer. Clicking on this button sets the size of the movie to the maximum size that will fit on a printed page. This option uses in its calculations the options set in the Page Setup dialog box from the File menu.

    • Contents. Clicking on the Contents button fits the entire contents of the Stage into the movie.

    • Default. The default size is 550 pixels wide by 400 pixels tall, which fills most of the screen on low-resolution monitors, which usually run at 640×480 pixels.

Click To expand


The Movie Explorer

The Movie Explorer is a panel that shows the different parts of your movie in an organized fashion, including scenes, objects, sounds, and ActionScripts. That may not seem important now, but for big projects this feature is very helpful 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 all scenes, 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 selected, the information associated with it is shown. The types of objects that can be filtered out include:

Click To expand

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

Click To expand
Click To expand

A useful feature of the Movie Explorer is that when an object is selected in it, the path to that item is displayed in the bottom of the Explorer panel. The path contains the scene name, the layer name, the frame number, and the type of object so 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 or contains one discrete part of a movie. For interactive movies, one scene often contains the response to one type of user action. 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 organization.

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.

Click To expand

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.

Click To expand

To delete a scene:

Click To expand

  1. Display the Scene panel by choosing Window, Scene.

  2. Click on the name of the scene in the Scene panel.

  3. Click on the Delete Scene button in the Scene panel.

  4. Click on OK in the dialog box that asks you to confirm the deletion of the 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 scene.

  3. 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:

Click To expand

  1. In the Scene panel, double-click on the name of the scene you want to rename.

  2. Type a new name

  3. Press Enter.

Click To expand

The Scene panel is important because the order in which the scenes are shown is the order in which they are played. To rearrange 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

Overview

Chapter 3 introduced the concept of layers as a way to organize the objects in your movie. As you may have guessed from that brief description, layers can be very helpful in production.

In 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?


What Is a Layer?

You can think of layers as transparent sheets, like transparencies for overhead projectors. These transparent sheets can contain text and illustrations. A group of sheets can be stacked one on top of another so that you can see the contents of each, 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 background on one layer, foreground objects on another, a moving object on a third, and text on a fourth. This example shows each layer containing objects that serve a different purpose, which is a good way to think about layers as you get started. Separating your objects onto layers makes the editing process much easier. As you will learn in this chapter, you can hide layers you are not working on so you can see only the one you want to edit.

Tip

When adding actions to your movie, it is a good idea to create a separate layer just for them. Keep all of the actions together 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.

Click To expand

A new layer appears in the list of layers. Optionally, you can select Layer from the Insert menu. As mentioned in Chapter 3, new layers are added to the top of the list (or above the layer that is highlighted). You may need to scroll down once 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 layers you can add.

Changing a Layer's Name

Click To expand

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.

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. To add an object to a specific layer:

  1. Ensure that more than one layer is in your movie and add a layer if necessary.

  2. Click the layer on which you want to add the object. The selected layer should be highlighted, and a pencil icon should appear to the right of the layer's name.

    Click To expand

  3. Add the object to the layer by drawing on the Stage.

Deleting Layers

As the project progresses you may discover a need to organize the movie differently. In this case, you may need to delete a layer. To delete a layer:

  1. Select the layer in the list on the Timeline by clicking on it.

    Click To expand

    1. Click on the Delete Layer button.

    or

    2. Alternately, you can right-click on the layer's name and choose Delete Layer from the context menu.

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

Hiding a Layer

When a movie contains more than one layer, the objects on all layers are visible on the Stage by default. This feature makes it simple to position objects relative to one another, but the Stage can get cluttered. Flash has a mechanism for hiding individual layers so that the Stage is less cluttered. Hide layers that are not currently being worked on to create 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 row. Think of the dots beneath the properties as columns.

Click To expand

Notice that a hidden layer has an X through both the dot that was clicked on to hide it and through the pencil icon. The X under the eye icon indicates that the layer is hidden. The X through the pencil icon indicates that the layer cannot be edited.

Click To expand

Locking a Layer

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

  1. Select the layer you want to lock by clicking on the layer name in the list in the Timeline.

    Click To expand

  2. Click on the second dot, the one directly under the lock icon. A lock icon appears in the layer's row in the Timeline, and the pencil icon for the layer changes (it has a red strike through it), indicating that the layer is locked and cannot be edited.

Click To expand

Viewing Layer Outlines

Things can quickly get cluttered with numerous layers on the Stage. In some situations, however, completely hiding the layers doesn't work because you need to be able to see, for reference, where objects reside in the context of the stage. To deal 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 and outline view, allowing you to see the location of the object.

Click To expand


Layer Properties

Another way to work with layers is through the Layer Properties dialog box, which provides many options for customization in one place. To open the Layer Properties dialog box, either select Layer from the Modify menu or right-click on a layer in the Timeline list and choose Properties. From this dialog box, you can change these elements:

  • Name. Just type the name of your layer here. It's that simple.

    Click To expand

  • Show. When this check box is checked, the layer is visible.

    Unchecking this check box hides the layer.

  • Lock. Check this box to lock the layer so that its contents cannot be changed.

    Click To expand

  • Type. Flash has several types of layers, including Normal, Guide, Guided, Mask, Masked, and Folder. For the moment, concern yourself with only two types:

    • Normal. A Normal Layer contains objects that are part of your movie.

    • Folder. A Folder layer can hold other layers in it, just like a file folder in a filing cabinet.

  • Outline Color. In Outline view, the color selected here is used in the outlines of all objects on this layer.

  • View Layer as Outlines. This check box causes only the outlines of objects to be visible for this layer.

    Click To expand

  • Layer Height. This feature determines the height of the layer in the Timeline display. Change this setting if you prefer the layer rows to be higher.


Organizing Layers

As previously discussed in this chapter, the number of layers used in a Flash movie can start to add up. The simplest way to organize layers is to group together in a folder several layers that are similar or that have a common theme.

  1. Create the layers you need in your project by using the Create Layer button.

    Click To expand

  2. Change the names for the layers to describe their contents by double-clicking on their names and typing new names or by using the Layer Properties dialog box.

  3. Create a layer folder by clicking on the Create Layer Folder button.

  4. Change the layer folder's name by double-clicking on its name and typing a new name or by using the Layer Properties dialog box.

  5. Click and drag to the folder any layers that should reside in the folder.

  6. Repeat Steps 3–5 until all layers are organized.

Click To expand

In addition to grouping layers together using folders, you can adjust the order of the layers in the Timeline. Do this by clicking and dragging any layer name to a new location in the list. Sometimes, organizing layers together without folders is sufficient.


Chapter 5: Symbols and Libraries

Overview

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

In 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 your 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. Sometimes these graphic objects are static, and at other times they have added behaviors—they do something when you mouse over them or click on them. A symbol can be any type of these objects.

Symbols greatly benefit your Flash development. You can create symbols from scratch directly in Flash. Flash also allows 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 you make affect every instance of the symbol in your movie. You have to make the change in only one place. Also, you can edit instances in their separate locations without affecting the original symbol. I will discuss instances of symbols and libraries later in this chapter.

File size and playback speed are always important considerations with Flash movies. Symbols reduce the size and increase the playback speed of your movie. By using instances, the symbol you created is downloaded to the Flash player only once. For these reasons and others you discover throughout this chapter, the use of symbols is essential to becoming an 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 symbols are 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 about pointing 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 Submit, you are 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 the button's various states, you can then assign actions to them. For example, you can add an action that changes a button's 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 that a symbol 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 within the 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 first create symbols for the planets and the sun. Next, you animate the planets to move around the sun. These steps are created in the main Timeline. Later, you consider the option of having the Earth rotate as it revolves around the sun. But how would 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 the 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 different states, as you would with buttons.


Creating Symbols

As you have probably noticed, Flash provides multiple methods for performing commands. As you continue, I will point out various options for performing these commands. There is no right way to perform an action. It is truly a matter of 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 (z+F8 on a Mac).

Click To expand

Naming Symbols

Click To expand
Note

A new feature in Flash MX is a coding assistance process used in ActionScript. Although you may think that using ActionScript 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 sound a 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.

Based on the ending letters of the symbol's name (_btn, _mc, or _txt), ActionScript provides a list of available programming options. Although you may or may not be using ActionScript right away, you should use these naming conventions. Using them also assists you in identifying your symbols.

Click the Advanced tab to display this menu.

Click To expand

Creating Symbols

Now that you understand some of the important concepts behind symbols and why they should be named as such, let's create 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 added to it. This movie clip will be the planet Earth.

Start by creating a new symbol.

  1. Click Insert, New Symbol or Press Ctrl+F8 (z+F8 on the Mac).

  2. Name the symbol earth_mc.

    Click To expand

  3. Select Movie Clip in the behavior area.

  4. Click OK.

Click To expand

Follow these steps to select the color of the symbol.

    1. Click on the window and select the Color Mixer and Color Swatches panels. Because these two panels complement each other, using one without the other is limiting.

    or

    2. Click on the arrow on the color swatch to the right of the fill color in the Toolbox.

    Click To expand

  2. Select the blue gradient swatch at the bottom of the Color Swatches panel.

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

  1. Click the stroke color in the Toolbox to select and choose a color from the Color Swatches panel. I recommend a darker blue.

  2. Click on the Oval tool in the Toolbox to select it.

    Click To expand

  3. Position your mouse over the Stage.

  4. Click your mouse and then drag it and release it. This step creates the oval. As a reminder, hold down the Shift key while dragging your mouse to make a circle.

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

  1. Click the Arrow tool in the Toolbox.

  2. Click the circle to select it.

  3. Select Radial from the drop-down menu.

    Click To expand

  4. Click the right pointer under the gradient sliding scale in the Color Mixer panel to select it.

  5. Click your mouse in a blue area of the Color Mixer. This step adds blue to the brightness control, whereas previously it included only black and white.

    Click To expand

  6. Adjust the brightness control up to select one of the blue colors to remove the black from your gradient. Your circle retains its radial appearance.

  7. Play with these commands until you have achieved the desired results. Feel free to add other effects to your earth symbol to make it look even better.

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

  1. Click Scene 1 to return to the main Timeline.

    Click To expand

  2. Name the layer Earth.

Next you will create a button.

Creating a Button

Buttons can add functionality to a Flash movie. They can be used for navigation, changing the screen as in a rollover, or submitting information. Now create a simple button to use in your movie.

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

  1. Select Insert, Layer.

    Click To expand

  2. Name the Layer Button.

Note

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

Next, create a new symbol.

  1. Click Insert, New Symbol or Press Ctrl + F8 (z+F8 on the Mac) function key.

  2. Name the button learnMore_btn.

    Click To expand

  3. In the Behavior area, select the Button option.

  4. Click OK.

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

Click To expand

  • Up. The resting state of the button when a mouse is not positioned over it

  • Over. The change state of the button when a mouse is positioned over it

  • Down. The button's state as it is clicked by the mouse

  • Hit. The area of the button that responds to the behavior of the mouse

Begin work on your button in the Up frame. This state determines your buttons appearance at rest (when it's not being moused 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.

  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.

  1. Select the Text tool from the Toolbox.

    Click To expand

  2. Click anywhere on the Stage to switch to text editing mode.

  3. Type Learn More in the text box.

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

  1. Click the mouse button and drag the cursor to the end of your text to select it.

  2. Select Text, Size, and choose an appropriate size.

    Click To expand

  3. While the text is still selected, click the Fill tool to choose a different color if needed.

Make sure the text is properly aligned within the rectangle.

  1. Position the mouse cursor over the text box until you see an arrow with a navigational tool.

  2. Drag the text box to the proper location.

    Click To expand

  3. Click somewhere off the symbol to deselect it.

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 change the background color.

  1. Click the Over frame.

    Click To expand

  2. Press the F6 function key to create a new keyframe.

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

  1. Click the Fill tool and choose a different color.

  2. Click somewhere off the rectangle to deselect it.

    Click To expand

  3. Click inside the rectangle to select the text box.

  4. Highlight the text, select the Fill tool, and choose the original text color.

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 art-work already created outside of Flash. Flash allows you to import 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.

Importing Existing Graphics

As mentioned, you can import existing graphics into your movies and convert the graphics to symbols. When you consider the role of Flash movies on the Web, however, large files do not make sense. Although the option of importing sophisticated graphics may be useful, you should not overuse it. Whenever possible, you should create images directly in Flash because the file sizes are likely to be significantly smaller.

Complete the following steps to import a graphic:

  1. Select File, Import.

    Click To expand

  2. Browse for your graphic.

  3. Click Open.

Your graphic has now been imported to the library.

Converting Imported Graphics to 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 Stage to Symbols

Flash MX also provides the option of converting existing images on the Stage to symbols. This feature can be helpful if you miss the initial step of inserting a new symbol. This process is also useful if you want to group several items on the 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.

  1. Click under the Eye icon on the Timeline in the Earth layer and the Button layer to hide them from view.

    Click To expand

  2. Click Insert, Layer or the New Layer button.

  3. Name the layer Paths.

Next, choose the appropriate color selections.

    1. Select the Stroke tool and choose a silver color.

    or

    2. Click on the Color Swatches Panel and select a silver shade.

    Click To expand

  2. In the Color Mixer panel, adjust the Alpha value to 65 percent.

  3. Ensure that no fill color is selected.

Begin drawing the path by following the steps below.

  1. Select the Oval tool from the Toolbox.

    Click To expand

  2. Click the mouse over the Stage and drag the ellipse to the desired size.

  3. Repeat this step twice, for a total of three ellipses. They should be somewhat concentric (with a common center) if possible.

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

  1. Click the left Arrow Selection tool.

  2. Hold down the Shift key while clicking each ellipse with your mouse to select it.

    Click To expand

  3. Right-click the mouse and select Convert to Symbol.

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

  1. Name the symbol paths_mc.

    Click To expand

  2. Select Movie Clip in the Behavior area.

  3. Select OK.


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 the Stage, you have created an instance of that symbol. Each separate use of the symbol is an instance. The use of instances helps to reduce the file size of your movie. Flash downloads the entire symbol only once and uses smaller bits of information for each instance.

Furthermore, after you edit a symbol, all instances of that symbol reflect the change, so you have to make changes only once. You can edit instances of the symbol without affecting other instances or the original symbol. If you want to customize 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 will see three Edit menu items:

  • Edit

  • Edit in Place

  • Edit in New Window

Click To expand

  • Edit. Displays an editing window in place of the Stage. You are in symbol-editing mode and can make changes directly to the symbol in this window.

Click To expand

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

Click To expand

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

Click To expand

If 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.

Click To expand

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

Click To expand

  • Select Edit, Edit Document from the main menu.

Note

Navigating between the main Timeline and symbol-editing mode can be confusing because the Timeline changes. Be sure 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.

Click To expand

Follow the steps below to make changes to Earth:

  1. Click to expand the Properties panel below the Stage.

  2. Click the instance once on the Stage to select it.

  3. Edit the properties of your symbol in the panel below the Stage.

    Click To expand

  4. Change the width, height, X or Y axis, and the stroke or fill color, and view the changes on the symbol-editing Stage.

  5. Click the scene name to return to the main movie.

  6. View your changes to Earth on the Stage.


What Is a Library?

The Library serves primarily to store all your symbols and let you check out instances of them. It can also store objects that 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.

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 display its contents.

Note the following parts of the library:

Click To expand

You may also copy or share library assets between movies to add an additional layer of reusability. You can do this by opening both libraries and dragging items from one library to the other.


Working with a Shared Library

Using a shared library enables you to use items from one library in several different movies, cutting down on development time and improving efficiency. You can share items from the Library in two ways: runtime and author-time sharing.

If you have dabbled in Web page development, you know that you can assign relative or absolute URLs to links. A relative 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 allow you 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 can still share libraries.

Author-time Sharing

Author-time sharing involves sharing an item across a local network. Author-time items can be shared in an office building 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 copied to a Flash file that already has an item designated by that name, you can choose whether you want to replace the current item with the new item.

Flash does provide the option of creating a permanent library for the images used in your movie. To make a permanent library, place the Flash file in the Libraries folder in the Flash's application folder on your hard drive. You can get to this area 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

Chapter List

Chapter 6: Animation Basics
Chapter 7: Animation with Motion Tweening
Chapter 8: Animation with Shape Tweening
Chapter 9: Masking

Part Overview

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 well as how and when to apply both. You will see that masking allows you to create interesting effects in your animation.


Chapter 6: Animation Basics

Overview

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 and movies you watch in a theater are thousands and thousands of pictures that are shown for a fraction of a second each. The human eye can handle only so much input at a time, and it holds an afterimage for the fraction of a second that it takes to switch 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 artists. A picture, or animation cell, was created, and then a second cell, almost identical to the first, was created. The differences between the two cells were subtle. Another cell was drawn and then another and another. Because most animated cartoons and movies are shown at a rate of 12 to 45 pictures per second (if not faster), a single half-hour cartoon contained at least 21,600 separate pictures. The completed cells were transferred to film, the film was then placed in a 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 "old-fashioned" way first.


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 their real-world counterparts. All the pieces of your movies reside in frames. Flash has two types of frames: keyframes and frames. Keyframes are special frames that Flash uses as markers in an animation. Keyframes can indicate changes in the animation, and they hold most of the items in an animation. Frames, which fill the areas between keyframes, are either identical to the keyframe that precedes them in the Timeline or are used by the built-in animation tools. Different frames are represented in the Timeline by unique characteristics.

Click To expand

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

Click To expand
Click To expand


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 that Flash has, and also show the tedious nature of old-fashioned animation. This comparison allows you to appreciate some of the tools in Flash much more than you would if I presented them first.

The Basic Steps

  1. Create a new movie file by choosing File, New. You can also use the keyboard shortcut Ctrl+N (z+N on the Mac).

    Click To expand

  2. Use the movie properties in the Properties panel to set the size, frame rate, and background color for the movie.

  3. Draw a simple object on the Stage.

    Click To expand

  4. Insert a keyframe in Frame 2 by right-clicking on the spot on the selected layer where the second frame will be located and then choosing Insert Keyframe.

    Click To expand

  5. Change the contents of Frame 2 a small amount.

    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.
    Click To expand

  6. Repeat Steps 4 and 5 until your movie has at least 12 keyframes in it. If you make any mistakes, choose Edit, Undo or press Ctrl+Z (z+Z on the Mac).

  7. Press Enter to see your movie play in Flash.

    Click To expand

  8. Make any changes necessary to make the animation smoother, and insert new keyframes if necessary.

    Click To expand

  9. Save the movie by choosing File, Save or pressing Ctrl+S.

  10. Choose a folder in which to place the movie.

    Click To expand

  11. Type a name for the movie.

  12. Click on Save.

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 current 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 just created 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.

  1. Create a new movie by selecting File, New or pressing Ctrl+N (z+N on the Mac).

  2. Set the movie properties in the Properties panel.

    Click To expand

  3. Change the name of Layer 1 to Background by double-clicking on the name in the Timeline and typing the new name.

  4. On the Stage, design your background.

  5. Save the movie by choosing File, Save, selecting a folder in which to save the file, typing a file name, and clicking on Save.

Tip

Save early; save often. Whenever you want to do something major to your movie, save it first. Use several different file names. This way, you can always go back to a workable movie, even if you make a major mistake. With the long file 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 you how to fix that problem in a bit. Now, you need to add the moving text.

  1. Create a new layer by clicking on the Insert Layer button in the Timeline.

    Click To expand

  2. Rename the layer by double-clicking on the name and typing a new one.

  3. Select the new layer in the Timeline by clicking on it.

  4. Well to the right of the work area on the Stage, create some text by using the Text tool.

    Click To expand

  5. Add a new keyframe to the layer by right-clicking in the Timeline where you want the new frame to be placed and choosing Insert Keyframe or pressing F6.

    Click To expand

  6. In the new keyframe, move the text a little bit to the left.

    Note

    The simplest way to move an object is to select it with either the Arrow tool or the Subselection tool and then use the arrow keys on the keyboard. Each keypress with the arrow keys moves the selected object in the desired direction a little bit. To move the object more than a little bit, hold the Shift key and press an arrow key.
    Click To expand

  7. Continue adding keyframes and moving the text a little bit at a time, until the text is where you want it.

    Note

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

  8. Save 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 the Timeline: the Onion Skin tool.

  1. Click on the Onion Skin button in the Timeline.

  2. Use the Onion Skin brackets that appear above the Timeline to select the frames you want to look at in Onion Skin mode. Clicking and dragging moves a bracket and changes the selection.

    Click To expand

  3. Notice that the Stage now contains the frames selected with the Onion Skin brackets. Because multiple frames are selected the text object appears in its different locations—you see all of the selected objects on top of each other.

  4. Turn off Onion Skin mode by clicking on the Onion Skin button again.

Add a Moving Object

Next, you will add more motion to your movie with the addition of a moving object. You will create objects that begin in one area of the stage and move to another. There are many ways objects can move or change. The different ways are addressed in Chapter 7, "Animation with Motion Tweening" and Chapter 8, "Animation with Shape Tweening."

  1. Add a new layer to the movie by clicking on the Insert Layer button.

    Click To expand

  2. Rename the new layer.

    Click To expand

  3. On the new layer in the Timeline, click and drag from the second frame to the last frame.

    Click To expand

  4. Right-click on any of the selected frames and choose Remove Frames.

    Click To expand

  5. In the first frame on the layer for the moving object, draw the object where you want it to start. This spot can be inside or outside the work area.

  6. Add a new keyframe in the second frame by right-clicking and selecting Insert Keyframe or Pressing F6.

    Click To expand

  7. Move the object a little bit in the new keyframe.

  8. Continue adding new keyframes and moving the object a little bit at a time until it is located where you want it. This step may or may not take more frames than the moving text.

    Click To expand

  9. Save the file.

Note

It may seem odd to delete all the frames that Flash added to the new layer for you. Unfortunately, in this case, deleting the frames and replacing them with keyframes is simpler. By adding keyframes one by one, after moving the object in the preceding keyframe, Flash does a bit of extra work for you, by copying the contents of the preceding keyframe. This action 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:

  1. Select the first frame in any of the layers by clicking on it.

    Click To expand

  2. Select Control, Play or press the Enter key.

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 one layer, 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 the background first, follow these steps:

  1. Select the Background layer in the Timeline by clicking on its name.

    Click To expand

  2. Find the last frame that is used in the movie.

  3. On the background layer, at the last frame, right-click and choose Insert Keyframe.

  4. Save the movie.

  5. Click on the first frame in the movie.

  6. Press the Enter key to preview the movie again.

The background should remain visible during the entire movie.

Click To expand
Note

It is usually obvious that one layer finishes before another when you look at the Timeline. You can see pretty easily the last frame used in each layer. However, sometimes you want one layer to finish before another, for example, if an object is supposed to move off the Stage and not be seen again in the movie. In this case, the last frame in the layer with the 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 layers still disappears before the end. If so, you can skip the steps below, otherwise, you need to do the following:

  1. Select the layer that finishes too early by clicking on the layer's name in the Timeline.

    Click To expand

  2. Locate the last frame that is used on all layers.

  3. Right-click on this frame on the selected layer and choose Insert Keyframe.

  4. Save the movie.

  5. Click on the first frame in the movie.

  6. Press the Enter key to preview the movie again.

The movie should look a little more polished than before. To finish working on the movie, run through the following checklist and fix any problems that might exist.

Click To expand

  • 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?


Chapter 7: Animation with Motion Tweening

Overview

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

In 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 between." Basically, you can create a keyframe with an object, create another keyframe on the same layer with the same object in a different location, and Flash will supply the frames in between the two keyframes. Rather than defining the look for objects per frame, Motion tweening allows you to identify the keyframe of change and let Flash do the rest. Try it out.

The Basic Steps

  1. Create a new Flash movie by selecting File, New or pressing the shortcut Ctrl+N (z+N on the Mac).

    Click To expand

  2. Create an object on the Stage in Frame 1.

  3. Insert a new keyframe on the Timeline at Frame 25.

    Click To expand

  4. Select Frame 25 by clicking on it in the Timeline.

  5. Move the object on the Stage to a new location.

  6. In the Timeline, highlight Frames 1 through 25.

    Click To expand

  7. Right-click on any of the selected frames and choose Create Motion Tween. Alternately, you can also select Motion from the Tween drop-down menu on the Properties panel.

  8. Click on the first frame and press Enter to watch your new movie.

    Click To expand

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 create a movie with three moving objects that start and stop at different times. Here's a list of what this movie will contain:

  • 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 45 contain this object.

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

Create a Background

Begin by creating the background.

  1. Create a new Flash file.

    Click To expand

  2. Rename Layer 1 to something descriptive, like Background.

  3. Draw the background.

  4. Since you know how long the movie will be (50 frames), you can insert a keyframe at Frame 50. This way, the background remains during the entire movie.

    Click To expand

  5. The background layer is complete, so lock it by clicking on the dot underneath the lock icon in the Timeline.

Tip

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

Add Objects

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

  1. Create a new layer by clicking the Insert Layer button.

  2. Rename the new layer.

  3. Insert a new keyframe at Frame 5.

  4. Select the new keyframe at Frame 5 by clicking on it.

    Click To expand

  5. Draw the object off the left edge of the work area in Frame 5.

  6. Insert a new keyframe at Frame 25 and Frame 26. The second keyframe in a row is placed there to stop possible problems. Occasionally, without the second keyframe, Flash continues the motion tween through the end of the movie.

    Click To expand

  7. Select the new keyframe by clicking on it.

  8. Move the object in Frame 25 to the desired location (the lower-right corner of the work area).

  9. Insert a keyframe at Frame 50. Although the keyframe is not completely necessary, it does ensure that the final movie looks right and that the object does not disappear between the end of its movement and the end of the movie.

  10. Select Frames 5 through 25 on the new layer.

  11. Right-click on one of the selected frames and select Create Motion Tween.

  12. Lock the layer.

    Click To expand

  13. Test the movie by pressing Enter.

Note

When you use motion tweening, every moving item should be on its own layer. If you have more than one moving object 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 already done.

  1. Create and name a new layer.

  2. Insert a new keyframe at Frame 20.

    Click To expand

  3. Select the new keyframe at Frame 20 by clicking on it.

  4. Draw the object off the right edge of the work area in Frame 20.

  5. Insert a new keyframe at Frame 45.

  6. Select the new keyframe by clicking on it.

  7. Move the object in Frame 45 to the desired location (the lower-left corner of the work area).

    Click To expand

  8. Insert a keyframe at Frame 50 to ensure that the object remains through-out the movie.

  9. Select Frames 20 through 45 on the new layer.

    Click To expand

  10. Right-click on one of the selected frames and select Create Motion Tween.

  11. Lock the layer, just to be safe.

  12. Check out your work by playing the movie.

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

  1. Create and name a new layer. (Does this step sound familiar?)

  2. Insert a new keyframe at Frame 15.

    Click To expand

  3. Select the new keyframe at Frame 15 by clicking on it.

  4. Add some text to the bottom of the Stage, below the work area.

  5. Add a new keyframe at Frame 50.

  6. Move the text.

    Click To expand

  7. Select Frames 15 to 50, right-click, and choose Insert Motion Tween.

  8. Test the movie.

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 that is part of a tween, compared to a regular frame or keyframe. These new properties are:

Click To expand

  • Scale. The Scale check box determines whether the tween resizes objects.

  • Ease. The number typed in the Ease box determines the rate of change for the tween. All tweens use the available frames, and all animations happen at a steady rate by default. The number in the Ease box determines whether the rate of change is constant (enter a value of 0), whether the tween begins slowly and then accelerates (enter a value from -100 to -1), or whether the tween begins quickly and slows toward the end (enter a value between 1 and 100).

Click To expand

  • Rotate. This selection box has four options:

    • None. Does not rotate.

    • Auto. Rotates if necessary.

    • CW. Rotates clockwise the number of times specified in the Rotation count box.

    • CCW. Rotates counterclockwise the number of times specified in the Rotation Count box.

Click To expand

  • Rotation Count. This option shows the number of full circles the object should rotate during the tween. Enter a value into the box preceding times.

  • Orient to Path. This option, which is used with motion guides, tells Flash to orient which direction is up relative to the motion guide. You use this option later, in the "Motion Guides" section of this chapter.

Click To expand

  • Sync. If a movie clip object is in the tween, synchronize its frame rate to the Timeline.

  • Snap. The tweened object should attach itself to the motion guide.

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.

  1. Create a new file by choosing File, New or pressing Ctrl+N (z+N on the Mac).

    Click To expand

  2. In Frame 1, on the default layer, draw an object somewhere on the Stage.

  3. Add a keyframe at Frame 24 so that the movie will be two seconds long at the default frame rate.

  4. Move the object in Frame 24, if you desire.

    Click To expand

  5. Select all the frames and choose Create Motion Tween.

  6. Click on the last frame in the tween.

  7. Using one of the selection tools, select the object on the Stage.

    Click To expand

  8. Using the Free Transform tool from the Toolbox, resize the object.

  9. In the Timeline, highlight all the frames in the tween, and in the Property panel make sure that the Scale check box is checked. If any frame in the tween has the Scale check box unchecked, the animation will not work properly.

    Click To expand

  10. Click on the Stage, play the movie, and watch the object change sizes.

To skew an object as part of a tween, follow the preceding steps; in Step 8, however, use the Free Transform tool to skew the object, not resize it. Or, you can do both.

Note

In this example, you created the tween and then changed the last frame. This technique works for moving, scaling, rotating, 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.

  1. Create a new file by choosing File, New or pressing Ctrl+N (z+N on the Mac).

    Click To expand

  2. In Frame 1, on the default layer, draw an object somewhere on the Stage. This object should not be a circle so that you can tell that it is really rotating.

  3. Add a keyframe somewhere on the Timeline, at the point where you want the animation to end.

  4. Select all the frames, right-click, and choose Insert Motion Tween.

    Click To expand

  5. Click on the first frame in the tween.

  6. In the Properties panel, in the Rotate dropdown list, choose whether you want the object to rotate clockwise (CW) or counterclockwise (CCW).

  7. In the Properties panel's Rotation Count box, type a number for the number of times the object should rotate. This number must be an integer.

    Click To expand

  8. If you want, change the Ease value in the Properties panel.

  9. Choose Control, Play to watch the object spin.

So far, these tweens have been simple because you changed only one thing at a time. Let me introduce a new panel, the 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 (z+T on the Mac). This panel contains eight items:

Click To expand

  • Width. This option represents the new width of the object as a percentage of the original width. Values greater than 100 percent expand the object, and values smaller than 100 percent shrink it.

  • Height. Similar to the Width option, this option represents the new height as a percentage of the original size.

  • Constrain. When the Constrain check box is checked, the Height and Width values must be the same value, to prevent distorting the object. When this option is not checked, the values may be different.

Click To expand

  • Rotate. This radio button enables the Rotation Angle box and disables the skew options.

  • Rotation Angle. The rotation angle determines how far to rotate the object. This value is shown in degrees; 360 degrees is a full circle.

Click To expand

  • Skew. This radio button enables the Skew Angle boxes and disables the rotation options.

  • Horizontal Skew Angle. Enter an angle in this box to skew the object horizontally. Negative values lean the object to the left, and positive values tilt it to the right.

  • Vertical Skew Angle. Enter an angle in this box to skew the object vertically. Negative values bump the object up, and positive values tilt it down.

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

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 rotates, and the second one shrinks and gets skewed.

  1. Create a new file by choosing File, New or pressing Ctrl+N (z+N on the Mac).

  2. In the first frame, on the default layer, draw an object somewhere on the Stage.

    Click To expand

  3. Create a keyframe somewhere out on the Timeline, at least 20 frames out.

  4. Highlight all the frames on this layer, right-click, and choose Create Motion Tween.

  5. Select the last keyframe.

  6. Select the object and move it, if you wish.

    Click To expand

  7. Open the Transform panel by either choosing Window, Transform or pressing Ctrl+T or (z+T on the Mac).

  8. In the Transform panel, change the height or width.

  9. Also in the Transform panel, type a rotation angle.

    Click To expand

  10. Click on the Stage and press Enter to watch the first object change.

  11. Lock the layer. (Note that the figure does not display Layer 1 as locked because that action grays out the information Transform panel.)

  12. Create a new layer.

  13. Select the first frame of the new layer.

    Click To expand

  14. Draw another object on the Stage.

  15. Add a new keyframe to this layer at the end of the movie.

  16. On the new layer, select all the frames and choose Insert, Insert Motion Tween.

    Click To expand

  17. Select the last keyframe on the new layer and the object in it.

  18. Move the object, if you desire.

  19. In the Transform panel, change the height or width.

  20. Still in the Transform panel, click on the Skew radio button.

    Click To expand

  21. Enter values into the Vertical Skew Angle box and the Horizontal Skew Angle box.

  22. Click on the Stage and choose Control, Play.


Tweening with Color

Colors are another option you can change in a motion tween. You can change a few different attributes with colors and motion 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, since motion tweens can deal with only symbols and instances. In fact, if you create a motion tween using objects that are not symbols, Flash creates a symbol in the library for you, and from that point you are editing only instances of that symbol.

The Basic Steps

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

  1. Create a new movie.

  2. Create an object on the Stage.

    Click To expand

  3. Create a new keyframe, at least 12 frames later on the Timeline.

  4. Create a motion tween using all the frames.

  5. Select the last frame by clicking on it.

  6. On the Stage, select the object by using any of the selection tools from the Toolbox.

    Click To expand

  7. In the Properties panel, use the Color dropdown list to select the brightness.

  8. The Brightness Amount edit box appears, which is where you can type a percentage of the brightness of the original object that should be used. Negative amounts darken the object, and positive entries lighten it.

  9. Click on the Stage.

  10. Watch the movie by pressing Enter.

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.

  1. Select the object in the last frame of the tween in the movie.

    Click To expand

  2. In the Properties panel, choose Tint from the Color drop-down list. This selection exposes several new settings in the panel, including the following:

    • Tint Selector. Click the arrow in the bottom-right corner of the Tint selector to choose the color to apply to your object. The best way to think of it is as if you are adding the object's existing color and the color you select here together. Place your mouse pointer over the various color swatches to see what the resulting color will look like. The Tint amount in the box to the right should be around 50% in this example.

    • Tint Amount. This option determines how much of the selected color is added to the object. A value of 0 leaves the color unchanged, and a value of 100 percent replaces the original color with the newly selected color.

    • RGB. These three boxes contain the RGB (red, green, blue) color amounts of the color in the color chooser. Rather than choose the color in the Tint selector, you can enter the RGB value directly.

  3. Choose a new color either by using the Tint selector or entering an RGB value.

  4. Set a percentage in the Tint Amount box.

    Click To expand

  5. Click on the Stage and play your movie to see the differences.

Note

Did you notice that when you change the tint, brightness reverts to its original settings? Changing more than one option is possible only by using the Advanced setting, which I will cover shortly.

The alpha setting is not only fun to play with, but also useful. Think of the alpha setting as how strongly the object is visible. For example, 100 percent alpha is completely there, while 0 percent alpha is completely invisible or transparent. By using alpha settings, you can make objects fade in and out, which can be great for pop-up menus, special effects, and transitions.

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 solid until Frame 30, and then disappears by Frame 45.

  1. Create a new movie.

  2. In the first frame, create a new object.

    Click To expand

  3. Insert new keyframes at Frames 15.

  4. Create a motion tween from Frames 1 to 15.

  5. In Frame 1, select the object on the Stage.

  6. Choose Alpha from the Color drop-down list in the Properties panel.

    Click To expand

  7. Change the Alpha amount to 0. The object seems to disappear.

  8. Insert new keyframes at Frames 29, 30, and 45.

    Click To expand

  9. Create a motion tween from Frames 30 to 45.

  10. In Frame 45, select the object on the Stage.

  11. In the Properties panel, choose Alpha from the Color dropdown list.

    Click To expand

  12. Set the Alpha amount to 0.

  13. Click on the Stage and press Enter to watch your movie.

The other color tween you can work with is the Advanced tween. Using the advanced options, you can change both the tint and alpha settings. However, the advanced settings are a little bit tricky and require that you understand RGB colors. Colors can be represented by three numbers—one for each color: red, green, and blue. All colors, as far as computers are concerned, 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 represents how much red is in the color; the second, how much green; and the last, how much blue. Black is represented by (00,00,00), 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 color and alpha 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 that—or, 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.

  1. Create a new Flash movie.

  2. In the first frame, create an object.

    Click To expand

  3. Insert a new keyframe at least 12 frames later on the Timeline.

  4. Create a motion tween using all available frames.

  5. In the last frame, select the object.

    Click To expand

  6. In the Properties panel, choose Advanced from the Color dropdown list. A Settings button should appear.

  7. Click on the Settings button.

  8. For each item (red, green, blue, and alpha), fill in a percentage of the original color to use in the left column. Negative values are allowed.

  9. Fill in a value to add in the right column. As you change these values, you will see the object on the Stage change, so you can use a little trial-and-error.

    Click To expand

  10. When you are happy with the new color and alpha, click on OK.

  11. Click on the Stage.

  12. Press Enter to preview your movie.

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


Motion Guides

With motion guides, animation can get interesting. Objects in a tween do not necessarily need to move in a straight line, as in all the previous examples of this chapter. Instead, you can create a path for the object to follow during the tween. This process is simple, as you will see.

Note

For the examples in this section, only one object is used—an arrow that points up—so that you can see how orientation can change in a few circumstances.

The Basic Steps

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

  1. Create a new Flash movie.

  2. In the first frame, create an object.

    Click To expand

  3. In Frame 25, create a keyframe.

  4. Create a motion tween using Frames 1 though 25.

  5. In the Timeline, right-click on the layer and choose Add Motion Guide. A new layer appears with the name Guide: Layer 1.

    Click To expand

  6. Select the new guide layer by clicking on it.

  7. In the first frame of the guide layer, using the Pencil tool from the Toolbox, draw the path you want the object to move along. This path can be straight, zigzagged, curved, or even looped.

  8. In the last frame of the tween, move the object to where you want it to stop.

    Click To expand

  9. In the first frame of the tween and the last frame of the tween, on the original layer, move the object so that it snaps to the beginning of the path.

  10. If you want the object to move as though the path controls its orientation, click on the first frame of the tween. In the Properties panel, ensure that the Orient to Path check box is checked. You should try this option at least once.

  11. Select Control, Play to watch the object move around the Stage on the path you created.

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

Click To expand
Click To expand

Applying What You've Learned

Now, you can pull together all the different motion tweens and create an animation in which one object moves along a motion guide, changes colors, rotates, and fades out. For simplicity, you work with only one object, and it does everything at once in a four-second movie.

  1. Create a new movie.

  2. Draw an object in the first frame.

    Click To expand

  3. Add a keyframe at Frame 48.

  4. Select Frames 1 through 48, and select Insert, Create Motion Tween.

  5. Change the size of the object in the last frame using the Free Transform tool from the Toolbox.

    Click To expand

  6. In the last frame, select the object using any of the selection tools from the Toolbox.

  7. From the Color dropdown list in the Properties panel, choose Advanced.

  8. Click on the Settings button, set the options, and click on OK.

  9. Select the first frame in the tween by clicking on it in the Timeline.

    Click To expand

  10. From the Properties panel, set the ease, rotation direction, and rotation count.

  11. Select Orient to Path.

  12. In the Timeline, select the layer and choose Insert, Motion Guide.

  13. On the Motion Guide layer, draw a path for the object to follow using the Pen, Pencil, Line, Circle, Rectangle, or Brush tool from the Toolbox.

    Click To expand

  14. In the last frame of the tween, move the object to where you want it to finish its movement.

  15. Using the Selection tool from the Toolbox, move the object in both the first and last frames of the tween so that it snaps to the motion guide that was drawn.

  16. Play the movie.


Chapter 8: Animation with Shape Tweening

Overview

Thus far, this book has covered how to create animations by drawing every single frame and by using motion tweening. However, sometimes these techniques do not work effectively to create complex animations. Shape tweening offers animation with a different look. Whereas motion tweening generally takes an object from one location to another and allows for some changes to the shape (such as height, width, or x and y position), shape tweening allows an object to become something completely different. For example, a circle gradually morphing into a triangle illustrates the concept of shape tweening.

In 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 move the 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 involves changing 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.

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 simplest is shown in these steps.

  1. Create a new Flash movie by selecting File, New or pressing Ctrl+N (z+N for the Mac).

  2. In the first keyframe, draw a square.

    Click To expand

  3. Select the keyframe in the Timeline by clicking on it.

  4. Open the Properties panel by selecting Window, Properties.

    Click To expand

  5. Choose Shape from the Tween drop-down list in the Properties panel.

  6. Add a new, blank keyframe to the Timeline at Frame 20 by right-clicking on Frame 20 and selecting Insert Blank Keyframe (Insert Blank Keyframe is located below Insert Keyframe on the shortcut menu. Be sure that the keyframe you insert is blank.).

    Click To expand

  7. Notice that the Timeline indicates that you have an incomplete tween by displaying a dashed line between the two keyframes.

  8. Select the new keyframe by clicking on it.

  9. In the keyframe, draw a circle.

    Click To expand

  10. Notice that the dashed line in the Timeline that indicates an incomplete tween has become a solid-lined arrow, indicating a complete tween.

  11. Play the movie by selecting Control, Play.

Tip

Flash MX provides feedback to indicate when problems occur with tweens. In the Timeline, an incomplete tween appears as a dashed line. A complete tween appears as an elongated arrow between keyframes. You can have an incomplete tween preceded and followed by complete tweens or vice versa. When problems do appear, look at both the first and last keyframes in the incomplete tween to try to discover the problem. In some instances, Flash also displays a warning icon to the right of the Ease drop-down list in the Properties panel. Clicking on this icon reveals a message that can be very helpful in troubleshooting.
Note

Just 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 in odd behavior.

Working with Complex Shapes

Pay attention to one caveat in shape tweening: It works with only simple items. Complex shapes, objects, imported graphics, and text must be simplified into pieces for shape tweening to work properly. To convert an object to its component parts, select Modify, Break Apart or press the shortcut Ctrl+B (z+B for the Mac). Here is an example of how to use an imported graphic in a shape tween.

  1. Create a new Flash file by selecting File, New or pressing Ctrl+N (z+N for the Mac).

  2. Import the graphic file you want to use by choosing File, Import.

    Click To expand

  3. Select the graphic file you want to use from the Import dialog box and click on Open.

  4. On the Stage, place the graphic where you want and resize it if necessary. The Free Transform tool in the Toolbox is the simplest tool to use when resizing an object.

  5. Use one of the selection tools from the Toolbox to select the imported graphic.

    Click To expand

  6. Select Modify, Break Apart or press Ctrl+B (z+B for the Mac) to make the graphic usable by the shape tweening tool. This step converts the graphic to a fill.

    Note

    When taking a graphic through the Break Apart process, 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 (z+B for the Mac) three times before the graphic became a fill. If you have forgotten how Flash denotes a fill, draw a square and click on it once with the Arrow tool. The many dots covering the square indicate the fill. Your graphic should look like this after the Break Apart process.

  7. Click on the first frame in the Timeline.

    Click To expand

  8. In the Properties panel, select Shape from the Tween dropdown list.

  9. Add a new, blank keyframe at Frame 12 by right-clicking Frame 12 in the Timeline and choosing Insert Blank Keyframe.

    Click To expand

  10. Notice that an incomplete tween is shown in the Timeline.

  11. In the new keyframe, add a simple shape, like an oval or a square.

    Click To expand

  12. Notice that the Timeline indicates that the tween is now complete.

  13. Play the movie.

In this example, you may notice that the fill changes at the last instant while the shape changes and moves gradually. This is one of the limitations of using preformed graphics files in a shape tween.


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 you must break apart text twice. The first time separates the single text block into many blocks, one for each layer. The second time you break up text, each of the letters becomes a fill that looks just like the text character, but is, in fact, just a graphic.

The Basic Steps

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

  1. Create a new Flash file by selecting File, New.

  2. In the first frame, create five rectangles with a colored fill and place them side by side with a little space between them.

    Click To expand

  3. With the Properties panel visible, click on the first frame in the Timeline.

  4. In the Properties panel, change the tween from None to Shape.

  5. Insert a blank keyframe at Frame 20.

  6. In the new keyframe, use the Text tool to create a 5-letter word, like Flash.

    Click To expand

  7. Use one of the selection tools from the Toolbox to select the text block.

  8. Select Modify, Break Apart to break the 5-letter word into five 1-letter text blocks. (You can also use Ctrl+B or z+B for the Mac.) The five letters should be selected.

  9. Choose Modify, Break Apart again (or press Ctrl+B or z+B) to change the letters into graphics.

  10. Click on the first frame and play the movie.

Caution

I have noticed a possible problem with Flash and shape tweens. Sometimes, when you fix an incomplete tween (as indicated by a dashed line in the Timeline) by adding the last piece needed, the dashed line does not become an arrow to tell 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 properly.

Working with Complex Text

That simple example shows how to create a morph of shapes into letters. How about morphing one word into another and then morphing the second word into a third? An example is the opening credits for your Flash movie, with a name like Premier Press changing to presents, which then changes to Flash MX. Another example is part of a movie describing your company, where, as the movie progresses, the captions or headings change with the topic of the movie. For example, the first part of the movie might be a background about the company with the heading Our Company History at the top. Then the text could morph into the words Our Company Today as the content changes and then change to Where We Are Headed when the company's future is discussed.

Tip

Morphs and shape tweens are often subtle, not abrupt, changes that blend into the rest of the movie. If the changes are too abrupt 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:

  1. Create a new Flash file. (Does this step sound familiar?)

  2. In the first frame, use the Text tool to create a word or words or a sentence.

    Click To expand

  3. Place the sentence where you want it and select it.

  4. Break apart the text into letters by selecting Modify, Break Apart or pressing Ctrl+B (z+B on the Mac).

  5. Break apart the letters into graphics by selecting Modify, Break Apart.

  6. Select the frame in the Timeline and change the tween property from None to Shape in the Properties panel.

  7. Create a new, blank keyframe around Frame 20.

    Click To expand

  8. In the new keyframe, use the Text tool to create another text block.

  9. Break apart the new text block by selecting Modify, Break Apart two separate times. The first time separates the letters, and the second time changes the letters to graphics that the shape tween can use.

  10. Add a new, blank keyframe at approximately Frame 40.

    Click To expand

  11. In the newest keyframe, use the Text tool to create another text block.

  12. Break the new text block apart twice by selecting Modify, Break Apart.

  13. Select the first frame and watch the movie.

Tip

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 interesting effects, 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 complex for Flash's built-in tweening tools. In this simple example, you will create a rectangle that becomes an oval. Then you will identify and fix the problems that occur. In a new Flash file, follow these steps:

  1. In the first keyframe, create a rectangle.

    Click To expand

  2. In the Timeline, select the first frame, and in the Properties panel, set the tween type to Shape.

  3. Add a new, empty keyframe at Frame 20.

    Click To expand

  4. In the new keyframe, add an oval.

  5. Play the movie.

Notice that when you play the movie, the rectangle rotates as it becomes the oval. The tweening tool thinks that this event should 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 first keyframe will become a specific point in the last keyframe. For example, to stop the rotation of the rectangle into the square, 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 point of the oval in the last keyframe.

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

  1. Select the first keyframe in the Timeline.

  2. Choose Modify, Shape, Add Shape Hint. This step adds a hint—a small, red circle labeled a—to the first frame.

    Click To expand

  3. Click and drag the hint (the a) to the center of the topside of the rectangle.

  4. Select from the Timeline the last keyframe in the tween.

  5. In the last keyframe, notice that another red hint is labeled a. Move this hint to the top of the oval. The hint turns green. If you go back to the first frame, you see that the hint has turned yellow. These color changes tell you that the hints are properly placed on shapes and will be used in the tween.

    Click To expand

  6. Play the movie.

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 in 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 where the hint in the last frame was. This move didn't stop the rotation, but it did minimize it. Fix the rotation completely by adding one more hint.

  1. Select the first keyframe in the Timeline.

  2. Choose Modify, Shape, Add Shape Hint. This step adds Hint B to the first frame.

    Click To expand

  3. Move Hint B to the center of the right side of the rectangle.

  4. Select the last frame of the tween in the Timeline.

  5. In the last frame, move Hint B to the right edge of the oval. Hint B turned green. If you check back in the first keyframe, you'll notice that Hint B is now yellow.

    Click To expand

  6. Play the movie.

The rotation should be stopped, and the rectangle should just expand (or contract) into an oval.

Now see what happens when you change things a bit by moving Hint A from the top to the bottom in the last frame.

  1. Select the last keyframe in the Timeline.

  2. Click and drag Hint A from the top to the bottom of the oval.

    Click To expand

  3. Play the movie.

Notice that this simple change has an odd effect. As the movie plays, the shape flips over into itself as Hint A moves from the top to the bottom. This effect can be the result of the unintentional placement of hints. If desired, however, it looks neat.

Note

As with most tasks in Flash, you should approach hints cautiously. Add only one hint at a time, testing as you go, to make sure the objects behave as you think they should. Also, save your work before you make a major change so that you can revert to an older version of your movie if necessary.

Now you should either move Hint A back to its position at the top of the oval or delete it. To delete a hint, follow these steps.

  1. Select either the first or last keyframe in the tween.

  2. Right-click the hint you want to delete.

    Click To expand

  3. Select Remove Hint from the menu.

Note

One menu option is labeled Remove All Hints. This feature, which worked intermittently as I wrote this chapter, may not be an official bug, but if it does not work properly, you can still delete each hint separately. It works best if you select this option from the first keyframe using hints.


Chapter 9: Masking

Overview

Masking is a flexible tool in Flash. With masking, a number of neat effects are possible. If Flash is like theater on the web, consider masking high drama. You can affect visibility in ways that create surprising looks, particularly when applying tweening options to a mask.

In this chapter, you will learn the answer to the following questions:

  • What is a mask?

  • How do you create a simple mask?

  • How do you use movie clip symbols in masks?


What Is a Mask?

A mask is a window through which you can view the Stage. One of the simplest ways to think of a mask is shown in the following example. Hold up to one eye an empty paper towel roll (the cardboard cylinder that is left when all the towels are gone) and close your other eye. You can now see the small portion of the world that is visible through the end of the tube. This tube is a simple mask. It hides everything except what is visible through it. In Flash, you can create masks that serve a similar purpose, to hide any extraneous objects or parts of the Stage.


How Can You Create a Mask?

Creating a mask takes a little bit of planning. You need to decide what you want hidden, what you want visible, and how the area of visibility should look in terms of shape and size. A common use of a mask is to hide part of a graphic that has been imported into Flash. Another example is a spotlight that moves around the animation, showing a small portion of it at a time.

The Basic Steps

After you have made these decisions try your hand at creating a mask by following these simple steps.

  1. Create a new Flash movie.

    Click To expand

  2. In Layer 1, import the graphic by choosing File, Import, selecting the graphic, and clicking Open.

  3. Determine what parts of the graphic will be visible to the user.

  4. Insert a new layer in the Timeline by clicking the Insert Layer button.

    Click To expand

  5. On the new layer, Layer 2, draw a shape that outlines the area the mask will show. You can use the Rectangle tool, Oval tool, Pen tool, or Pencil tool to draw this shape.

  6. Right-click on the new layer and choose Mask.

You should now have a "window" through which you can view part of the graphic you imported.

You should notice a few things about the mask you just created.

Click To expand

The mask you created is simple. It is one frame long, and its layers are locked so that you cannot edit them. From this example, however, the general idea is illustrated.

Creating a Moving Mask over Static Content

There are many ways to work with masks. Now add animation to the mask through which the static picture will be visible.

  1. Create a new Flash movie.

  2. Rename Layer 1 to something descriptive, like Picture.

    Click To expand

  3. On the layer, import or draw an image.

    Click To expand

  4. Insert a new keyframe at Frame 30. This step creates a static picture that lasts 30 frames.

  5. Add a new layer by clicking the Insert Layer button. Rename the layer Animated Mask.

  6. In the first frame of the Animated Mask layer, draw a shape through which part of the Picture layer will be visible.

    Click To expand

  7. On the Animated Mask layer, add a keyframe at Frame 30.

  8. In the new keyframe, move the shape to another area on the Stage.

  9. Highlight Frames 1 through 30 on the Animated Mask layer, right-click Frame 30, and choose Create Motion Tween.

    Click To expand

  10. Right-click on the name of the Animated Mask layer and choose Mask from the menu.

  11. Play the movie and watch the mask move like a spotlight over the picture. Nifty, huh?

Note

Masks work only when the masked layer and the masking layer are locked. So you must remember that if you unlock either layer to edit it, you need to lock it again so that the mask displays properly.

Creating a Static Mask over Moving Content

Now let's try a different approach by adding movement to the content beneath the static mask.

  1. Create a new Flash movie.

    Click To expand

  2. Rename the default layer Animated Picture.

  3. Draw or import a picture into the first frame of the Animated Picture layer.

    Click To expand

  4. At Frame 15, insert a keyframe.

  5. In Frame 15, move the picture to another location on the Stage.

  6. Highlight Frames 1 through 15, right-click, and choose Create Motion Tween.

    Click To expand

  7. Insert a keyframe at Frame 30.

  8. Move the picture in Frame 30 to another location.

  9. Highlight Frames 15 through 30, right-click, and choose Create Motion Tween (if the tween is not created automatically).

  10. Add a new layer to the Timeline by clicking the Insert Layer button.

    Click To expand

  11. Rename the new layer Static Mask.

  12. Turn on Onion Skins or Onion Skin Outlines, and move the Onion Skin boundary markers to the first and last frames of the movie.

    Click To expand

  13. In the first frame of the Static Mask layer, draw several shapes that will cover part of the path the graphic will travel. With Onion Skins turned on, you should be able to see the path the graphic will follow.

    Click To expand

  14. Right-click on the name of the Static Mask layer and choose Mask. This step should turn the mask on and lock the layers.

  15. Play the movie. The moving graphic should appear and disappear as it travels under the masked portions of the Stage.

Note

One drawback to using masks is that a mask layer cannot have a motion guide associated with it, so you cannot easily create an animated mask that follows a preset path. The easiest way to work around this limitation is to break up the animation into several different tweens, each with simple movement from one point to another.

Create a Mask That Moves over Animation

Now mask a second layer using the same mask as in the preceding movie.

  1. In the movie you just created, select the Static Mask layer.

  2. Click the Add Layer button. A new layer should be inserted above the Static Mask layer.

    Click To expand

  3. Rename the new layer Animated Picture 2.

  4. In the first frame of the new layer, draw or import a picture.

    Click To expand

  5. Add a keyframe to Frame 30 of the new layer.

  6. In the new keyframe, move the picture so that it crosses through the mask.

  7. Highlight all the frames in the new layer and create a motion tween.

  8. Lock the new layer.

    Click To expand

  9. Drag the new layer so that it is under the Static Mask layer in the Timeline. The graphic to the left of the layer name should change to indicate that it is a masked layer.

  10. Play the movie. Notice that both moving shapes appear and disappear as they move under the mask.

Create an Animated Mask That Moves over Animation

Now make things really interesting by having an animated mask moving over an animated picture. For the animated picture, you use a shape tween.

  1. Select File, New to create a new Flash file.

    Click To expand

  2. Change the name of Layer 1 to Animated Picture.

  3. On the Stage, draw or import a simple picture.

    Click To expand

  4. Add a blank keyframe at Frame 30.

  5. In the new keyframe, draw another shape in a different location from the shape in the first frame.

  6. Highlight Frames 1 through 30, and in the Properties panel change the Tween from None to Shape.

    Click To expand

  7. Turn on Onion Skins or Onion Skin Outlines and move the brackets so that you can see the entire movie at one time.

  8. Add a new layer and name it Animated Mask.

  9. In the first frame of the Animated Mask layer, draw a shape that will become the mask.

    Click To expand

  10. Add a keyframe to Frame 30 of the Animated Mask layer.

  11. In the new keyframe, move the masking shape a bit so that at some point in its movement, the Animated Picture is visible.

  12. Highlight Frames 1 through 30 of the Animated Mask layer and create a motion tween.

    Click To expand

  13. Right-click on the name of the Animated Mask layer and choose Mask.

  14. Play the movie.


Using Movie Clip Symbols in Masks

Now use a symbol for the animation and a moving oval as the mask.

  1. Select File, New to create a new Flash file.

    Click To expand

  2. Change the name of Layer 1 to Moving Animated Symbol.

  3. Choose Insert, New Symbol.

  4. Choose Graphic for the symbol type and type a name.

    Click To expand

  5. Create an animation that is 20 frames long. Have the animation end in a state similar to the first frame so that the animation loops well.

  6. Leave the Symbol Editor by clicking on the Back button.

    Click To expand

  7. Open the Library by choosing Window, Library or pressing F11.

  8. Drag your new symbol from the Library to the Stage.

  9. Use the Arrow tool to select the new symbol.

  10. In the Properties panel, choose Loop from the Options for Graphics list.

    Click To expand

  11. Insert a keyframe at Frame 60. When you are done, the embedded symbol should loop three times.

  12. In Frame 60, move the instance of the symbol to a different location on the Stage.

  13. Create a motion tween of Frames 1 through 60.

    Click To expand

  14. Insert a new layer and name it Moving Mask.

  15. In the first frame of the Moving Mask layer, draw a shape to use as the mask.

    Click To expand

  16. Insert a new keyframe at Frame 60 in the Moving Mask layer.

  17. In the new Frame 60, move the mask shape.

  18. Create a motion tween in the Moving Mask layer, using Frames 1 through 60.

    Click To expand

  19. Change the Moving Mask layer to a mask by right-clicking the layer name and choosing Mask.

  20. Play the movie.

You can create lots of neat and sophisticated effects by using the masks you have explored in this chapter. With a little creativity, you should be able to apply these concepts and create amazing movies.


Part III: Sound

Chapter List

Chapter 10: Sound

Part Overview

Sound is an interesting entity all on its own. This section provides background information about what sound is and how you can use it in Flash. You will learn how to import sounds and attach them to your movies. This section also explains the limitations of working with sound on the Web, enabling you to make educated decisions when you're adding sound to your Flash movies.


Chapter 10: Sound

Overview

Used well, sound creates an additional dimension to your Flash movies. Sound can add warmth, feeling, or humor. Sound can also be distracting if overdone, however, so use it wisely.

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

  • What are the basics of sound?

  • What are the different types of sounds?

  • How do you import sounds?

  • How do you add sounds to the Timeline?

  • How do you work with sound and buttons?

  • How do you modify and customize sounds?

  • How are sounds compressed?


What Are the Basics of Sound?

Flash does not have the capacity to create sounds. You import sound files into Flash and then edit the files from there. If you want to create sound files, basic software programs are available that need only a sound source and a microphone. This process is relatively simple, albeit unsophisticated. For purposes of this chapter, existing sound files are imported into Flash.

The goal is to achieve the best possible balance between sound quality and file size. Sound is the largest contributor to the size of an exported Flash movie. A sound file that is too large can prevent a movie from being displayed in the browser.

When digital sound is adapted from its analog form, it must be sampled. Sampling involves taking multiple snapshots, or samples, of a sound wave for a given amount of time. After several snapshots are collected, they are reassembled as a replication of the original sound. This process digitizes the sound. A higher number of snapshots results in better-quality sound.


The Different Types of Sound

Flash supports several file formats for importing sounds. Some sound formats are platform specific, and others have some compression applied to the original sound.

  • MP3 (Motion Picture Experts Group, level 3). The standard file type for sound on the Internet. Critics of this file type feel that quality can be sacrificed because MP3s have usually undergone some level of compression; however, you are still able to customize the resulting output.

  • WAVE. The native Windows sound file type. Wave files are typically not as efficient as MP3s, even after compression.

  • AIFF (Audio Interchange File Format). Developed by Apple Computer; the format of a great deal of professional music. QuickTime 4 or higher enables an AIFF file to be imported on a Windows machine.

  • AU. The file type commonly used when sounds are made on a Unix computer. These files have typically undergone heavy compression and may not be the best choice for use on the Web.

  • QuickTime. Enables compatibility with any file type. You can download it for free at http://www.apple.com/quicktime/download/.

Many sound files on the Web are produced in mono rather than stereo (meaning they are designed for just one channel instead than two), which is okay for use in Flash. Both speakers are activated by a mono file—they are simply playing the same sound, contrary to suspicions that only one speaker plays.


Importing Sounds

Imported sounds work much like symbols. Sounds are imported into the Library and can be used in a shared library. They are not automatically placed on the Stage, however.

  1. Import a sound file by selecting File, Import or using the shortcut Ctrl+R (z+R on the Mac).

    Click To expand

  2. Select All Sound Formats from the drop-down list.

  3. Browse for the file and click on Open.

Click To expand


Adding Sound to the Timeline

In this chapter, you gain a sense of how to add sound to the Timeline manually. ActionScript allows you to dynamically add sound to a movie.

You can think about sound in a Flash movie in two primary ways: streaming sound and sound events. Sound must be added to keyframes in the timeline regardless of the approach.

Streaming Sound

When sound is streamed, it is given an exact starting point on the Timeline and, often, an exact stopping point. After the initial keyframe, you may need to add frames to allow for the expanse of the sound file. Sewing is a helpful analogy: Think of streaming as stitching the sound file to the animation timeline.

This process has both benefits and limitations. Streaming does allow precise control over when the sound file begins to play—theoretically. Playback begins when just a few seconds of the sound file have been downloaded. If the sound file plays more quickly than the download, gaps occur. Also, sound takes precedence during downloading. The Flash Player tries to continue playing the sound file smoothly at the expense of the animation. If problems occur, the Flash Player drops frames in an attempt to keep up, the results of which can be a choppy movie. If the sound is called to play again, the download process starts over because the sound is not stored in the computer's memory.

Using a Sound Event

Sound used in the form of an event has more stand-alone properties than streaming sound. A sound event is inserted into a keyframe, but is not attached to the Timeline in the same manner as streaming sound is. A sound event is given a starting point in the movie, but from there it acts independently. For example, the sound continues to play in its entirety even if the movie has finished playing.

A sound event works much like a symbol. The sound is downloaded completely before beginning to play; however, the sound is downloaded only once and can be reused without greatly increasing its file size. Downloading the entire sound can affect the load time for the movie. Also, without being instructed otherwise, the sound can overlap. If a sound event is attached to a button, for example, and the user clicks the button five times in quick succession, five versions of the sound begin to play, and they play in their entirety. You can imagine what this situation might sound like.

Consider the following general approaches to the use of sound. If the sound is short and you are using it more than once (in a loop, for example), you should create a sound event. Good examples of event sounds are button noises that occur when you click a mouse button. Preloading event sounds is a good idea.

Consider streaming sound if the sound plays for a longer amount of time, if you need more precise control over its play-time, if you need for it to start at the beginning of the movie, or if it plays only once.

Try adding sound to the Timeline.

  1. Insert a new layer and name it. You should keep each sound on its own individual layer. All the sound layers are combined when the movie is exported.

    Click To expand

  2. Click the frame where you would like to add sound and insert a keyframe by pressing the F6 function key.

  3. Drag a sound file from the Library to the Stage.

    Click To expand

  4. Click on the initial keyframe on the sound layer.

  5. Take a look at the Properties Inspector, making sure that it has fully expanded.

  6. Select the name of your sound file from the Sound drop-down list.

  7. Select Stream from the Sync drop-down list. For now, leave Effect set to None and Loop set to 0.

The Sync drop-down list on the Properties Inspector contains Event, Start, Stop, and Stream options. Event and Stream refer to the sound event and streaming sound discussed earlier in this chapter.

  • The Start option is similar to the Event option in that the sound runs separately from the Timeline. Unlike the Event option, the Start option does not allow more than one instance of a sound to play until the preceding instance of the sound has finished playing completely. This feature is useful for a longer sound that takes a while to play because it prevents the sound from overlapping itself.

  • The Stop option is self-explanatory. You can attach the stop option to a keyframe to make the sound stop. This action stops only one sound file, however. If you want all sounds to stop, use the ActionScript command stopAllSounds.

  • Loop is located to the right of the Sync option. You can set your sound to loop as many as 999 times, which should be plenty. If you want your sound to continually loop, you can put a higher number in this box. Although you do not see additional copies of your sound file appear in the Timeline when you add a loop, you see them in the Edit Envelope, where you can customize the whole sound or each individual loop.


Working with Sound and Buttons

Flash allows sound to be added to a button directly in its own Timeline. Choose short sounds, appropriate for "clicks," to add to buttons.

  1. Identify a button from the Buttons folder in the Library.

  2. Right-click the button and select Edit. You can also select Edit from the Shortcut menu. This step displays that particular button's Timeline in symbol-editing mode.

    Click To expand

  3. Click the Insert Layer button to add a layer to the Timeline.

    Click To expand

  4. Decide to which state of the button you want to add sound. Sound is commonly added to the Down state so that the sound plays as the button is clicked.

  5. Insert a keyframe by pressing F6 on the new layer in the state (Down, for example) for which you want to add the sound.

  6. You can add the sound you want to play by dragging it to the Stage from the Library or by selecting the sound from the Sound drop-down list in the Properties Inspector. You will see it added to the Timeline.

    Click To expand

  7. While you're viewing the Properties Inspector, select Event as the synchronization option from the Sync drop-down list.

You can add sound to each state of the button and use different sounds. Each state needs a new keyframe to which sound can be added. You apply effects to the sound file by using the Effect drop-down list in the Properties Inspector. Effect options are covered in-depth in the next section.


Modifying and Customizing Sound

Flash has some nice features for editing sounds. The settings created for each sound individually are exported with the sound file. If you edit sounds individually and then change settings in the Export dialog box, the local changes, when exported, take precedence over the global settings. Likewise, if the settings are only adjusted in the Export dialog box, those settings apply to all sounds universally, reducing your influence on the output.

Click To expand

  • Left Channel. This option plays the sound file only in the left channel.

  • Right Channel. This option plays the sound file only in the right channel (as you might have guessed).

  • Fade Left to Right. Sound begins playing in the left channel and gradually gets softer in the left channel as it gets louder in the right channel. The sound concludes with full volume in the right channel and silence in the left channel.

  • Fade Right to Left. The same process occurs as in the preceding bullet, beginning in the right channel and ending in the left channel.

  • Fade In. Play begins with no volume and gradually increases to full sound.

  • Fade Out. Play begins at full volume and gradually increases to no volume.

  • Custom. This option allows you to create edit points in the sound and change volume levels in the right and left channels.

You see an Edit button beside the Effect drop-down list. The button opens the Edit Envelope window.

Let's take a closer look at the components of the Edit Envelope window.

  • The two panels represent the left channel and the right channel.

    Click To expand

  • The top of each panel represents full sound, and the bottom of each panel represents silence.

    Click To expand

Now that we've discussed the elements of the Edit Envelope and how they work, let's take a closer look at how to create custom effects.

  • As many as eight anchor squares can be on the volume line. You can move these anchor squares in any direction: up, down, right, or left.

    Click To expand

  • When a new anchor square is created in one channel, Flash automatically creates one in that same position on the other channel. You will need to make volume edits to the replica.

    Click To expand

Play around with these options and have some fun.


Compression

Undoubtedly, you have had the experience of making a photocopy of a copy rather than of the original. The more steps away from the original, the poorer the quality of your results. The same philosophy applies to sound. If at all possible, you should begin with an original file of high quality that has not been compressed. Let Flash do the compression for you.

Sound comprises the bulk of the exported file size, so you should not skip this process. A large sound file can have dramatically detrimental results on animation, particularly on older computers.

Compression options can be set for event sounds individually, with these sounds retaining their settings. Streaming sounds, however, are all exported as a single file, applying the highest setting individually used to the group.

  1. Open the Library by selecting Window, Library or pressing F11.

    Click To expand

    1. View the properties of an individual sound file by right-clicking on the file in the Library and selecting Properties.

    or

    2. Click the Information icon at the bottom of the Library.

Flash exports sound according to the selections made on the Compression drop-down list. If the default settings are left alone, compression occurs according to the global settings in the Publish Settings dialog box (found on the File menu). Using global settings is okay if all the sounds in your movie should be exported according to the same specifications.

Click To expand
Click To expand
Click To expand
Click To expand

  • Default. As discussed, this selection applies the global settings created in the Publish Settings window to all sounds.

  • ADPCM. ADPCM, or Adaptive Differential Pulse Code Modulation, is sometimes used as a method of speech compression. Use it for short sounds (like button clicks). It provides support for Flash 3.

The following list provides you with a guide to appropriate Kilohertz selections for sample rates.

  • 5KHz. The lowest possible setting for recognizable speech.

  • 11KHz. The lowest setting you should use for music; 25 percent of the standard rate for CDs.

  • 22KHz. A common choice for Web playback; 50 percent of the standard CD rate.

  • 44KHz. The standard audio rate for music CDs.

  • MP3. A commonly used compression standard that tends to give the best sound for the file size. Leave the Quality option set to Fast. Anything higher than that can slow things down and get the sound and animation out of sync.

  • Raw. As you might guess, the Raw option provides straight sound with no compression exports. Changing the Quality setting can have some effect on reducing the file size. The same sample rate rules apply as in ADPCM. This option is usually not practical because the file size is too big.

  • Speech. This option is a good choice for voice tracks. Voice can be recorded at a lower frequency than music soundtracks (11KHz or lower usually sounds good).

The information at the bottom of the Sound Properties window shows the current size of the file and the percentage of the original size remaining after compression. Alter these settings, clicking the Test button on the right side after each change, until you have the best sound quality at a desirable file size.


Troubleshooting

As you have probably discovered by now, sound is not always a precise science. Differences in computers and connection speeds, file size, and compression methods, for example, can cause problems with your movies.

Cutting silence from your sound files helps reduce file size. Silence is exported as actual sound, so it can add to the size of your file. Get rid of whatever you do not need.

If playback looks choppy, consider selecting Auto High from the Quality drop-down list on the HTML tab in the Publish Settings dialog box. The default High setting continually attempts to render the animation at the highest possible quality. The Auto High setting, however, plays the animation at high speed until a problem occurs and then lowers the picture quality in an attempt to keep everything synchronized. You should test the Auto High setting because some versions of Flash Players seem to have difficulty with it.

Another option is changing the frame play rate. The default is 12 frames per second. Keep in mind that a faster frame play rate results in faster play of those animation cells I mentioned earlier, so test for quality playback after dropping the frame rate.


Part IV: Finishing Touches

Chapter List

Chapter 11: Publishing in Flash
Chapter 12: Simple ActionScript

Part Overview

This section discusses how to publish your Flash movies and provides relevant HTML information necessary to provide context for the publishing process. ActionScript is introduced, providing foundation information for the Flash native scripting language.


Chapter 11: Publishing in Flash

Overview

Now that you have learned to create movies and animations with Flash MX, you should learn how to present these movies to your audience. Most Flash movies are published on the Internet on Web sites. Other movies are presented as just the movies themselves.

To learn how to publish these movies online, you will learn the answers to these questions:

  • What are the different formats in which Flash can publish?

  • Why are some formats preferred over others?

  • How do you create an HTML page?

  • How do HTML and Flash work together?


What Is Publishing?

Publishing files in Flash is the process of taking the movie you have created in the Flash MX workspace and creating a file that users can see. The files that Flash MX creates when you save your movie are viewable only in the Flash MX workspace. To create a file that is viewable by anyone with a Flash player (whether it's a stand-alone player, a Flash plug-in for your Web browser, or another program), you need to publish the file. Of course, before you publish anything, you should understand what you want.


Types of Web Formats

Flash supports a number of formats for publishing. The items in this list work in different contexts, so you need to know where your movie will be viewed before selecting a publishing format. The format choices are as follows:

  • .SWF. Files for a Flash Player.

  • .HTML. The format for a basic Web page viewed on the Internet. The Web page will contain the Flash movie.

  • .GIF. Static or animated GIF files, viewable in most browsers and imaging programs.

  • .JPEG. Static image files, viewable in most browsers and imaging programs.

  • .PNG. Another type of static image.

  • .MOV. Apple QuickTime movies.

  • .EXE. A self-contained Microsoft Windows program that includes a Flash player and the movie.

  • .HQX. A self-contained Apple Macintosh program that includes a Flash Player and the movie.

Each of these file types has its own benefits and limitations. To help explain how these file types work, they have been categorized into the following four groups:

  • Interactive movie. This category includes: SWF, MOV, EXE, and HQX files. With ActionScript, you can create interactive movies that respond to the user. SWF files require a Flash player or Flash plug-in, in order to be viewed. SWF files are used when the published movie is to be viewed on the Internet. QuickTime MOV files require the Apple QuickTime player or plug-in for your Web browser. The QuickTime player is easily downloaded. The stand-alone file types (EXE and HQX) run completely on their own. They have all the information needed to play the movie, including Flash Player. To further clarify, the EXE and HQX file types can run without an Internet connection; for example, if placed on a CD-ROM.

  • Non-interactive movie. These movies, including animated GIF files, play continuously without user interaction. Animated GIF files can be viewed in browsers without a plug-in or special player, but are usually very large.

  • Static picture. GIF, JPEG, and PNG files are created from only the first frame of the Flash movie or a keyframe with the label #Static. These pictures, although not interactive or dynamic, are useful in Web development. You can create an image to use as a background for a Web site in Flash, export the image as a GIF or JPEG file, and use it in the Web site's HTML files.

  • Helper file. HTML files created by Flash assist in the process of moving your movie to the Web. These files do not contain the movies themselves, but contain information telling a Web browser how to display the Flash files.


Publishing Options

Flash can publish in lots of different formats as seen in the preceding list. Because of the sheer number of possible combinations, I will show you how to cover the available options and then publish a movie using a few standard and useful options.

All the files types that Flash can publish to and the options for each file type are available by selecting File, Publish Settings or by pressing the shortcut Ctrl+Shift+F12 (z+Shift+F12 on the Mac). Now let's explore the Publish Settings dialog box.

Formats

The Formats tab allows the selection of each type of file you want to publish. Each type selected on the Formats tab results in a new tab for that particular file type. As you explore the different file types, the corresponding options are found on that coordinating tab. For example, if JPEG is selected on the Formats tab, a JPEG tab will appear.

Click To expand
Click To expand
Click To expand
Note

You can select more than one file format for publishing. In most cases, at least two, if not more, file types are used.

Flash Options

First, let's look at the options for published Flash movies. Select the Flash tab at the top of the Publish Settings dialog box. In most cases, using the default publish settings found on the Flash tab of the Publish Settings dialog box will create a suitable file for use on the Internet.

Click To expand

  • Version. This option selects the version of Flash Player needed to play back the movie. Each of the six versions of Flash Player has had new features added, and Flash MX can publish movies that are playable in all these formats. However, features that have been added to newer versions of Flash and Flash Player do not appear in movies published for older versions of the player. For example, most ActionScript does not work in versions earlier than Version 5.

Click To expand

  • Load Order. When a Flash movie is being downloaded over a slow connection, this option determines whether the movie should load from the bottom of the frame up (Bottom Up, default) or from the top of the frame down (Top Down).

Tip

Two schools of thought exist in regard to determining in which version to publish Flash movies. Some people believe that you should always use the newest technology and force users to upgrade Flash Player if necessary. This strategy may be an inconvenience to users, but it allows the developer to use the newest tools and features. The other option is to publish to the lowest-level player that implements the features you need in your movie. Users then most likely do not need to upgrade Flash Player, although the movie may not do everything that was intended.

The most useful template is Flash Only (a selection on the Template drop-down list on the HTML tab in Publish Settings), which tells the Web browser to open the Macromedia Flash Player 6 plug-in. With this template, if the browser cannot open the plug-in because it is not installed, the browser tries to install the plug-in.
Click To expand

  • Generate Size Report. This option creates a text file that details how much room in the SWF file is devoted to each frame and the elements in each frame. (You will look at a report file later in this chapter.)

Click To expand

  • Protect from Import. This option keeps users from being able to load the SWF file into Flash MX and treat it as their own work. One of the wonderful things about the Internet is that you have the ability to share considerable amounts of information. However, commercial entities that have an Internet presence do not necessarily want to share all their proprietary information. For example, a company that sells access to Flash games online would not want anyone to be able to download a Flash movie file that contains a popular game, open the file in Flash MX, add a few features, and sell it themselves. You probably should turn on this setting.

Click To expand

  • Omit Trace Actions. ActionScript uses the Trace() command, which prints a string of text. Omit Trace Actions disables this debugging feature.

Click To expand

  • Debugging Permitted. This option allows the debugging of ActionScript. When you are working on complex programming, the option to debug your work is invaluable.

  • Compress Movie. For Flash Version 6 files, select this check box to compress the SWF file so that it can be downloaded more quickly. Compressing the Flash movie is a movie is a good practice to follow when you are publishing to the Web. Compression allows a much smaller file to convey the same information. A smaller file is preferred because it can be downloaded more quickly than a larger file. This is important because you cannot predict the speed at which a user is connecting to the Internet. A large file combined with a slow connection speed means your movie is choppy at best in its display.

Click To expand

  • Password. If Debugging is enabled, you can set a password to keep people from peeking into how a Flash movie works. When this box is blank, no password is set.

  • JPEG Quality. This option sets the desired quality for compressing the bitmap images in a Flash movie. The trade-off is that higher-quality (or better-looking) pictures require more space, which creates a larger movie. Highly compressed images should create a smaller movie.

Click To expand

  • Audio Stream. The Set button allows options for audio streams. Refer to Chapter 10 for information on these settings.

  • Audio Event. The Set button allows options for audio events. Refer to Chapter 10 for information on these settings.

  • Override Sound Settings. When this box is checked, the settings for each individual sound are overridden using the audio options you set on this tab of the Publish Settings dialog box.

You have lots of possibilities for creating SWF files from Flash. One of the choices, located with Options on the Flash tab, is Generate size report. This selection creates a report to see how large each piece of a movie is. The report is a text file (.txt) found in the same folder to which the movie was published.

Let's look at a movie that was created specifically to be reported on. The movie used in this example consists of two scenes. The first scene consists of 25 frames that include:

Click To expand

  • A shape tween of a rectangle that becomes a circle

  • A shape tween of a circle that becomes a rectangle

Click To expand

The second scene is only 20 frames long and has the following items:

  • A motion tween of a rectangle moving from the bottom to the top of the frame

  • A motion tween of a rectangle moving from the left to the right

  • A motion tween of a circle moving from the upper-left corner to the lower-right corner of the frame

  • Text that stays in the center of the frame

This movie was published and a size report created. (I cover how to do this task in depth later in this chapter). The size report was placed in the same folder as the original FLA file. Looking at the report file in a text editor, you see a few items:

Click To expand

  • FrameFrame #. The first column shows the frame numbers for the movie, starting at one and continuing through each scene. Because this movie has two scenes, the first one 25 frames long and the second one 20 frames long, you end up with a total of 45 frames. All the scenes in the movie are put in order, and their frames are listed as though no break occurs between scenes. For example, Frame 26 is really the first frame in Scene 2.

Click To expand

  • Frame Bytes. The second column contains the amount of space in the file devoted to the contents of the frame. The first frame is 602 bytes, the second is 16 bytes, etc.

  • Total Bytes. The third column includes the total number of bytes needed for the movie up to that frame number. Frame 3 measures 634 bytes, which is the sum of Frame 1 (at 602 bytes), Frame 2 (16 bytes), and Frame 3 (16 bytes).

  • Page. The last column is an index of which scene and in which frame that scene is being reported on. The first frame in a scene is listed as Scene #, where # is the scene number.

The next section of the report is only three columns wide and includes:

Click To expand

The next section of the report shows a breakdown of the symbols used in the movie.

Click To expand

The next section of the report shows sounds in the movie. The column headers are in the file, even though no sounds are used in the movie. The columns show:

Click To expand

Finally, at the end of the report is information about all the text strings used in the movie. The information includes:

Click To expand

In a big movie—with credits, captions, or lots of other moving text—this section is big.

All the information in the size report is intended to help isolate areas of the movie that could be changed to make the final, published movie smaller. You should look at a frame or tween that is much larger than the other frames or tweens to determine whether you can do anything to simplify it. One big space-saver is to make sure that any shape used more than once is converted to a symbol and that instances of that symbol are used wherever possible.

HTML Options

If you have checked the HTML check box on the Formats tab of the Publish Settings dialog box, the HTML Options tab is available. This tab contains file settings that assist in putting your movie on the Web. (I have mentioned a few concepts here and will cover them more fully in the "HTML Basics" section later in this chapter.)

The first group of options noted affects the guiding rules that format your movie and the size of it.

Click To expand

  • Template. This option determines what is included in the HTML file that is created. Flash Only is the default selection and a good choice, as mentioned earlier. Several options are available here including QuickTime and Flash Only for Pocket PC.

  • Info. This option displays a dialog box that describes the selected template.

Click To expand

  • Dimensions. This option determines how the Web browser should display the movie.

    • Match Movie. Uses the dimensions of the movie you created.

    • Pixels. Uses the size entered in the Width and Height boxes to set the size of the movie in pixels. The movie is expanded or shrunk as necessary.

    • Percent. Determines the size of the movie as a percentage of the browser window. Enter the Width and Height as numbers between 1 and 100, where 100 fills the browser window completely.

Click To expand

  • Width and Height. If you have selected Dimensions either in pixels or percentage of the browser window, you enter the sizes here.

The next selections on the HTML tab affect how your movie plays to the view.

  • Playback. This option determines the use of any special characteristics included with the playback of the movie.

    Click To expand

    • Paused at Start. Prevents the movie from playing automatically. Instead, the movie loads and pauses on the first frame of the first scene.

    • Display Menu. Determines whether a menu should appear when a user right-clicks on your Flash movie. If this box is unchecked, a menu with only one item, About Macromedia Flash Player 6, appears.

    • Device Font. This option allows Flash to substitute system fonts found on all computers for any font the user may not have.

    • Loop. Loops the movie back to the beginning upon completion, playing over and over.

Click To expand

  • Quality. When the movie is played, you see a trade-off between the speed and the quality of the playback. In some instances, speed is more important than quality. Use this option to tell Flash how high the image quality should be. Low-quality movies play quickly, but do not look perfect. Best-quality movies may look fantastic, but might stall during playback as the computer is forced to do image processing.

The following items provide instructions for the browsers (Internet Explorer and Netscape, for example) as to how they should handle your movie.

Click To expand

  • Window Mode. This option applies to Microsoft Internet Explorer 4.0 browsers with the Flash ActiveX control.

    • Window. Plays the movie in its own browser window.

    • Opaque Windowless. Forces the movie to the foreground of the window it is in, hiding anything behind it.

    • Transparent Windowless. Applies to movies that have transparent areas. In this mode, the Web page's background is visible through any transparent area of the movie.

Click To expand

  • HTML Alignment. This option determines how the movie should be aligned on the Web page. The Default option centers the movie in the browser window. All other options place the movie on the appropriate side of the browser window, cropping the other sides if necessary.

Click To expand

  • Scale. This option determines how the movie is scaled in the player window if dimensions were specified. The Default (Show All) option keeps the original aspect ratio and shows the entire movie in the available space. The No Border option is similar to Show All, but crops the movie if necessary. The Exact Fit option distorts the movie to match the specified dimensions. No Scale prevents the movie from scaling.

Click To expand

  • Flash Alignment. The horizontal and vertical settings determine where the movie is placed in the player window.

  • Show Warning Messages. This option tells you when a problem occurs with any settings; for example, if two settings conflict.

GIF Options

GIF images are one of the two standards for Web graphics. (The other standard is JPEG images, which I cover in a bit.) GIF images have two useful features: the ability to create animated images and the ability to create images with transparent backgrounds. When a GIF file is published, you have a number of options to consider. View the GIF tab in the Publish Settings dialog box. I will discuss each selection and its corresponding options.

The selections in the first list affect the size of your movie and how it behaves when called to play.

Click To expand

  • Dimensions. When the Match Movie option is checked, the dimensions are set to that of the original movie. When the option is unchecked, you can manually enter the height and width in pixels.

  • Playback. This selection determines the state of the image. Its four options follow:

    • Static. This option creates a static image of the first frame of the first scene of the movie.

    • Loop Continuously. If Animated is selected, this choice is available. This option loops the movie.

    • Repeat. If Animated is selected, this choice is available. Rather than make the movie loop continuously, you fill in a number to repeat the movie a certain number of times.

    • Animated. This option creates an animated GIF that closely matches the Flash movie.

Caution

Animated GIF files get very large very quickly. The GIF equivalent of a simple, small Flash movie could be more than 100 times bigger than the original Flash movie. The movie created for the samples in this chapter is a 2KB SWF file. The GIF file measures 102KB.

The selections in the following list affect color and how it is handled in your Flash movie.

  • Options. The options of this selection affect the look of the image including its color.

    Click To expand

    • Optimize Colors. This option optimizes the colors used in the graphic file to shrink the file size.

    • Interlace. Interlaced images display parts of the image as they are downloaded. This option is good to use on larger image files because the user sees that the image is being downloaded, which provides feedback. Animated GIF files should not be interlaced.

    • Smooth. This option creates a higher-quality image at the expense of file size.

      Click To expand

    • Dither Solids. This option applies dithering to solid colors in the image. Dithering allows the image to appear to contain colors that are not on the image's palette.

    • Remove Gradients. When gradient fills are published to a GIF file, a loss of image quality occurs, and you see a dramatic increase in the file size. Removing the gradient replaces all gradient fills with a solid fill of the first color in the gradient.

Click To expand

  • Transparent. You can determine whether the background should be transparent. If you do not want to be able to see through it, Opaque should be your choice. Selecting Transparent from the drop-down list makes the background fully transparent. When you select Alpha, partial transparencies can be set. You can enter a number between 0 and 255, where 0 is transparent and 255 is opaque.

Click To expand

  • Dither. Select an option to decide how colors that are not on the color palette are handled. Selecting None turns off dithering, and any colors in the file not in the color palette are replaced with the closest match. Although this technique creates smaller files, these files usually look less than acceptable. Ordered dithering creates decent-looking colors with minimal increases in file size. Selecting Diffusion produces the largest, best-looking images.

Click To expand

  • Palette Type. Sets the palette type used in an image. The default option is the standard Web 216 palette, which works well in most situations by creating good-quality images with a standard 216-color palette. The Adaptive palette determines which colors are necessary for the image and creates an accurate palette and a larger GIF file. The Web Snap Adaptive palette matches colors to the Web 216 palette, creating smaller images than pure adaptive palettes do. Custom palettes can be used if you have created your own color palette in the ACT file format with another graphics program.

Click To expand

  • Max Colors. Set the maximum number of colors used in the Adaptive and Web Snap Adaptive palettes. A smaller number of colors creates smaller, lower-quality images.

  • Palette. If a custom palette type is selected, use this option to browse to the palette file you want to use.

JPEG Options

JPEG images are the other standard image for the Web. JPEGs are 24-bit colored images that use compression to ensure that the image files are small. You have only a few options to consider when you are publishing to a JPEG file.

Click To expand

  • Dimensions. As with GIF images, JPEG images can be set to match the size of the original movie or to a size entered in the Height and Width boxes.

  • Quality. As with all computer images, a trade-off exists between image quality and file size. Use the slider to select the desired balance between these two factors. The default value of 80 works well.

  • Progressive. Select this option to have the image displayed as it loads rather than appearing only after the entire image is downloaded. This option is similar to the interlacing option used with GIF images.

PNG Options

PNG images have many of the same options as GIF images. The selections found in this list affect the size and color of your movie.

Click To expand

  • Dimensions. When the Match Movie option is checked, the dimensions are set to that of the original movie. When the option is unchecked, you can enter the height and width in pixels.

  • Bit Depth. The bit depth is the number of bits per pixel used in the image. The bit depth relates to the number of colors available for use in the palette. The higher the bit depth, the bigger the published file. A bit depth of 8 bit creates 256 color images, while 24-bit bit depth allows thousands of colors. Selecting a bit depth of 24–bit with Alpha creates images that can contain thousands of colors and transparency. The options of Dither and Palette Type are available only in images with a bit depth of 8 bits.

  • Options. The choices of this selection affect the look of the image, including its color.

    Click To expand

    • Optimize Colors. Optimizing the colors used in the graphic file shrinks the file size.

    • Interlace. Interlaced images display parts of the image as they are downloaded. This option is good to use on larger image files because the user sees that the image is being downloaded, providing feedback.

    • Smooth. Smoothing an image creates a higher-quality image, at the expense of file size.

      Click To expand

    • Dither Solids. This option applies dithering to solid colors in the image. Dithering allows the image to appear to contain colors that are not in the image's palette.

    • Remove Gradients. When gradient fills are published to a PNG file, you see a loss of image quality and a dramatic increase in file size. Removing the gradient replaces all gradient fills with a solid fill of the first color in the gradient.

Click To expand

  • Dither. Select an option to decide how colors that are not on the color palette are handled. Selecting None turns off dithering, and any colors in the file not on the color palette are replaced with the closest match. Although this option creates smaller files, they usually look less than acceptable. Ordered dithering creates decent-looking colors with minimal file size increases. Selecting Diffusion produces the largest, best-looking images.

Click To expand

  • Palette Type. This option sets the type of palette used in the image. The default option is the standard Web 216 palette, which works well in most situations by creating good-quality images with a standard 216-color palette. The Adaptive palette determines which colors are necessary for the image and creates an accurate palette and a larger file. The Web Snap Adaptive palette matches colors to the Web 216 palette, creating smaller images than pure adaptive palettes. Custom palettes can be used if you have created your own color palette in the ACT file format with another graphics program.

Click To expand

  • Max Colors. This option sets the maximum number of colors used in Adaptive and Web Snap Adaptive palettes. A smaller number of colors creates smaller, lower-quality images.

  • Palette. If a custom palette type is selected, use this option to browse to the palette file you want to use.

  • Filter Options. Filtering analyzes the image and attempts to compress the image. Each filtering option applies a different method to compress the image. Play with the various options to see which one works best for a particular image.

QuickTime Options

QuickTime is a movie format created by Macintosh. QuickTime movies require either a QuickTime player or browser plug-in installed on the computer. When Flash publishes to a QuickTime movie, it creates a QuickTime track that contains the entire movie. If the Flash movie contains a QuickTime movie (as an imported symbol, for example), each included QuickTime movie is placed on its own track. Because this book is about Flash, and not about QuickTime, I only highlight its options here. You have a number of possibilities for publishing to a QuickTime movie:

Click To expand

  • Dimensions. Just like all the other file formats, the dimensions of the published movie can be set to match the original movie or can be set to any size you want.

Click To expand

  • Alpha. This alpha setting applies to the Flash track that is created in the QuickTime movie. If several tracks are in the movie, this setting affects how the Flash movie track interacts with them. If other tracks are in the movie, the Auto option makes the Flash track transparent if it is on top of any other tracks; if the Flash track is the only track in the movie, it is opaque. The Copy option makes the Flash track opaque. Alpha Transparent makes the Flash track transparent so that other tracks can be seen through it.

Click To expand

  • Layer. This option controls whether the Flash track in the QuickTime movie is on top of or underneath other tracks in the movie. The Top option places the Flash track on top of other tracks, and Bottom places it under the other tracks in the movie. The Auto option places the Flash track in relation to any QuickTime movie tracks in the movie. If objects in the Flash movie are on top of the QuickTime movie, the Flash track is placed on top; otherwise, the track is placed behind the other tracks.

Click To expand

  • Streaming Sound/Use QuickTime Compression. This check box and the Settings button used with it allow Flash to have QuickTime handle all sounds in the movie. The Settings button opens a dialog box that includes the standard QuickTime sound settings.

  • Controller. This setting determines the QuickTime controller type is used by the published movie: None, Standard, or QuickTime VR.

  • Playback. This selection determines the use of any special characteristics included with the playback of the movie. Playback has three options:

    Click To expand

    • Loop. Check this box to have the movie loop.

    • Paused at Start. If this option is checked, the movie pauses at the first frame.

    • Play Every Frame. When this option is enabled, it plays every single frame in the movie rather than the usual practice of skipping frames when necessary to maintain the pace. With this option enabled, sound does not play.

  • File/Flatten. Checking the Flatten option copies any external movie objects into the QuickTime movie rather than relying on links.

Note

To publish a Flash movie to QuickTime format, you may need to set the version on the Flash options tab to Flash Player 5 or earlier. If you try to publish a movie targeted to Flash Player 6 as a QuickTime movie, you will probably get the error message, "The installed version of QuickTime does not have a handler for this type of Macromedia Flash movie."

Publish a Movie

Now that I have covered just about all the options you can choose, you can export a movie.

Prepare a movie to be published.

  1. Either open an existing Flash movie or create a new movie. Add any objects, symbols, text, or tweens you want.

  2. Select File, Publish Settings to open the dialog box or press Ctrl+Shift+F12 (z+Shift_F12 on the Mac).

    Click To expand

  3. On the Formats tab, make sure that both the Flash and HTML boxes are checked.

Now make your selections on the Flash tab.

  1. Click on the Flash tab.

    Click To expand

  2. Change the settings if you want. Some recommendations are to leave Flash Player as Version 6 and to enable compression.

Make your HTML selections on the HTML tab.

  1. Click on the HTML tab.

    Click To expand

  2. Set up the HTML settings as necessary.

Publish your movie.

  1. When all the settings are properly configured, click on Publish.

  2. Wait until Flash finishes publishing the movie and then click OK.

  3. In Windows Explorer, find the folder in which the original Flash FLA file was saved.

  4. Double-click the HTML file to open it in your favorite Web browser.

If you need to publish to the Web, the rest of the publishing instructions vary depending on the type of Web server you are publishing to. You probably need to use an FTP client and copy both the HTML and the SWF files to the server.


HTML Basics

So far in this chapter, I have mentioned HTML files quite a bit, but I have yet to discuss what they are or how they work. HTML is short for HyperText Markup Language, the language of the Internet. All Web browsers understand a flavor of HTML, although each browser behaves differently. Microsoft Internet Explorer and Netscape Navigator interpret the same tag and possibly display slightly different results. After I cover the basics, look at one of the files that Flash created for you when you published a movie.

Note

HTML is a subject for an entire book. This chapter touches on a few basic topics. For a more in-depth discussion, check out Learn HTML in a Weekend, 3rd Edition, by Steve Callihan, or Hands-On HTML, by Greg Robertson and Simply Written, Inc. You can also check the numerous online resources for learning HTML including:

  • http://www.w3.org (The World Wide Web Consortium)

  • http://hotwired.lycos.com/webmonkey/

  • http://webreference.com/html/

  • http://www.htmlgoodies.com/

Again, there are many, many Internet resources out there, check them out and see which you prefer.

HTML Structure

HTML files are text files that have a basic structure. You can open HTML files in your favorite text editor (such as Notepad) or in special HTML editors, like Macromedia's Dreamweaver. The structure is referred to as a tagged structure. The file contains text that can be displayed, and this text is surrounded by tags that tell a Web browser how to display the text.

<HTML>

The HTML tag is used to tell the Web browser that this is indeed an HTML file. All HTML files should start with an opening tag

<HTML>

and end with a closing tag

</HTML>

Let's look at these two tags for a moment. The angle brackets, < and >, designate tags. The forward slash (/) indicates a closing tag. Tags in HTML should be matched, which means that you should have both an opening and closing tag. Get into the habit of always closing HTML tags (you will soon learn the few that do not get closed). If the wrong tag is left open big problems can result in some browsers and that open tag can be hard to find in a long page of code. It is generally considered bad form.

<HEAD>

The header block, denoted by the <HEAD> tag, can contain such information as the document's title, any scripting, and Meta information (including keywords and description) that can be used by search engines.

<TITLE>

The contents of the title tag appear in the Web browser's title bar. Again, this tag is located within the <HEAD> tag.

<BODY>

The body section follows the header section and contains the bulk of the information in the HTML file. As previously mentioned, HTML is vast enough to fill its own book with information and several books, including those recommended, exist as resources for you. Text in the body tags can be formatted much like text can be formatted in a word processing program. Do some research on Cascading Style Sheets to learn the preferred methods.

<H1>, <H2>, <H3>, <H4>, <H5>, and <H6>

Heading tags display the text contained inside of them as section headers. <H1> tags contain large text, and each subsequent numbered header has smaller text.

<P>

Paragraph blocks contain text that should be grouped together and followed by a line break. Because the text in an HTML file is displayed continuously, except when line breaks are intentionally placed, this tag is helpful.

<BR>

The line break tag is one of the few tags that are not paired. There is no closing </BR> tag. <BR> forces the end of a line.

<A>

Anchor tags are some of the most useful tags in HTML. They create hyperlinks, or links, between pages. Anchor tags can contain several attributes. The most important attribute for an anchor tag is the HREF, or the URL that the link connects to. This sample anchor tag takes users to http://www.premier-pressbooks.com when they click on the words Premier Press Web Site.

<A HREF="http://www.premierpressbooks.com">Premier Press
Web Site</A>

<IMG>

This tag inserts an image and takes several attributes:

  • SRC. The URL of the graphic file

  • ALT. A text string that is displayed either when the image cannot be loaded or when the user hovers the mouse cursor over the image for a moment

  • WIDTH. The width of the image in pixels

  • HEIGHT. The height of the image in pixels

HTML in Practice

Now that you've been introduced to some of the commonly used HTML tags, let's put them together in a simple Web page and view the resulting output.

Click To expand

This file, when opened in a Web browser, creates the following Web page.

The status bar at the bottom of the browser window shows the URL that the link Flash! directs the user to.

Click To expand

These tags are not all of the HTML tags, by any stretch of the imagination. There are many more tags used in HTML, along with numerous options for some of the tags in the list. The tags I have covered will at least get you started.

Tip

One of the simplest ways to learn HTML is to use a feature that exists in most Web browsers: the ability to view the source code for the Web pages you visit. In Microsoft Internet Explorer, you can select Source from the View menu to see the source code for the current page or right-click on the page and choose View Source from the context menu. In Netscape, select Page Source from the View menu. Look at the code, see what the results of some of the tags are, and experiment.


Chapter 12: Simple ActionScript

Overview

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

  • What is ActionScript?

  • What are the similarities and differences between ActionScript and JavaScript?

  • What are the basic concepts of programming?

  • What are the building blocks of ActionScript and how are they used?

  • How do you use Flash's Action panel?

  • How do you construct a simple script?

Thus far in this book, you have created movies with Flash that start at the beginning and play through to the end. These movies, although interesting, are the same the first time and the hundredth time you play them. This chapter helps you learn how to create interactive movies, or movies that respond to input from the person who is watching them. Of course, this concept entails the use of a scripting language. Yes, you have to learn some simple programming. At first, it may seem difficult, but programming gets easier with practice. You may need to read this chapter a few times and refer to it when you are creating interactive content.


What Is ActionScript?

Flash allows you to create simple animations or complex interactive games. The choice is up to you. However, to talk to Flash and tell it how you want it to respond to the user requires speaking to Flash in a language it understands. The language that Flash understands and can work with is ActionScript. The ActionScript scripting language allows the programmer to control objects and movies and to get Flash to respond to the user.

Before I continue, I should cover a few basic elements of programming. Most programming consists of creating simple mathematical equations. Programming languages, like ActionScript, allow a program to be broken into small pieces called functions. Breaking up the program into smaller parts provides several benefits. For example, the code can be organized into logical pieces. If the program will perform several different actions and operations, the manner to carry out each of those processes can be placed in its own function. Also, code that is used multiple times can be placed in a function. Programmers do this so that they can easily use a long process with minimal work on their behalf. Any changes that must be done to the logic in a frequently used piece of code, therefore, only need to be updated once if a problem appears.

Another advantage of using functions is that they can be given information to use when they are called. The information passed to a function is an argument. Arguments can be extremely helpful. For example, one of the functions of most calculators is to compute the squares of numbers, such as "two squared equals four." The calculator program probably has a Square() function that takes a number as an argument. The Square function then multiplies the number by itself and gives the resulting number as a return value. Return values are another benefit of functions. A function can calculate an answer based on input and give the answer back through a return value.

Keeping these concepts in mind, let's look at a few building blocks of ActionScript.


ActionScript and JavaScript - Similarities and Differences

Team LiB

ActionScript and JavaScript—Similarities and Differences

ActionScript is loosely based on JavaScript. If you have used JavaScript in Web site development, you should be able to learn ActionScript relatively quickly. If you are not comfortable with JavaScript, you can skip this section, or you can refer to it if you also want to learn to use JavaScript. The syntax for ActionScript is almost identical to that of JavaScript, which can make reading and understanding code much easier. However, JavaScript supports a number of features that ActionScript does not, including the following:

  • The Document, Window, and Anchor objects and other objects specific to Web browsers

  • Exception handling through the use of try, throw, and catch statements

  • The Function constructor

A number of items behave differently in ActionScript when compared with their JavaScript counterparts. These differences include the following:

  • The toString method in ActionScript works as toString in JavaScript except when the variable being converted is undefined. The ActionScript version of toString returns an empty string, not the string undefined. This was implemented to provide backward compatibility with scripting in Flash 4.

  • When undefined is used in numerical calculations and evaluations in ActionScript, 0 is the result rather than the JavaScript result of NaN (Not a Number).

  • When a string in ActionScript is used as a Boolean data type, the string is converted to a number and the resulting number is then converted to a Boolean value, where 0 returns false and everything else is true.

This description of differences between JavaScript and ActionScript is not comprehensive, but it should help as a starting point.


Basic Programming Concepts

Programming is a complex process that hopefully results in software (or Flash movies) that acts the way you intended it to act. A few universal concepts apply in programming, no matter what language you use. You'll learn about some of them in this section.

All programming languages have a structure that programmers need to follow so the computer understands what the programmer wants it to do. Remember that computers are not smart and that they can understand only certain instructions given to them in the binary language (using ones and zeros). Programming languages provide a simple way to give the computer instructions. They also are human readable, which means that program code can be read and understood by a person who can read the language in which the program was written. ActionScript's structure is relatively simple: You can associate scripts in ActionScript with different elements in the movie, including each keyframe and each instance of a button symbol.

Like any language, ActionScript has rules. In English, a sentence should contain at least a subject and a verb and end with the appropriate punctuation mark. Spoken languages have lots of rules for their use and often have many exceptions. Programming languages have fewer rules, but few (if any) exceptions. As in English, the meaning of a statement may change depending on the order of its words, the punctuation used, and the words themselves.

ActionScript is similar in this regard. Most sentences in English end with a period. Statements in ActionScript end with a semicolon. In English, sentences are grouped together into paragraphs; in ActionScript, statements are grouped together into functions. In English, paragraphs are delimited by a return and an indent; ActionScript uses curly braces, { and }, to hold the contents of a function. These important points are summarized with this bulleted list.

  • ActionScript statements end with a semicolon.

  • ActionScript statements are grouped together in functions.

  • ActionScript uses curly braces to hold the contents of a function.

Functions can use certain information to determine what the function should do. Information used by a function in this manner is a parameter. Parameters in ActionScript are contained in parentheses.

  • Parameters are pieces of information passed to a function.

  • Parameters are passed to functions in parentheses.

In English, the meaning of a word may depend on whether it is capitalized. ActionScript cares about the case of words in only a few instances, when it is working with a short list of words reserved for use by ActionScript. You should use these special, reserved words, or keywords, in the correct case, which is all lowercase. Other words—for example, variable names—do not depend on case, so, as far as ActionScript is concerned, BoB and bob are the same. Working with a program is much simpler, of course, if you use the same case consistently throughout the program.

  • ActionScript is typically not case-sensitive.

  • Keywords should always be used in the correct case—lowercase.

The period, or dot, has special meaning in ActionScript. When you have an object, you can access the properties of that object by using the period. (I will cover this concept later in this chapter.)

One other important item to consider is the comment. A comment is a note to the programmer (written by a programmer) that ActionScript does not need to know about. Comments are preceded by two forward slashes (//) and apply until the end of the line. Anything inside a comment is ignored by Flash and ActionScript and exists only to explain to a programmer what is happening.

ACTIONSCRIPT KEYWORDS

Only 20 keywords are used in ActionScript. Some you rarely use, although others may appear quite often in your code. Keywords cannot be used as variable names or as function names. The keywords are shown in this list:

  • break

  • case

  • continue

  • default

  • delete

  • else

  • for

  • function

  • if

  • in

  • instanceof

  • new

  • return

  • switch

  • this

  • typeof

  • var

  • void

  • while

  • with


ActionScript and the Actions Panel

In Flash MX, just about everything you can create has properties that you can access through various panels. ActionScript is no different. The Actions panel can be opened by selecting Window, Actions or by pressing the keyboard shortcut F9. This panel, which resides under the Stage work area, is complex. Let's look at how this panel works and then cover some of the basic concepts of ActionScript.

The Actions panel has two different views: Normal mode and Expert mode. If you need to change from one mode to the other, click on the shortcut menu in the top right corner of the panel. Normal mode simplifies scripting, and Expert mode allows for more flexibility (you can type code directly in Expert mode). When you open the Actions panel, it opens in the last mode that was selected. In Normal mode, you notice lots of buttons and areas in the panel:

Click To expand

  • Navigation List. This list is the first item found on the Actions panel. By using this list of scripts in the movie, you can fill the rest of the Actions panel with information about a specific script. Scripts are organized by layer and by frame number.

  • Script Pin. Pin the selected script so that it is visible no matter what you select in the Stage.

Click To expand

  • Action Shortcut Menu. This button opens the menu for the Actions panel, which contains a number of options specific to working with ActionScript.

  • Script Area. This is the area where the code generated is displayed.

The items in the list above help explain the layout of the Action panel. Now let's take a look at the Actions Toolbox. You will likely use this quite a bit as you start out in Action Script.

  • Actions Toolbox. This hierarchical list contains the different tools in ActionScript that can be used in your movie. Clicking on a heading expands the heading and shows the items listed under that heading. Double-clicking on an item adds it to the script.

    Click To expand

    • An open heading is shown as an open book. Clicking on an open heading closes it.

    • An item is shown with a circle and arrow. Clicking on an item selects it and shows its description. Double-clicking on an item adds it to your script.

    • A closed heading appears as a closed book. Clicking on a closed heading opens the heading.

The list below highlights many of the resources found in the Actions panel.

Click To expand

  • Description of the selected tool. When a tool from the Actions Toolbox is selected, a short description is listed here.

  • Reference. Open the Reference panel by clicking on this button (or selecting Window, Reference). The Reference panel describes the selected tool in the Actions Toolbox.

  • Hide the Description. This button either shows or hides the description of the item selected in the Actions Toolbox.

Click To expand

  • Options. This area shows the available options for a script element or tool you add to your script from the Actions Toolbox.

  • Script. This area lists the script. Only a short portion of the script is visible, but the area can be navigated using the scroll bars on the far right side.

Click To expand

  • Add Script Item. If you know exactly what you want to add to the script, select it from the multi-level menu that opens when you click on this button. The menu hierarchy matches that of the Actions Toolbox.

The next list of options identifies tools to assist with editing and programming.

Click To expand

  • Delete. Click on this button to delete the item selected in the script area.

  • Find. Find a string in the Script area using the standard Find dialog box.

  • Find and Replace. Replace a string in the Script area with another string by using the standard find-and-replace dialog box.

Click To expand

  • Insert Target Path. Some script elements require a target path as an option. This button opens the Insert Target Path dialog box so that you can easily create and insert these paths as parameters for functions.

  • Debug Options Menu. This menu contains a number of options useful in debugging ActionScript.

  • View Options. This menu allows you to switch from Normal mode to Expert mode. You can also choose to have Flash show the line numbers for the lines in the script.

Click To expand

  • Move Line Down. Clicking on this button moves down the line that is selected in the script area, under the next line in the script.

  • Move Line Up. Similar to the Move Line Down button, this button moves up the selected line of script, above the preceding line.

  • Current Line. This area shows the line number of the selected line of script and the contents of the line.

That is a long list of things you can work with when writing scripts.

Earlier, I mentioned Expert mode for the Actions panel. In Expert mode, most tools in the Actions panel are the same, with the following exceptions.

Click To expand

  • Check Syntax. This button reads through the script and checks for syntactical errors, like missing parentheses or semicolons. This feature finds only problems that the scripting engine objects to, not logic errors. If you make a logic mistake, you must find it yourself, through the process of debugging.

Click To expand

  • Auto Format. In Expert mode, you type all the code. This button asks Flash to reformat the code in a standard format that is easy to read.

  • Show Code Hint. If you have no idea what to type next (for example, which arguments are needed by a function), click on this button. If Flash thinks that it can help, it uses the current cursor position in the Code Editor and shows a hint. Within the hint, it also bolds the item it is expecting.

Click To expand

  • Code Editor. Rather than select all code elements from a list and fill in options, Expert mode allows you to do everything yourself. For experienced developers, or those who already know a programming language, this feature is great. Of course, you are responsible for typos, but you have greater control and flexibility. Type the script in this text editor.

  • Current Position. This option shows which line number and column the cursor is on in the Code Editor, as well as the total number of lines of code in the script.


The Building Blocks

To become better acquainted with ActionScript and how it works as a language, you need to spend some time learning vocabulary. The next few sections focus on the different components of ActionScript.

Variables and Constants

Almost all programming languages allow the use of variables and constants. Constants are a simple way to keep track of things that do not change while the program (or script) is running. If you think about math, constants are things like pi (a number that always is 3.14…) or the number of sides in a triangle. These elements are known quantities. Variables are elements that may change (or vary) during the time a program runs. For example, when you open your Web browser and type the URL of a site you want to visit, the string you type in is stored in a variable and used by the program. Later, you might type another address, and that value is stored in the same variable.

Let's look at how Flash lets you use variables.

Variable Types

Flash uses three types of variables:

  • Numbers. Numbers are either integers or decimal numbers. Some examples are 12, 10.5, and 9999.99.

  • Strings. Strings are text strings (or phrases), like "Flash is cool." Most feedback to the user occurs by using strings.

  • Objects. Objects are a special group of variables, made up of other properties and methods. Properties are variables that help describe the object, and methods are functions that the object can perform or that other elements can do to the object. You refer to objects in two different ways. Object definitions describe what is in an object, and some instances of an object follow the definition, but contain information specific to a certain instance of it. For example, say you create an online store with a catalog. One object you might need is a Product, which contains the information for an item sold on the site. The object might contain several properties, including an SKU number, a name, a description, a price, and the number available. One method might be UpdatePrice, which changes the price of the instance of the Product you are working with when it goes on sale. One instance of a Product might be this book, in which the SKU is the ISBN number, the name is the title, and the description is "The best Flash MX book you can get," for example. Objects can be a tricky concept. However, by using objects in scripting (which you do later in this chapter), the concept becomes clearer.

Fortunately, ActionScript makes things easy by keeping track of a variable's type for you. Most of the time, you do not need to worry about the variable type. On the rare occasion that you do need to ensure a variable is of a certain type, you can use one of two special functions: Number and String. Number takes a variable and returns a number. String takes a variable and returns a string. You will use these functions later in this chapter, also.

Variable Scope

Scope, which is important when you are working with variables, refers to where the variable exists and when it can be used. Flash uses three possible scopes: Local, Timeline, and Global.

Local variables are available in the same part of the program in which they are declared. Local variables exist between curly braces. Often, a variable is needed in only a specific function. Because variables consume memory when they are used, it makes sense that variables needed in only one area of code are created in only that area of code.

Timeline variables can be accessed from anywhere in the Timeline, allowing a simple way to access variables that are used often. Keep in mind, however, that this convenience comes at the cost of memory usage.

Global variables can be used from anywhere in the script. This variable type is handy for information you need available from every section of the script, but can cause problems, as you will see later in this chapter.

Using Variables

Now, let's try your hand at using variables.

Note

The code samples in this chapter serve to familiarize you with ActionScript and scripting in Flash. Most of these examples do not do much in the way of functionality, but they help you understand some interesting and important concepts.

First, create (or declare) a variable in the first keyframe of Layer 1 in a new movie. You then set the value of the variable and change the value.

  1. Create a new Flash file.

  2. Click on the Stage.

    Click To expand

  3. Open the Actions panel by selecting Window, Actions.

  4. In the Actions Toolbox, click Actions, Variables, and var (for variable). Add var to the script by double-clicking on it. The Script and the Options area should now reflect the fact that you have added a var to the script.

Next, name and configure your variable.

  1. In the Variables box in the Options area, type a name for the variable. Variable names must be one word. Of course, the word can be a long concatenation of several words, as long as it has no spaces. You can declare several variables at one time by separating them with commas. If the script area highlights the line of code in red, a problem has occurred. In this case, you either have a space in the variable name or have used one of a dozen reserved words. (Reserved words are words that have a special meaning in ActionScript.)

    Click To expand
    Click To expand

  2. In the Actions Toolbox, click Actions, Variables, set variable. Double-click to add the set variable line to the script.

  3. In the Options area, type in the Variable box with the name of the variable you created.

  4. Type a value in the Value box.

  5. If you want the variable to be treated as a string, leave the Expression box next to Value unchecked. Check the Expression box next to Value if you want ActionScript to treat the value as a number or expression that is calculated.

Congratulations! You have now written some code. The code does not do anything useful yet, of course, but you have made a start.

Most people find that objects are a confusing concept the first time around. An often-used example of an object is a student. The Student object often contains a number of items, including a student number (a Social Security number, for example), last name, first name, address, and a bunch of other characteristics. Looking at a limited example can keep things simple, so this example contains only the student number, name, and address.

Student = {StudentNumber:12345, FirstName:'Bob',
LastName:'Jones',
Address:'123 Main St.'};

The curly braces in this example indicate that Student is an object and that it contains the information between the braces. Commas separate the different properties of the object, and the colons indicate that the value that follows is the desired value for the property. The single quotes indicate that the value is a string, unlike the number value following StudentNumber.

What Are Conditionals?

Conditionals allow a script to behave differently in different situations. There are two types of conditional statements: If statements and Switch statements.

Basic If Statements

The if statement is the simplest conditional statement to understand. The format is

if (x == 5)
{
   y = 10;
}

Examining this code, you see a few interesting points. First, the structure of an if statement is the word if followed by a conditional statement in parentheses. If the statement in parentheses (if x is equal to five) is true, then the code between the curly braces runs. If not, the code in the curly braces is skipped. Notice the double equal signs in the condition. That's not a typo. In ActionScript, a single equal sign sets the variable on the left to the value on the right. A double equal sign is used for comparing two values. Triple equal signs (===) comprise a strict equality comparison in which the data types of the variables being compared are not converted to a similar data type.

The legal comparison operators are the following:

Comparison Operator | Symbol
Equal to | ==
Strict equality | ===
Greater than | >
Less than | <
Not equal to | !=
Greater than or equal to | >=
Less than or equal to | <=
Note

With an if statement, many programmers would argue that the curly braces are not needed for a 1-line if statement. Technically, in the preceding case, you could leave out the braces. However, bugs are often created by programmers who leave out the braces and then return to add more lines to the body of the if statement. In good programming practice, you include the braces whether they are needed or not.

The if…else Statement

A more complex if statement is the if…else statement.

if (x == 5)
{
   y = 10;
}
else
{
   y = 20;
}

In this statement, if x equals 5, then y is set to 10. If x is not equal to 5, then y is set to 20. This code example is a simple extension of the if statement.

Switches

Switches are a slightly more complex type of conditional statement that allows for numerous possible cases. A switch tests a value against several cases and runs the code for a case if the case and the value are the same. A new reserved word, break, comes out of the switch statement. Here is some sample code you can analyze.

var theVariable;
var x;
theVariable = Number(InputTextField.text);
switch (theVariable){
   case 1:
      x = 1;
      break;
   case 10:
      x = 5;
   case 11:
      x = 10;
      break;
   default:
      x = 0;
      break;
}

This example is a little complex, so take it slowly. An assumption made in this example is that a text box is set up to be an input field named InputTextField. The text in InputTextField is converted to a number and stored in theVariable. The switch statement then tests the value of theVariable against each of the cases listed. If theVariable equals 1, x is set to 1 and the break jumps you out of the switch statement. If theVariable equals 10, x is set to 5. Then you continue through case 11, set x to 10, and finally break out of the switch statement because no break statement occurs between case 10 and case 11. If theVariable equals 11, x is set to 10. If theVariable does not match any other cases, the default case is run, setting x to 0.

Caution

Many bugs are created with switch statements when programmers leave out a break statement. You should always double-check switch statements to avoid this type of omission.

Looping Constructs

Loops allow for the repetition of a task numerous times. ActionScript uses several types of loops.

  • for

  • for…in

  • while

  • do…while

Let's look at examples of each one.

For Loops

For loops are a great way to perform a task a set number of times. For loops set up a counter and iterate (or add one to) the counter each time through the loop. I introduce two new concepts in the following example: the ++ operator, which adds 1 to the variable that precedes it, and the trace function, which prints the string that is passed as an argument in the Output panel.

for(i = 0; i < 10; i++)
{
   trace("the counter = " + i);
}

This example sets i to zero, runs 10 times (starting with zero and running until nine for a total of 10 times), increasing the value of i by one each time as long as i is less than 10, and creates the following output.

counter = 0
counter = 1
counter = 2
counter = 3
counter = 4
counter = 5
counter = 6
counter = 7
counter = 8
counter = 9
Note

Similar to the ++ operator, the -- operator decreases by 1 the variable that precedes it.

For…in Loops

For…in loops are fantastic for working with objects. You can iterate through each property in an object and manipulate the property. In the following example, you create an object named CatalogItem and print each of the properties and their values.

CatalogItem = { SKU:'12345', name:'Book', price:19.95 };
trace("A CatalogItem has the following properties: ");
for (property in CatalogItem)
{
   trace(property + "  :  " + CatalogItem[property]);
}

This code produces the following output.

A CatalogItem has the following properties:
SKU  :  12345
name  :  Book
price  :  19.95

While Loops

While loops are another tool for repetitive tasks. These loops use a test condition and run as long as the condition is true.

Click To expand
var whileTest = 0;
while (whileTest < 5)

{
trace ("whileTest = " + whileTest);
   whileTest++;
}

This example results in the following output.

whileTest = 0
whileTest = 1
whileTest = 2
whileTest = 3
whileTest = 4

While loops do not run if the condition is false the first time it is hit, which is different from do…while loops, which always run at least once.

Do…while Loops

Do…while loops are similar to While loops, but always run through once before checking the conditional statement. Look at the following example and the resulting output.

Click To expand
var test1 = 0;
do {
   trace("test1 = " + test1);
   test1++;
}while (test1<3);

var test2 = 0;
do {
   trace("test2 =" + test2);
}while (test1>3);

test1 = 0
test1 = 1
test1 = 2
test2 = 0

Notice that the second do…while loop ran once, even though the condition statement is false.

Caution

When using any type of loop, you can create an infinite loop, or a loop that never ends because of a mistake in either the end condition or the iterator. Infinite loops create all sorts of problems, including crashing Flash. Be careful to double-check to ensure that at some point, no matter what happens, the loop ends.

Arrays

Arrays are special types of variables that contain several values. Arrays are useful in a number of circumstances. A new operator associated with arrays, the array access operator, is a pair of brackets ([]). Arrays contain a set number of elements, and each element is accessed via its index. Indices are numbers, starting at 0. You can create an array in several ways, and the selection of the method chosen depends on circumstances. The following example creates two arrays and then uses trace to print the contents of each one. As you may have guessed by now, trace is useful for displaying what is being called by your function.

myArray = new Array(3);
myArray[0] = "Hello";
myArray[1] = "There";
myArray[2] = 10;
for (I=0; I < myArray.length; i++)   {
   trace("myArray["  +  i  + "]  =  " + myArray[i]);
}
myArray2 = new Array(1, 2, 3, 4, 5, "done");
for (I=0; i < myArray2.length; i++) {
   trace("myArray2[" + i+ "] = " + myArray2[I]);
}
Click To expand

This short script, when run, will display the values of the three elements in myArray and the six elements in myArray2.

myArray[0] = Hello
myArray[1] = There
myArray[2] = 10
myArray2[0] = 1
myArray2[1] = 2
myArray2[2] = 3
myArray2[3] = 4
myArray2[4] = 5
myArray2[5] = done


Applying What You Learned

Now you have learned some of the building blocks of ActionScript. The next step is to put these pieces together and apply what you have learned. Start by working through some code examples.

Example 1 - Square()

Let's return to an example I mentioned in the first section of this chapter, the calculator function Square(). The Square function returns the square of an argument. To create an example that is meaningful, you need to do several things:

  • Create a text box where the user can enter a number.

  • Create a button so that the user can click to calculate the square of the number that is entered.

  • Create another text box to display the answer.

  • Write the Square function.

  • Write a function that is called when the user clicks on the button. This function gets the number in the first text box, named Square, and puts the result in the second text box.

Adding Text Boxes

Start by creating the user interface elements.

  1. Create a new Flash file.

  2. Select the Text tool from the Toolbox and in the Properties panel set the Text Type option to Input Text.

    Click To expand

  3. Still in the Properties panel, make sure that the Show Border Around Text option is selected.

  4. Draw a small text box on the Stage.

  5. With the new text box selected, type a name in the Instance Name area of the Properties panel. This name is used in the ActionScript you write.

    Click To expand

  6. Create another text area, lower on the Stage.

  7. With the new text area still active, change the text type to Dynamic Text in the Properties panel.

  8. Give the new dynamic text area an instance name by typing it in the Properties panel.

Creating a Button

You cheat a little when you create the button the user clicks on. You could create a button symbol or import an existing button from a library, but, instead, you use one of the Flash UI components and learn a bit about these new tools. Now you continue with the same Flash file you have been working with.

  1. Open the Flash UI Components panel by choosing Window, Components.

  2. Click on and drag the Push Button from the Components panel to the Stage.

    Click To expand

  3. Notice that the Properties panel has changed a bit. You will see a second tab, labeled Parameters.

  4. On the new Parameters tab of the Properties panel, click on the word Label. A text box appears with the words Push Button highlighted.

    Click To expand

  5. Type a new label for the button and press Enter. This label now appears on the Push Button and is the text the user sees.

  6. Add an instance name for the new button to be used in the ActionScript.

Creating Functions

Now that you have the interface, you need to write some code. You start with the Square function.

Note

For this short section, you will see the Action panel's Normal mode at work. In the future, you will use Expert mode. By using Expert mode, you can see much more code at one time to help give perspective to the work you are doing.

  1. Open the Actions panel and make sure that it is in Normal mode. You may need to hide the Properties panel to give yourself enough room to work.

  2. Use one of the selection tools to select the first (and only) keyframe in the movie.

  3. Click on Actions, User-Defined Functions, and then double-click on Function in the Action Panel Toolbox.

    Click To expand

  4. Enter a descriptive name, like Square, for the function in the Options area.

  5. Enter a name, like NumberToSquare, for the parameter that is passed into this function.

  6. Back in the toolbox click on Actions, User-Defined Functions, and double-click return.

    Click To expand

  7. You need to determine what you want this function to return. The simplest way to square a number is to multiply it by itself. Type NumberToSquare*NumberToSquare into the Value box.

You now have a simple function that multiples a number times itself resulting in that number's square. Now you need to create a function that gets the number the user typed, calls the Square function, and updates the Result text field.

  1. In the Script area of the Actions panel, scroll to the bottom and select the last line, which should be an end brace (}).

  2. Click on Actions, User-Defined Functions, and double-click Function in the Action Panel Toolbox.

    Click To expand

  3. Fill in a descriptive name for the function, like HandleSquareButton. Leave the Parameters box empty.

  4. Add a set variable line to the script by clicking on Actions, Variables, and double-clicking set variable.

  5. In the Variable box, type the name of the variable you want to set. The Dynamic Text field you created earlier has a property named text. This property allows you to either get or set the text for the text box. Type Result.text. Result is the name of the dynamic text field you created earlier. The dot indicates that you will work with a part of the Result object, and text is the part of the Result object you are working with.

    Click To expand

  6. In the Value box, you need to indicate what to set the text to in the Result text box. Now you call the Square function and pass into it the text from the Input Text box you created a few steps earlier. Type Square(NumberToSquare.text). The Square part tells Flash that you are calling the function named Square. The parentheses tell Flash that Square is a function, not a variable. The information between the parentheses is the list of parameters you are passing into the function. If this example had more than one parameter, they would be separated by commas. The parameter is the text property of NumberToSquare, which is the instance name of the Input Text box.

    Click To expand

  7. Because the value you have entered is going to be calculated and is not a string, check the Expression box.

Now, you will need to tell Flash to call the HandleSquare-Button function, after the Square button is pushed. This task is simple.

  1. Use one of the selection tools to select the button.

    Click To expand

  2. In the Properties panel, click the Parameters tab.

  3. Click on the Click Handler and type the name of the function (HandleSquareButton) you wrote to take care of these button clicks.

  4. Save this movie. You use it later in this chapter.

    Click To expand

  5. Run the movie by selecting Control, Test Movie. Type a number in the input box and then click on the square button. If you type a number, you should see the square of it when you click on the Square button. If you type text in the input box, the result of clicking on the button should be NaN, or not a number.

Congratulations! You have finished your first program in ActionScript. If you prefer to use Expert mode, here is the code you should type (see figure).

Click To expand
Note

From this point on in the chapter, you will work in Expert mode because you can more easily see more than one line of code at a time. If you choose to work in Normal mode, you can still check your work against the code listed here if you switch to Expert mode.

Example 2

Now that you have your first simple Flash program, you also have your first bug. The problem is that if you type anything except a number in the Input Text field, you get an answer of NaN. How can you fix this problem? The following section explains.

You can use an if statement to disallow text input in the preceding squaring example. An event named onChanged exists for text fields. When the text is changed, this function is called. If you test the text to see whether it is a number and disallow the text if it is not during the onChanged function, you will fix the bug. Follow these steps:

  1. Open the Square movie you saved earlier in this chapter.

  2. Open the Actions panel and select the first frame of the movie.

    Click To expand

  3. Below the existing code, insert a global variable and set it to be the text in the NumberToSquare text field. Remember, we are working in expert mode now. Do this by inserting the following code:

    _global.thetext = "";

  4. Add the onChanged function by clicking Objects, Movie, TextField, Events, and double-clicking onChanged, in the Action Panel Toolbox.

    NumberToSquare.onChanged = function() {

  5. Insert an if…else statement that tests to see whether NumberToSquare is a number. The isNaN function returns true if the argument passed to it is not a number. So the following condition returns true if NumberToSquare.text is not a number.

    Click To expand
    if (isNaN(NumberToSquare.text)) {
      NumberToSquare.text = _global.thetext;
      } else {
         _global.thetext =NumberToSquare.text;
             }
   };

  6. Save your movie. Select Control, Test Movie.

Example 3

In this last example let's create something fun. First, you will create a simple shape. Next, you will add some action to the shape. Upon completion of the project, your shape will act as a mask allowing the background layer to show through as the shape enlarges or shrinks while being dragged. You can really create some neat effects here. This example makes use of the naming convention tip mentioned in Chapter 5. Now is a good time to get into the habit of naming your symbols with suffixes. The practical application is up to you!

  1. Create a new movie.

  2. In the first keyframe of the first layer create a design for your background.

    Click To expand

  3. Convert the background shape into a symbol.

  4. Name the symbol whatever you like with the appropriate suffix (mysymbol_mc).

  5. Be sure to select Movie Clip in the Properties panel and type in the name of your symbol in the box for the instance name.

    Click To expand

  6. Insert a new layer. In the first keyframe of the second layer, draw the shape that you want to be able to move.

  7. Select Movie Clip from the drop-down menu in the Properties panel and type in the name of your symbol in the box for the instance name.

  8. Add a third layer and name it Actions

Your basic objects have been created. Now transition to the Actions panel where you will add the code.

  1. Click the keyframe in the Actions layer and open the Actions panel.

  2. Next add the setMask method, allowing you to dynamically identify any movie clip as a mask of any other movie clip instance.

  3. Declare your variable, creating a starting size for your movie clip.

    back_mc.setMask(circle_mc);
var status ="Big";
Note

As you type in myMovieClip_mc, notice what happens when you type the period. Recalling that we are in Expert mode, when you press the period key, possible methods for your movie clip display. You will find setMask in the list.

Now create two functions to scale your shape larger and smaller. Notice the if and else if conditional statements. Also, _xscale and _yscale are properties of the shape movie clip you created. You are telling the shape to expand (by a value of 5, with x and y in proportion) until a size of 350 is reached and then shrink in the same manner until a size of 100 is reached.

function scaleMe() {
   if(status =="Big") {
      circle_mc._xscale += 5;
      circle_mc._yscale +=5;
      if(circle_mc._xscale > 350 && circle_mc._yscale >
350) {
   status = "Small";
   }
}    else if(status == "Small") {
      circle_mc._xscale -=5;
      circle_mc._yscale-=5;
      if(circle_mc._xscale <100 && circle_mc._yscale <
100) {
      status = "Big";
      }
   }
}

Finally, add the onPress and onRelease methods to your shape movie clip, providing directions for when the mouse button is clicked and when it is released, as well as dragging.

circle_mc.onPress = function() {
   scaleInterval = setInterval(scaleMe,50);
   this.startDrag();
}

circle_mc.onReleases = function () {
   clearInterval(scaleInterval);
   this.stopDrag();
}

Save your movie and select Control, Test Movie to view what you've created.

Click To expand

Hopefully, this example provides some insight into the many cool features of Flash MX. The more you work with ActionScript, the more the pieces will start to fit together.

Click To expand


Appendix A: Quick Reference Glossary

Knowing Your Workspace

The parts of the workspace listed below will become the building blocks of your development area as you continue to develop in Flash.

  • Timeline. You will see a series of vertical rectangles whenever you open Flash MX. The rectangles are white with a gray rectangle in every fifth position. The amount of time allocated per movement in the Timeline provides Flash with needed instructions for how to play the movie.

  • Frame. The rectangles just mentioned are frames. Frames "hold" time.

  • Keyframe. Keyframes are frames of action. A new occurrence that happens in your movie is denoted by a keyframe. The typical procedure is "enter keyframe and add action or change."

  • Layers. Layers are located to the left of the Timeline. They are identified by a name with a horizontal icon to the left of the name. Layers are used to organize your movie.

  • Stage. The Stage is below the Timeline. This large, white space is your work area. There, you do everything from creating the symbols to be used to laying out the look of your movie.


Frequently Used Panels

Flash offers a variety of panels allowing you numerous options. You will use some panels, however, more regularly than others. They are described below.

  • Properties panel. This panel is located below the Stage. If the panel is not selected, you can display it by choosing Window, Properties. This panel is important. When you're selecting anything on the Stage, that object's particular properties are displayed and can be edited in the Properties panel.

  • Actions panel. You use this panel to add ActionScript to your movies. The panel, which has a toolbox that expands for navigation, works in Normal mode and Expert mode.

  • Color Swatches panel. This panel provides swatches of quick color choices, along with ready-to-use radial selections.

  • Color Mixer panel. This panel enables you to create custom colors, affecting the type of gradient applied and its alpha setting, for example.


Flash Functionality

  • Symbol. The graphical objects in your movie should be symbols. These objects enable Flash to export smaller files.

  • Button. This type of symbol provides a button with its different states.

  • Movie clip. This type of symbol has its own timeline and can be independently animated.

  • GIF. This commonly used image type can be animated or include transparency.

  • JPEG. This is a commonly used image type.

  • Motion tweening. This functionality basically moves an object from one location to another.

  • Shape tweening. This functionality morphs an object from one shape to another (and also works with text).

  • Shape hint. This feature is used with shape tweening to instruct Flash about how the shape change should occur.

  • Alpha. This feature, found on the Color Mixer panel, controls the transparency of an object.


Components

Find the Components panel by selecting Window, Components. On this panel, Flash provides ready-to-use objects that you can drag to the Stage to perform common tasks.

  • CheckBox. Adds to your movie a common check box where multiple selections can be made.

  • ComboBox. Adds a combo box or dropdown box to your movie.

  • ListBox. Adds to your movie a list box where items are viewable and scroll vertically.

  • PushButton. Can serve numerous functions, such as a Submit button or Reset button, for example.

  • RadioButton. Adds radio buttons to your movie, where only one selection can be made.

  • ScrollBar. Adds the scrolling function (a good feature not to have to create from scratch).

  • ScrollPane. Adds the scrolling function both vertically and horizontally.


Appendix B: What's Next?

Now that you have a solid grasp of the fundamentals of Flash, where do you go from here? There are a number of development possibilities. The next two sections can help you better define that path. "Helpful Resources" points out good places to look for information and "New Directions" provides examples of new development venues.

Helpful Resources

Many different sources of resources are available, including Web sites, newsgroups, forums, and listservs. Because Flash is the industry standard in its field, many resources exist to help you further your knowledge. Macromedia also has extensive information for developers, and some of those resources are listed in this appendix.

The Flash Online Forum provides a basic introduction on how to get started. You can select from several categories, including the following information:

  • Flash general discussion

  • Flash handhelds

  • Flash site design

  • Flash remoting

  • Flash exchange extensions

  • Flash communication server

Browsing through information found on forums or other community discussions is a good way to broaden your knowledge of the Flash MX capabilities. You should also read about the kinds of issues other developers are interested in or struggling with. Forums also provide a place to post questions.

The Macromedia Exchange for Flash area provides links to various new features that developers have created for Flash. The extensions found there are free for your use. If a charge is required for the extension, the link takes you to the author's home page. Extensions are a great way to enhance your Flash movies with new features.

The Samples and Tutorials link is a good place to find useful information. Its Keyboard Shortcuts section can help enhance your efficiency. Also, one section contains several sample files available for downloading.

The Support Center provides a library of resources you can search for assistance with troubleshooting. This area includes such items as Tech Notes, FAQs, and Release Notes.

The Macromedia site is certainly a good place to start when looking to enhance your knowledge or troubleshoot, although many other good resources are available.

  • Flash Kit. Offers valuable resources, including a conference and an expo; http://www.flashkit.com.

  • Virtual-fx.net. Offers many tutorials with a search feature as well as a variety of other resources; http://virtual-fx.net/vfx/index.php.

  • Flashforward. Publishes an e-mail list and sponsors a conference with a Flash Film Festival! Read about the conference and its offerings at http://virtual-fx.net/vfx/index.php.

  • Flashmagazine. Offers a variety of insight on what's happening in the Flash community; http://www.flashmagazine.com/html/. Talk about extending the uses of Flash—this magazine keeps you informed.


New Directions

As you see as you begin to review some of these resources in the previous section of Appendix B, the Flash capabilities have grown exponentially. This section is meant to whet your appetite to discover some of Flash's new capabilities.

For example, you can now develop applications in Flash for PocketPCs, extending Flash's more common Web environment. This option was briefly discussed as a publish setting in Chapter 11. Imagine the possibilities! If this is an area of interest to you, be sure to research the benefits and limitations.

With the help of Macromedia Cold Fusion MX, you can add data exchange to your Flash application. You can see an example of an application of this nature by clicking the Make a Reservation button at http://www.broadmoor.com. (You have to get into the accommodations area to find the button). You can benefit from the intense functionality without the application having to make several trips to the server each time a new call is made.

These illustrations just touch on the many possibilities for development with Flash MX. Hopefully, your interest has been piqued. Enjoy yourself as you discover more and truly become an expert!


Index

A

<A> tag, 226
absolute link, 89
actions
layers, 54
undoing, 29, 98
Actions panel, 12, 244, 264
Action Shortcut Menu button, 236
Actions, User-Defined Functions, 257, 258
Add Script Item button, 238
Auto Format button, 240
Check Syntax button, 240
Code Editor, 241
Current Line area, 239
Current Position option, 241
Debug Options Menu, 239
Delete button, 238
description of selected tool, 237
editing and programming tools, 238–239
Expert mode, 235–236, 240, 257, 262
Expression box, 245
F9 keyboard shortcut, 235
Find and Replace button, 238
Find button, 238
global variables, 262
Hide the Description button, 237
Insert Target Path button, 239
Move Line Down button, 239
Move Line Up button, 239
Navigation List, 236
Normal mode, 235–236, 257
Options area, 238, 257
Reference button, 237
resources, 237–238
Script area, 236, 238, 258
Script Pin, 236
Show Code Hint button, 240
Value box, 245
Variables box, 245
View Options menu, 239
Actions Toolbox
Actions, User-Defined Functions, 258
Actions Variables, 244, 245
Function, 257, 258
Options area, 244–245
Script area, 244
Value box, 258
ActionScript, 4, 5, 70
Actions panel, 235–241
Actions Toolbox, 237
allowing debugging, 200
arrays, 253–254
case of words, 234
comments, 234
compared with JavaScript, 231–232
conditionals, 246–248
constants, 241–246
curly braces , 233
defining, 230
do...while loops, 252
dynamically adding sound, 176
for...in loops, 251
for loops, 250
frame label, 96
functions, 233
if statements, 246–247
if...else statement, 248
keywords, 234, 235
looping constructs, 249–252
naming conventions, 70–71
parameters, 234
period or dot (.), 234
rules, 233
scripts, 233
Square() function, 254–261
statements, 233
strings, 232
structure, 233
switches, 248–249
switching mode, 239
syntax, 231
toString method, 232
Trace() command, 200
undefined, 232
variables, 241–246
while loops, 251–252
Adaptive palette, 213, 217
Add Motion Guide command, 136
ADPCM (Adaptive Differential Pulse Code Modulation), 187
Advanced tween, 133–135
AIFF (Audio Interchange File Format) files, 175
aligning text, 29
anchors, 83
animated GIF files, 195, 210
Animated Mask layer, 161, 167
animated mask moving over animation, 166–167
Animated Picture 2 layer, 165
Animated Picture layer, 162, 166
animation, 12, 41, 68
animated masks moving over, 166–167
complex, 68
definition, 94
frame-by-frame, 97–110
frames, 95–96
keyframes, 95–96
masks moving over, 164
motion guides, 135–137
motion tweening, 112–113
properties, 45–46
viewing every frame, 43
viewing movement, 43
animation cell, 94
Answers panel, 13
Apple Computer Web site, 175
arguments, 231
array access operator ([]), 253
arrays, 253–254
arrow keys and moving objects, 103
Arrow Selection tool, 83
Arrow tool, 16–17, 31, 74, 103, 145, 169
AU files, 175
audience identification, 7
audio events options, 201
audio streams options, 201
author-time sharing, 89–90
AutoScripts, 47


Index_B

Team LiB

Index

B

background, 100
motion tweening, 114–115
visible for short time, 108
background color, 46
Background layer, 100, 114
disappearing, 102
locking, 115
selecting, 108
behaviors and movie clips, 69
best-quality movies, 208
binary language, 233
bit depth, 215
bitmap fills, 33–34
bitmaps, 33
compressing, 201
filtering out, 47
blue gradient swatch, 73
<BODY> tag, 225
Bold text, 29
bounding rectangle, 30
<BR> tag, 225
Break Apart
z+B keyboard shortcut, 144, 145, 148, 150
Ctrl+B keyboard shortcut, 144, 145, 148, 150
break reserved word, 248
break statements, 249
brightness, 129
brightness control, 74
Brightness Control bar, 32
brush modes, 27
Brush tool, 27
brushes, 27
built-in components, 5
Button layer, 75
buttons, 67, 256
assigning actions to, 68
change state, 76
changing behavior, 79
creation of, 75–79
drawing shape, 77
editing text settings, 78
fill color, 77
filtering out, 47
naming, 70
resting state, 76
sound, 180–181
states, 68, 76, 180
stroke color, 77
text, 77–78
Timeline, 76
Buttons folder, 88, 180


Index_C

Team LiB

Index

C

CatalogItem object, 251
catch statements, 232
change state, 76
circles, 24
Color Mixer panel, 13, 32, 73
Alpha value, 82
Bitmap option, 33
brightness control, 74
Brightness Control bar, 32
Color selection area, 32
Gradient Definition bar, 32
gradient sliding scale, 74
gradient type, 32
Stroke color tool, 19
color swatches, 13
Color Swatches panel, 73, 82
color tools, 37–38
colors
Advanced tween, 133–135
amount of, 130
brightness, 129
dithering, 213
fills, 21, 24, 37
gradients, 32
intensity, 32
lines, 19, 37
motion tweens, 128–135
movie clips, 73
outlines, 37, 61
painting, 27
pencil tool, 37
RGB (red, green, blue), 130, 131, 133–135
selecting, 37, 130, 131
selecting from Stage, 35
swapping stroke and fill color, 38
symbols, 73, 82
text, 29, 78
comments, 234
comparison operators, 247
complete tweens, 143, 144, 146
complex animation, 68
complex shapes and shape tweening, 144–147
complex text and shape tweens, 149–151
components, 13
built-in, 5
Components panel, 256
compressing
bitmap images, 201
movies, 200–201
PNG images, 218
sound, 185–188
SWF files, 200–201
conditionals, 246–248
constants, 241–246
Control, Play command, 107, 124, 136
Control, Test Movie command, 260, 266
Convert to Symbol command, 81, 83
converting
graphics on Stage to symbols, 81–83
graphics to symbols, 80–83
imported graphics to symbols, 81
copying
keyframe contents, 98
scenes, 51
Create Layer button, 62
Create Layer Folder button, 62
Create Motion Tween command, 113, 116, 118, 121, 126, 161, 162, 163
Create New Symbol window, 89
curves, 22–23
Custom palettes, 213, 217
Custom sound effect, 182
customizing sound, 179, 181–184


Index_D

Team LiB

Index

D

debugging scripts, 239
decision-makers' expectations, 7
decrement (--) operator, 250
default
fps (frames per second), 46
measurement units, 46
movie's size, 46
workspace, 12–13
Delete key, 17
Delete Layer command, 57
deleting
frames, 106, 107
layers, 57
objects, 17
scenes, 50
shape hints, 156
description, 224
design process, 8
development process
audience identification, 7
building Web site, 9
decision-makers' expectations, 7
design process, 8
gathering requirements, 7
methods of navigation, 7
organizing, 6–9
purpose of Web site, 7
review stage, 9
dithering colors, 212–213
Document Properties window, 45–46
documents, 45–46
double equal sign (==), 247
do...while loops, 252
Down state, 76, 180
drawing
circles, 24
curves, 22–23
freehand, 26
lines, 19–20
ovals, 24
rectangles, 25
simple shapes, 21–22
symbols, 73
drawing modes and Pencil tool, 26
drawing tools, 19–27
Dynamic text, 28


Index_E

Team LiB

Index

E

Earth layer, 75, 81
earth_mc symbol, 72, 87
Edit, Edit command, 85
Edit, Edit Document command, 86
Edit, Edit in New Window command, 85
Edit, Edit in Place command, 85
Edit, Undo command, 29, 98
Edit command, 180
Edit Envelope, 179
Edit Envelope window, 182–184
edit mode, 86
Edit Symbol button, 87
editing
button text settings, 78
multiple frames, 43
symbols, 41, 66, 84–87
editing tools, 30–36
editing window, 85
elements, options for, 238
empty strings, 232
equal sign (=), 247
Equal to (==), 247
Erase Fills mode, 36
Erase Inside mode, 36
Erase Lines mode, 36
Erase Normal mode, 36
Erase Selected Fills mode, 36
Eraser tool, 35–36
erasing, 35–36
.EXE files, 194, 195
Expert mode, 239
Export dialog box, 181
Eyedropper tool, 35


Index_F

Team LiB

Index

F

Fade In sound effect, 182
Fade Left to Right sound effect, 182
Fade Out sound effect, 182
Fade Right to Left sound effect, 182
Faucet icon, 36
File, Import command, 80, 145, 159, 176
File, New command, 97, 100, 112, 121, 123
File, Publish Settings command, 196, 221
File, Save command, 99, 100
files, 194–195
fill color and buttons, 77
Fill Color tool, 21, 34
Fill tool, 78, 79
fills, 23
bitmap fills, 33
changing color, 34
colors, 21, 24, 37
erasing, 36
gradients, 31
graphics becoming, 145
manipulating, 31–33
swapping color with strokes, 38
white, 38
Flash 6. See Flash MX
Flash movies
See also movies
compressing bitmap images, 201
file space devoted to frame, 203
frame numbers, 203
frames and scene reported on, 203
method of down loading, 198
passwords, 201
publishing options, 198–205
size report, 202
total number of bytes before frame, 203
version to publish, 199
Flash MX, 5
capabilities, 4
default workspace, 12–13
naming convention, 70–71
new features, 5
Flash Player, 5, 194
version, 45, 198
Flash UI Components panel, 256
Folder layer, 61
folders, 44
hiding contents, 63
Library, 88
organizing layers, 62
renaming, 62
fonts, 29
for loops, 250
fps (frames per second), 42, 45–46
frame label, 96
frame rate, 45
frame-by-frame animations
basic steps, 97–99
keyframe, 98
movie with motion tweening, 100–110
frames, 95–96
centering timeline on selected, 42
composing movies, 42
deleting, 106, 107
editing multiple, 43
filtering out, 47
frame label, 96
last, 95
named anchor, 96
number of, 42
Onion Skin mode, 104
outlines of moving objects, 43
play rate, 189
properties, 96
rate of, 42
selected, 42, 95
sound properties, 96
Timeline, 42, 95, 96
tween, 96
unused, 42
Free Transform tool, 30, 122, 138, 145
modes, 30
registration points, 83
freehand drawing, 26
functions, 230, 233, 257–261
arguments, 231
parameters, 234


Index_G

Team LiB

Index

G

GIF files, 194, 195
animated, 210
custom palette, 214
dimensions, 210
dithering colors, 212, 213
high-quality image, 211
interlaced images, 211
looping, 210
maximum number of colors, 214
optimizing colors, 211
options, 210–214
palette type, 213
playback, 210
removing gradients, 212
repeating, 210
static image of first frame, 210
transparent backgrounds, 212
global variables, 243, 262
Gradient Definition bar, 32
gradients, 31, 74
changing color, 34
colors, 32
PNG images, 216
removing from GIF files, 212
selecting type, 32
graphic objects, 66
graphics, 67, 168
becoming fill, 145
changing text to, 148
converting on Stage to symbols, 81–83
converting to symbols, 80–83
filtering out, 47
HTML files, 226
importing, 80, 145, 159
graphics buttons, 66
greater than (>), 247
greater than or equal to (>=), 247
green hints, 152, 154
grouping layers, 44


Index_H

Team LiB

Index

H

<H1> - <H6> tags, 225
Hand tool, 36
HandleSquareButton function, 258–259, 260
Hands-On HTML, 223
<HEAD> tag, 224
Help, 13
helper files, 195
hiding
layers, 57–58
panels, 14
Hit state, 76
HQX files, 194, 195
HTML (HyperText Markup Language) basics, 223–228
HTML files, 194, 195
aligning on Web page, 209
anchor tags, 226
body section, 225
conflict in settings, 209
declaring to Web browser, 224
document title, 224
forcing to foreground, 208
heading tags, 225
images, 226
line break, 225
looping, 207
meta information, 224
movie menu, 207
movie size, 206–207
paragraphs, 225
placement in player window, 209
playing characteristics, 207
playing in browser window, 208
preventing from automatically playing, 207
publishing options, 205–209
quality, 208
scaling in window, 209
scripting, 224
structure, 224
system fonts, 207
tagged structure, 224
title, 225
transparent areas, 208
Web browser display of, 206–207
Web browser instructions, 208
what is included in, 206
HTML Goodies Web site, 223
<HTML> tag, 224
HTML tags, opening and closing, 224
hyperlinks, 29, 226


Index_I

Team LiB

Index

I

if statements, 246–247, 262
if...else statement, 248, 263
<IMG> tag, 226
Import
z+R keyboard shortcut, 176
Ctrl+R keyboard shortcut, 176
Import dialog box, 145
Import to Library window, 33
imported graphics, converting to symbols, 81
importing
graphics, 80, 145, 159
sounds, 174–176
incomplete tweens, 143, 144, 146, 148
increment (++) operator, 250
indices, 253
infinite loops, 252
Ink Bottle tool, 34–35
Ink mode, 26
Input text, 28
Input Text option, 255
Insert, Create Motion Tween command, 138
Insert, Layer command, 55, 75, 81
Insert, Motion Guide command, 139
Insert, New Symbol command, 72, 76, 168
Insert, Remove Scene command, 50
Insert, Scene command, 50
Insert Blank Keyframe command, 98, 143, 146
Insert Keyframe command, 98, 106, 108, 109
Insert Keyframe (F6) keyboard shortcut, 106
Insert Layer button, 105, 115
Insert Motion Tween command, 123, 127
Insert New Symbol command, 69
Insert Target Path dialog box, 239
instances, 66–67, 84, 169
motion tweens, 128
selecting, 87
interactive movies
files, 195
scenes, 49
interlaced images, 211
Internet Explorer, 208, 228
isNaN function, 263
Italicized text, 29


Index_J

Team LiB

Index

J

JavaScript compared with ActionScript, 231–232
JPEG files, 194, 195, 214


Index_K

Team LiB

Index

K

kerning, 29
Keyframe (F6) keyboard shortcut, 79, 178, 180
keyframes, 95–96, 115–116
adding, 102, 106–107
adding hints, 152
copying contents, 98
Timeline, 95
keywords, 224, 234, 235
Kilohertz selections, 187–188


Index_L

Team LiB

Index

L

languages, multiple, 5
Lasso tool, 18
Layer Properties dialog box, 60–62
layers
actions, 54
adding, 44, 55, 75, 105, 115–118, 159
adding keyframes, 102
adding objects, 56
changing order of, 63
deleting, 57
filtering out, 47
finishing before other layers, 109–110
grouping, 44
height, 61
hiding, 57–58, 60
last frame used in, 109
locking and unlocking, 44, 59, 61, 115, 127
moving items, 117
naming, 60
order of, 75
organizing, 62–63
outline color, 61
outlines of objects, 61
properties, 60–61
renaming, 56, 101, 105
selecting, 101
showing and hiding, 44
switching between object regular and outline view, 44
Timeline, 44
toggling between normal and outline view, 60
types, 61
viewing object outlines, 60
Learn HTML in a Weekend, 3rd Edition, 223
learnMore_btn button, 76
Left Channel sound effect, 182
length property, 253
less than (<), 247
less than or equal to (<=), 247
Library, 66, 169, 185
Buttons folder, 180
displaying all symbols, 86
F11 keyboard shortcut, 169, 185
folders, 88
identifying symbols, 70
Information icon, 185
manipulating symbols, 41
New Symbol button, 69
resolving conflicts, 90
sharing, 89–90
sound, 175, 176
Line tool, 19–20
linear gradients, 31–32
lines
changing color, 34
characteristics, 20, 21
colors, 19, 37
drawing, 19–20
erasing, 36
straight, 20
thickness, 19
types, 19
links, 226
local variables, 243
lock icon, 59
locking
Background layer, 115
layers, 59, 61, 115, 127
masked layer, 162
masking layer, 162
locking and unlocking layers, 44
looping constructs, 249–252
looping HTML movies, 207
low-quality movies, 208


Index_M

Team LiB

Index

M

manipulating objects, 17–18
Mask command, 159, 161, 164, 167, 170
mask layer, 160
masked layer, 162, 165
masking layer, 162
masks
animated moving over animation, 166–167
creation of, 158–168
defining, 158
motion guides, 164
movie clip symbols, 168–170
moving over animation, 164–165
moving over static content, 160–161
shape outlining area, 159
static over moving content, 162–164
measurement units, 46
menu bar, 12
menus, 12
meta information, 224
methods, 242
Modify, Break Apart command, 144, 145, 148, 150
Modify, Document command, 45
Modify, Layer command, 60
Modify, Shape, Add Shape Hint command, 152, 154
modifying sound, 181–184
mono file, 175
morphing shapes into letters, 149–151
morphs, 142, 149
Motion command, 113
motion guide layer, 44
motion guides, 135–137
attaching tweened object to, 120
masks, 164
orienting which direction is up, 120
motion tweening, 96, 112–113, 142
adding objects, 115–118
background, 114–115
moving items, 117
moving text, 118
motion tweens, 137–139, 167, 169, 170
Advanced tween, 133–135
colors, 128–135
instances, 128
non-symbol objects, 128
objects fading in and out, 131–133
resizing objects, 121–122
rotating objects, 123–125
transforming objects, 126–128
MOV files, 194, 195
Move mode, 30
Movie Clip option, 83
movie clip symbol, 72
movie clips, 66, 67, 68–69
behaviors, 69
colors, 73
creation of, 71–75
filtering out, 47
naming, 70
states, 69
Timeline, 68–69
Movie Explorer, 47–48
movies
See also Flash movies
actual components or objects, 48
adding keyframes, 106–107
adding layers, 44, 55, 105
adding moving object, 105–107
adding moving text, 101–103
adding scenes, 49, 50
background, 100
background color, 45, 46
best-quality, 208
color tweening, 130–131
compressing, 200–201
default size, 46
deleting scenes, 50
entire contents of Stage into, 46
file size, 66
fitting in available space, 40
fps (frames per second), 42, 45
frames composing, 42
height and width, 45–46
information about, 45–46
interactive, 195
listing objects, 47
listing scenes, 86
low-quality, 208
manually creating, 15
maximum size for printed page, 46
measurement units, 46
motion guide layer, 44
motion tweening, 100–110, 114–118, 137–139
naming, 99, 100
objects fading in and out, 131–133
organizing, 54
organizing objects, 44
overview, 47
playback speed, 66
playing, 99
previewing, 107, 110
properties, 45–46, 100
rearranging order of scenes, 51
saving, 99, 100, 101
scenes, 49–51
searching for items in, 48
selecting scenes, 41
separating different pieces, 54
size of, 45
sound layers, 178
stopping while playing, 99
switching between scenes, 49
time to selected frame, 42
troubleshooting, 108
moving
masks over static content, 160–161
objects, 17–18, 30, 103
panels on-screen, 13–14
shape hints, 155
Stage, 36
static mask over content, 162–164
Moving Animated Symbol layer, 168
Moving Mask layer, 169, 170
moving objects
adding, 105–107
disappearing before end of movie, 108
moving text, 101–103, 118
MP3 (Motion Picture Experts Group, level 3) files, 174
multiple languages, 5
multiple platforms, 5


Index_N

Team LiB

Index

N

named anchor, 96
naming convention, 70–71
NaN (Not a Number), 232, 260, 261
Netscape, 228
New File
z+N keyboard shortcut, 15, 97, 100, 112, 121, 123
Ctrl+N keyboard shortcut, 15, 97, 100, 112, 121, 123
New Symbol
z+F8 keyboard shortcut, 69, 72, 76
Ctrl+F8 keyboard shortcut, 69, 72, 76
New Symbol command, 69
non-interactive movie files, 195
Normal layer, 61
Normal mode, 239
not equal to (!=), 247
Number function, 243
numbers, 242
NumberToSquare function, 263


Index_O

Team LiB

Index

O

objects, 242, 246
adding to layers, 56
adding to motion tweening, 115–118
attaching to motion guides, 120
bounding rectangle, 30
converting to component parts, 144
deleting, 17
erasing, 35–36
fading in and out, 131–133
filtering out, 47
height, 124
listing, 47
manipulating, 17–18
methods, 242
moving, 17–18, 30, 103
organizing, 44
outlines of moving, 43
preventing distortion, 124
properties, 234, 242
resizing, 30, 119, 145
rotating, 30
rotating in tween, 120
selecting, 16–18
skewing, 30, 125
switching between regular and outline view, 44
synchronizing frame rate, 120
templates, 48
transforming, 30
transforming with motion tween, 126–128
viewing outlines, 60
width, 124
Objects, Movie, TextField, Events, 262
onChanged event, 262
Onion Skin brackets, 104
Onion Skin markers, 43, 163
Onion Skin mode, 43, 104
Onion Skin Outlines, 163, 167
Onion Skin tool, 104
onion skinning, 43
Onion Skins, 163, 167
onPress method, 266
onRelease method, 266
Options tool, 26
organizing layers, 62–63
outlines, 23
changing color, 34
characteristics, 24
colors, 37, 61
moving objects, 43
Oval tool, 23–25, 73, 82
ovals, 23–24
Over frame, 79
Over state, 76, 79


Index_P

Team LiB

Index

P

<P> tag, 225
Page Setup dialog box, 46
Paint Behind mode, 27
Paint Bucket tool, 34–35
Paint Fill mode, 27
Paint Inside mode, 27
Paint Normal mode, 27
Paint Selection mode, 27
painting colors, 27
panels
closing, 14
docking on workspace, 13
hiding, 14
moving on-screen, 13–14
redocking, 14
Window menu, 14
paragraphs, properties, 29
passwords in Flash movies, 201
path
to item, 48
for tweens, 135–137
Paths layer, 81
paths_mc symbol, 83
Pen tool, 20–23
pencil icon, 59
Pencil tool, 26, 136
colors, 37
drawing modes, 26
period or dot, 234
permanent library, 90
Picture layer, 160, 161
Planets folder, 88
platforms, multiple, 5
playing movies, 99
PNG files, 194, 195
bit depth, 215
compressing, 218
custom palette, 218
dimensions, 215
dithering colors, 217
dithering solid colors, 216
interlaced, 216
maximum number of colors, 218
optimizing colors, 216
palette type, 217
removing gradients, 216
smoothing, 216
previewing movies, 107, 110
Program Files, Macromedia, Flash MX, First Run, Libraries command, 90
programming, 230
concepts, 232–234
programming languages, 230, 233
programs, 230
properties, 45–46, 242
layers, 60–61
movies, 100
sound files, 185
symbols, 87
Properties command, 60, 185
Properties Inspector
Edit button, 182
Effect drop-down list, 181
Event option, 181
Loop option, 179
Sound drop-down list, 179, 181
sound effects, 182
Start option, 179
Stop option, 179
Stream option, 179
Sync drop-down list, 179, 181
Properties panel, 13, 45, 87, 100
Advanced options, 134, 138
Alpha option, 132, 133
Brightness Amount edit box, 129
characteristics of rectangle, 25
Color dropdown list, 129, 132, 133, 134, 138
color to paint with, 27
Dynamic Text, 255
Ease box, 119
Ease drop-down list, 144
Ease value, 124
Fill Color tool, 21
Instance Name area, 255
Label option, 256
line characteristics, 20, 21, 22
line type, 19
Loop option, 169
Motion command, 113
Movie Clip option, 264
movie properties, 97
Options for Graphics list, 169
Orient to Path check box, 120, 136, 137, 138
Parameters tab, 256, 260
pencil characteristics, 26
RGB boxes, 130
Rotate dropdown list, 123
Rotate selection box, 120
Rotation Count box, 120, 124
Scale check box, 119, 122
Settings button, 134
Shape option, 143, 146, 147, 150, 151, 166
Show Border Around Text option, 255
Snap option, 120
sound properties, 96
Stroke color tool, 19
Stroke Height tool, 19
Sync option, 120
text characteristics, 28
Text Type option, 255
Tint Amount option, 130, 131
Tint from the Color dropdown list, 130
Tint selector, 130, 131
Tween dropdown list, 143, 146
tweening effects, 119
Publish Settings
z+Shift+F12 keyboard shortcut, 196, 221
Ctrl+Shift+F12 keyboard shortcut, 196, 221
Publish Settings dialog box, 186
Alpha option, 219
Animated option, 210
Audio Event option, 186, 201
Audio Stream option, 186, 201
Auto High setting, 189
Bit Depth option, 215
Bit Rate drop-down list, 186
Cancel button, 197
Compress Movie option, 200
Compression drop-down list, 186
Controller box, 220
Debugging Permitted option, 200
Device Font option, 207
Dimensions option, 206, 210, 214, 215, 218
Display Menu option, 207
Dither option, 213, 217
Dither Solids option, 212, 216
File/Flatten option, 220
Filter Options, 218
Flash Alignment option, 209
Flash box, 221
Flash options, 221
Flash tab, 186, 198–205, 222
Formats tab, 196, 221
Generate Size Report option, 199–201, 202
GIF tab, 210–214
Height box, 206, 207
HTML Alignment option, 209
HTML check box, 205, 221
HTML Options tab, 205–209
HTML tab, 189, 199, 222
Info option, 206
Interlace option, 211, 216
JPEG options, 214
JPEG Quality option, 201
Layer option, 219
Load Order option, 198
Loop Continuously option, 210
Loop option, 207, 220
Match Movie option, 206
Max Colors option, 214, 218
Omit Trace Actions option, 200
Opaque Windowless option, 208
Optimize Colors option, 211, 216
Options area, 199–201, 211–214, 216
Override Sound Settings check box, 201
Palette option, 214, 218
Palette Type option, 213, 217
Password option, 201
Paused at Start option, 207, 220
Percent option, 206
PGN options, 215–218
Pixels option, 206
Play Every Frame option, 220
Playback option, 207, 210, 220
Progressive option, 214
Protect from Import option, 200
Publish button, 197, 222
Quality drop-down list, 186, 189
Quality option, 208, 214
QuickTime options, 218–221
Remove Gradients option, 212, 216
Repeat option, 210
Scale option, 209
Set button, 186, 201
Show Warning Messages option, 209
Smooth option, 211, 216
Static option, 210
Streaming Sound/Use QuickTime Compression check box, 220
Template drop-down list, 199
Template option, 206
Transparent option, 212
Transparent Windowless option, 208
Type column, 196
Use default names check box, 197
Version option, 198
Width box, 206, 207
Window Mode, 208
Window option, 208
publishing
files, 194
Flash options, 198–205
HTML file options, 205–209
options, 196–220
selecting file types for, 196–197
setting file names for file types, 197


Index_Q

Team LiB

Index

Q

QuickTime files, 175, 218
controller type, 220
copying external objects into, 220
dimensions, 218
Flash tracks interaction, 219
location of Flash track, 219
looping, 220
pausing, 220
playback options, 220
playing every frame, 220
sound, 220
version, 221


Index_R

Team LiB

Index

R

Radial gradients, 31–32, 74
rearranging order of scenes, 51
Rectangle tool, 25–26, 77
rectangles
becoming oval, 151–156
drawing, 25
rounded corners, 25
red hints, 152
redocking panels, 14
Reference panel, 237
relative link, 89
Remove All Hints command, 156
Remove Frames command, 106
Remove Hint command, 156
requirements, gathering, 7
reserved words, 245
Resize mode, 30
resizing
motion tween, 121–122
objects, 30, 119, 145
text, 29, 78
resting state, 76
Result object, 259
review stage, 9
RGB (red, green, blue) colors, 130, 131, 133–135
Right Channel sound effect, 182
Rotate mode, 30
rotating objects, 30
disabling options, 125
distance, 125
motion tween, 123–125
number of rotations, 124
runtime sharing, 89


Index_S

Team LiB

Index

S

sample rates and Kilohertz selections, 187–188
Save (Ctrl+S) keyboard shortcut, 99
saving movies, 99, 100, 101
scaling Stage, 37, 40
Scene panel, 49–51
Scene Selector, 49
scenes, 49–51
adding, 50
component parts, 47
copying, 51
deleting, 50
information about current, 47
interactive movies, 49
listing, 86
locking and unlocking layers, 44
manipulating, 49–51
rearranging order, 51
renaming, 51
selecting, 41
switching between, 49
scope, 243
scripting, 5
scripts, 233
adding items, 238
buttons, 256
checking syntax, 240
closed heading, 237
debugging, 239
deleting items, 238
find and replace, 238
finding strings, 238
functions, 257–261
items, 237
line number and column, 239, 241
listing, 236, 238
menu, 236
navigating, 239
open heading, 237
pinning for visibility, 236
programming hints, 240
reformatting code, 240
set variable, 245
target path, 239
text boxes, 255
user created, 241
viewing code, 236
searching movies for items, 48
Select All
z-A keyboard shortcut, 16
Ctrl+A keyboard shortcut, 16
selecting
colors, 37, 130, 131
frames, 42
instances, 87
objects, 16–18
parts of objects, 16–17
selection rectangle, 16
Selection tool, 139
selection tools, 15–18, 129
set variable, 245
setMask method, 265
Settings window, 48
shape hints, 151
applying to single tween between keyframes, 152
deleting, 156
labels, 152
moving, 155
pairing of, 152
testing, 155
shape tweening, 96
abrupt changes, 149
adding hints to keyframes, 152
complex shapes, 144–147
complex text, 149–151
shape hints, 151–156
square becoming circle, 142–143
text effects, 147–151
shapes
complex and shape tweening, 144–147
drawing, 21–22
fill color, 21
fills, 23
morphing into letters, 149–151
outlines, 23
outlining mask area, 159
shared library, 89–90, 175
Show All Scenes command, 47
size report, 202–205
Skew mode, 30
skewing, 30, 125
Smooth mode, 26
sound
adding, 181
adding to Timeline, 176–179
ADPCM (Adaptive Differential Pulse Code Modulation), 187
AIFF (Audio Interchange File Format) files, 175
AU files, 175
basics, 174
buttons, 180–181
compression, 185–188
customizing, 179, 181–184
Down state, 180
exact starting and stopping point, 177
file size, 174
filtering out, 47
global settings, 187
importing, 174–176
Library, 175, 176
looping, 179
modifying, 181–184
mono file, 175
MP3 (Motion Picture Experts Group, level 3) files, 174
overriding settings, 201
playback, 177
playing, 176
precedence during downloading, 177
precise control over, 177
properties, 96, 185
quality, 174
QuickTime files, 175, 220
shared library, 175
size, 185
size report, 204
sound events, 177–178
starting and stopping, 179
stereo file, 175
streaming, 177, 178
troubleshooting, 188–189
types, 174–175
Wave files, 175
sound effects, 182
sound events, 177–178
sound files, 174–175
sound layers, 178
Sound Properties dialog box, 186–188
Sound Settings dialog box, 186
square becoming circle, 142
Square() function, 231, 254–261, 257, 259
Stage, 12
adding object to layer, 56
Back to Stage Arrow, 41
built-in tools, 40
converting graphics to symbols, 81–83
custom zooming percentages, 40
designing background, 100
Edit Scene button, 41, 86
Edit Symbols button, 41, 86
editing symbol, 85
entire contents in movie, 46
icons, 86
moving, 36
preset zoom percentages, 40
returning after editing, 86
returning from Symbol Editor to, 41
scaling, 37, 40
scene name, 86
Scene Selector, 49
selecting colors from, 35
Show All option, 40
Show Frame option, 40
symbol name, 86
viewing all objects on, 40
Zoom tool, 40
Stars folder, 88
statements, 233
states
adding sound, 181
buttons, 68, 76
movie clips, 69
static content, masks moving over, 160–161
static images, 67
Static Mask layer, 163, 164
static mask over moving content, 162–164
static picture files, 195
Static text, 28
stereo file, 175
storing symbols, 88–90
storyboards, 8
straight lines, 20
Straighten mode, 26
streaming sound, 177, 178
strict equality (===), 247
String function, 243
strings, 242
Stroke Color tool, 19, 34
Stroke Height tool, 19
Stroke tool, 82
strokes
black, 38
changing color, 34
color for buttons, 77
swapping color with fills, 38
Student object, 246
Submit button, 68
subscripted text, 29
Subselection tool, 17–18, 103
superscripted text, 29
SWF files, 194, 195
compressing, 200–201
creation of, 202
preventing from loading into Flash MX, 200
text file report, 199
switch statements, 249
switches, 248–249
switching between scenes, 49
symbol editing mode, 72, 76
Symbol Editor
Back button, 168
returning to Stage from, 41
Symbol icon, 86
symbol-editing mode, 85, 87, 180
symbols
anchors, 83
buttons, 67, 68
colors, 73, 82
converting graphics on Stage to, 81–83
converting graphics to, 80–83
converting imported graphics to, 81
creation of, 69–84
defining, 66
definitions, 48
displaying all, 86
drawing, 73
edit mode, 86
editing, 41, 66, 84–87
graphics, 67, 168
instances, 66–67, 84, 169
manipulating, 41
masks, 168–170
movie clips, 67, 68–69
naming, 70–71
properties, 87
reference points, 83
registration points, 83
reusing, 66
static images, 67
storing, 66, 88–90
types, 67


Index_T

Team LiB

Index

T

tagged structure, 224
text
aligning, 29, 78
Bold, 29
breaking apart, 147
buttons, 77–78
changing to graphics, 148
characteristics, 28
colors, 29, 78
complex, 149
disappearing before end of movie, 108
Dynamic, 28
filtering out, 47
fonts, 29
Input, 28
Italicized, 29
kerning, 29
letter spacing, 29
morphing shapes into letters, 149–151
resizing, 29, 78
Static, 28
subscripted, 29
superscripted, 29
Text, Size command, 78
text boxes, 255
text effects and shape tweening, 147–151
text files, naming, 70
text property, 259
Text tool, 28–29, 77, 102, 148, 149, 150
throw statements, 232
Timeline, 12, 41–44, 87
Add Motion Guide button, 44
adding layer, 75
adding sound, 176–179
Always Show Markers option, 43
Anchor Onion option, 43
buttons, 76
Center Frame button, 42
changing layer order, 63
Current Frame button, 42
Delete Layer button, 57
Edit Multiple Frames button, 43
Edit Onion Skin Markers button, 43
Elapsed Time button, 42
Eye icon, 81
frame label, 96
Frame Rate button, 42
frames, 42, 95, 96
height of layer, 61
Insert Layer button, 44, 55, 101, 159, 161, 163, 180
Insert Layer Folder button, 44
keyframes, 95
Layer area, 57
layers, 44
lock icon, 59, 115
Lock/Unlock All Layers button, 44
movie clip symbol, 72
movie clips, 68–69
Onion 2 option, 43
Onion 5 option, 43
Onion All option, 43
Onion Skin button, 43
Onion Skin Outlines button, 43
Onion Skin tool, 104
pencil icon, 59
selected frame, 42
selecting layers, 101
Show All Layers As Outlines button, 44
Show/Hide All Layers button, 44
symbol-editing mode, 180
unused frames, 42
timeline
variables, 243
<TITLE> tag, 225
Toolbox, 12
Arrow tool, 16–17, 31, 33, 74
Black and White button, 38
Brush tool, 27
color swatch, 73
color tools, 37–38
Colors section, 27, 37
drawing tools, 19–27
editing tools, 30–36
Eraser tool, 35–36
Eyedropper tool, 35
Fill Color dropdown list, 37
Fill Color tool, 34
Free Transform tool, 30, 122, 138, 145
Hand tool, 36
Ink Bottle tool, 34
Lasso tool, 18
Line tool, 19–20
No Color button, 38
Options area, 35, 37
Options tool, 26
Oval tool, 23–25, 73, 82
Paint Bucket tool, 34
Pen tool, 20–23
Pencil tool, 26, 136
Rectangle tool, 25–26, 77
Round Rectangle Radius button, 25
Selection tool, 139
selection tools, 15–18, 129
stroke color, 73
Stroke Color dropdown list, 37
Stroke Color tool, 34
Subselection tool, 17–18
Swap Color button, 38
Text tool, 28–29, 77, 255
Transform Fill tool, 31–33
view tools, 36–37
Zoom tool, 37
toString method, 232
Trace() command, 200
Transform
z+T keyboard shortcut, 124, 126
Ctrl+T keyboard shortcut, 124, 126
Transform Fill tool, 31–33
Transform panel
Constrain check box, 124
Height option, 124, 126, 128
Horizontal Skew Angle box, 125, 128
Rotate radio button, 125
rotation angle, 127
Rotation Angle box, 125
Skew radio button, 125, 128
Vertical Skew Angle box, 125, 128
Width option, 124, 126, 128
transforming objects, 30, 126–128
triple equal signs (===), 247
troubleshooting
movies, 108
sound, 188–189
try statements, 232
tweening, 112
tweening effects, 119
tweens, 96
complete, 143, 144, 146
feedback for problems with, 144
incomplete, 143, 144, 146
path for, 135–137
rate of change, 119
resizing objects, 119
rotating objects, 120
skewing objects, 122


Index_U

Team LiB

Index

U

undefined, 232
Undo
z-Z keyboard shortcut, 29, 98
Ctrl+Z keyboard shortcut, 29, 98
undoing actions, 29, 98
unused frames, 42
Up state, 76
URLs (Uniform Resource Locators), 29, 89


Index_V

Team LiB

Index

V

variables
declaring, 245
global, 243
local, 243
naming, 245
numbers, 242
objects, 242
scope, 243
strings, 242
timeline, 243
types, 242–243
usage, 244–246
video, filtering out, 47
video formats, 5
view tools, 36–37


Index_W

Team LiB

Index

W

Wave files, 175
Web 216 palette, 213, 217
Web browser display of HTML files, 206–207
Web formats, 194
Web Monkey Web site, 223
Web Reference Web site, 223
Web sites
audience identification, 7
building, 9
decision-makers' expectations, 7
method of navigation, 7
purpose of, 7
storyboards, 8
testing, 9
Web Snap Adaptive palette, 213, 217
while loops, 251–252
Window, Actions command, 235, 244
Window, Color Mixer command, 32, 33
Window, Components command, 256
Window, Library command, 169, 185
Window, Panel Sets, Default Layout command, 15
Window, Properties command, 143
Window, Scene command, 49
Window, Transform command, 124, 126
Window menu, 14
workspace
Actions panel, 12
animations, 12
Color Mixer, 13
color swatches, 13
components, 13
default, 12–13
docking panels, 13
Help, 13
menu bar, 12
Properties panel, 13
restoring to default configuration, 15
Stage, 12, 40–41
Timeline, 12, 41–44
Toolbox, 12, 15–38
World Wide Web Consortium Web site, 223


Index_X

Team LiB

Index

X

_xscale property, 265


Index_Y

Team LiB

Index

Y

yellow hints, 152, 154
_yscale property, 265


Index_Z

Team LiB
Previous Section

Index

Z

Zoom tool, 37, 40
zooming in and out, 37, 40

Team LiB
Previous Section