cheat
HOW TO
IN
AdobeFlashCS3
The art of design and animation
Chris Georgenes
AMSTERDAM • BOSTON • HEIDELBERG • LONDON • NEW YORK • OXFORD
PARIS • SAN DIEGO • SAN FRANCISCO • SINGAPORE • SYDNEY • TOKYO
Focal Press is an imprint of Elsevier
This eBook does not include ancillary media that was packaged with the
printed version of the book.
Focal Press is an imprint of Elsevier
Linacre House, Jordan Hill, Oxford OX2 8DP, UK
30 Corporate Drive, Suite 400, Burlington, MA 01803, USA
First published 2007
Copyright © 2007 Chris Georgenes. Published by Elsevier Ltd. All rights reserved
The right of Chris Georgenes to be identified as the author of this work has been
asserted in accordance with the Copyright, Designs and Patents Act 1988
No part of this publication may be reproduced, stored in a retrieval system or transmitted
in any form or by any means electronic, mechanical, photocopying, recording or otherwise
without the prior written permission of the publisher
Permissions may be sought directly from Elsevier’s Science & Technology Rights Department
in Oxford, UK: phone (+44) (0) 1865 843830; fax (+44) (0) 1865 853333; email: permissions@
elsevier.com. Alternatively you can submit your request online by visiting the Elsevier web site
at http://elsevier.com/locate/permissions, and selecting Obtaining permission to use Elsevier
material
Notice
No responsibility is assumed by the publisher for any injury and/or damage to persons
or property as a matter of products liability, negligence or otherwise, or from any use or
operation of any methods, products, instructions or ideas contained in the material herein.
Because of rapid advances in the medical sciences, in particular, independent verification of
diagnoses and drug dosages should be made
British Library Cataloguing in Publication Data
A catalogue record for this book is available from the British Library
Library of Congress Cataloging-in-Publication Data
A catalog record for this book is available from the Library of Congress
ISBN: 978-0-240-52058-2
For information on all Focal Press publications visit our website at www.focalpress.com
Printed and bound in China
07 08 09 10 11 10 9 8 7 6 5 4 3 2 1
4
Foreword v
How to cheat, and why vi
Motion tips
Acknowledgments viii and tricks 66
How to use this book 1 Basic shadow 68
Drop shadow 70
Design styles
1 Drawing with basic shapes
The Brush tool
Mixing colors
2
4
6
8
Perspective shadow
Blur filter (8 ball)
Flying text
Combining effects
72
74
76
78
Using gradients 10 Blur filter (text) 80
Adding texture 12 Selective blurring 82
The Pen tool 16 Background blurring 84
Trace Bitmap 18 Interlude: Learning to be simple 86
Shading 1: line trick 20
Shading 2: shape it
Shading 3: paint selected
Shading 4: outlines
Realism with gradients
22
24
26
28
5 Character
animation
2.5D basics
88
90
2.5D advanced 92
Interlude: The new Flash interface 32 2.5D monkey 94
Lip syncing (swap method) 96
2 Transformation
and distortion
Distorting bitmaps
34
36
Lip syncing (nested method)
To sync or not to sync
Sync
Hinging body parts
98
100
102
104
The Envelope tool 38 Closing the gaps 106
Warping 40 Bitmap animation (Jib Jab) 108
Card flip 42 PSD Importer (Jib Jab) 110
Squash and stretch 44 Motion guides (Jib Jab) 112
Butterfly 46 Walk cycle 114
Interlude: Being subtle 48 Advanced walk cycle 118
Anticipation 120
3 Masking
Rotating globe
Flag waving
Iris transition
50
52
54
56
Drawing upon oneself
Looping backgrounds
Tradigital animation
Interlude: How did I get here?
122
124
126
130
58
6
Handwriting
Spotlight 60 Flash to video 134
Focus 62 Document setup 136
Interlude: A moment of clarity 64 Title and action safety 138
iii
10
Safe colors 140
Keeping it all in sync 142
Interactivity 200
QuickTime Exporter 144 Event handling 202
SWF2Video 146 What a drag 206
Pausing the timeline 208
Interlude: Graphics tablets 148
Loading images (AS3) 210
Loading images (AS2) 212
7 Animation examples 150
Super text effect
Page turn
152
154
Interlude: Objects, objects everywhere 214
Smoke with gradients
Smoke stylized
Full steam ahead
Fireworks
156
158
160
162
11 Going mobile
Creating a dynamic screensaver
Optimization
Adobe Device Central CS3
216
218
220
222
Soft reveal 164
Star Wars text 166 Interlude: Cheap tricks 224
Color adjustments 168
Vertigo 170
Let it rain
Playing with fire
Winter wonderland
Interlude: From the inside out
172
174
176
178
12 Extending Flash
Introduction to JSFL
Trace Bitmap and JSFL
AnimSlider Pro
226
228
230
236
iK’motion 238
8
Swift 3D Xpress 240
Working Flashjester 242
with sound 180
Interlude: Pimp my Flash 244
Recording sounds 182
Adobe® Soundbooth® 184
Sound in Flash
Dynamic sounds (AS3)
Interlude: Flash isn’t perfect
186
188
190
13 Time-saving tips
Keyboard shortcuts
Find and replace
Common libraries
246
248
250
252
9 Working
with video
Importing video
192
194
Creating templates
Save workspace
Take me to the Bridge
Interlude: Don’t go it alone
254
256
258
260
Flash Video (FLV) 196
Interlude: FLV tools and articles 198 Index 262
What’s on the CD 268
iv
Foreword
Flash is now a member of the various flavors of Adobe Creative Suite 3, sharing the
suites with the likes of Photoshop, Illustrator, After Effects, and Acrobat. This exposes
the tool to many new kinds of creative designers and developers, who will likely
use Flash in ways the current Flash community hasn’t thought of. Whether you’re a
new or existing Flash user, now is a great time to learn or use the software and get
involved with the Flash community online.
Many years ago in a dimly lit basement, I started using Flash to create unpalatable,
short, frame-by-frame animations - and discovered Flash was much easier than
other tools I had been using to do the same thing. It’s hard to believe what Flash
has become over the years, from the relatively simple animation program it once
was back then. For example, Flash now has a powerful programming language, a
bucket full of filter and blending tools, and cross-product integration with tools like
Illustrator, Photoshop, and Flex to help you make great animation, applications, or
motion design.
One of the nice things about Flash is that it attracts so many different users, from
inspiring and creative animators to hard-core programmers, and all sorts of people
in-between. You certainly don’t need to learn everything there is to know about
Flash to be a master at the tool – you can choose to focus your talents on design
or development, or challenge yourself from time to time by crossing over between
graphics and code. But now that Flash is full of features and capable of so much, the
tools can seem rather daunting to learn. But if you have helpful resources at your
side, like this book, learning Flash doesn’t need to be difficult. I believe the key to
learning Flash is to keep it simple when you start out, take it slow, use the available
resources (like books), and try to be patient. Learning Flash takes some time, but it is
a lot of fun and very rewarding.
Flash is an incredible tool for expressing your creativity, style, and unique ideas. I
hope that you use Flash with this book to get inspired, learn valuable new tricks and
techniques, and create some wonderful animation. And of course, make sure to have
fun with the software while you read and learn all about how to animate!
Jen deHaan
Instructional Designer, Web and DVA
Adobe Systems Inc.
v
How to cheat, and why
The truth about cheating
The word “cheat”, in most cases, has a negative connotation. To “cheat” implies
deception and trickery associated with a fraudulent act. In some ways this book will
show you how you can trick your audience, not unlike a magician’s “sleight of hand”
technique where you can control not only what is being seen, but how the viewer
sees it. But this book will certainly not teach you how to be a fraud.
To “cheat” in Flash is to find shortcuts to help you work more efficiently and
economically. Time translates to money and if you can deliver a great looking
project on time, that means you stayed within budget and everybody wins.
My philosophy
At the end of the day, if I didn’t have any fun, then it’s time to find another job.
But I had to learn this lesson the hard way a few years ago while working with an
animation company designing a network television series. I was designing the main
characters for a show called Science Court (ABC), and there was a conflict between
us and the network as to the choice of skin color for one of the characters. I liked
green and the network preferred orange. I felt strongly that my color choice was the
best and I admit I may have let myself become emotionally charged about the issue.
One day I went to lunch with the animation director and we were casually talking
about the color issue. It was something he said that changed my outlook on work
from that day forward: “We must have pretty cool jobs when the most stressful part
of our day is whether or not a character looks too much like a frog.”
I stopped dead in my tracks, instantly realizing how right he was and how silly I
felt about the matter. After lunch we returned to the studio where I immediately
changed the character to orange and never uttered another word about it. I even
ended up liking the orange more than the green. Since then, my philosophy has
always been to have fun no matter how stressful my workday gets. My job, in
comparison to all other possible occupations, is the best job even on the worst of
days.
Workthroughs and examples
Each workthrough in this book is designed as a double-page spread so you can prop
the book up behind your keyboard or next to your monitor as a visual reference
while working alongside it. Many of the workthroughs are real-world client projects
I have been commissioned to design and animate. Using these projects as examples
has allowed me to provide you with a CD containing the source files for you to open
vi
and explore. Each chapter ends with an Interlude in which I talk about everything
from my own experiences as a designer and animator as well as some relevant and
useful information based on the topic at hand.
Flash terminology
Not much has changed when it comes to terminology in Flash. Symbols have been
around since the beginning and so has the behavior any symbol can have (Graphic,
Movie Clip and Button). The Timeline is the same and that’s a good thing. Nesting
pertains to animations within symbols and remains as one of the strengths of Flash
animation. Some of the newer terminology consists of Object Drawing, Primitive
Objects and Copy Motion. Object Drawing mode allows you to draw shapes as
separate objects that overlap without altering their appearance. Primitive Objects
are graphic shapes that allow you to adjust their characteristics in the Property
inspector. Copy and Paste Motion lets you copy an animation, and paste it to
another object.
If you already have a basic understanding of Flash then you will most likely be
familiar with all the terminology in this book. If there’s anything that you come
across that is unfamiliar, try searching the Flash Help docs or the reader’s forum at
www.howtocheatinflash.com.
What’s on the CD?
Lots of cool stuff so check it out! In almost all cases you have the actual FLA file for
every tutorial in this book! But I didn’t stop there. I have also included as many free
extensions as I could find. Most are full versions and some are trial versions with
information as to where you can purchase upgrades.
There are a couple of cases where I am unable to provide the source file or some
of the content has been removed for copyright and distribution reasons. For full
details as to what is included, refer to the chapter “What’s on the CD” at the end of
this book.
Going further
Visit the book’s website at www.howtocheatinflash.com where there’s a user forum.
You can drop by to say “hi”, post a question or offer an answer or two. It is also a
great place to exchange ideas and animation with other Flashers.
Chris Georgenes
vii
Now I finally understand why so many authors dedicate their work to their spouses. With the
utmost love and respect, I dedicate this book to Rebecca, who has always supported me and my
career of “coloring” things.
I am eternally indebted to:
Bobby, Billy and Andrea for being the greatest characters I have ever helped create.
Mom and Dad for encouraging me to choose my own path in life.
Marie Hooper and Georgia Kennedy of Focal Press for their support and providing me the
opportunity to be a part of this wonderful series.
Steve Caplin for all of his knowledge, vision and kindness.
Buck DeFore for his invaluable input and attention to detail.
David Stiller for his friendship and tireless contributions throughout this book and to the Flash
community.
Fred Wessel and Dennis Nolan for giving me my greatest tool of all: the ability to draw.
Laith Baharini, Karen Bresnahan, Joe Corrao, Jen deHaan, Mike Downey, Scott Fegette, Warren
Fuller, Gary Goldberger, Jarred Hope, Christine Lawson, Shine Lee, Stephen Levinson, Dave Logan,
Kirk Millett, Ben Palczynski, Davendra Pateel, Puck, Todd Sanders, John Say, Aaron Simpson, Colin
Smith, Evan and Gregg Spiridellis, Ed Sullivan, Urami, Lily Welch, Willo, Lynda Weinman and Vivek.
Adobe Systems Inc., specifically the Flash team for making such a cool product.
Thanks to the following companies for their approval to use their projects as examples for this
book:
Abs Ale, Cone Inc., Erain, Euro RSCG Worldwide, Fablevision, Flashjester, istockphoto, Jib Jab
Media, Leapfrog Innovations, New Balance, Pileated Pictures and Say Design.
Some of the photographic images used in this book are from the following royalty-free image
sources:
Adobe Stock Images
www.istockphoto.com
In memory of Max Coniglio.
BETWEEN THE LIONS™ 2007 WGBH Educational Foundation and Sirius Thinking, Ltd. All rights reserved. Between the Lions, Get Wild about Reading, and the BTL
characters and related indicia are trademarks or registered trademarks of WGBH Educational Foundation. All third party trademarks are the property of their
respective owners. Used with permission.
BETWEEN THE LIONS is produced by WGBH Boston, Sirius Thinking, Ltd., and Mississippi Public Broadcasting.
viii
How to use this book
I am a digital animator - a Digimator if you will. I learned how to animate using a
computer. Any animation program can have a mechanical feel to it since we work
by selecting options from menus much of the time. The trick I have learned is how
to make a software program like Flash feel more organic, as if it were a ball of clay,
starting with a basic shape and pushing and pulling it into something unique. If
this book teaches anything, I hope it teaches you to think differently as to how you
approach Flash. Just because the help docs, online resources or even other books tell
you how something can or should be done, don’t take that as carved in stone. Take it
as carved in clay, meaning, you can continue to expand upon the ways the tools are
used, even beyond what you may have read elsewhere.
The first few chapters focus on some of the basics of using Flash in real-world
situations. I do not explain the rudimentary features of Flash, such as how to convert
objects to symbols and what the differences are between Movie Clips and Graphic
symbols. That is what the help docs are for and are simply a keystroke away (F1). You
bought this book to learn what goes beyond the help docs and what can only be
learned through the span of several years of experience using Flash. For you, this is
the true essence of “cheating” because this book condenses those years into about
270 pages.
Any page that includes a CD icon means that the Flash file (FLA) is included on
the CD. You can open them and analyze how each file was designed but keep in
mind just about all source files are protected by copyright or trademark, preventing
them from being used commercially. However, I do hope they will provide a source of
education and inspiration for you. All files can be opened in Flash 8 or Flash CS3.
Some tutorials will include a “CS3” icon which means that Flash CS3 is required due
to CS3-specific features. If you do not have Flash CS3, a free trial version is available
from Adobe’s website (www.adobe.com/products/flash).
You are not alone either. If you have a question or a technique you would like to
share, visit the reader forum accessed through the main website:
www.howtocheatinflash.com
There’s no such thing as a dumb question and you may find yourself answering
some as well. I am a daily visitor of the forum as well so look for me as I am easily
accessible. It’s a great way to meet other Flash users and maybe collaborate on a
cool animation project.
1
No two
snowflakes are
exactly alike and
the same can be
said for artists and
designers. A good
drawing program
will allow this
individuality to be
expressed without
limitation.
2
Design styles
THE TECHNIQUES described in this book assume you
have a reasonable working knowledge of Flash. In later
chapters, we’ll discuss ways of working that involve
symbols, timelines and various animation techniques.
This first chapter will serve as a refresher course on the
fundamentals of designing for animation and introduce a
few cool drawing techniques along the way.
Later on, we’ll go into more detail on how to work with
symbols, motion and shape tweening, and the timeline.
3
Drawing with basic shapes
1 Here is my original pencil sketch
2 After importing the scanned
I F YOU PLAYED WITH Lego building blocks
when you were a kid, you may find this
drawing style familiar (or at least intuitive).
that I have scanned and saved as a
JPG file. I prefer to start with pencil on
paper because I simply like the feel of
this medium and the results are always
image, insert a blank keyframe on
frame 2 and turn on the Onionskin tool.
This allows me to trace the image in
a new frame while using the original
a little more, shall we say, artistic. image as a reference.
You’ll use several basic shapes and then connect
them together. This technique requires breaking
down each body part of the character into basic
building blocks using the Rectangle and Oval
tools. It’s a fast and efficient way to simplify
the character into manageable sections while
achieving a very professional cartoon style.
Here, we will use shapes to cut in to other
shapes. This is a very useful technique for cutting
holes out of objects as well as altering the edges
of shapes. Of course these techniques can be
applied to background elements as well.
The key here is using simple shapes to
build complex images suitable for Flash style
animation, which we will get to in later chapters.
6 To achieve the black outline, select
the shape, copy it using Cc
Lc and paste it in place using
7 The original shape is still present
underneath your new shape. The
trick is to position the new shape off-
CSv LSv. While it’s center from the original to achieve an
still selected, select a different color outline with a varied weight.
from the Mixer panel and scale it about
80% smaller.
4
Using the Oval o and Rectangle
3 r tools allows us to quickly
achieve the basic forms of our
4 Turn on the Snap option (magnet
icon), and drag corners to each
other so they snap together. This
5 Next, click and drag the sides
of your shapes to push and pull
them into curves. This is a fun process
HOT TIP
character. The Selection tool is great process is not unlike those Lego as your character really starts to take As you complete
for pushing and pulling these basic building blocks you played with when shape. each individual
fills into custom shapes based on our you were a kid. section of your
sketch. character, cut
and paste them
into new layers
and lock them.
This will prevent
them from being
inadvertently
edited. Better
yet, convert
them to symbols
while you are
at it.
8 The parachute uses a slightly
different technique I like to call
“cutting in”. Let’s start with the Oval
9 You can cut into this shape using
different colored shapes such as
this blue oval. position it over the area
10 Once your shape is the way
you want it, you can use the
Ink Bottle tool s to quickly add an
tool for the parachute’s basic shape. you want to cut into, deselect it, then outline to it.
select it and hit the Delete key D. SHORTCUTS
MAC WIN BOTH
5
The Brush tool
The first adjustment you will want to make when using the Brush tool b
1
T HE BRUSH TOOL is probably the
most versatile of all the drawing
tools, especially when combined with a pressure-
will be the amount of smoothing you want applied. This option appears as a
vertical slider in the Properties panel when the Brush tool is selected. The right
amount of smoothing to use depends on personal preference. The higher the
number, the smoother the line (and vice versa). For this character, we’ll choose a
low amount of smoothing to maintain an organic quality to the line work.
sensitive tablet. Drawing with the
Brush tool is essentially drawing
with shapes. It’s the tool that
feels the most natural due to the support of
pressure sensitivity and tilt features.
Wacom makes a series of popular tablets that
work great with Flash. Wacom tablets can work
in conjunction with your existing mouse, or
replace your mouse completely. Many digital
designers use a tablet with any number of
graphics editors including Adobe Photoshop and
Adobe Illustrator.
When to use the Brush tool is really a matter
of style and preference. For this character, I
wanted to achieve a loose, hand-drawn feel, so
the brush was a perfect choice.
3 To remain consistent with the loose drawing style, you may want to add a
fill color that bleeds outside of the outlines a little. There are several ways to
achieve this by painting on a new layer below the outline art or setting the brush
to “Paint Behind” and painting on the same layer.
6
2 Always design your characters with the intended
purpose in mind: animation. Form follows function
and the animation style can often dictate how a character
separate objects so they can be moved independently of each
other. Turn on Object Drawing mode (subselection of the
Brush tool). Object Drawing mode allows you to draw shapes HOT TIP
is designed. If you are a perfectionist like me, you’ll want as separate objects. These objects can be drawn over each Experiment with
the hair to look as much like individual curls as possible. other without them being merged together. You can select different stage
To do this, avoid designing the hair as one large flat object. each Object Drawing with the Selection tool v and then magnifications
Instead, draw individual sections of curls to keep them as convert each one to a symbol. when drawing.
I prefer to draw
on a larger scale
and with the
stage magnified
about 400%.
The result is
typically a
smoother line
quality.
4 The final result represents the loose hand-
drawn style we were after. The line quality
feels natural and reflects the imperfections the
convey a looser line quality representative of
hand-drawn artwork. This style lends itself well
to a child character as the integrity of the line is
human hand is capable of. We are not trying to similar to how a real child would draw. SHORTCUTS
achieve a slick design style here, but rather to MAC WIN BOTH
7
Mixing colors
C OLOR IS POWERFUL. It can be used in
a variety of ways to suggest the tone
of your graphic design or mood of an entire
1 You can convert your colors to gray
scale by picking the colors with the
Eyedropper tool and then dragging the
saturation slider all the way down to
2 Change the hue of your colors by
adjusting the amount of hue with
the slider. You can also type the value
directly into the percentage field if
animated scene. Let’s take a look at how to 0%. This will lower the saturation but you prefer. If you have several colors
maintain its hue and brightness. to adjust, select the numerical value
adjust color values using the Color Mixer’s
and copy it to your clipboard. To adjust
HSB sliders. Using the drop-down menu, additional colors all you need to do
is select them and paste in the color
value.
VECTOR ILLUSTRATION: CHRIS GEORGENES
change the color mode from RGB to HSB.
Now the sliders next to each swatch can be
used to adjust your colors based on their hue,
saturation and brightness.
8
HOT TIP
Remember to
convert your
color mixer from
HSB to RGB and
double check
that the range
of each color is
between 16 and
235. If you are
not planning
on exporting to
3 Here’s another example where the
hue for each color has been easily
adjusted using the hue color value.
4 You can experiment by adjusting
two or more values to create
unique contrasts in color. The lower
5 Adjust the sturation value to
create a strong contrast between
colors. The saturation will detirmine
video, then you
do not need to
be concerned
This technique can be very effective the saturation, the less contrast there the intensity of a specific hue. with the
for providing an overall tone to your will be between colors. You can achieve range of your
website design or matching an existing that nice “pastel” color scheme by fine- color values.
color scheme. tuning these values. There are also
video editing
programs such
as Adobe After
Effects and
Adobe Premeire
that can force
your exported
video files
to NTSC safe
colors. But you
might want to
retain control
by creating your
own color-safe
palettes in Flash
as opposed to
allowing them
to be converted
in post-
production.
SHORTCUTS
MAC WIN BOTH
9
Using gradients
1 A simple radial gradient is used to fill most of the shapes that make up
the monkey. The trick here is providing the illusion of a 3D object in a 2D
environment. Four colors are used for this gradient. The critical color for this
illusion is the fourth color (far right). It represents a light source coming from
behind the sphere, suggesting the sphere is truly round.
G RADIENTS CAN BE VERY
effective when you want to break
away from the flatness of solid color
fills. They can be used to add a sense
of depth and dimensionality to your
characters, backgrounds and graphics
in general.
Gradients can also work against you
due to their ease of use, resulting in
generic and often lackluster images. 4 To make the ear look concave, mix another radial gradient going from
darkest in the center to a lighter value on the outer edge. Fill the shape
with this gradient and position it off-center so that only half of the gradient is
When in the right hands, both linear shown. Since darker colors will recede and lighter colors will appear closer to
us, this otherwise flat shape now gives us the impression it is concave.
and radial gradients can contribute to
a very effective and sometimes realistic
design.
MONKEY CHARACTER: MUDBUBBLE
7 For those classic cartoon “ping-pong” eyeballs, mix a radial gradient the
same way using white and gray colors. Color theory teaches us that to
show light, you must show dark. Apply this technique to the eyes by placing
them in front of a darker shape. This will help add some contrast, making the
eyeballs pop , thereby adding depth.
10
2 Edit the gradient to conform to the shape using the
Gradient Transform tool f. Use the handles to rotate,
scale and skew the gradient so it is slightly larger than the
3 Click and drag the focal point tool so that the
highlight is positioned between the center of the
shape and its edge. By doing this you are suggesting that
shape. Select the center control point and drag the entire the light source is at more of an angle. Notice the fourth
gradient and position it slightly off-center from the shape. color of our gradient is showing along the bottom and
right edge. This implies light wrapping around the sphere
from behind.
HOT TIP
Experiment with
different stage
magnifications
5 The hair is a shape filled with another radial gradient.
Most of this shape will be hidden behind other
graphics, so you only need to concern yourself with how the
6 The hands are really not hands at all. A few
strategically positioned spheres with the same radial
gradient as the face and body are used to suggest hands.
when drawing.
I prefer to draw
outer edge looks when the character is fully assembled. on a larger scale
and with the
stage magnified
about 400%.
The result is
typically a
smoother line
quality.
8 The nose is a combination of spheres filled with radial
and linear gradients. To create the nostrils, use a linear
gradient and edit it so that the darker color is above the
9 Good designs are consistent in technique. When each
element is comprised of the same graphical style, the
overall result will typically be consistent and fluid. Don’t SHORTCUTS
lighter color. By themselves, the spheres are just shapes. But deviate from your plan, choose a technique and stick with it. MAC WIN BOTH
placed against the radial sphere, they become holes.
11
Copyright by webtailieu.net