Adobe® Flash® CS4 Professional in 24 Hours docx

Otherways include clicking View, Magnification, and using the Zoom tool theMagnifier button in the Tools panel, which you learn about in more de-tail in Hour 2.. Any time you create or e

ptg

“Try It Yourself” mini-lessons that provide step-by-step walkthroughs of key Flash tasks and techniques

HOUR 1: Basics

Make an Animation in 30 Seconds 8

Change Your View on the Stage 12

Use the Properties Panel to Inspect

and Change Fill Colors 18

HOUR 2: Drawing and Painting Original

Art in Flash

Use the View Tools to Help You See 37

Draw and Change Lines 40

Draw and Modify Shapes 47

Fill the Stage with the Deco Tool 48

Use the Pen Tool 50

Create and Style Text 51

Use the Selection Tool to Select and

Select Attributes with the Dropper Tool 60

Transform Drawn Objects 62

Use Snap to Objects to Draw Perfect

Shapes and Connect Objects 65

HOUR 3: Importing Graphics into Flash

Import a Raster Graphic 77

HOUR 4: Staying Organized with the

Library and Layers

Create a Symbol by Converting

Selected Objects 90

Create a New Symbol from Scratch 93

Transform the Location, Scale, and

HOUR 5: Controlling Color

Create a Custom Color and Swatch 119

Create a Custom Gradient 122

Transform Attributes of Gradients

Used in a Movie 123

HOUR 6: Applied Layout Techniques

Display the Time in Dynamic Text 133

Use the Hard Light or Overlay Blend

to Add a Highlight 135

Combine Techniques to Improve

the Bevel Filter 137

HOUR 7: Understanding Animation

Analyze a Finished Animation 150

HOUR 8: Using Motion Tweens to Animate

Create a Basic Motion Tween 157

Tween Position, Scale, Rotation,

HOUR 9: Using Shape Tweens to Morph

Make a Simple Shape Tween 178 Use Shape Hints for a Better Shape

HOUR 11: Simulating 3D Animation

Create a 3D Movie Clip 207 Use the 3D Translation Tool to

Create an Animation 210 Create Multiple Rotating Movie Clips 210

HOUR 12: Reusing Your Animations with Motion Presets

Apply an Existing Motion Preset 217 Modify and Save an Existing Preset 220 Change the Easing of an

Existing Preset 223, 225

HOUR 13: Including Sound in Animations

Import a Sound 231 Add Sounds and Sound Effects to

HOUR 15: Creating Special Effects

Use an Imported Bitmap as a Fill Color in a Hall of Mirrors 268 Animate a Block of Text, One

Character at a Time 269 Convert Text to a Shape for Special

Use a Mask as a Stencil 281

HOUR 16: Basic Interactivity

Make an Action That Loops Part of

Use a Frame Label as the Destination of a gotoAndPlay Action 293 Make a Simple Button 296 Add Buttons to an Animation to Stop and Continue Playback 299

HOUR 17: Introducing Components

Manually Populate the ComboBox

Populate the ComboBox Component

by Using ActionScript 316 Create Multiple Buttons for a Portfolio317 Use the RadioButton Components 320 Apply the Radio Buttons 321

HOUR 18: Using Components

Use the List Component to Enable Users to Select Images 333 Use the ProgressBar Component as

FLVPlayback Component 355 Rotoscope (Draw Frames of a Video) 357 Inject and Use Cue Points 359 Animate a Video in 3D 363

HOUR 20: Linking a Movie to the Web

Publish a Movie 371 Use navigateToURL to Create a

Create a Text Hyperlink 376 Use Dynamic Text to Create a

Display Text by Using CSS 379

HOUR 21: Designing a Website to be Modular

Load a Movie 392 Use the Loader Class to Display

Play an External MP3 398 Load Text from File 399

HOUR 22: Minimizing File Size

Use the Bandwidth Profiler to Judge Download Times 415 Reduce a File’s Size with the

Bandwidth Profiler’s Help 419 Use a Preloader in the Bandwidth

HOUR 23: Optimizing Performance

Use a Custom Performance Meter to Calculate Frame Rate 428

HOUR 24: Publishing a Creation

Set Up the Publish Settings and Then Publish a Movie 435 Address Users Without Flash 440 Customize a Template 441 Add Metadata for Search Engine

Add XMP Data to a Movie 445

800 East 96th Street, Indianapolis, Indiana, 46240 USA

Phillip Kerman and Lynn Beighley

or transmitted by any means, electronic, mechanical, photocopying, recording, or

other-wise, without written permission from the publisher No patent liability is assumed with

respect to the use of the information contained herein Although every precaution has

been taken in the preparation of this book, the publisher and author assume no

responsi-bility for errors or omissions Nor is any liaresponsi-bility assumed for damages resulting from the

use of the information contained herein.

ISBN-13: 978-0-672-33041-4

ISBN-10: 0-672-33041-5

Library of Congress Cataloging-in-Publication Data:

Kerman, Phillip.

Sams teach yourself Adobe Flash CS4 professional in 24 hours / Phillip Kerman and

Lynn Beighley 1st ed.

p cm.

ISBN 978-0-672-33041-4 (pbk.)

1 Flash (Computer file) 2 Multimedia systems 3 Web sites Design

I Beighley, Lynn II Title

QA76.575.K4625 2009

006.7'8—dc22

2009015798 Printed in the United States of America

First Printing May 2009

Trademarks

All terms mentioned in this book that are known to be trademarks or service marks have

been appropriately capitalized Sams Publishing cannot attest to the accuracy of this

information Use of a term in this book should not be regarded as affecting the validity of

any trademark or service mark.

Warning and Disclaimer

Every effort has been made to make this book as complete and as accurate as possible,

but no warranty or fitness is implied The information provided is on an “as is” basis The

authors and the publisher shall have neither liability nor responsibility to any person or

entity with respect to any loss or damages arising from the information contained in this

book or from the use of programs accompanying it.

Bulk Sales

Sams Publishing offers excellent discounts on this book when ordered in quantity for bulk

purchases or special sales For more information, please contact

U.S Corporate and Government Sales

Indexer Tim Wright Proofreader Matt Purcell Technical Editor Brandon Houston Publishing Coordinator Vanessa Evans Cover Designer Gary Adair Compositor Mark Shirar

What’s New in This Edition .2

Who Should Read This Book .3

How This Book Is Organized .3

What’s on the Book’s Website .4

Part I: Assembling the Graphics You’ll Animate in Flash HOUR 1:Basics 7 Jump Right In and Make an Animation .7

Getting Your Bearings .9

Getting Around in Flash .23

Document Properties .28

File Types .29

HOUR 2:Drawing and Painting Original Art in Flash 35 Drawing on the Stage .36

Tools .36

Selecting and Transforming Objects .54

HOUR 3:Importing Graphics into Flash 69 Vector Graphics Versus Raster Graphics .69

Reasons to Avoid Importing Graphics .70

Importing Vector Graphics .71

Using Bitmaps (Also Known as Raster Graphics) .75

HOUR 4:Staying Organized with the Library and Layers 89 The Concept of the Library .89

Using the Library .96

Using Symbols from the Library .100

HOUR 5:Controlling Color 113 Using Blends and Filters .113

Creating and Saving Color Swatches .118

HOUR 6:Applied Layout Techniques 129 Setting Text .129

Applied Examples Using Color Styles, Blends, and Filters .134

Part II: Animating in Flash HOUR 7:Understanding Animation 143 How Animation Works .143

Elements of Animation .144

HOUR 8:Using Motion Tweens to Animate 157 Creating a Motion Tween .157

Fine-Tuning a Motion Tween .165

HOUR 9:Using Shape Tweens to Morph 177 Making a Shape Tween .177

Refining and Fine-Tuning a Shape Tween .182

HOUR 10:Advanced Animation with Inverse Kinematics 191 Linking Symbols with the Bone Tool .191

Animating the Armature .195

HOUR 11:Simulating 3D Animation 203 Creating a 3D Movie Clip .203

Moving Objects with the 3D Translation Tool .209

Rotating Objects with the 3D Rotation Tool .210

HOUR 12:Reusing Your Animations with Motion Presets 215 The Motion Presets Panel .215

Applying an Existing Motion Preset .217

Editing an Existing Preset with the Motion Editor Panel .222

HOUR 13:Including Sound in Animations 229 Importing Sounds .229

Using Sounds .232

Controlling Quality and File Size .241

Contents

HOUR 14:Nesting Animations in Movie

Clip and Graphic Symbols 253

Movie Clip Symbol Behavior .253

Subtleties of Movie Clips .260

HOUR 15:Creating Special Effects 267 Effects with Shapes .267

Splatter Movie Clips with the Spray Brush Tool .272

Using Filters for Special Effects .274

Masking Effects .277

Part III: Adding Interactivity and Video HOUR 16:Basic Interactivity 287 Basic ActionScript .287

Making Simple Buttons .295

Listening for Events .299

HOUR 17:Introducing Components 313 What Is a Component? .313

Using the Button Component .317

Using the RadioButton Component .319

Changing Component Appearances .322

HOUR 18:Using Components 329 Using Data Providers .329

Working with Other Components .337

HOUR 19:Using Video 345 Embedding Video Versus Playing External Video .345

Using Video .352

3D Animation with Video .363

Part IV: Putting It All Together for the Web HOUR 20:Linking a Movie to the Web 369 Basic Publishing .369

Simple Hyperlinks .373

Using Style Sheets .378

What Other Web Tasks Can Flash Do? .380

Using Flash Inside a Larger Website .382

Uploading Files to a Web Server .386

HOUR 21:Designing a Website to Be Modular 391 Loading Movies or Images .391

Determining When a Movie Is Fully Loaded .395

Playing External Sounds .398

Loading External Text .399

HOUR 22:Minimizing File Size 405 File Size Considerations .405

HOUR 23:Optimizing Performance 427 Measuring Performance .427

Impacts on Performance .428

HOUR 24:Publishing a Creation 435 How to Publish .435

Adding Metadata to Your Flash Creation .443

Choosing Which Version to Publish .445

Deciding Which Media Types to Publish .446

Exporting Other Media Types .455

About the Authors

Phillip Kermanis an independent programmer, teacher, and writer, who specializes in the

Adobe Flash platform

He has trained and made presentations around the world, in such exotic locations as

Reykjavik, Iceland; Melbourne, Australia; Amsterdam, Holland; and McAlester, Oklahoma

He has programmed several games on MSN and Messenger Live, including Sudoku Too and

Jigsaw Too, as well as the real-time cattle auction site stampedecattle.com Phillip is also the

author of Macromedia Flash @work, Flash MX 2004 for Rich Internet Applications, and

ActionScripting in Flash MX from New Riders Publishing.

Lynn Beighleyis a freelance author, web designer, and web developer After going back to

school to get a Masters in Computer Science, she worked for the acronyms NRL and LANL

Then, she discovered Flash and wrote her first bestseller A victim of bad timing, she moved

to Silicon Valley just before the great crash She spent several years working for Yahoo! and

writing other books and training courses Upon discovering that technical book writing

actually paid real money, she learned to accept and enjoy it Finally giving in to her creative

writing bent, she moved to the New York area to get an MFA in creative writing She

current-ly creates Flash animations and applications that range from the ridiculous to the sublime

CS4 Edition

The creation of this book could not have happened without the skill and patience of many,

many people at Sams Publishing Most of all, I want to thank Mark Taber for offering me

this opportunity and Philip Kerman for writing such a great book I also greatly appreciate

the efforts of Songlin Qiu for keeping me on track and organized, not an easy task

Other folks I’d like to thank include Seth Kerney, Brandon Houston, and Jovana San

Nicolas-Shirley

Finally, thank you Adobe for keeping Flash the great product that it is and taking it in

inter-esting new directions Keep up the awesome work!

—Lynn Beighley

CS3 Edition

Most successful feats involve the efforts of many people This book is no exception I’m

proud of the result, but I can’t take full credit Here is my attempt to acknowledge everyone

First, I’d like to thank the people at Sams Publishing When Randi Roger approached me,

not only did she provide the faith that I could write this book, but she also stressed the

sup-port I would receive from Sams Publishing She wasn’t exaggerating The following people

were professional and prompted me every step of the way: Betsy Brown, Lynn Baus,

Brandon Houston, Jeff Schultz, Amy Patton, Carol Bowers, Mark Taber, Kate Small, Matt

Purcell, Vanessa Evans, and Damon Jordan (who as Development Editor made this book

flow), plus all the editors listed in the front of this book When you look at other Sams

books, you’ll see many of these people acknowledged for a reason—they are great!

There are countless correspondents with whom I’ve learned a lot about Flash Instead of

naming several and inadvertently neglecting many, let me just say that participating in local

user groups and online forums is a great way to expand your knowledge and build your

business—they’ve helped me and helped this book Of all the places I’ve learned about

Flash, being in the classroom and teaching has probably been the most educational for me

The students and staff of the Northwest Academy, Pacific Northwest College of Art and

Portland Community College deserve special recognition

—Phillip Kerman

We Want to Hear from You!

As the reader of this book, you are our most important critic and commentator We value

your opinion and want to know what we’re doing right, what we could do better, what

areas you’d like to see us publish in, and any other words of wisdom you’re willing to pass

our way

You can email or write me directly to let me know what you did or didn’t like about this

book—as well as what we can do to make our books stronger

Please note that I cannot help you with technical problems related to the topic of this book, and that

due to the high volume of mail I receive, I might not be able to reply to every message.

When you write, please be sure to include this book’s title and author as well as your name

and phone or email address I will carefully review your comments and share them with the

author and editors who worked on the book

Visit our website and register this book at informit.com/register for convenient access to any

updates, downloads, or errata that might be available for this book

ptg

Adobe is not exaggerating when it says that Flash CS4 Professional is the

“industry-leading authoring environment for creating engaging interactive

experiences.” You only need to visit a few sites that use Flash to understand

how compelling it is Using graphics, animation, sound, and interactivity,

Flash can excite, teach, entertain, and provide practical information

With this version of Flash, Adobe has introduced some valuable new

fea-tures, as well as further integrated Flash CS4 into its suite of products

That’s a powerful thing—when products like Photoshop, Illustrator, and

Fireworks can be used to help you create graphics for use in your Flash

movies This interoperability only increases as time goes on

More than half a billion users already have the free Flash player that

en-ables them to view Flash movies As of the writing of this book, more than

95% of computers connected to the Internet not only had Flash Player

ver-sion 9, but more than 55% have the latest verver-sion, Flash Player 10 The fact

that Adobe continues to distribute this software so effectively means the

potential audience for Flash content is huge and continues to grow

The tools needed to create Flash movies are within your reach After you

purchase Flash, the only investment you need to make is time to learn You

can even download a trial version of Flash from www.adobe.com, and use

it for 30 days for free People can grow from fiddling with Flash to making

entertaining movies Imagine a great musician picking up and learning an

instrument in a matter of days It really is that amazing If you’re

moti-vated, with just a moderate time investment, you feel as though a powerful

communication tool has been given to you

Flash is so unique that sometimes it’s better to have less experience If you

have preconceived ideas about Flash or how you’re supposed to use

draw-Introduction

ing tools, it might be best to try to forget everything and start fresh Thisbook is organized in such a way that you should start seeing successesquickly With each task, you prove to yourself that you’re acquiring knowl-edge and skills

We don’t need to give you a pep talk because you’ll see for yourself In just

a few one-hour lessons, you are creating drawings that you might havethought you weren’t capable of In a few more hours, you are making ani-mations Finally, after 24 one-hour lessons, you are unstoppable Where youtake your skills is up to you, but you get a great foundation here

You might not feel like a pro overnight, but you will feel you have a ful communication tool in your control When you can’t wait to show othersyour creations, you know you’re on your way Get ready to have some fun!

power-What’s New in This Edition

This is the sixth edition of this book To prevent the material from gettingstale, we change quite a bit in each revision, as well as cover the new CS4 fea-tures with some depth Unlike many other dramatic software upgrades,

Adobe Flash CS4 Professional is not that different from the CS3 version.

However, the way people use Flash and Flash in general has definitelybroadened significantly It’s not just Flash anymore; it’s the Flash Platform

Technologies, such as Apollo and the Flex Framework, have attracted a newset of developers all delivering Flash content The CS4 upgrade is offers a fewnew tools, techniques, and further integrates with other Adobe CS4 products

This edition doesn’t try to cover everything; there simply isn’t time to dothat in 24 one-hour lessons Instead, we focus on animation techniques,graphics, and delivering to the web You also spend a whole hour exploringnew features including video with the full-screen mode; Inverse Kinemat-ics, the art of animating things connected to other things; and 3D animation

This book contains minimal, but crucial, coverage of ActionScript We trynot to go too much in-depth, but we cover enough to give you an idea ofhow it works ActionScript is an entire computer language on its own, andonce you have a sense of how it works, you’ll be comfortable learning moreusing additional resources ActionScript isn’t getting any less complex; it isbecoming much more consistent So, what you learn in the ActionScript in-troductory hour (Hour 16, “Basic Interactivity”) applies to the rest of thecode you see pop up in the book We do cover Flash Components—ready-built and self-contained objects that include advanced ActionScript code,but also keep you insulated from that code This edition also includes hours

that cover using basic ActionScript and Components

ActionScript 3.0(AS3) is the latest version of ActionScript You see AS3 in

most of the code samples that appear in this book But, in some cases, we

show how to perform a task using AS2 Although AS3 is a cleaner version

of the ActionScript language, it’s also less forgiving Programmers

gener-ally like the strictness of AS3, but many intermediate Flash users prefer to

do things the old way as in AS2 because they can successfully make

moder-ately complex tasks work or they’d rather dig into AS3 at a later date Don’t

get hung up on which version of ActionScript appears here

The most important point is that these 24 hours will get you started in Flash

by developing good foundation skills It’s easy to pick up bad habits in

Flash, but you definitely get started on the right foot with this book

Who Should Read This Book

New users to Flash should read this book first If you’ve been doing Flash

for a while and want to step back to make sure you’re headed in the right

direction, you could find some gems throughout the book, but it might be

tough to relearn the basics If you’re someone who can learn on your own,

you might think you don’t need a book like this, and, honestly, you might

be right But, this book moves quickly enough and provides tons of

hands-on tasks that it’s worth investing the time to read 24 hour-lhands-ong chapters If

you learn by doing, this is a good book for you If you’re looking for any of

the following Flash topics, they’re not covered here: writing class files in

ActionScript 2.0 or ActionScript 3.0, developing content for mobile phones,

using Flex Builder, building true 3D environments in Flash (although we do

cover the new 3D tool), integrating with back-end web servers, or using

Apollo Some of these topics are mentioned in the book—but at best we

only briefly discuss these more advanced topics

How This Book Is Organized

This is a hands-on tutorial book It’s not a project-based tutorial, however,

because each task explores a single topic Occasionally, you find a series of

tasks that build upon one another Generally, we introduce a topic, then, as

quickly as possible, jump straight into a task where you get your hands dirty

Throughout this book, you will see “Try It Yourself” sections They are signed to take you through the steps of actually performing the tasks you havebeen reading about Do not skip these sections They usually provide additionalinformation about the topic and are a great chance to practice the concepts

de-At the end of each hour, we’ve included a Q&A (Question and Answer) tion with common questions we’ve either heard from students or topics thatcould be confusing to new users There’s also a quiz at the end of each hour

sec-The goal of both the Q&A and quizzes is to provide an additional way tolearn There are lots of ways to learn, and these questions exercise a differentpart of your brain

The book as a whole is organized in a linear manner Later hours rely on theknowledge you acquire in earlier hours The 24 hours are broken into four parts:

Here you concentrate on getting the graphics to look exactly as you tend It might seem like a lot to spend 25% of the book on static graphics,but the time is well spent as it makes your animations look better

This is where you start moving things! You learn everything from 3Danimation to tweening to Inverse Kinematics with the Bone tool Youalso learn about valuable time-saving tools, like the Motion Preset Li-brary and the Motion Editor

In this part of the book, you take a big step into writing instructions soyour Flash creations change based on the user’s input Video is also cov-ered here

Although it’s fun to create things inside Flash, you’ll want to put yourcreations online so your friends, family, and customers can see it Thispart of the book shows you how, plus you learn some fine-tuning ad-justments to optimize performance and download speeds

What’s on the Book’s Website

Source files for tasks in the book can be found on the publisher’s website

If you have trouble, you can see what the finished project looks like and vestigate how it was built We’ve also included media files, such as images,audio, and video, necessary to complete a few of the tasks

HOUR 1 Basics

HOUR 2 Drawing and Painting Original Art in Flash

HOUR 3 Importing Graphics into Flash

HOUR 4 Staying Organized with the Library and Layers

HOUR 5 Controlling Color

HOUR 6 Applied Layout Techniques

PART I

Assembling the Graphics

You’ll Animate in Flash

ptg

WHAT YOU’LL LEARN INTHIS HOUR:

quickly draw and mate a graphic

related to Flash

At first glance, the Flash CS4 environment doesn’t seem too complicated

During this hour, you begin drawing and animating very quickly Before

you get to that, you need to know a few things about the interface

The Flash interface might look familiar to you because it shares some

inter-face elements with other software you might have used But, Flash is not

just a graphic design software or a programming language Flash is

basi-cally a hybrid Although Flash is consistent with other types of software,

Flash is different in many ways Experienced users and novices alike will

benefit from the basics covered during this hour

Panels are special interface tools that give you access to see and change

al-most any setting while working on your Flash file The Properties panel is

one of the most useful panels because it automatically changes to give you

information about anything you have selected For example, when you

se-lect text, the Properties panel enables you to change the font style and size

When you draw a circle and select it, the Properties panel shows you the

height and width, as well as the x and y location on the screen

Jump Right In and Make an

Animation

You can create your first Flash animation in a matter of seconds! Although

the following task doesn’t cover all there is to learn, it should prove to you

that it’s possible to get rolling with Flash very quickly

HOUR 1

Basics

square, the Stage, in the center of your screen.

2 Press the R key to turn your cursor into a Rectangle tool When you dothis, you should notice the Rectangle tool becomes active in the Toolspanel on the left If you don’t see the Tools panel, you can open it byclicking Window, Tools

3 On the left side of the Stage, click and drag down toward the right todraw a medium-size rectangle This is how your animation begins

4 The Timeline panel should be visible just below the white Stage If theTimeline panel is not visible, click Window, Timeline It is made up ofnumbered cells; select Frame 20 and press F7 (see Figure 1.1)

5 Now press the O key to turn the cursor into an Oval tool Click the rightside of the Stage and drag to draw a medium-size oval

6 Finally, return to Frame 1 (where the animation begins) by clicking thedot under the 1 (for Frame 1) in the Timeline (That dot represents akeyframe that has content—your rectangle.)

FIGURE 1.1

After selecting Frame 20 in the

Timeline, you inser t a blank

7 Click Insert from the menu, and click Shape Tween as shown in Figure

1.2 That’s it!

8 To view your animation, press the Enter key

Of course, you’ll learn much more about making animations, including the

difference between the three types of Tweens, but you’ve just seen how

easy it is to create one To successfully create and precisely control your

ani-mation, you have to understand the basics of Flash first This book

concen-trates on the foundational skills you need to get started

If you’re using a Macintosh (Mac), you’ll be happy to know that Flash on a

Mac is nearly identical to the Windows version Macintosh keyboards are

different from Windows keyboards, though, so use the following legend to

translate keyboard commands from Windows:

For example, if you see Ctrl+X in this book, on a Mac you use

Command+X

The function keys (such as F8) are the same in Windows and Mac; although

on some Mac keyboards, you need to press the fn key as you press the

func-tion button Finally, if you are using a Mac and have a mouse that includes

a right button, it should be programmed to invoke the Control key

Getting Your Bearings

The key to understanding Flash is always knowing where you are You’re

given the power to edit everything: static graphics, animations, movie clips,

and more It’s easy to accidentally edit an element you didn’t intend to, so

FIGURE 1.2

To tell Flash to create an animation, you choose one of the Tween op- tions under the Inser t menu Alter- natively, you can right-click on a frame and select a Tween type.

30 Seconds

you need to be conscious of what you’re currently editing This sectionhelps you get your bearings

Let’s take a quick tour of the Flash workspace:

are visible to the audience watching Flash when it plays

cov-ered in depth in Hour 2, “Drawing and Painting Original Art inFlash.”

anima-tion The Timeline can also include multiple layers, so certain ics can appear above or below others, and you can have severalanimations playing simultaneously The Timeline is introduced inHour 7, “Understanding Animation.”

Panels can be docked above, below, or to the sides of the Stage, orthey can float in front of everything They can also be organized intogroups so that, when expanded or floating, only one panel in a group

is visible, while the others in the group are accessible from a tab Inaddition, floating panels can collapse vertically like a window shade

to appear as a thin strip with just the panel’s tabs visible You can ganize panels to suit your work style

or-User is a general term we use to refer to the person watching your Flash

movie on your website Within this book, we refer to the user frequently

Oc-casionally, we call the user the audience It doesn’t matter which term you

use—just realize that there’s you (the author, creator, or designer), and thenthere’s the user or audience As the author, you are able to make edits to theFlash movie, whereas the user can only watch and interact with the movie

The Stage

The large white rectangle in the center of Flash’s workspace is called the

Stage Text, graphics, photos—anything the user sees—goes on the Stage

(see Figure 1.3)

Think of the Stage as the canvas on which a painter paints or the frame inwhich a photographer composes pictures Sometimes you want a graphic tobegin outside the Stage and then animate onto the Stage The gray areaaround the outside of the white Stage is the off Stage area You can see theoff Stage area only when the View menu shows a check mark next to

Timeline Tools

Panels (docked and expanded)

This is the Stage

Panels (docked and collapsed to icon view)

FIGURE 1.3

The Stage is the large white box in the center All the visual compo- nents of an animation are placed

on the Stage.

Pasteboard The default setting (Pasteboard checked) is preferable because

it means you can position graphics off the Stage Realize, however, that any

changes you make to the View menu affect only what you see; changes here

have no effect on what the user sees

There’s not too much to learn about the Stage—it’s your visual workspace

However, two important concepts are worth understanding now: Stage size

and zoom level By default, the Stage is a rectangle that is 550 pixels wide

by 400 pixels tall Later in this hour, in the “Document Properties” section,

you see how to change the width and height of a movie As a general rule,

it’s best to design your movie in the width and height you will ultimately

use on your website

Aspect ratio is the ratio of width to height Any square or rectangular

view-ing area has an aspect ratio For example, television (TV) has a 4:3 aspect

ra-tio—that is, no matter how big a standard TV screen is, it’s always four units

wide and three units tall High-definition TV (HDTV) uses a 16:9 ratio as do

many widescreen laptops, and 35mm film has an aspect ratio of 3:2 (such as

a 4×6-inch print) Most computer screen resolutions have an aspect ratio of

4:3 (640×480, 800×600, and 1024×768) You can use any ratio you want in a

ptgTRY IT YOURSELF

▼

Change Your View on

the Stage

web page—just remember that the portion of the screen you don’t use will

be left blank A “wide-screen” ratio (as wide as 3:2, like film) has a much ferent aesthetic effect than something with a square ratio (1:1)

dif-To scale means to resize as necessary A Flash movie retains its aspect ratio

when it scales, instead of getting distorted For example, you could specifythat a Flash movie in a web page scale to 100% of the user’s browser win-dow size You could also scale a movie with the dimensions 100×100 to400×400

Although you can scale Flash movies to larger or smaller sizes when youpublish them to the web, it’s not a good idea Some graphic types, like therectangle you drew earlier, scale well, but some, like photographs you add

to your Flash movies, do not

You can zoom in on certain portions of the Stage to take a closer look out having any effect on the actual Stage size The following task introduces

with-a couple of tools thwith-at with-are importwith-ant to the Stwith-age

In this task, you explore view settings Follow these steps:

1 Create a new file by clicking File, New, and Flash File (ActionScript3.0) Select the Pencil tool on the Tools panel (or press Y), and draw afew lines as messy as you’d like, including an X shape in your drawing

2 Notice the Zoom control at the top right of the Stage (see Figure 1.4)

This control provides one way to change the current view setting Otherways include clicking View, Magnification, and using the Zoom tool (theMagnifier button in the Tools panel), which you learn about in more de-tail in Hour 2

3 Change the Zoom control to 400% Notice ever ything becomes bigger

You haven’t changed anything except your view of the screen

4 Unless you have a huge monitor, you probably can’t see the wholeStage However, you can view other par ts of the Stage in one of twoways: by using the standard window scrollbars on the right and bottom

or by using the Hand tool The best way to access the Hand tool is tohold down the spacebar Go ahead and hold down the spacebar; then,click and drag without releasing the space bar You’re panning to otherpar ts of the Stage without actually moving any of the graphics that areactually on the Stage It’s impor tant to understand that the Hand toolchanges only your view of the Stage One of the best things about usingthe spacebar to select the Hand tool is that it’s “spring loaded”—that

is, the Hand tool is active only while you hold down the spacebar InHour 2, you learn about other spring-loaded tools

Zoom control FIGURE 1.4

The Zoom control enables you to zoom in or zoom out of the Stage.

Zooming has no effect on what the audience sees.

5 Now change the Zoom control to Show All No matter what your screen

size, Flash scales the Stage to fit all the content in your window

6 Several interesting tools are available from the View menu, including

grids, guides, and snap settings Click View, Grid, Show Grid Behind all

the graphics onstage, you see a grid (which the user doesn’t see), as

shown in Figure 1.5 You will see next hour how the grid can help you

line up graphics per fectly Notice that after you select View, Grid, you

can click Edit Grid to edit the color and spacing of the grid Turn off the

grid by clicking View, Grid, Show Grid (so no check mark appears next

to this menu item)

TRY IT YOURSELF

▼ Change Your View on the Stage

7 Guides are like the grid in that they help you align graphics and show up

on the Stage, but they don’t show up in the published Flash movie

Guides differ from the grid in that you drag guides into place where you

want them First, click View Rulers (so a check mark appears next to

this item) Now you can click either ruler and drag toward the Stage to

create and put into place a single guide, as shown in Figure 1.6 You

make ver tical guides by dragging from the left-side ruler, and you make

horizontal guides by dragging from the top ruler To remove the guides,

drag them back to the ruler As with the grid, you find the option to edit

the guide settings—as well as a way to lock the guides in place—by

clicking View, Guides, Edit Guides

Guides are similar to the grid, but

you can position the ver tical and

horizontal lines wherever you want

them.

FIGURE 1.5

Turning on the grid helps you align

objects.

The Tools Panel

The Tools panel is the panel with which you will likely become most

famil-iar Any time you create or edit anything on the Stage, you need to have one

tool selected from the Tools panel The default location is docked to the left

side of the Flash interface

Although the Tools panel is used primarily to draw on the Stage, it’s also

used to edit what you’ve already drawn In Figure 1.7, the Tools panel is

di-vided into several sections The first five are selection tools, then seven

cre-ation tools, four modifying tools, two view tools, five color settings,

followed by several options that vary depending on which tool is actively

selected

The Tools section enables you to create graphics and text (via the Line tool

and the Text tool), to edit graphics (via the Eraser tool and the Paint Bucket

tool), and to simply select graphics (via the Selection tool, the Subselect

tool, and the Lasso tool) You learn about all these tools next hour The two

view tools (Hand tool and Zoom tool) enable you to change your view of

the Stage (as you did in the preceding task) The colors setting gives you

control over the color of objects drawn Finally, the options area includes

additional modifiers for certain tools Depending on what tool is selected,

you might not see anything in the options section

You look at these tools in detail in the next few hours (in particular, Hour 2

and Hour 6, “Applied Layout Techniques”) For now, go ahead and play

with these tools If you think you lost the Tools panel, you can restore it by

clicking Window, Tools

The Timeline

You look at the Timeline in depth when you start animating in Hour 7, “but

let’s take a quick look now The Timeline contains the sequence of

individ-ual images that make up an animation When the user watches your

anima-tion, he sees the images on Frame 1, followed by the images on Frame 2,

and so on

Like all the other panels, the Timeline can be undocked so that it is a

sepa-rate panel, as shown in Figure 1.8 You click and hold the tab on the upper

left to undock it You can also close it when you need more workspace You

can always make the Timeline visible again by clicking Window, Timeline

When you start to create animations, the Timeline includes many visual

cues to help you For example, you can quickly see the length of an animation

Selection tools

Modifying tools

Colors

Options area View tools Creating tools

FIGURE 1.7

The Tools panel has tools for ing, editing, and viewing, plus op- tions that var y, depending on the currently selected tool.

Title tab

FIGURE 1.8

The Timeline (and other panels) can

be picked up and moved like any

floating window To undock the

Timeline, click and drag its tab.

by looking at the Timeline Also, Flash uses various icons and color codes inthe Timeline; this way, you can see how the animation plays

In addition to frames, the Timeline enables you to have as many layers asyou want in animations As is the case with other drawing programs youare familiar with, objects drawn in one layer appear above or below objects

in other layers, depending on the layer order Each layer can contain a rate animation, so multiple animations can occur at the same time, one ontop of another By using layer names and special effects (such as masking),you can create complex animations Figure 1.9 shows the Timeline and lay-ers of a finished movie You learn more about layers in Hour 7

sepa-FIGURE 1.9

Most animations involve many

lay-ers Each layer is independent of

the others.

The Properties Panel

Certainly, you learn to be familiar with more windows in Flash than just the

Stage, Tools panel, and Timeline (although these are the basic ones) This

section looks at the multipurpose Properties panel (sometimes called the

Properties Inspector in previous Flash versions).

Although you can find nearly two dozen panels listed in the Window

menu, you use one panel almost all the time—the Properties panel The

Properties panel displays properties of the currently selected object so you

can make adjustments For example, when you select a block of text, the

Properties panel enables you to view and change the font face and size

When you select a filled shape, you can change the fill color of that shape

In addition to modifying objects onstage, the Properties panel enables you

to modify frames in the Timeline (when you select one) as well as the

over-all Flash document properties (when nothing is selected) Although you

look at only a few variations of the Properties panel this hour, you

eventu-ally become familiar with the different panels, all listed under the Window

menu Because there are so many panels, later this hour you learn ways to

organize them to suit your personal workflow

Using panels is simple All panels operate in the same manner You can

ei-ther keep the panel open and select an object, or open the panel after

you’ve selected an object In either case, the panel always reflects the

cur-rent settings so you may modify or change them For example, to change

the font size of some text, you select the text, and then make a change in the

Properties panel The key is to keep the text selected while you access the

Properties panel You can also change properties of several objects at

once—just select multiple objects (for example, several blocks of text) and

make a change in the panel When selecting multiple objects of different

types, only the shared properties are visible in the Properties panel You

learn more about this in the following “Try It Yourself” section

Finally, if nothing is selected, you can still make changes to the Properties

panel Although this seems to have no effect, you’re actually specifying

what happens the next time you create an object For example, if you first

select the Text tool and, before creating any text on the stage, you make a

change to the font in the Properties panel, you see that font change in the

text when you create it

TRY IT YOURSELF

▼

Use the Properties

Panel to Inspect and

Change Fill Colors

In this task, you use the Proper ties panel to inspect and change fill colors

Follow these steps:

1 Create a new file by clicking File, New to open the New dialog box,Flash File (ActionScript 3.0), and OK Make sure the Proper ties panel

is open Its default location is to the right of the Stage If you don’t see

it, click Window, Properties, and Properties Finally, ensure the ties panel is at full size by clicking the tiny double arrows to the right ofthe tab labeled Proper ties (as shown in Figure 1.10) When undocked,the Proper ties panel actually has two states: full and mini (fully col-lapsed) Click the double-arrow button until the panel is full sized

Proper-2 Click the Stage, and then look at the Proper ties panel to notice thetype of information listed (Size, Frames Per Second (FPS), Stage, and

so on) The Proper ties panel is about to change

3 (If the Tools panel is not available, select it from the Window menu.) lect the Brush tool by clicking on it in the Tools panel (You can see thename of each tool in the Tools panel by leaving your cursor over each for

Se-a few seconds.) Notice when you select the Brush tool, the Proper tiespanel changes Paint a smiley face on the Stage

4 Before you draw again, click the Fill Color swatch, and select a differentcolor (as shown in Figure 1.11) This specifies what color you’re about

to paint

FIGURE 1.10

You can click the double arrows

so the Proper ties panel opens all

the way.

FIGURE 1.11

Before you paint again, you can

select a new color.

5 Using the brush, give your smiley face some hair in this new color Click

the Selection tool by clicking the black arrow at the top of the Tools

panel or by simply pressing the V key

6 Click on the right eye of your smiley face Notice the Fill color on the

Proper ties panel changes back to the original color Additional

informa-tion about the shape’s coordinates and size appear While the shape is

still selected, give it a different eye color by changing the Fill Color

swatch in the Proper ties panel and picking the new color (By the way,

the swatch with a red line through it—Stroke Color—is for shapes drawn

with the Pencil tool.)

NOTE

The Coordinate System

The coordinate system in all

mul-timedia tools (including Flash)refers to locations by pixels inthe x (horizontal) axis and the y(vertical) axis The top-left cor-ner of the screen (or Stage) isconsidered the origin or 0x,0y

As you move to the right, the xcoordinate increases; for exam-ple, 100 pixels to the right hasthe location 100x,0y As youmove down, the y coordinate in-creases; the bottom-left corner

location 0x,600y Just ber that y coordinates increase

remem-as you move down (not up, remem-asyou might expect) Here’s an in-teresting question: What do youthink happens if you set the lo-cation of an object to –10x?

(The object is moved offscreen

10 pixels to the left.)

7 We shouldn’t leave our smiley face with two, different colored eyes

Let’s make both eyes match again Make sure you have one eye

se-lected, and then click and release the Fill Color swatch While the cursor

looks like an eye-dropper, click the other eye to sample its color This is

a quick example of how the cursor changes to tell you what happens

when you click

The Properties panel adapts to show you properties of your current

selec-tion of a tool or on the Stage The following secselec-tions explore text opselec-tions to

help you understand this concept

Exploring Text Options

Flash gives you a great deal of control over the appearance of text While in

a new file or the file you used in the previous task, select the Text tool, click

the Stage, and then type a few words When you finish typing, click the

Se-lection tool Notice the Properties panel enables you to select a different

font, change the font size, change the color, and control the text in many

other ways An additional Paragraph submenu enables you to precisely

TRY IT YOURSELF

▼ Use the Properties Panel to Inspect and Change Fill Colors

control spacing, margins, and the direction your text flows You explorethese options in depth next hour

Organizing the Workspace

At this point, you’ve probably explored enough to find your panels arescattered all over the screen This brings up an interesting point: You’regiven a lot of freedom with how you organize your panels There aredocked panels, floating panels, and grouped panels Learning a few con-cepts makes organizing your workspace easier Because the changes youmake stick until you change them back, click Window, Workspace Layout,

A docked panel is one that is locked into the Flash application interface

around the outside of the Stage—just as, by default, the Tools are to the farright; the Properties panel is at the right; and the Timeline is at the bottom

Docked panels completely fill the space between the Stage and the edge ofFlash’s application window In addition, you can dock some panels in a sin-gle docked area For example, the Library panel is docked next to and un-derneath the Properties panel on the right side (by default), and you mustclick on the tab to see it You dock (or undock) panels by dragging thepanel’s title bar tab You find a complete explanation with Figure 1.12, later

If a panel is not docked in the interface, then it’s floating above it (ClickWindow, Behaviors to see an example of a panel that’s floating by default.)Additionally, you can dock multiple panels above or below each other into

a single docked or floating panel Finally, regardless of whether a panel isdocked or floating, you can also group panels into a single tabbed panel—

which is the case (by default) for the Timeline, Motion Editor, Output, andCompiler Errors panels, all grouped together at the bottom You can think

of grouping as stacking the panels in the same location because you can veal only one at a time—the others in the group are accessed via their tabs

re-The variations might sound overly detailed, but the options are there soyou can change the layout Each panel has its purpose and that’s never af-fected by where you decide to put it The idea is you can organize panels tomatch your work style

In addition to returning to the default layout, you can save your own layouts

If you find an arrangement that works well for you, click Window, Workspace,and New Workspace You are then prompted to give your new workspacelayout a name The new name then appears under Window, Workspace

Arranging panels can become frustrating if you don’t know the basics Wehighly recommend you spend some time playing with the layout to get

TIP

Hiding Panels

Depending on your screen size,

you might find that the panels

are preventing you from viewing

the entire Stage A simple press

of the F4 key temporarily hides

all the panels (except the

Time-line if it’s docked) You can

press F4 again to restore them

used to it If you end up with a bad configuration, you can always use

Win-dow, Workspace, and choose one of the built-in workspace settings to get

things back under control

Because the Flash panels behave unlike other software packages, the

fol-lowing rundown brings you up to speed (see Figure 1.12)

First, every panel has an Options menu at the top right of the title tab This

menu provides additional options related to each particular panel, though

often it’s just a link to Help documents

To organize panels, you can minimize any panel by clicking the button near

the top right of the panel When minimized, you only see the panel’s tab on

a button You can click a panel’s icon to make that panel temporarily fly

out When you’re done with the panel, it goes back to the button view In

this way, the panels are still available but nearly completely out of sight

when they’re not needed

To undock a panel, you can just drag it by the title tab As you drag, you get

a preview of the other panels it can snap to when you let go by paying

at-tention to the blue highlighting line that appears You can even dock two

floating panels together to make a group

There’s one more thing to notice about docking panels around the outside of

the interface You can see in Figure 1.12 that the rightmost column includes

panels that are docked but also expanded You can resize the column width

by clicking and dragging the bottom right corner to make it wider, but there’s

a limit to how narrow you make it It might take some time to get used to

how the panels behave, but it’s worth taking the time to play around After

you get it, you are able to quickly organize the panels as needed

Minimized Panel buttons

The Library

The Library is the repository of all the media elements used in a Flash file

You learn to love the Library for many reasons, as discussed in further tail in Hour 4, “Staying Organized with the Library and Layers.” Mediaplaced in the Library can be used repeatedly within a file, and—regardless

de-of how many times you use those media—it doesn’t significantly add to thefile size of your final Flash movie For example, if you put a drawing of anant in the Library, you can then drag 10 copies of the ant from the Librarypanel onto the Stage; but deep inside the Flash file, only one cloud exists

Reusing graphics in the Library is one way you can keep Flash moviessmaller

In practice, the Library provides you with access to all the graphics able for use in the current Flash movie you’re working on The Libraryhelps you locate specific elements you are using in your movie and, if youneed to, edit them You often need to edit the contents of one of your Li-brary items Suppose, for example, the drawing of the ant we just men-tioned needs to be altered Maybe you forgot that ants have 6 legs, and youdrew it with 8 You can edit the single ant stored in your Library, and all 10ants in your movie automatically update to have the correct number of legs

avail-You might need to access the Library panel to organize all the contents or to

drag copies (known as instances) of the drawings (known as symbols) into

your Flash movie For example, in the case of the ant drawing, you drag 10instances of the ant symbol In this case, you are not changing anything inthe Library; you are just reusing symbols stored inside it

A symbol is the name for a visual element you create and place in a file’s

Li-brary After it is in the Library, copies of the symbol can be used multipletimes throughout a movie without having a significant impact on file size

An instance is one copy of a symbol used in a movie Every time you drag a

symbol from the Library, you create another instance It’s not a “copy” inthe traditional sense of the word because there’s only one master, and eachinstance has negligible impact on file size Think of the original negative of

a photograph as the symbol and each print as another instance You seethat, like photographic prints, instances can vary widely (in their sizes, forexample)

The Library behaves like any other panel, but because it’s so important wewanted to briefly introduce it here You learn much more about the Librarystarting in Hour 4

Getting Around in Flash

As mentioned earlier in this hour, an important concept in Flash is to

un-derstand where you are at all times If you think you’re in the Library,

edit-ing the contents of a symbol, for example, you have a problem if you are in

fact editing something on the main timeline It can be confusing because

al-though it’s always possible to figure out where you are in Flash, you can

easily get lost The following sections look at how you can determine where

you are in the interface

The Current Layer

Although there’s just one main Timeline, Figure 1.9 showed you that you

can have multiple layers on the Timeline Give it a try: Open a new file and

add a layer by clicking Insert, Timeline, and Layer It is important to realize

you can only work in one layer at a time That is, if you draw or paste

graphics, they are added to the currently active layer The current layer is

the layer with the pencil icon, as shown in Figure 1.13 You can single-click

another layer to make it the active layer (Notice the pencil moves to the

layer you click.) The key is to always pay attention to which layer you’re

currently editing

FIGURE 1.13

Not only is the current layer lighted, but it also has the pencil icon, indicating that this is the layer where anything that is drawn or pasted appears.

high-The Current Frame

In the Timeline, a red vertical marker indicates which frame is currently

be-ing viewed (see Figure 1.14) This red current-frame marker can be in only

one frame at a time—the frame you’re currently editing It’s important to

re-alize where this current-frame marker is located at all times Right now, you

might find that you can’t move the current-frame marker past Frame 1

be-cause your movie only has one frame If it helps, imagine a time machine

You can visit any moment in time, but you can visit only one moment at a

time

ptgThe Current Scene or Current Symbol

By far, the most difficult concept for new Flash users is that in Flash, morethan one Timeline exists! A large or complicated movie can be broken intomultiple scenes You can think of scenes as chapters in a novel Deep insideFlash, there’s always one long Timeline (just like a novel has one continu-ous story), but if you break a file into scenes, you can access the scenes indi-vidually This is a nice feature because it means you can easily change theorder or sequence of the scenes You should make a point of paying atten-tion to which scene you’re currently working on The name of the currentscene is always listed above the Stage on the left; it appears on what is

called the Edit Bar The default name is “Scene 1,” and you should see this

next to the icon for scenes—a movie “clapper” (see Figure 1.15)

FIGURE 1.14

The red current-frame marker (on

Frame 11) can be in only one frame

at a time.

Current Scene

FIGURE 1.15

Above the top-left corner of the

Stage, you see the name of the

cur-rent scene (in this case, Scene 1).

The clapper icon indicates that this

is the name of a scene.

CAUTION

Deleting Frames Versus

Deleting Items Onstage

Although you learn much more

about making edits to your

Time-line and Stage in the upcoming

hours, it probably won’t hur t to

tell you one of the most

com-mon errors that relates to

know-ing where you are When you

click the Timeline, you actually

select items that are on the

Stage This means that if you

press the Delete button, you

delete the items on the Stage,

not just the cell or Frame in the

Timeline New users often

as-sume if they click a Frame in the

Timeline and press Delete that

Frame will be deleted To do

that, you need to right-click and

select Remove Frame

Remem-ber, the Delete button deletes

objects on the Stage, not the

current Frame

The Edit Bar often includes more information than is shown in Figure 1.15

When you learn more about the Library in Hour 4, you see how you can

nest instances of symbols inside other symbols When you double-click a

complex object, such as a symbol to edit it, everything else on the Stage

dims, indicating that those other items are not editable (This behavior of

going inside one object to edit its contents also applies to grouped objects

and so-called drawing objects—both of which you learn more about next

hour.) In all cases, the best way to determine exactly what you’re currently

editing is to look at the Edit Bar You might see “Scene 1: Car: Rotating

Wheels : Wheel” (as shown in Figure 1.16) This means that you’re in the

Wheel symbol that is inside the Rotating Wheels symbol that is inside the

Car symbol, which is all in Scene 1 Sounds a bit confusing? It won’t The

Edit Bar is very clear—you just have to remember to pay attention to it to

keep track of where you are

Navigating Through the Interface

You’ve seen how the Flash interface gives you clues that tell you where you

are at all times But how did you get where you are in the first place? And

how do you get out? Navigating through a Flash file is easy Let’s look at a

few ways to get around

The Edit Bar indicates you’re deeply nested inside a symbol (Wheel) that’s nested inside other symbols.

The Edit Bar contains the hierarchy of your current location, and it also vides a means of navigation If, for example, you’re inside a symbol within

pro-Scene 1, you should see “pro-Scene 1: SymbolName.” If you simply click pro-Scene 1,

you are taken back to that scene (see Figure 1.17) Any time you see the EditBar, you can click on it to navigate back through the hierarchy

Finally, you should notice two menus way off to the right of the Edit Bar:

Edit Scene and Edit Symbol (see Figure 1.18) From these two menus, youcan jump to any scene or symbol in the current movie Of course, if youhave no symbols and just one scene, using these menus won’t be very inter-esting However, in big files, these menus provide a quick way for you toget around

There are plenty of ways to get around in Flash, and you see them all in thisbook For now, try to feel comfortable moving around and be sure to noticethe information that Flash provides to tell you where you are

How Not to Get Lost

As a reference, the following is a list of common ways to get lost and how

to find your way home This is a list based on experiences from teaching

Edit scene

Edit symbol

FIGURE 1.18

The Edit Scene and Edit Symbol

menus are always accessible at the

top right of the Stage They provide

the most reliable way to navigate to

other scenes and symbols.

Link to Car symbol

FIGURE 1.17

The Edit Bar provides more than

just information You can click the

arrow or any name listed to jump

back through the hierarchy For

ex-ample, you can click Car to jump all

the way back to the Car symbol.

new students—as well as our own experiences getting lost! We’re including

things that you haven’t been exposed to yet, so you might want to

book-mark this page and revisit it later

Edit Bar—By far the most common problem is overlooking the fact

that the Edit Bar has changed to indicate you’re inside a symbol,

group, or drawing object We’ve said to keep an eye on the Edit Bar,

but what if it’s gone? Amazing, but true: You can hide and restore the

Edit Bar via the Windows, Toolbars, and Edit Bar menu We can’t

imagine selecting this on purpose, but if for any reason you can’t find

it, now you know how to bring the Edit Bar back

Changing colors—The half-dozen or so color swatches can determine

the color you’re about to draw as well as change an existing color

Re-member, if you have something selected, it changes when you change

the color swatch Only when nothing is selected can you set the color

for what you’re about to draw Plus (and this becomes clearer next

hour), there can be two colors for an object: the outline color, known

as the stroke, and the inner color, or fill You see a pair of swatches

quite often indicating these independent colors

Properties panel—It’s important to know what sort of object you

have selected For example, if you draw a shape with the Brush tool,

the Properties panel displays “Shape” when you select that shape

People often forget the Properties panel tells you what you have

se-lected You may think something is a shape (or other type of object),

but use the Properties panel to know for certain.

Info panel—The Info panel displays (and enables you to edit) the size

and location of any selected object In addition, it has a little button

that toggles between showing a circle in the bottom right or a plus

sign in the top left This makes the Info panel reflect coordinates for

the selected object’s registration point or its transform point The plus

indicates you’re viewing the registration point option, which is

usu-ally the object’s top-left corner The little circle means you’re viewing

the object’s transform point (usually its center) What’s very easy to

overlook, however, is the Properties panel’s X and Y fields always

re-flect the object’s registration point

That’s it for the big pitfalls There are more, but we’ll be sure to guide you

past them as you encounter them in later hours

Document Properties

You need to set a few movie-wide settings early in the creation of anymovie (things like the background color and height and width) Most ofthese are found in the Document Properties dialog box, shown in Figure1.19, which you access by clicking Modify, Document, or by double-clickingthe bottom of the Timeline (where you see 12 fps) You should access theDocument Properties dialog box now, so you can experiment with a few ofits settings (Notice most of the same settings appear in the Properties panel

if you click the Stage or otherwise deselect all objects.)

First of all, you need to make sure that Ruler Units is set to Pixels This isthe standard unit of measurement in multimedia and web pages It’s im-portant to set Ruler Units to Pixels because this affects several other dialogboxes (including the Info panel) Next to Background Color, you should see

a white swatch that, when clicked, enables you to change the Stage color

When you publish a movie to the web, you can specify any backgroundcolor you want, and it overrides this setting; it’s smart practice to designagainst the background color you will ultimately use on your web page

Feel free to change the Background Color any time you want while you areediting, but remember to test against the final color of your web pagewhere the Flash will be running Maybe gray is easier on your eyes, orblack makes selecting white graphics easier Do whatever you want—itonly affects the Stage color while you you’re editing, and you can changethis setting later

Two other Document Properties dialog box settings are important to lish early in any project: Frame Rate and Dimensions Frame Rate specifies

estab-the rate—that is, how many frames per second—at which Flash attempts to play We say attempts because some of your users might not have a com-

puter fast enough to keep up, so Flash can’t display the specified number

FIGURE 1.19

The Document Proper ties dialog

box provides many global movie

settings that should be determined

at the beginning of ever y project.

of frames in a second Flash does not exceed the frame rate you specify, but

it can get bogged down and not keep up Dimensions are important in that

they affect the aspect ratio of your Stage You need to decide up front on

the shape for your Stage (Sorry, it can’t be round.) Do you want a

wide-screen CinemaScope look, or do you want a square Stage? You might even

want a vertical rectangle, like for a button bar to appear on the left side of a

web page You need to consider this early on because the Stage shape

influ-ences how you position graphics and changing it later makes for a lot of

repositioning

People often confuse frame rate with speed, which is more of a visual effect

Animators can use tricks to make something appear to speed across the

screen even while using a very low frame rate For example, if you see a

picture of a car on the left side of the screen and then the car appears on the

right side of the screen a fraction of a second later, it might tell your brain

that the car is moving fast However, such a trick requires only two frames,

and at a frame rate of 4 fps, the second frame appears only a quarter second

after the first! Frame rate—that is, how many chunks into which each

sec-ond is broken—controls the visual resolution Four frames a secsec-ond may

look “chunky”—each change occurs only four times a second However, 30

fps (equivalent to the frame rate of TV) is such a fine increment that you’re

not likely to see the steps between discrete frames (Although, of course,

that’s what’s really happening.) By the way, you can still move a car across

the screen in a quarter of a second by using 60 fps—it would just involve 15

frames You explore this topic in great detail in Hours 7 and 8, “Using

Mo-tion Tweens to Animate”

File Types

Clearly, the most common use for Flash is to create interactive animations

for the web Sifting through all the different file types involved can be a

lit-tle confusing At a minimum, you need to understand three types: source

Source ( .fla) Files

One of the two main file types in Flash is the source Flash movie that you

work over again)

When sharing files with others who need to edit the source file, you share

into a web page for people to view—they’re just files that contain yoursource content

When you’re finished editing a source file and ready to distribute your

watch it

file in the Export Movie dialog box Although more details are involved, theimportant point to understand is that exporting involves creating a new file

Save As or Save a Copy As in some other software programs Whatever you

CAUTION

Saving as Flash 8

You can actually save a Flash CS4

who only has Flash CS3 When

you select File, Save As, you need

to select Flash CS3 Document

from the Save As Type drop-down

Flash strips out any features your

file uses that are available only in

Flash CS4 (and warns you, too)

This feature is great during the

transition when people upgrade

CAUTION

Beware of Fonts

There’s one last thing you need

to understand now, which applies

if you work in a team environment

or otherwise plan to exchange

opens fine on any machine that

has Flash installed On a Mac,

you might need to open Flash,

and then select File, Open On

Windows, you might need to

make sure that the file is named

However, there’s one big catch:

The font choice for any text in the

machine that is attempting to

can’t share a file if one person’s

machine is missing a particular

font Rather, that person cannot

that has the correct font; he must

select a substitute font Any time

fonts that you don’t have installed,

you are given the chance to map