Foundation
Flash CS3
for Designers
Tom Green
and David Stiller
Foreword by Branden Hall
All you need to succeed with Flash Professional CS3!
Covers all the fundamentals and all the new features,
including the basics of ActionScript 3.0
Don’t become a good Flash designer—become a great one!
Foundation Flash CS3
for Designers
Tom Green and David Stiller
Foundation Flash CS3 for Designers
Copyright © 2007 by Tom Green and David Stiller
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording, or by any information storage or retrieval
system, without the prior written permission of the copyright owner and the publisher.
ISBN-13 (pbk): 978-1-59059-861-0
ISBN-10 (pbk): 1-59059-861-X
Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1
Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence
of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark
owner, with no intention of infringement of the trademark.
Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor,
New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail
[email protected], or
visit www.springeronline.com.
For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley,
CA 94705. Phone 510-549-5930, fax 510-549-5939, e-mail
[email protected], or visit www.apress.com.
The information in this book is distributed on an “as is” basis, without warranty. Although every precaution
has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to
any person or entity with respect to any loss or damage caused or alleged to be caused directly or
indirectly by the information contained in this work.
The source code for this book is freely available to readers at www.friendsofed.com in the Downloads section.
Credits
Lead Editor Production Editor
Chris Mills Ellie Fountain
Technical Reviewer Compositor
Adam Thomas Lynn L'Heureux
Editorial Board Artist
Steve Anglin, Ewan Buckingham, Gary Cornell, Milne Design Services, LLC
Jonathan Gennick, Jason Gilmore, Jonathan Hassell,
Chris Mills, Matthew Moodie, Jeffrey Pepper, Proofreader
Ben Renow-Clarke, Dominic Shakeshaft, Nancy Sixsmith
Matt Wade, Tom Welsh
Indexer
Project Manager Carol Burbo
Tracy Brown Collins
Cover Image Designer
Copy Edit Manager Corné van Dooren
Nicole Flores
Interior and Cover Designer
Copy Editors Kurt Krames
Damon Larson and Ami Knox
Manufacturing Director
Assistant Production Director Tom Debolski
Kari Brooks-Copony
To Robert Green, my “Number One” son and camping buddy.
—Tom Green
To the memory of Travis Swinton, educator, musician, artist, and best
Chewbacca impersonator in the galaxy. I’m deeply grateful we had the
chance to catch up.
—David Stiller
CONTENTS AT A GLANCE
Chapter 1: Learning the Flash CS3 Professional Interface . . . . . . . . . . . 3
Chapter 2: Graphics in Flash CS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Chapter 3: Symbols and Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Chapter 4: ActionScript Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Chapter 5: Audio in Flash CS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Chapter 6 Text in Flash CS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Chapter 7: Animation in Flash CS3 . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Chapter 8 Video in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
Chapter 9: Using the Flash UI Components to Build Interfaces . . . . 389
Chapter 10: CSS and Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
Chapter 11: Dynamic Data (XML) and Flash . . . . . . . . . . . . . . . . . . . 451
Chapter 12: Going Mobile in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . 473
Chapter 13: Optimizing Flash Movies . . . . . . . . . . . . . . . . . . . . . . . . 505
Chapter 14: Publishing Flash Movies . . . . . . . . . . . . . . . . . . . . . . . . 535
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556
v
CONTENTS
Chapter 1: Learning the Flash CS3 Professional Interface . . . . . . . . . . 3
The Start page and creating a Flash document . . . . . . . . . . . . . . . . . . . . . . . . . 4
Managing your workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Setting document preferences and properties . . . . . . . . . . . . . . . . . . . . . . . . . 9
The Property inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Zooming the stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Exploring the panels in the Flash interface . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
The timeline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Using the Property inspector . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
The Tools panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
The library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Where to get help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Using layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Your turn: Building a Flash movie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Adding the mountains and playing with color . . . . . . . . . . . . . . . . . . . . . . . 32
Using trees to create the illusion of depth . . . . . . . . . . . . . . . . . . . . . . . . . 33
Using a motion tween to create a twinkling star . . . . . . . . . . . . . . . . . . . . . 36
A moon over Lake Nanagook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Breaking the stillness of the night at Lake Nanagook . . . . . . . . . . . . . . . . . . . 41
Testing your movie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Your turn: Moonrise over Lake Nanagook . . . . . . . . . . . . . . . . . . . . . . . . . 44
What you’ve learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Chapter 2: Graphics in Flash CS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
The Tools panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
The Selection and Subselection tools . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
The Free Transform tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
The Gradient Transform tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Object Drawing mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Your turn: Moon rise at Lake Nanagook . . . . . . . . . . . . . . . . . . . . . . . . . . 60
CONTENTS
Drawing in Flash CS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
The Pencil tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
The Brush tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
The Eraser tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
The Pen tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Your turn: Trees grow at Lake Nanagook . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Working with Color in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Creating persistent custom colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Your turn: Playing with color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Using bitmap images in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Working with bitmaps inside Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Your turn: Tracing bitmaps in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
JPG files and Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Using GIF files in Flash CS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Importing Fireworks CS3 documents into Flash CS3 . . . . . . . . . . . . . . . . . . . 93
Importing Illustrator CS3 documents into Flash CS3 . . . . . . . . . . . . . . . . . . . 96
Importing Photoshop CS3 documents into Flash CS3 . . . . . . . . . . . . . . . . . . 100
Notes from the Photoshop File Importer front . . . . . . . . . . . . . . . . . . . . . 104
Creating a banner ad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
What you’ve learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Chapter 3: Symbols and Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Symbol essentials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Symbol types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Editing symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Symbols and 9-slice scaling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
The 9-slice “gotchas” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Sharing symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Sharing libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Filters and blend modes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Applying a Drop Shadow filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Playing with blends . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Managing content on the stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Aligning objects on the stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Stacking order and using the Align panel . . . . . . . . . . . . . . . . . . . . . . . . . 140
Masks and masking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
A simple mask . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Using text as a mask . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Your turn: Creating a soft mask in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Creating the cutout for the mask . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
A mask without a mask layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
What you’ve learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
viii
CONTENTS
Chapter 4: ActionScript Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
The power of ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
The Actions panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
ActionScript vs. behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Everything is an object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Classes define objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Commenting code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Dot notation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Data types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Conditional statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Class files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Document class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
How to read the ActionScript 3.0 Language and Components Reference . . . . . . . . . 192
Search tactics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
Checking syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Your turn: Using ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Pausing the main timeline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Looping the timeline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
What you’ve learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Chapter 5: Audio in Flash CS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Flash and the audio formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Bit depth and sample rates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Flash and MP3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Adding audio to Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Using audio in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Your turn: Adding sound to a button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Controlling audio with ActionScript 3.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Playing a sound from the library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Using a movieclip to play a sound . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Playing a sound from outside of Flash . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Turning a remote sound on and off . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Your turn: Building an MP3 player . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
What you’ve learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
ix
CONTENTS
Chapter 6: Text in Flash CS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Fonts and typefaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Working with device fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Types of text fields . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Static text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Your turn: Playing with static text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Dynamic text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
Input text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
HTML formatting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Hyperlinks and Flash text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Using HTML for hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Using hyperlinks to trigger ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . 268
Embedding font outlines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Checking spelling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
Your turn: A visit to the pond . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Scrolling text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
What you’ve learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Chapter 7: Animation in Flash CS3 . . . . . . . . . . . . . . . . . . . . . . . . . . 283
Shape tweening . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Scaling and stretching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Shape tween modifiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Altering shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Shape hints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293
Altering gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Motion tweening . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Rotation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
Motion tween properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
Scaling, stretching, and deforming . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
Easing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Custom easing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Using animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
A closer look at the Timeline panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
Onion skinning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Editing multiple frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Combining timelines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Motion tween effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322
Motion guides . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Tweening a mask . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
Your turn: Making an animated button . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328
An even cooler animated button . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Copy motion as ActionScript 3.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
What you’ve learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
x
CONTENTS
Chapter 8: Video in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
Video on the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
Encoding an FLV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Playing an FLV in Flash CS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
Using the Import Video wizard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
Using the FLVPlayback component . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357
Playing video using ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
Using the FLVPlayback control components . . . . . . . . . . . . . . . . . . . . . . . 364
Using the FLVPlaybackCaptioning component . . . . . . . . . . . . . . . . . . . . . . 366
Timed text XML for captions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
Preparing and using alpha channel video . . . . . . . . . . . . . . . . . . . . . . . . . 369
Going full screen with video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
When video is not video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375
Your turn: XML captions for video . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378
Playing with alpha channel video . . . . . . . . . . . . . . . . . . . . . . . . . . . 383
What you’ve learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
Chapter 9: Using the Flash UI Components to Build Interfaces . . . . 389
Button component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 391
Using the Button component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
Changing the Button component’s appearance . . . . . . . . . . . . . . . . . . . . . . . 396
Skinning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396
Styling components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398
CheckBox component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401
ColorPicker component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402
ComboBox component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404
DataGrid component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
Label component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
List component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409
NumericStepper component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
ProgressBar component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412
RadioButton component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413
ScrollPane component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415
Slider component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416
TextArea component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417
TextInput component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418
TileList component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419
UILoader component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420
UIScroller component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422
What you’ve learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423
xi
CONTENTS
Chapter 10: CSS and Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425
The power of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427
Element selectors vs. class selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434
Custom tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437
Style inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439
Styling hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
Embedded fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442
Loading external CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445
What you’ve learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448
Chapter 11: Dynamic Data (XML) and Flash . . . . . . . . . . . . . . . . . . . 451
The power of XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453
Writing XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453
Loading an XML file . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456
E4X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457
E4X bonus round . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462
Your turn: Using XML to build a slideshow . . . . . . . . . . . . . . . . . . . . . . . . . . 463
What you’ve learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471
Chapter 12: Going Mobile in Flash . . . . . . . . . . . . . . . . . . . . . . . . . . 473
Flash and devices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474
Device Central CS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476
Creating a new Flash document using Device Central . . . . . . . . . . . . . . . . . . . . 480
Testing a mobile movie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484
Publishing a mobile movie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487
Constructing a mobile application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489
Adding the gallery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494
“Wiring it up” with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495
What you’ve learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 503
Chapter 13: Optimizing Flash Movies . . . . . . . . . . . . . . . . . . . . . . . . 505
Flash’s “love-hate” Internet relationship . . . . . . . . . . . . . . . . . . . . . . . . . . . . 506
This “Internet” thing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507
Enter the World Wide Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508
Bandwidth . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 509
So who are these folks we call users? . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
Streaming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
The Bandwidth Profiler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512
Optimizing and fine-tuning your Flash movies . . . . . . . . . . . . . . . . . . . . . . . . 516
Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 516
Optimizing elements in the movie . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518
Using the Loader class to display images and SWFs . . . . . . . . . . . . . . . . . . . 520
Your turn: Creating a preloader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 522
Optimizing Flash content for use in video . . . . . . . . . . . . . . . . . . . . . . . . 527
What you’ve learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532
xii
CONTENTS
Chapter 14: Publishing Flash Movies . . . . . . . . . . . . . . . . . . . . . . . . 535
Web formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 536
Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 537
HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 538
Animated GIFs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539
QuickTime . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 542
It’s showtime! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543
Publishing Flash movies containing linked files . . . . . . . . . . . . . . . . . . . . . 553
What you’ve learned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556
xiii
FOREWORD
Like a lot of kids, I was entranced by animation. My childhood was littered with flipbooks,
doodles, and at least one zoetrope I built from a kit. I even had an electronic toy called the
Etch-a-Sketch Animator that let you create 12 black-and-white “pictures” on a 3040-pixel
screen and make them play back in sequence. This created possibly the worst animation
ever, but to a 10-year-old it was the coolest thing!
This love for animation was lost for a few years, as I got deeper and deeper into computers.
As I moved through high school and kept learning new operating systems and programming
languages, I was starting to realize that one day working/playing with computers could be my
career.
Then, in my sophomore year of college, I was introduced to Flash. All of the books I had read
about Disney, Warner Brothers, and Hanna-Barbera came flooding back to me. With reckless
abandon I learned everything I could about Flash—and was done after about a week. Flash
wasn’t exactly complicated in those days, and ActionScript didn’t consist of much more than
stop and play.
The good news was that I was in a perfect place for keeping pace with Flash as it grew—my
programming background along with my love for animation let me keep on top of every new
version of Flash as it was released. I was in the enviable position of being able to just ride the
wave from version to version.
During that time, I spoke at and attended a lot of Flash conferences, where I was lucky
enough to meet both Tom Green and David Stiller. If you’re ever in a room with Tom, you’ll
know—the raucous laughter is your first clue. Tom has a real exuberance for learning, teach-
ing, and life in general that is all too rare in this world. He is constantly striving to learn more
and discover new ways to convey that knowledge to his students. As for David, he is from the
true old school—a modern-day Renaissance man. He struck up a conversation with me about
obscure board games a few years ago. The conversation wound its way through quantum
mechanics, the proper brewing of Turkish coffee, and toy building, and technically is still
going on today. I am proud to be able to call on him as a contractor for my company and
even more proud to call him a friend.
FOREWORD
Now, back to Flash. Recently, it has become such a huge product that I’m starting to see
what folks who are new to Flash go through all over again—I’m starting to struggle a bit
with the new versions. I don’t have the time to peek into each new cranny of the program.
I can’t sit down and figure out all the new best practices. It’s pretty overwhelming.
That’s why I was very, very happy when I found out that Tom and David were working on
this book—they have done all the research for me, so I’m not going to fall behind! I knew
Tom and David would take Flash CS3 and distill everything about it into an informative and
fun-to-read tome for newcomers and old hats like myself.
I’m very happy to tell you, they didn’t disappoint. Enjoy the firm binding and nice new look
of your new book now because I’m sure it will become well loved, dog-eared, and covered
in sticky notes in no time!
Branden Hall
CTO—Automata Studios Ltd.
June 2007
xvi
ABOUT THE AUTHORS
Tom Green is currently professor of interactive media in the School
of Media Studies at Humber College Institute of Technology and
Advanced Learning in Toronto, Canada. He has written seven previ-
ous books on Adobe technologies and many articles for numerous
magazines and websites, including Community MX, Digital Web
Magazine, and Computer Arts. He has spoken at over 20 confer-
ences internationally, including Adobe Max, NAB, FITC, MX North,
Digital Design World, TODCON, and SparkEurope. You can contact
Tom at
[email protected].
David Stiller is an independent contractor whose portfolio
includes multimedia programming and design for NASA, DOT,
Adobe, major US automotive and boat manufacturers, and
dozens of clients across the US and Canada. David gets a kick
out of sharing “aha!” moments with others through consulta-
tion, mentoring, and regular contributions to the Adobe Flash
and ActionScript forums, his blog (http://quip.net/blog/),
and articles for Community MX. In off hours, his interests
include unicycling, anaglyph 3D photography, finely crafted
wooden game boards, Library of Congress field recordings, and Turkish coffee. David lives in
Virginia with his amazing wife, Dawn, and his beguiling daughter, Meridian.
ABOUT THE TECHNICAL REVIEWER
Adam Thomas’s career can best be defined as a successful hobby.
Having an early interest in computers and being mostly self-taught,
he decided to go to Humber College in Toronto to study computer
information systems. Soon after his graduation in 2001, Adam was
invited back to his school to be a professor of rich media and web
development. Alongside teaching, he runs a successful web studio
called Robin Hood Tech. Adam takes pride in employing former
students who he has had the privilege of teaching and giving them
the opportunity to gain experience and excel in a competitive field.
Adam is cofounder of the Robin Hood Business Model, which advo-
cates for justice in business. Adam strives for integrity and simplic-
ity, but his true motivation is his wife and family, who are daily
reminders of love, faith, and blessing.