Flash CS6: The Missing Manual - cdn.

When you buy an ebook through oreilly.com you get lifetime access to the book, and whenever possible we provide it to you in five, DRM-free file formats—PDF, .epub, Kindle-compatible .mobi, Android .apk, and DAISY—that you can use on the devices of your choice. Our ebook files are fully searchable, and you can cut-and-paste and print them. We also alert you when we’ve updated the files with corrections and additions.

O’Reilly Ebooks—Your bookshelf on your devices!

Learn more at ebooks.oreilly.com

You can also purchase O’Reilly ebooks through theAndroid Marketplace, and Amazon.com.

oreilly.comSpreading the knowledge of innovators

iBookstore, the

Flash CS6: The Missing Manualby Chris Grover

Copyright © 2012 Chris Grover. All rights reserved. Printed in the United States of America.

Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.

O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or [email protected].

June 2012: First Edition.

Revision History for the 1st Edition:

2012-06-11 First release

See http://oreilly.com/catalog/errata.csp?isbn=0636920022787 for release details.

The Missing Manual is a registered trademark of O’Reilly Media, Inc. Flash CS6: The Missing Manual, the Missing Manual logo, and “The book that should have been in the box” are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media is aware of a trademark claim, the designations are capitalized.

While every precaution has been taken in the preparation of this book, the publisher assumes no responsibility for errors or omissions, or for damages resulting from the use of the information contained in it.

ISBN-13: 978-1-449-31625-9

[M]

iii

Contents

The Missing Credits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Part One: Creating a Flash Animation

CHAPTER 1: Getting Around Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15Starting Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15A Tour of the Flash Workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20Panels and Toolbars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25The Flash CS6 Test Drive. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

CHAPTER 2: Creating Simple Drawings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Plan Before You Draw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43Preparing to Draw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Drawing a Shape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53Choosing a Drawing Mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55Creating Original Artwork . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65Copying and Pasting Drawn Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .82Adding Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .84

CHAPTER 3: Animate Your Art . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91Frame-by-Frame Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91Editing Your Frame-by-Frame Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99Making It Move with Motion Tweens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103Editing the Motion Path . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110Copying and Pasting Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .115Shape Tweening (Morphing) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117

Part Two: Advanced Drawing and Animation

CHAPTER 4: Organizing Frames and Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . 127Working with Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127Working with Multiple Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135Organizing Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148Spotlight Effect Using Mask Layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151

COnTenTsiv

CHAPTER 5: Advanced Drawing and Coloring . . . . . . . . . . . . . . . . . . . . . . . . . 157Selecting Graphic Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157Manipulating Graphic Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170Spray Painting Symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195Drawing with the Deco Tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196Advanced Color and Fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198

CHAPTER 6: Choosing and Formatting Text . . . . . . . . . . . . . . . . . . . . . . . . . . . 215Text Questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216Choosing TLF or Classic Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216About Typefaces and Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219Adding Text to Your Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220Choosing and Using Text Containers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .228Animating Text Without ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .233Text Properties by Subpanel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .239

CHAPTER 7: Reusable Flash: Symbols and Templates . . . . . . . . . . . . . . . . . 247Symbols and Instances . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

CHAPTER 8: Advanced Tweens with the Motion Editor . . . . . . . . . . . . . . . . 295Applying Motion Presets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .295Modifying a Motion Preset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .299Editing a Tween Span. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .307A Tour of the Motion Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .311Easing Tweens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .320

CHAPTER 9: Realistic Animation with IK Bones . . . . . . . . . . . . . . . . . . . . . . . 325Linking Symbols with Bones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326Perfect Posing with Control Handles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .339Baby Steps with Pins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341Making Shapes Move with Bones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .342Apply Spring to a Motion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346Animating an Armature with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . 349

CHAPTER 10: Incorporating Non-Flash Media Files. . . . . . . . . . . . . . . . . . . . . 351Importing Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351Importing Illustrator Graphics Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .354Importing Photoshop Graphic Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .359Importing Fireworks Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361Editing Bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364Editing Bitmaps with Photoshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .366Importing a Series of Graphics Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .368Exporting Graphics from Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .370

COnTenTs v

CHAPTER 11: Incorporating Sound and Video . . . . . . . . . . . . . . . . . . . . . . . . . . 373Incorporating Sound . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .374Incorporating Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384Importing Video Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .396

Part Three: Adding interactivity

CHAPTER 12: Introduction to ActionScript 3.0 . . . . . . . . . . . . . . . . . . . . . . . . . 407Getting to Know ActionScript 3.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408Beginning Your ActionScript Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413Object-Oriented Thinking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419Using Data Types, Variables, and Constants . . . . . . . . . . . . . . . . . . . . . . . . . .429Conditionals and Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .436Combining ActionScript’s Building Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . 440

CHAPTER 13: Controlling Actions with Events. . . . . . . . . . . . . . . . . . . . . . . . . . 443How Events Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443Mouse Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445Getting Help for Events and Event Listeners . . . . . . . . . . . . . . . . . . . . . . . . 448Keyboard Events and Text Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471Keeping Time with TimerEvent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .476Removing Event Listeners . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .477In Case of Other Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .478

CHAPTER 14: Organizing Objects with the Display List . . . . . . . . . . . . . . . . . 481The Display List: Everything in Its Place . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481Adding Objects to the Display List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483Managing the Stacking Order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500Summary of Properties and Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .507

CHAPTER 15: Controlling the Timeline and Animation . . . . . . . . . . . . . . . . . 513Slowing Down (or Speeding Up) Animation . . . . . . . . . . . . . . . . . . . . . . . . . . 514Timeline Stop and Go . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519Organizing Your Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .522Looping a Series of Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .536Reversing a Series of Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541

CHAPTER 16: Components for Interactivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543Adding Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544The Built-In Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .558Finding Additional Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .579

COnTenTsvi

CHAPTER 17: Choosing, Using, and Animating Text . . . . . . . . . . . . . . . . . . . . 581What Font Does Your Audience Have? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581Controlling Text with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .585Creating Text Fields with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591Formatting Characters and Paragraphs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .596Formatting with HTML and CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600Choosing the Right Text Formatting System . . . . . . . . . . . . . . . . . . . . . . . . 608

CHAPTER 18: Drawing with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 611What’s the Point? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 611Beginning with the Graphics Class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 615Drawing Lines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 616Drawing Curves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 619Drawing Built-In Shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .622Drawing Irregular Shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .625Making Drawings Move . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .626Removing Lines and Shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .632

Part Four: Debugging and Delivering Your Animation

CHAPTER 19: Testing and Debugging Your Animation . . . . . . . . . . . . . . . . . 637Testing Strategies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .637Testing on the Stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 641Using the Test Movie Commands . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .642Testing Inside a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 644Testing Download Time . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 646The Art of Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .652Analyzing Code with the Debugger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .662

CHAPTER 20: Publishing and Exporting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 669Optimizing Flash Documents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 669Publishing Your Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .677Exporting Flash to Other Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 699

CHAPTER 21: Introducing Adobe AIR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705Meet Adobe AIR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .705Creating Your First AIR Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .707Create a Code Signing Certificate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 710Convert a Flash Animation to AIR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 713Publish Your AIR Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 715Manually Install Adobe AIR Runtime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .720

COnTenTs vii

CHAPTER 22: Making iPhone Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 721Your First “Hello iPad” App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .722Joining the iOS Developer Program . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .723Air for iOS App Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .738Building a Tap-Ready App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .745Tips for iOS App Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .749

CHAPTER 23: Building Android Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 751Meet AIR for Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .752Building Apps for Both iOS and Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . 760Tips for Android App Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .763

Part Five: Appendixes

APPENDIx A: Installation and Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 767Flash CS6 Minimum System Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . .767Getting Help from Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .770Getting Help from Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 771More Flash Books . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .772Finding Flash Gurus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .773

APPENDIx B: Flash Professional CS6, Menu by Menu . . . . . . . . . . . . . . . . . . . 775File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .775Edit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .779View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .784Insert . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .788Modify . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 790Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .798Commands . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .799Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 800Debug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 802Window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 804Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 809

Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 813

15

ChApTer

1

As mentioned in this book’s introduction, Flash performs several feats of audio-visual magic. You use it to create animations, to display video on a website, to create handheld apps, or to build a complete web-based application. So

it’s not surprising that the Flash workspace is crammed full of tools, panels, and windows (Figure 1-1). But don’t be intimidated—you don’t have to conquer these tools all at once. This chapter introduces you to Flash’s main work areas and often-used toolbars and panels, so you can start creating Flash projects right away. You’ll experiment with Flash’s stage and timeline, and see how Flash lets you animate graphics so that they move along a path and change shape.

TIP To get further acquainted with Flash, you can check out the built-in help screens by selecting Help→Flash Help. Once the help panel opens, click Using Flash Professional. It’s on the left side of the somewhat busy window. You can read more about Flash’s help system in Appendix A.

Starting FlashYou start Flash just as you would any other program—which means you can do it in a few different ways, depending on whether you have a PC or a Mac. Installing the program puts Flash CS6 and its related files in the folder with your other programs, and you can start it by double-clicking its icon. Here’s where it’s usually installed:

• Windows. Go to C:\Program Files\Adobe\Adobe Flash CS6\Flash.exe. You can create a shortcut or drag the file to the taskbar for quicker starting.

Getting Around Flash

Flash Cs6: The Missing Manual16

sTarTiNG Flash

• Mac. Go to Macintosh HD\Applications\Adobe Flash CS6\Adobe Flash CS6. You can make an alias or drag the file to the Dock for quicker starting.

Figure 1-1The Flash Professional workspace is divided into three main areas: the stage, the timeline, and the Panels dock. This entire window, to-gether with the timeline, toolbars, and panels, is sometimes called the Flash desktop, the Flash interface, or the Flash authoring environment.

Here are some other Windows ways to start the program:

• From the Vista or Windows 7 Start menu, choose All Programs→Adobe Flash Professional CS6.

• For Windows xP, go to Start→All Programs→Adobe→Adobe Flash Professional CS6.

• If you’re a keyboard enthusiast, press the Windows key and begin to type flash. As you type, Windows searches for a match and displays a list with programs at the top. Most likely, the Flash program is at the top of the list and already selected, so just press Enter. Otherwise, use your mouse or arrow keys to select and start the program.

Here are some Mac launching options:

• Even if you haven’t added the Flash icon to the Dock, you can still find it in the Dock’s Applications folder. Click and hold the Applications folder icon and choose Adobe Flash CS6→Adobe Flash CS6.

• Want to hunt down Flash in the Finder? Most of the time, it’s installed in Macintosh HD→Applications→Adobe Flash CS6→Adobe Flash CS6.

ChaPTer 1: GeTTiNG arouNd Flash 17

sTarTiNG Flash

• If you’d rather type than hunt, use Spotlight. Press ⌘-space and then begin to type flash. As you type, Spotlight displays a list of programs and files that match. Most likely, the Flash program is at the top of the list and already selected, so just press Return. Otherwise, use the mouse or arrow keys to select and start the program.

When you first start Flash, up pops the Welcome screen, shown in Figure 1-2. This screen puts all your options—like starting a new document or returning to a work in progress—in one handy place. For good measure, Adobe includes some links to help references and resources on its website.

Figure 1-2This Welcome screen appears the first time you launch Flash—and every subsequent time, too, unless you turn on the “Don’t show again” checkbox (pull down the bottom of the window if you don’t see it). If you ever miss the convenience of seeing all your recent Flash documents, built-in templates, and other options in one place, then you can turn it back on by choosing Edit→Preferences (Windows) or Flash→Preferences (Mac). On the General panel, choose Welcome Screen from the On Launch pop-up menu.

NOTE If Flash seems to take forever to open—or if the Flash desktop ignores your mouse clicks or responds sluggishly—you may not have enough memory installed on your computer. See page 767 for more advice.


sTarTiNG Flash

When you choose one of the options, the Welcome screen disappears and your document takes its place. Here are your choices:

• Create from Template. Clicking one of the little icons under this option lets you create a Flash document using a predesigned form called a template. A template helps you create an animation more quickly, since a Flash developer has already done part of the work for you. You can find out more about tem-plates in Chapter 7.

• Open a Recent Item. As you create new documents, Flash adds them to this list. Clicking one of the filenames listed here tells Flash to open that file. Clicking the folder icon lets you browse for and open any other Flash file on your computer.

TIP The options for creating new Flash documents and opening recent documents also appear on the File menu, as shown in Figure 1-3.

Figure 1-3Several of the options on each menu include keystroke shortcuts that let you perform an action without having to mouse all the way up to the menu. For example, instead of selecting File→Save As, you can press Ctrl+Shift+S to tell Flash to save your Flash document. On the Mac, the keystroke is Shift-⌘-S.

• Create New. Clicking one of the options listed here lets you create a brand-new Flash file. Most of the time, you want to choose the first option, ActionScript 3.0,


sTarTiNG Flash

which is a garden-variety animation file. ActionScript is the underlying pro-gramming language for Flash animations. The current version of ActionScript is 3.0, and it’s the version used for the projects in this book. You can use the ActionScript 2.0 option if you need to work with a Flash project that was created several years ago. For details on the file formats for different Flash projects, see the box below.

NOTE Old programming pros—you know who you are—may have reasons to prefer ActionScript 2.0. For example, you might choose this option if you’re continuing work on a project created using ActionScript 2.0, or if you’re working with a team using ActionScript 2.0.

Understanding Flash File FormatsWhy are there so many different options under Create New on the Welcome screen? What are they all for?

There seem to be a bewildering number of options when you create a new Flash document. As explained above, if you’re just learning Flash, you probably want to use the first option: ActionScript 3.0. The other options are for special Flash projects targeted to specific devices, like iPhones, iPads, or Android devices. Some options are for specific programming needs, like creating an ActionScript class. The details are in the appropriate sections of this book, but here’s a quick rundown:

• Use AIR to create desktop applications using the Adobe Integrated Runtime tools (page 705). Instead of using Flash Player, these applications use AIR.

• Use AIR for Android if you’re creating apps for Android handhelds like the Droid Razr or Samsung Galaxy.

• Creating an iPhone or iPad app? Use the Air for iOS option. Flash creates a document that’s just the right size and

has the programming options and support for making iOS apps.

• Flash Lite 4 is similar to the iPhone format but works for several other handheld devices.

• You can also create an ActionScript File (a file containing nothing but ActionScript, for use with a Flash animation); a Flash JavaScript File (used to create custom tools, panels, commands, and other features that extend Flash); or a Flash Project (useful if you’re planning a complex, multifile, multideveloper Flash production and need version control).

• The last two options, ActionScript 3.0 Class and ActionScript 3.0 Interface, help programmers create reusable objects that can be used in multiple Flash projects.

FREqUENTLY ASKED qUESTION

• Extend. Clicking the Flash Exchange link under this option tells Flash to open your web browser and load the Flash Exchange website. There,you can down-load Flash components, sound files, and other goodies that you can add to your Flash animations. Some are free, some are fee-based, and all of them are created by Flashionados just like you.

• Learn. As you might guess, these links lead to materials Adobe designed to help you get up and running. Click an option, and your web browser opens to a page on the Adobe website. The first few topics introduce basic Flash concepts like symbols, instances, and timelines. Farther down the list, you find specific topics for building applications for mobile devices or websites (AIR). At the


a Tour oF The Flash

WorksPaCebottom of the Welcome screen, “Getting Started” covers the very, very basics. “New Features” explains (and celebrates) some of Flash CS6’s new bells and whistles. “Developers” leads to an online magazine with articles and videos with an ActionScript programming slant. “Designers” leads to a similar resource for the Flash graphics and design community.

A Tour of the Flash WorkspaceThe best way to master the Flash CS6 Professional workspace is to divide and conquer. First, focus on the three main work areas: the stage, the timeline, and the Panels dock. Then you can gradually learn how to use all the tools in those areas.

One big source of confusion for Flash newbies is that the workspace is so easy to customize. You can open bunches of panels, windows, and toolbars. You can move the timeline above the stage, or you can have it floating in a window all its own. Once you’re a seasoned Flash veteran, you’ll have strong opinions about how you want to set up your workspace so the tools you use most are at hand. If you’re just learning Flash with the help of this book, though, it’s probably best if you set up your workspace so that it matches the pictures in these pages.

Fortunately, there’s an easy way to do that. Adobe, in its wisdom, created the Work-space Switcher—a tool that lets you rearrange the entire workspace with the click of a menu. The thinking is that an ideal workspace for a cartoon animator is different from the ideal workspace for, say, a rich internet application (RIA) developer. The Workspace Switcher is a menu in the upper-right corner of the Flash window, next to the search box. The menu displays the name of the currently selected workspace; when you first start Flash, it probably says Essentials. That’s a great workspace that displays some of the most frequently used tools. In fact, it’s the workspace used throughout most of this book.

Here’s a quick little exercise that shows you how to switch among the different workspaces and how to reset a workspace after you’ve mangled it by dragging panels out of place and opening new windows.

1. Start Flash.

Flash opens, displaying the Welcome screen. Unless you’ve made changes, the Essentials workspace is used. See Figure 1-4, top.

2. From the Workspace menu near the upper-right corner of the Flash window, choose Classic.

The Classic arrangement harkens back to earlier versions of Flash, when the timeline resided above the stage (Figure 1-4, bottom). If you wish, go ahead and check out some of the other layouts.

3. Choose the Essentials workspace again.


a Tour oF The Flash

WorksPaCeBack where you began, the Essentials workspace shows the timeline at the bottom. The stage takes up most of the main window. On the right, the Panels dock holds toolbars and panels. Now’s the time to cause a little havoc.

Figure 1-4Top: The Essentials work-space is the one used throughout this book.

Bottom: The Classic workspace shows the timeline above the stage, a look familiar to Flash Pro veterans.


a Tour oF The Flash

WorksPaCe4. In the Panels dock, click the Properties tab and drag it to a new location

on the screen.

Panels can float, or they can dock to one of the edges of the window. For this experiment, it doesn’t matter what you choose to do.

5. Drag the Color and Swatches toolbars to new locations.

The Color toolbar has an icon that looks like an artist’s palette at the top. Like the larger panels, toolbars can either dock or float. You can drag them anywhere on your monitor, and you can expand and collapse them by clicking the double-triangle button in their top-right corners.

6. Go to Window→Other Panels→History.

Flash has dozens of windows. Only a few are available now, because you haven’t even created a document yet.

TIP As you work on a project, the History panel keeps track of all your commands, operations, and changes. It’s a great tool for undoing mistakes. For more details, see page 34.

7. From the Workspace menu, choose Reset Essentials.

The workspace changes back to the original Essentials layout, even though you did your best to mess it up.

Anytime you want your workspace to match the one used throughout most of this book, do the “Essentials two-step”: Choose Essentials from the Workspace Switcher (if you’re not already there), and then choose Reset Essentials. As shown in Figure 1-4, when you use the Essentials workspace, the Flash window is divvied up into three main work areas: the stage (upper left), the timeline (lower left), and the panels dock (right). Before exploring each of these areas in detail, here are a few words about Flash’s menu bar.

Menu BarLike most computer programs, Flash gives you menus to interact with your docu-ments. In traditional fashion, Windows menus appear at the top of the program window, while Mac menus are always at the very top of the screen. The commands on these menus list every way you can interact with your Flash file, from creating a new file—as shown on page 18—to editing it, saving it, and controlling how it appears on your screen.

Some of the menu names—File, Edit, View, Window, and Help—are familiar to anyone who’s used a PC or a Mac. Using these menu choices, you can perform basic tasks like opening, saving, and printing your Flash files; cutting and pasting artwork or text; viewing your project in different ways; choosing which toolbars to view; get-ting help; and more.


a Tour oF The Flash

WorksPaCeTo view a menu, simply click the menu’s name to open it, and then click a menu option. If you prefer, you can also drag down to the option you want. Let go of the mouse button to activate the option. Figure 1-3 shows you what the File menu looks like. Most of the time, you see the same menus at the top of the screen, but oc-casionally they change. For example, when you use the Debugger to troubleshoot ActionScript programs, Flash hides some of the menus not related to debugging.

TIP You’ll learn about specific commands and menu options in their related chapters. For a quick reference to all the menu options, see Appendix B.

The StageAs the name implies, the stage is usually the center of attention. It’s your virtual canvas. Here’s where you draw the pictures, display text, and make objects move across the screen. The stage is also your playback arena; when you run a com-pleted animation—to see if it needs tweaking—the animation appears on the stage. Figure 1-5 shows a project with an animation under construction.

Figure 1-5The stage is where you draw the pictures that will eventually become your animation. The work area (light gray) gives you a handy place to put graphic elements while you figure out how you want to arrange them on the stage. Here a text box is being dragged from the work area back to center stage.

Stage Work area (backstage)

The work area is the technical name for the gray area surrounding the stage, al-though many Flashionados call it the backstage. This work area serves as a prep zone where you can place graphic elements before you move them to the stage, and as a temporary holding pen for elements you want to move off the stage briefly as you reposition things. For example, let’s say you draw three circles and one box containing text on your stage. If you decide you need to rearrange these elements, you can temporarily drag one of the circles off the stage.

NOTE The stage always starts out with a white background, which becomes the background color for your animation. Changing it to any color imaginable is easy, as you’ll learn in the next chapter.


a Tour oF The Flash

WorksPaCeYou’ll almost always change the starting size and shape of the stage depending on where people will see your finished animation—in other words, your target platform. If your target platform is a smartphone, for example, you’re going to want a smaller stage. If, on the other hand, you’re creating an animation for a ballpark’s JumboTron, you’re going to want a giant stage. You’ll get to try your hand at modifying the size and background color of the stage later in this chapter.

The TimelineWhen you go to the theater, the stage changes over time—actors come and go, songs are sung, scenery changes, and the lights shine and fade. In Flash, you’re the director, and you get to control what appears on the stage at any given moment. The timeline is the tool used to specify what’s seen or heard at a particular moment. The concept is pretty simple, and if you’ve ever used video editing software, it will be familiar. Flash animations (or movies) are organized into chunks of time called frames. Each little box in the timeline represents a frame or a point in time. You use the playhead, shown in Figure 1-6, to select a specific frame. So when the playhead is positioned at Frame 10, the stage shows what the audience sees at that point in time.

Figure 1-6The playhead is a red box that appears in the timeline; here the playhead is set to Frame 10. You can drag the playhead to any point in the timeline to select a single frame. The Flash stage shows exactly what’s in your animation at that point in time.

Playhead

Keyframes

The timeline is laid out from left to right, starting with Frame 1. Simply put, you build Flash animations by choosing a frame with the playhead and then arranging the objects on the stage the way you want them. The timeline uses a special tool called a keyframe (see Figure 1-6) to remember exactly what’s on stage at that moment. You’ll learn more about the keyframes and other timeline tools in Chapter 3. Most simple animations play from Frame 1 through to the end of the movie, but Flash gives you ways to start and stop the animation and control how fast it runs—that is, how many frames per second (fps) are displayed. Using some ActionScript magic, you can control the order in which the frames are displayed. You’ll learn how to do that on page 522.


PaNels aNd ToolBars TIP The first time you run Flash, the timeline appears automatically, but occasionally you want to hide the

timeline—perhaps to reduce screen clutter while you concentrate on your artwork. You can show and hide the timeline by selecting Window→Timeline or pressing Ctrl+Alt+T (or for the Mac, Option-⌘-T).

Panels and ToolbarsIf you followed the little exercise on page 20, you know you can put panels and toolbars almost anywhere onscreen. However, if you use the Essentials workspace, you start off with a few frequently used panels and toolbars docked neatly on the right side of the program window.

It’s easy to get confused by the Flash nomenclature. Flash has toolbars, panels, palettes, and windows. Sometimes collapsed panels look like toolbars and open up when clicked—like the frequently used Tools panel. Toolbars and panels pack the most commonly used options together in a nice compact space, so you don’t have to do a hunt-and-peck through the main menu every time you want to do something. Panels are great, but they take up precious real estate. As you work, you can hide certain tools to get a better view of your artwork. (You can always get them back by choosing their names from the Window menu.)

Toolbars and panels are such an integral part of working with Flash that it’s helpful to learn some of their tricks early on:

• Move a panel. Just click and drag the tab or top of the panel to a new location. Panels can float anywhere on your monitor, or dock on an edge of the Flash program window (as in the Essentials workspace). For more details on docking and floating, see the box on page 26.

• Expand or collapse a panel. Click the double-triangle button at the top of a panel to expand or collapse it. Collapsed panels look like toolbars, showing a few icons that hint at the tools’ purposes. Expanded panels take up more real estate, but they also give you more details and often have word labels for the tools and settings.

• Show or hide a panel. Use the Window menu to show and hide individual panels. Checkmarks appear next to the panels that are shown.

• Close a floating panel. In Windows, click the small x in the panel’s upper-right corner. On the Mac, click the x in the upper-left corner.

• Show or hide all panels. The F4 key works like a toggle, hiding or showing all the panels and toolbars. Use it when you want to quickly reduce screen clutter and focus on your artwork.

• Separate or combine tabbed panels. Click and drag the name on a tab to separate it from a group of tabbed panels. To add a tab to a group, just drag it into place.


PaNels aNd ToolBars

• Reset the panel workspace. Choose Reset <workspace name> from the Work-space Switcher. Instead of <workspace name>, you see the name of the current workspace—something like Essentials or Classic. You can also do a reset using the menus; choose Window→Workspace→Reset <workspace name>.

Docked vs. FloatingA docked toolbar or panel appears attached to some part of the workspace window, while a floating toolbar or panel is one you can reposition by dragging.

Whether you want to display toolbars and panels as docked or floating is a matter of personal choice. If you constantly need to click something on a toolbar—which means it needs to be in full view at all times—docked works best. But if you usually just need a toolbar or a panel for a brief time and want to be able to move it around on the screen (so it doesn’t cover up something else), then floating is the ticket.

To turn a docked panel into a floating panel:

1. Click any blank spot on the panel’s top bar and hold down the mouse button. You may notice a color change

(Figure 1-7), especially as you begin to move the panel. The actual visual effect is different on Mac and Windows computers, but the mechanics work the same.

2. Drag the panel away from the edge of the workspace window and release the mouse button. Flash displays the panel where you dropped it. You can reposition it anywhere you like simply by dragging it again.

To dock a floating panel, simply reverse the procedure: Drag the floating panel to the edge of the workspace window and let go of the mouse button. You see a line or a shadow when the panel is ready to dock. When you let go, Flash docks the panel automatically.

UP TO SPEED

Figure 1-7 Top: To conserve space on Flash’s jam-packed desktop, only one toolbar—the Edit bar— appears automatically. It’s positioned directly above the stage. To dis-play the other two, select Window→Toolbars→Main (to display the Main tool-bar, Windows only) and Window→Toolbars→ Controller (to display the Controller window).

Bottom: The checkmarks on the menu show when a toolbar is turned on. Choose the toolbar’s name again to remove the checkmark and hide the toolbar.


PaNels aNd ToolBars NOTE When you reposition a floating toolbar, Flash remembers where you put it. If, later on, you hide the

toolbar—or exit Flash and run it again—your toolbars appear exactly as you left them. If this isn’t what you want, use the Workspace Switcher to choose a new workspace layout or to reset the current workspace.

ToolbarsStrictly speaking, Flash has only three toolbars: Main, Controller, and Edit. (Every-thing else is a panel, even if it looks suspiciously like a toolbar.) Figure 1-7 shows all three toolbars.

• Main (Windows only). The Main toolbar gives you one-click basic operations, like opening an existing Flash file, creating a new file, and cutting and pasting sections of your drawing.

• Controller. If you’ve ever used a DVD player or an iPod, you’ll recognize the Stop, Rewind, and Play buttons on the Controller toolbar, which lets you control how you want Flash to run your finished animation. (Not surprisingly, the Controller options appear grayed out—meaning you can’t select them—if you haven’t yet constructed an animation.) With Flash Professional CS6, the Controller is a little obsolete, because now the same buttons appear below the timeline.

• Edit bar. Using the options here, you can change your view of the stage, zoom-ing in and out, as well as edit scenes (named groups of frames) and symbols (reusable drawings).

NOTE The Edit bar is a little different from the other toolbars in that it remains fixed to the stage. You can’t reposition it.

Tools PanelThe Tools panel is unique. For designers, it’s probably the most used of all the panels and toolbars. In the Essentials workspace, the Tools panel appears along the right side of the Flash program window. There are no text labels, just a series of icons. However, if you need a hint, just hold your mouse over one of the tools, and a tooltip shows the name of the tool. So, for example, mouse over the arrow at the top of the Tools panel, and the tooltip says “Selection tool (V).” The letter in parentheses is the shortcut key for that tool. Press the letter V while you’re working in Flash, and your cursor changes to the Selection tool.

Most animations start with a single drawing. And to draw something in Flash, you need drawing tools: pens, pencils, brushes, colors, erasers, and so on. The Tools panel shown in Figure 1-8 is where you find Flash’s drawing tools. Chapter 2 shows you how to use these tools to create a simple drawing; this section gives you a quick overview of the six sections of the Tools panel, each of which focuses on a slightly different kind of drawing tool or optional feature.


PaNels aNd ToolBars

SELECTION AND DRAWING TOOLSAt the top of the Tools panel are the tools you need to create and modify a Flash drawing. For example, you might use the Pen tool to start a sketch, the Paint Bucket or Ink Bottle to apply color, and the Eraser to clean up mistakes.

Figure 1-8The Tools panel groups tools by different drawing chores. Selection and Transform tools are at the top, followed by Drawing tools. Next are the IK Bones tool and the Color tools. The View tools are for zooming and panning. The Color tools include two swatches, one for strokes and one for fills. At the bottom you find the Options buttons, which change depending on the drawing tool you’ve selected. If you like, you can drag the docked Tools panel away from the edge of the workspace and turn it into a floating panel.

Selection tools

Drawing andpainting tools

Color and IK Bones

Zooming and panning

Stroke and fill

Tool options

VIEW TOOLSAt times, you’ll find yourself drawing a picture so enormous you can’t see it all on the stage at one time. Or perhaps you’ll find yourself drawing something you want to take a super-close look at so you can modify it pixel by pixel. In either of these situations, you can use the tools Flash displays in the View section of the Tools panel to zoom in, zoom out, and pan around the stage. (You’ll get to try your hand at using these tools later in this chapter; see page 35.)


PaNels aNd ToolBars NOTE The term pixel is short for “picture element.” Images on a computer screen are made up of lots of

tiny dots emitting different colors. Each dot is a pixel.

COLOR TOOLSWhen you’re creating in Flash, you’re drawing one of two things: a stroke, which is a plain line or outline, or a fill, which is the area within an outline. You can use these tools to choose a color from the Color palette before you click one of the drawing icons to begin drawing (or afterward to change the colors, as discussed in Chapter 2). Flash applies that color to the stage as you draw.

OPTIONS TOOLSWhich icons appear in the Options section at any given time depends on which tool you’ve selected. For example, when you select the Zoom tool from the View section of the Tools panel, the Options section displays an Enlarge icon and a Reduce icon that you can use to change the way the Zoom tool works (Figure 1-9).

Figure 1-9On the Tools panel, when you click each tool, the Options section shows you buttons that let you modify that particular tool. In the Tools panel’s View section, for example, when you click the Zoom tool, the Options section changes to show you only zooming options: Enlarge (with the + sign) and Reduce (with the – sign).

Zoom tool

Zoom in optionZoom out option

Properties PanelIn many ways, the Properties panel is Command Central as you work with your animation, because it gathers all the pertinent details for the objects you work with and displays them in one place. Select an object, and the Properties panel displays all of its properties and settings. It’s not just an information provider; you also use the Properties panel to change settings and tweak the elements in your animation. When there’s fine-tuning to be done, select an object and adjust the settings in the Properties panel. (You can learn more in the “Test Drive” section on page 35.)

The Properties panel usually appears when you open a new document. Initially, it shows information about your Flash document, like the stage dimensions and the animation’s frame rate. Whenever you select an individual object in your animation, the Properties panel shows that object’s details. For example, if you select a text field, the Properties panel lists the typeface, font size, and text color. You also see


PaNels aNd ToolBars

information on the paragraph settings, like the margins and line spacing. Because the Properties panel crams so many details into one place, you’ll find yourself using the collapse and expand buttons to show and hide some of the information in its subpanels, as shown in Figure 1-10.

Figure 1-10The Properties panel shows only those properties associated with the object you’ve selected on the stage. Here, because a text field is selected, the Properties panel gives you options you can use to change the typeface, font size, font color, and paragraph settings. Click the triangular expand and collapse buttons to show and hide details in the Properties panel.

Subpanel open

Subpanel closed

NOTE If you don’t see the Properties panel, you can display it by selecting Window→Properties or by pressing Ctrl+F3 (⌘-F3 on a Mac).

PROPERTIES SUBPANELSOn the Properties panel, you see different subpanels depending on the object you’ve selected. Some objects have a lot of settings, and subpanels are Flash’s way of giving you access to all of them. Fortunately, the various panels and tools work consistently. For example, many objects have settings that determine their onscreen positions and define their width and height dimensions. These common settings usually appear at the top of the Properties panel, and you set them the same way for most kinds of objects. If you want to change colors or add special effects like filters or blends, you’ll find that the tools work the same way throughout Flash.

Library PanelThe Library panel (Figure 1-11) is a place to store objects you want to use more than once. Let’s say, for example, that you create a picture-perfect bubble, sun, or snowflake in one frame of your animation. (You’ll learn more about frames on page 91.) Now, if you want that bubble, sun, or snowflake to appear in 15 additional frames, you could draw it again and again, but it really makes more sense to store a copy in the current project library and then just drag it to where it’s needed on those other 15 frames. This trick saves time and ensures consistency to boot. The Library panel has quite a few other important tricks, and you’ll learn more about


PaNels aNd ToolBars

it on page 248. To show the Library panel, click Window→Library, or press Ctrl+L (Windows) or ⌘-L (Mac).

TIP In the upper-right corner of most panels is an Options menu button. When you click this button, a menu of options appears—different options for each panel. For example, the Color Swatch panel lets you add and delete color swatches. You’ll find many indispensable tools and commands on the Options menus, so it’s worth checking them out. You’ll learn about different options throughout this book.

Figure 1-11Storing simple images as reusable symbols in the Library panel does more than just save you time: It saves you file size, too. (You’ll learn a lot more about symbols and file size in Chapter 7.) Using the Library panel you see here, you can preview symbols, add them to the stage, and easily add symbols you created in one Flash document to another.

Other Flash PanelsAs you can see from the examples on the preceding pages, each Flash panel performs specific functions, and most of them deserve several pages to describe them fully, as you’ll find throughout this book. For now, Table 1-1 gives a thumbnail description and notes the page where the panel is described in detail. If you’re eager to get started actually using Flash, jump to page 35 to start the Flash CS6 Test Drive.

TAble 1-1 Flash Panels and their uses (in order as they appear on the Window menu)

PANEL NAMEKEYBOARD SHORTCUT PURPOSE

Timeline Windows: Ctrl+Alt+K Mac: Option-⌘-T

Technically, the timeline is just another panel. You can move, hide, expand, and collapse the timeline just as you would any other panel. See page 91 for more.

Motion Editor none A powerful tool used to create and control animation effects. See page 311 for more.


PaNels aNd ToolBars


Tools Windows: Ctrl+F2 Mac: ⌘-F2

Perhaps the most frequently used panel of all—it holds drawing, selecting, and coloring tools. The Tools panel also includes special-ized tools like the IK Bones tools and the 3D Rotation tool. See page 60 for more.

Properties Windows: Ctrl+F3 Mac: ⌘-F3

Everything that appears on the stage has properties that define its appearance or char-acteristics. Even the stage has properties, like width, height, and background color. You can review and edit an object’s properties in the Properties panel. See page 29 for more.

Library Windows: Ctrl+L Mac: ⌘-L

Holds graphics, symbols, and entire mov-ies that you want to reuse. See page 248 for more.

Common Libraries

none When you want to share buttons, classes, or sounds among several different Flash docu-ments, use the common libraries. That way, they’ll be available to all your projects. See the tip on page 274 for more.

Motion Presets none Serves up dozens of predesigned animations. See page 295 for more.

Actions Windows: F9 Mac: Option-F9

You use this panel to write ActionScript code. The Actions panel provides a window for code, a reference tool for the programming language, and a visual display for the object-oriented nature of the code. See page 415 for more.

Code Snippets none Contains predesigned chunks of code—some-one else sweated the details so you don’t have to. Specific bits of code perform timeline tricks, load or unload graphics, handle audio-visual tasks, and program buttons. See the box on page 445 for more.

Behaviors Windows: Shift+F3 Mac: Shift-F3

The earlier version of ActionScript (version 2.0) uses this panel to provide predesigned bits of code.

Compiler Errors Windows: Alt-F2 Mac: Option-F2

Here’s where you troubleshoot ActionScript code. Messages explain the location of an error and provide hints as to what went wrong. See page 665 for more.

Debug Panels none Additional panels to help you find errors in your ActionScript programs. See page 662 for more.


PaNels aNd ToolBars


Movie Explorer Windows: Alt+F3 Mac: Option-F3

Helps you examine the elements in your Flash animation, including separate scenes if you’ve created them. The display uses a tree struc-ture to show the relationship of the elements.

Output Windows: F2 Mac: F2

Another place to debug ActionScript pro-grams. The Output panel is used to display text messages at certain points as a program runs. See page 657 for more.

Align Windows: Ctrl+K Mac: ⌘-K

Lets you align and arrange graphic elements on the stage. See page 78 for more.

Color Windows: Shift+F9 Mac: Shift-⌘-F9

Lets you select and apply colors to graphic elements. See page 198 for more.

Info Windows: Ctrl+I Mac: ⌘-I

Provides details about objects, like their loca-tion and dimensions. The Info panel also keeps track of the cursor location and the color immediately under the cursor. See page 104 for more.

Swatches Windows: Ctrl+F9 Mac: ⌘-F9

Colors and gradients that you can apply to graphic elements. You can create your own swatches for colors you want to reuse. See page 203 for more.

Transform Windows: Ctrl+T Mac: ⌘-T

Lets you change the size, shape, and position of graphic elements on the stage. You can even use the Transform panel to reposition or rotate objects in 3-D space. See page 174 for more.

Components Windows: Ctrl+F7 Mac: ⌘-F7

Holds predesigned components you can use in your Flash projects. You’ll find user interface components like buttons and checkboxes, components that can be used to create data tables, and components used to control movie and sound players. See page 543 for more.

Component Inspector

Windows: Shift+F7 Mac: Shift-F7

Provides compatibility with older animations. (Flash CS6 displays component properties in the Properties panel. Earlier versions of Flash used the Component Inspector. See the box on page 560 for more.)

Accessibility (under Other Panels)

Windows: Alt+Shift+F11 Mac: Shift-⌘-F11

Tools that help you ensure that vision- and hearing-impaired folks can enjoy the anima-tions you create using Flash. See the box on page 34.


PaNels aNd ToolBars


History (under Other Panels)

Windows: Ctrl+F10 Mac: ⌘-F10

Lets you backtrack or undo specific steps in your work. Flash keeps track of every little thing you do to a file, starting with the time you created it (or the last time you opened it). You can also use this panel to save a series of commands you want to reuse later.

Scene (under Other Panels)

Windows: Shift+F2 Mac: Shift-F2

Helps you organize and manage your scenes. (You can break long Flash animations into separate scenes, as described on page 529.)

Strings (under Other Panels)

Windows: Ctrl+F11 Mac: ⌘-F11

Need to create an animation or application that works in different languages? Using the Strings panel, you can create and manage multi-language versions of the text. (This book doesn’t cover multi-language Flash.)

Web Services (under Other Panels)

Windows: Ctrl+Shift+F10 Mac: Shift-⌘-F10

Used only with ActionScript 2.0 projects that connect to the Internet. (This book doesn’t cover ActionScript 2.0.)

Why Accessibility MattersThe term accessibility refers to how easy it is for folks with physical or developmental challenges (like low or no vision) to understand or interact with your animation.

As you can imagine, a Flash animation—which often includes audio in addition to video and still images—isn’t going to be experienced the same way by someone who’s blind or deaf as it is by someone who isn’t impaired. But there is help. One of the features that conscientious Flashionados build into their animations is alternative information for those who can’t see or hear. Often, sight-and hearing- impaired folks use assistive devices to “report back” on what they otherwise can’t access, so Flash animators build content into their animations that these assistive devices can access and translate.

Thanks to U.S. legislation referred to as Section 508, local, state, and federal websites absolutely have to be accessible

and useable to the public. But if you’re a private individual planning to incorporate your animation into a website, you shouldn’t ignore the issue of accessibility just because no-body’s looking over your shoulder. If you ignore accessibility, you eliminate a whole audience who might otherwise benefit from your content.

For more information on accessibility, check out these websites:

• www.adobe.com/accessibility/products/flash/

• www.Section508.gov

• www.paciellogroup.com

• www.WebAIM.org

• www.w3.org/wai

WORD TO THE WISE


The Flash Cs6 TesT driVeThe Flash CS6 Test Drive

For the tutorials in this section, you need a Flash animation to practice on. There’s one ready and waiting for you on the Missing CD page at www.missingmanuals.com/cds/flashcs6mm. The file is named 01-1_First_Animation.fla.

NOTE In case you’re wondering, the number 01 at the beginning stands for Chapter 1, and the -1 indicates it’s the first exercise in the chapter. Other Missing CD files for this book are named the same way. You can download all the exercise files in a single ZIP file or you can grab them chapter by chapter. The Missing CD also includes links to all the web-based resources mentioned in this book.

Open a Flash FileGet the file 01-1_First_Animation.fla and save it on your computer. You may want to create a FlashMM folder in your My Documents or Documents folder to hold your Missing Manual exercises. Launch Flash, and then choose File→Open. When the Open dialog box appears, navigate to the file you just downloaded, and then click Open. When you open a document, the Welcome screen disappears. Flash shows you the animation on the stage, surrounded by the usual timeline, toolbars, and panels. If you’re using the Essentials workspace, it should look like Figure 1-12.

Figure 1-12After you open the exer-cise in Flash, your screen should look like this. At the bottom, the timeline shows two layers—one named background and the other, wheel. The stage shows (surprise, surprise) a background and a wheel. To the right, the Properties panel displays the properties for the document.


The Flash Cs6 TesT driVe

Explore the Properties PanelThe Properties panel appears docked to the right side of the stage when you open a new document. As shown in Figure 1-13, it shows the Property settings for objects. Initially, it shows the properties for the Flash document itself. Click another object, such as the wheel, and you see its properties. Why are properties so important? They give you an extremely accurate description of objects. If you need to precisely define a color or the dimensions of an object, the Properties panel is the tool to use. It not only reports the details, but it also gives you the tools to make changes, as shown in this little exercise:

1. At the top of the Tools panel, click the Selection tool (solid arrow).

As an alternative, press V, the keyboard shortcut for the Selection tool.

2. Click the white part of the stage.

The Properties panel shows the properties for your Flash document. At the top, you see the word “Document,” and underneath, you see the filename.

Figure 1-13Left: When you first open a document, the Properties panel shows property settings for the document.

Right: Select the wheel in the document, and you see its properties. Click the triangle buttons to expand and collapse the subpanels.

Subpanel closedSubpanel open

3. Click the triangle button to open the Properties subpanel.

The button works like a toggle to open and close the subpanel. The subpanel displays three settings: FPS (frames per second), Size, and Stage.

4. Click the white rectangle next to Stage.

A panel opens with color swatches.



5. Click a color swatch—any color will do.

The background color of the stage changes to the color you chose.

6. Click the wheel.

Information about the wheel fills the Properties panel. The wheel is a special type of object called a Movie Clip symbol. You’ll learn much more about Movie Clips and other reusable symbols in Chapter 7.

NOTE You may notice that you can’t select anything else in this document. That’s because the other objects are in the background layer, which is locked. (For more details on locking layers, see page 148.)

Resize the StageIn Flash, the size of your stage is the actual finished size of your animation, so setting its exact dimensions is one of the first things you do when you create an animation, as you’ll see in the next chapter. But you can resize the stage at any time.

Here’s how to change the size of your stage:

1. With the Selection tool, click on a blank area of the stage (to make sure nothing on the stage is selected).

Alternatively, you can click the Selection tool and then choose Edit→Deselect All.

2. In the Properties panel, open the Properties subpanel, and then click the Edit button.

The Document Settings window appears, as shown in Figure 1-14. At the top of the window are boxes labeled Dimensions. That’s where you’re going to work your magic.

Figure 1-14The Document Settings dialog box puts several related settings in one place. At the top are the document’s dimensions. In the lower-left corner are settings for the stage’s background color and the frame rate. Click “Ruler units” to choose among Inches, Points, Centimeters, Millimeters, and Pixels.



3. Click in the width box (which currently reads “550 px”), and then type 600.

You can change both the width and the height. The changes won’t take place until you click OK. So if you have second thoughts and don’t want to make any changes, then just click Cancel.

TIP If you want to change the stage back to its original dimensions after you’ve clicked OK, you can do that by choosing Edit→Undo or pressing Ctrl+Z (⌘-Z on a Mac). Undo works like it does in most programs, undoing your last action, and you can press it multiple times to work your way back through your recent actions.

4. Click OK when you’re done.

The stage resizes according to your instructions.

Zoom In and OutWhen your Flash project gets big or complicated, you may want to focus on just a portion of the stage. If you’ve used other graphics programs—from Windows Paint to iPhoto or Photoshop—there’s not much mystery to the process. In the Tools panel, click the Zoom tool, which looks like a magnifying glass (Figure 1-15). Initially, the Zoom tool shows a + sign, meaning it’s all set to zoom in. Click any spot you want to zoom in on, and you get a closer view. As an alternative, you can click and drag over an area to zoom in with more precision. As you drag, a rectangle appears to mark the area of interest.

Figure 1-15Choose the Zoom tool and then click the stage to zoom in on your Flash document. Hold the Alt (Option) key down to zoom out. Once you’re zoomed in, you can move around using either the scrollbars or the Hand tool (H).

Zoom toolHand tool

Scrollbars



Using the Zoom tool, you can get so close that you see individual pixels in your artwork. Very handy for some operations. Once you’re zoomed in, you can use the scroll bars at the right and bottom of the stage to reposition the stage in the view-ing area. Even easier, choose the Hand tool (H) and then click and drag the stage within the viewing area.

Want to zoom out? Hold down the Alt (Option) key as you use the Zoom tool. Each time you click, you see more and more of the stage. Directly above the stage is the Edit bar. (If you don’t see it, select Window→Toolbars→Edit Bar.) A menu on the Edit bar sets the Magnification or Zoom property as a percentage, as shown in Figure 1-16.

Figure 1-16The Magnification menu in the Edit bar gives you a quick readout on the Zoom factor. Click the menu to choose from several presets, including “Fit in Window,” which shows the entire stage, or Show All, which zooms in or out to show all the objects drawn on the stage.

Zoom menu

Make It MoveIf you’ve followed along in the exercises up to this point, you deserve a taste of the Flash magic to come. Enough studying panels and tools—Flash is an animation program. It’s time to make something move, or more precisely, to make something bounce. With the help of a little feature called Motion Presets, it’s easier than you think:

1. In the Magnification menu, choose “Fit in Window.”

This gives you a view of the entire stage.

2. With the Selection tool (V), drag the wheel to the top of the stage.

All the parts of the wheel (tire, spokes, hub) move as a single unit because they’re grouped within a Flash symbol, called a Movie Clip.

3. Choose Window→Motion Presets.

A floating panel appears, as shown in Figure 1-17. Motion Presets are covered in detail on page 295, but for this exercise, you just need a couple of basic steps.

4. Click the triangle next to Default Presets.

The Default Presets folder opens, showing many predesigned motions.



5. Click the words “bounce-smoosh.”

At the top of the panel, the preview window gives you an idea of how the bounce-smoosh preset works.

6. Make sure the wheel is selected on the stage and that “bounce-smoosh” is selected in the Motion Presets panel, and then click the Apply button.

A green line appears hanging from the bottom of the wheel. This line is called the motion path, and it shows you how the wheel will move over the course of the animation. In the timeline, the wheel layer turns to blue to indicate that it’s now a motion tween.

NOTE Tween is an animation term that comes from all those in-between frames that animators have to draw to create a smooth animated motion.

Figure 1-17The Motion Presets window has two fold-ers. The one called Default Presets (shown open here) holds presets designed by Adobe. The other folder holds presets that you design and save. The “tail” hanging down from the wheel is the motion path.

Motion Presets panel

MotionPath

7. Close the Motion Presets panel.

That’s all it takes to animate the wheel, so you might as well close the Motion Presets window. You can always bring it back later if you want to try out some of the other presets on the wheel.



Play an AnimationNaturally, after you’ve animated an object in Flash, you want to see the results. You’ll be checking your work frequently, so Adobe makes it easy to play an animation. Just press Enter (Return), and your animation bounces and smooshes as advertised. In the timeline, notice how the playhead moves along frame by frame as your anima-tion plays. You can see your animation at all the different stages by dragging the playhead up and down the timeline—a process sometimes called scrubbing.

New in Flash CS6, the animation controller is fixed to the bottom of the timeline (Figure 1-18). That’s the perfect place because it’s always available.

Figure 1-18If you’ve ever used a DVD player or an iPod, the animation play icons at the bottom of the timeline look comfortingly familiar. You can move one frame at a time or jump to the beginning or end of an animation.

Go to first frame Go to last frameStep back one frame Step forward one frame

Stop/Play

Save a FileSaving your work frequently is important in any program, and Flash is no exception. You don’t want to have to go back and recreate that perfect animated sequence because the power went out. The minute you finish a sizable chunk of work, save your



Flash file by pressing Ctrl+S (⌘-S). The Save command also appears on the menu bar: File→Save. Both maneuvers save the animation with the current name. So, if after following the exercises in this chapter, you use the Save command, you end up with a single Flash document using the original filename: 01-1_First_Animation.fla.

If you want to save the file under a different name, use Save As or Ctrl+Shift+S (Shift-⌘-S). A standard window opens where you can choose a folder and give your document a name. When you use Save As, you end up with two documents, the original and one saved with the new name. The newly named document is the one that remains open in the Flash workspace.

If you close a document (File→Close) after you’ve made changes, Flash automatically asks if you want to save it. You’re given three options. Choose Save to save your work and close the document. Choose Don’t Save to close the document without saving your work. Choose Cancel if you don’t want to save and don’t want to close the document.

NOTE Flash Professional CS6 provides a new life-saving feature for files. When you create a new document you can turn on Auto-Save. This feature saves your document periodically even if you forget. You even get to choose the period. Initially, the Auto-Save period is set to every 10 minutes. To change that, click the number and type a new value.

Don’t Be Afraid to PlayThis first chapter introduced some important basics to help you get started working in Flash. Here’s the most valuable Flash tip of all: Don’t be afraid to play. This book is full of exercises that carefully show you how to build animations, but that doesn’t mean you shouldn’t head off the beaten path from time to time. The more you experiment and say, “What happens if I try this?” the faster you’ll learn. It’s true of all computer programs, but it’s especially true with a graphics program

like Flash. So download some of the animations from www.missingmanuals.com/cds/flashcs6mm. Open them in Flash, and then disassemble them. Alter the artwork. Mess with the tweens. Add new parts. You won’t break anything. You can always make copies or download the originals again. For a start, why not go back and check out how some of the other motion tweens work with that wheel?

UP TO SPEED

oreilly.comSpreading the knowledge of innovators

Want to read more?

You can buy this book at oreilly.comin print and ebook format.

Buy 2 books, get the 3rd FREE!Use discount code: OPC10

All orders over $29.95 qualify for free shipping within the US.

It’s also available at your favorite book retailer,including the iBookstore, the Android Marketplace,

and Amazon.com.

http://shop.oreilly.com/product/0636920022787.do

Date post:	11-Feb-2022
Category:	Documents
Upload:	others
View:	3 times
Download:	0 times