spine = 0.8125" 432 page count
CHERIDAN KERR AND JON KEATS
friends of ED
™
ADOBE
®
LEARNING LIBRARY
CREATE FLASH WEBSITES THAT WOW, AND
LEARN HOW TO GET YOUR SITE SEEN ON THE
INTERNET.
STREAMLINE THE PRODUCTION OF CUTTING-
EDGE FLASH CS4 ANIMATIONS AND
APPLICATIONS.
GAIN A UNIQUE COMMERCIAL PERSPECTIVE
FROM FUN AND CREATIVE EXERCISES DERIVED
FROM HARD-WON EXPERIENCE.
FLASH CS4
Kerr
Keats
THE
ESSENTIAL
GUIDE TO
• Use ActionScript 3.0 to create interactive, functional, and gripping
Flash CS4 animations.
• Incorporate sound and video into your Flash CS4 movies.
• Ensure that your projects adhere to W3C standards.
• Create an online banner-advertisement campaign that is ready
to dispatch to publishers.
• Use online marketing techniques and design principles to create
truly compelling campaigns.
this print for reference only—size & color not accurate
Flash CS4
Cheridan Kerr and Jon Keats
Lead Editor
Ben Renow-Clarke
Technical Reviewers
Leyton Smith, Alberto González López Olivera
Editorial Board
Clay Andres, Steve Anglin,
Mark Beckner, Ewan Buckingham,
Tony Campbell, Gary Cornell,
Jonathan Gennick, Michelle Lowman,
Matthew Moodie, Jeffrey Pepper,
Frank Pohlmann, Ben Renow-Clarke,
Dominic Shakeshaft, Matt Wade, Tom Welsh
Project Managers
Richard Dal Porto, Candace English
Copy Editors
Candace English, Damon Larson
Associate Production Director
Kari Brooks-Copony
Production Editor
Ellie Fountain
Compositor
Lynn L’Heureux
Proofreader
Lisa Hamilton
Indexer
Ron Strauss
Artist
April Milne
—Cheridan Kerr
To my loving wife Bianca, our family, and bub to be. Praise to Cheridan
for the patience. Special thanks to Chub Chub for the support and
companionship on those late lonely nights.
—Jon Keats
iv
CONTENTS AT A GLANCE
About the Authors xv
About the Technical Reviewer
xvi
Acknowledgments
xvii
Introduction
xviii
Chapter 1: Welcome to Flash CS4
1
Chapter 2: Getting Creative: How to Make Your Ideas
37
Come to Life Through Project Planning
Chapter 3: Getting Your Hands Dirty: Layers, Masks,
61
and Photoshop
Chapter 4: Draw Me a Picture: Using the Drawing Tools
83
Chapter 5: Filters and Blends
123
Chapter 6: Let’s Get Animated!
151
Chapter 7: Achieving Lifelike Motion with
189
Chapter 1: Welcome to Flash CS4
1
Welcome to the Future! 2
How Flash CS4 is different from Flash CS3 3
Object-based animation 4
The Motion Editor panel gives you greater control 7
Motion tween presets gets you started quickly! 10
Achieve pure motion with inverse kinematics 13
Creating an IK animation with symbols 13
Instant 3D transformations using Flash CS4 17
An artist is born with the Deco drawing tool 17
The Vine fill 17
The Grid fill 23
The Symmetry brush 25
Just how do all these great things benefit us? 26
Advertising templates in Flash CS4 27
Who uses Flash CS4? 34
Graphic designers 34
Animators 34
Web designers 34
Web developers 34
Summary 35
CONTENTS
viii
Chapter 2: Getting Creative: How to Make Your Ideas
37
Come to Life Through Project Planning
The development cycle: Implementing the design flow in your Flash CS4 project 38
Phase 1: Concept and planning 39
Researching what your users want to do 40
Types of image formats 86
Bitmap or raster graphics 86
Vector graphics 87
Paths 87
Direction lines and points 87
CONTENTS
ix
What can the drawing tools do? 87
Drawing objects 88
Using Merge Drawing mode 88
Using Object Drawing mode 90
Using Primitive Shape mode 91
Using the 3D Rotation tool 93
Text madness! Using the Text tool 95
Implementing text fields 95
Anti-aliasing fonts 95
Using device fonts 96
Using font outlines. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Creating and working with symbols 97
Movie clips 98
Buttons 98
Graphic symbols 98
Font symbols 98
Defining symbols and instances 99
Creating an empty symbol 99
Editing symbols 101
Drawing a logo 102
Importing the sketch 104
Mastering the Pen tool 108
Pulling it all together 117
Motion tweens 158
Classic tweens 158
Shape tweens 159
Frame-by-frame animation 159
Inverse kinematic poses 159
Creating a motion tween 159
Using motion tween presets 164
Creating pathed tween motion 169
Customizing easing on classic tweens 169
Shape tweens 170
Creating a shape tween 171
Creating a frame-by-frame animation 171
Using onion skinning in frame-by-frame animations 171
Creating an animated leaderboard 173
Animating text on the banner 182
Summary 186
Chapter 7: Achieving Lifelike Motion with Inverse Kinematics 189
Learning about armatures and bones 190
Understanding inverse-kinematic shapes 191
Inverse-kinematic poses 193
Using the inverse kinematics Properties Inspector 196
Making a monster! 199
Bringing the armature to life 208
Summary 211
Chapter 8: Lights, Camera, ActionScript! 213
Using the Actions panel 214
The Actions toolbox 216
The Script pane 216
The Script Navigator 218
The Panel menu 218
Creating a 3D carousel with ActionScript and XML in Flash CS4 270
Creating the Flash file to house your carousel 270
Creating the XML file 271
Creating the variables to call the XML file in ActionScript 3.0 273
Displaying the information on stage 280
Rotating your carousel 283
Flash CS4 and 3D engines 286
Papervison3D, Sandy 3D, and Away3D 286
Summary 287
Chapter 10: Seeing and Hearing Are Believing! 289
Sweet, sweet sounds in Flash 290
Importing sounds 291
Exporting sounds 294
Sound file compression in Flash CS4 294
ADPCM compression 294
MP3 compression 295
Raw compression 296
Speech compression 296
Compressing a sound file 296
Adding sounds to the timeline and using the sound settings in the
Properties Inspector 298
CONTENTS
xii
Applying sounds to a button using ActionScript 3.0 300
Moving pictures are worth a million words! 307
Importing videos into Flash CS4 309
Importing a movie from the Library to the stage 313
How to embed an FLV in a SWF file 314
Adding sounds to your video 317
Using an external video file in your Flash CS4 animation 319
Shortcuts for Mac OS X 382
File 382
Edit 382
View 383
Insert 385
Modify 385
CONTENTS
xiii
Text 386
Control 387
Debug 388
Window 388
Help 389
Shortcuts for Windows 390
File 390
Edit 391
View 391
Insert 393
Modify 393
Text 395
Control 396
Debug 396
Window 396
Help 397
Index 399
xv
ABOUT THE AUTHORS
Cheridan Kerr
Cheridan Kerr has been involved in web development and design since 1997, when she
book was steered always toward the finish line.
Leyton Smith, a technical editor among technical editors, who picked up this book after a
number of false starts and drove it home.
Once again Candace English and also Damon Larson for taking these pages and ensuring they
became the beautiful structured pages you see before you.
Ellie Fountain for the wonderful production-editor work.
And last, but not least, to Spotty McGotty and Chub Chub, the pets who maintained the vigil
with us during the late nights and early mornings as deadlines loomed and passed.
Cheridan Kerr and Jon Keats
xviii
INTRODUCTION
Over the last decade, we have seen a phenomenal change in the way we interact with sites
online. Where the experience for the end user was once two-dimensional, there are now
endless possibilities a Flash designer can create to introduce users to a whole new world of
interaction with their animations, and ergo, their brands. Yet with all of these great new
abilities comes a responsibility to your company and your users to present the best experi-
ence you can.
This book will not only help to demystify Adobe Flash CS4 for newcomers to the CS4 suite of
products; it will guide you on current industry standards and marketing principles, with use-
ful insights into the way your online banner-advertisement campaigns and websites can help
you cut through the clutter and noise of online marketing.
The Essential Guide to Flash CS4 is aimed at the intermediate Flash user as well as the more
advanced user who wants to become quickly familiarized with Flash CS4’s awesome new
capabilities.
Who is this book for?
A variety of professionals will find The Essential Guide to Flash CS4 a useful tool when creat-
ing their online presence.
Animators
With more features than ever before, the new intuitive Flash CS4 interface will streamline
animators’ development time. The Essential Guide to Flash CS4 will show you how.
Chapter 3, “Getting Your Hands Dirty: Layers, Masks and Photoshop,” teaches you about the
importance of layers in the Flash CS4 universe, and defines the different kinds of layers you
will encounter. Following a comprehensive overview of masks, we get down to brass tacks
and demonstrate two ways mask layers can be used in an actual banner.
Chapter 4, “Draw Me a Picture: Using the Drawing Tools,” takes you on a journey through
different techniques that you can employ in Flash CS4 using the drawing tools. Following a
series of step-by-step exercises, you will learn how to transform a hand-drawn logo into a
usable and attractive digital asset, and you’ll learn the differences between types of graphics
and find out how to use them, discover the drawing modes, and learn to use the 3D rotation
and translation tools.
Chapter 5, “Filters and Blends,” teaches you how filters and blends in Flash CS4 can greatly
streamline precious development time. You will learn, through a series of exercises, the
impact that choosing the right filter and blend can have on your Flash CS4 design.
Chapter 6, “Let’s Get Animated!,” is designed to get you up and running in the world of ani-
mation. Here you will learn how to use Flash CS4’s capabilities to build a banner ad that is
customizable and ready for you to dispatch to clients.
INTRODUCTION
xx
Chapter 7, “Achieving Lifelike Motion with Inverse Kinematics,” teaches you how to use
inverse kinematics to give your animations a real-life perspective. In Chapter 1 you learned
how to make an arm wave convincingly—now it’s time to expand on that!
Chapter 8, “Lights, Camera, ActionScript!,” is focused purely on ActionScript 3.0. In this chap-
ter you marry back-end databases with front-end beautiful Flash designs. You will learn about
variables and data types, and how decisions are made through programming in ActionScript
3.0. You’ll also learn the date and function basics and how to use XML and ActionScript 3.0 to
make a dynamic application.
Chapter 9, “Using 3D Space in Flash CS4,” teaches you all about the z-axis, which enables you
to manipulate objects on your Flash CS4 stage in the third dimension, providing them with
depth. Also included is an overview of how to create a 3D carousel using Flash CS4 XML, as
well as an overview of 3D engines.
CHAPTER 1
WELCOME TO FLASH CS4