Shading 2: shape it
Using the Rectangle tool r, Use the Selection tool s to pull
1 draw a box inside your shape that
contains a darker fill color (no outline).
2 the corners until they snap to the
edges of the shape (make sure the Snap
feature is turned on).
H ERE’S ANOTHER VARIATION on
cell style shading in Flash. This
technique involves the Rectangle
tool and allows for more complex
shading. This may be preferable if
your shapes require more complex
shadows.
5 Let’s take this technique one step
further by adding more shading
for a more realistic effect. Repeat the
6 Use the Selection tool to pull the
corners until they snap to the
edges of the shaded shape.
above procedure using an even darker
color inside the shaded area.
22
HOT TIP
If you would
like a cool and
easy way to
create various
hues based on
your original
color, give
Adobe’s Kuler
tool a try
(kuler.adobe.
com). You can
mix shades of
3 Fill the gap area created after
snapping the corners to the edge
of the shape.
4 Use the Selection tool to bend the edge of the darker fill color so that its arc
reflects the shape of the oval. Having used the Rectangle tool, you have an
extra corner to play around with. This can be useful for creating more complex
color very easily
and then save
and download
shading such as with the ear shape. them as ASE
(Adobe Swatch
Exchange
file). Open the
downloaded
ASE file(s) in
Illustrator and
then save your
new swatch
panel as an AI
file and import
it into Flash.
An easier way
would be to
manually copy
the HEX value
from the Kuler
site and paste
into the Flash
Color Mixer
panel.
7 Fill the gap area created after
snapping the corners to the edge
of the shape.
8 Use the Selection tool to bend
the edge of the darker fill color
so that its arc reflects the contour of
9 You can repeat this procedure as
many times as you like. The more
color values you add, the more realistic
the shape. the image will be.
SHORTCUTS
MAC WIN BOTH
23
Shading 3: paint selected
Select the Brush tool b and then
1 Start with a shape.
2 from the brush mode subselection
menu, select Paint Selection. This will
restrict any paint to selected fills only.
W E ARE ALL DIFFERENT and we
tend to find different ways
of using the same tools. We get used
to certain techniques because they
become familiar to our workflow and
we become comfortable in our own
individual habits. Here is yet another
technique for creating cell style
shading that you may prefer over the
previous versions. It lends itself well to
the designer who likes a more hand-
drawn feel to their work.
HULA GIRL - COPYRIGHT MUDBUBBLE ANIMATION
6 Next, simply fill the space created
by the new fill you just painted. 7 Voila! Now you’ve got a
convincing cell style shading for
the leg.
24
HOT TIP
Consistency is
important when
it comes to your
light source. It
helps to limit
yourself to one
light source if
possible and
create your
3 Use the Selection tool to select
the fill color you’ll be adding the
shade color to. Now use the Brush tool
4 Don’t worry about being sloppy.
Once you release the brush, the
painted fill will exist only inside the
5 Sometimes the area may be too
large to paint entirely by hand. In
this situation, just draw the contour of
shading based
on the angle
the light source
and adjust the amount of smoothing selected area you intended. the edge for the shaded area. is coming from.
desired for the shape you’ll paint. Next,
paint inside the selected fill.
8 The face shading can be drawn
the same way. Remember the
direction your light source is coming
9 Fill the space created by the new
fill and you are done. 10 Cell shading can add that extra
dimension to your designs,
giving them depth and realism.
from and paint a crescent fill.
SHORTCUTS
MAC WIN BOTH
25
Shading 4: outlines
Start with the Ink Bottle tool i and a stroke color that doesn’t exist
1
T HIS VARIATION ON CELL STYLE
shading works well for simple
shapes and very complex shapes. If
anywhere in your design. Set the stroke height to around 3 or 4 point. Click
anywhere within the fill to outline it with a stroke in the color you chose. Don’t
worry about how it looks because you will eventually delete this line entirely
after you are done.
you have line work that is very loose
and hand-drawn looking, this may be
the technique for you. You will use
the Ink Bottle to create a line around
your fill. Then you can reposition
this line off-center and fill the space
created with a darker shade of color.
4 For this character’s outfit, I
5 The stroke is selected and
BADGER CHARACTER: MUDBUBBLE
applied a stroke outline to the repositioned based on the same
overalls as well. light source as in the previous example.
26
HOT TIP
Set your stroke
height large
enough to make
it easier to work
with. A larger
value will allow
you to select it
easier. Choosing
Delete the entire stroke by pressing the D key. If
2 Select the line by double-clicking on it with the
Selection tool. Next, use the arrow keys to nudge it
away from the original shape in the direction of your light
3 your stroke has been deselected, select it by double-
clicking on it with the Selection tool. Double-clicking the
a bright color
that is high in
contrast from
source. Fill this area created between the stroke and the stroke will select the entire stroke while single-clicking on it your original
original edge of your shape with your shade color. will select a segment of it if it contains multiple points. design will make
it easier for you
visually.
6 A darker shade of color is mixed
and filled to create the illusion of
form and realism.
7 With the stroke still selected,
delete it. In some cases, the
resulting shape created may need some
8 Use the Selection tool to further
refine your shading based on your
needs and design sense.
tweaking.
SHORTCUTS
MAC WIN BOTH
27
Realism with gradients
F LASH IS MUCH MORE than a tool for
designing cartoon characters. Its full array
of vector drawing tools is suitable for many
styles of illustration. Here we will go step by The Pen tool p is perfect for this
step creating a realistic flower illustration. 1 The first step is to outline the
basic shape of the flower’s petal
with a stroke color that is high in
2 task simply because it is quick and
easy to manually trace the contour
Flowers are always appealing to draw and at contrast to the original image. Be as of the petal by clicking and dragging
the same time challenging due to the subtle precise as you want, but I recommend along the contour of the image.
using the original image as a guide,
variations of color they often contain. simplifying where needed along the
The main tools to be used for this example way.
are the Pen tool and Gradients. The Pen tool
has been greatly improved in Flash CS3 and if
you are familiar with Illustrator’s Pen tool, you
will notice some similarities. Flash has adopted
the core functionality of Illustrator’s Pen tool
including identical shortcut keys and hot key
modifiers - not to mention identical pen cursors
as well. Integration is bliss.
One particularly cool Pen tool trick is to hold
down the spacebar to redirect the current point
while drawing. Another nice feature in CS3 is
that the auto-fill when completing an enclosed
shape with the Pen tool has been removed for
consistency reasons.
The more you experiment with the new Pen
6 The initial gradient will provide
the overall hue and tonal range of
the flower petal. Flash lets you apply
7 Fill your shape with your radial
gradient and then use the Fill
Transform tool f to edit its size,
PHOTO: CHRIS GEORGENES
tool the more I think you’ll like it. In fact, I up to 15 color transitions to a gradient. position and rotation. You can delete
the stroke at this stage as it is no
think it’s better than Illustrator’s Pen tool. longer needed.
28
Use the Subselection tool a to
3 To close the path, position the Pen
tool over the first anchor point.
A small circle appears next to the Pen
4 refine your path if you desire.
To adjust the shape of the curve
5 Next we need to mix some radial
gradients. Flash’s color picker
can grab colors from anywhere on
tool pointer when positioned correctly. on either side of an anchor point, your screen if you click on any of the
Click or drag to close the path. drag the anchor point, or drag the color swatches found in the Color
tangent handle. You can also move an Mixer, Properties panel or the toolbox
anchor point by dragging it with the and drag to the area containing your
Subselection tool. desired color.
HOT TIP
To constrain
the curve to
multiples of
45º, shift-
drag. To drag
tangent handles
individually,
Alt-drag
(Windows) or
Option-drag
(Macintosh).
Copy Cc Lc and Paste in
8 Place CSv LSv
this shape to a new layer as you will
9 Fill the duplicated shape with
your new gradient and use the Fill
Transform tool to create the suggestion
10 You can manipulate each
new gradient using the Free
Transform tool to create soft shadows
be layering several gradients on top of of subtle undulations within the shape. and highlights. In almost all cases, you
each other to create a realistic effect. Repeat the process of copying and will only use partial gradients to create
The following gradients contain varied pasting in place this shape to new subtle transitions of light and shadow.
amounts of alpha to create subtle layers for each new gradient. SHORTCUTS
transitions in color. MAC WIN BOTH
29
Realism with gradients (cont.)
11 It’s always convincing to position soft shadows where
the edge of the shape contains an imperfection. The
combination of gradient colors and irregular contours makes for
12 This is the end result of using several
variations of layered radial gradients,
producing beautiful and convincing variations of
a very convincing imperfection. color.
15 To achieve the effect of depth in the center of the
stigma, drag the little white arrow in the radial
gradient’s center to move the focal point towards the edge.
16 Here’s what the flower image looks like once all the
petals and stigma have been illustrated. But you
don’t have to stop here. Let’s have some fun with Flash’s
filters. Convert the entire flower to a Movie Clip symbol.
30
HOT TIP
Set your stroke
height large
enough to make
it easier to work
with. A larger
value will allow
you to select it
easier. Choosing
13 Repeat the same procedure for each petal of the
flower image. To keep your main timeline layers to a
minimum, convert each layer to a goup or an object drawing
14 The center of the flower, technically named the
stigma, was created with a donut-shaped fill
containing a radial gradient.
a bright color
that is high in
contrast from
and convert each petal to a symbol.
your original
design will make
it easier for you
visually.
17 From the Filters panel, add a Drop Shadow. Set the
blur, alpha and distance to your disired amount. You
may want to also add a Blur filter to soften the overall image
18 Duplicate the instance of the flower movie clip.
Scale and rotate them to create an appealing
floral arrangement. It’s almost hard to imagine this style of
of the flower. illustration can be made entirely in Flash, right?
SHORTCUTS
MAC WIN BOTH
31
I N T E R L U D E
The new Flash interface
FLASH IS GROWING UP. It started out a long time ago as a simple web animation
tool and, for all intents and purposes, has grown to become its own development
platform. Most notably, the Flash interface has progressed dramatically from its
earliest incarnation. Upon initial inspection you’ll notice the look and feel has been
streamlined in keeping with the Adobe suite of tools. Icons are now shared across
programs and integration has been implemented.
One of the most obvious new features of the UI is how panels can be docked,
grouped and minimized. If you choose to dock them to the sidebar, you can then
further minimize them until they become icons. Clicking on an icon will open the
respective panel or group of panels. There’s also a preference to toggle on/off the
auto-collapse of the icons when you focus elsewhere in the workspace.
32
The toolbox can now be customized so that all the tools are aligned in one single
column as opposed to two columns. As always, you can customize the workspace
and save your layouts. Below is my typical setup, which maximizes the stage
area for design work. I prefer to have as much screen real estate as possible for
drawing and animating. In fact, I like to set my display resolution as high as
possible, which means I do most of my work on a 17” laptop with a 1920 x 1200
display resolution. This allows me to work in a larger format with the Flash stage
magnified to about 400%. I have found this to yield more control when drawing
with the Brush and Line tools.
You can save as many different layouts as you like, which is useful if your
workflow involves several varied tasks. As you read through the following
chapters, you will learn more about the new interface, drawing and integration
features Adobe CS3 has to offer.
33
The most basic of
objects, the cube,
can be brought to
life using just the
Free Transform
tool. With a little
rotating and
distorting, you can
easily create an
animation that
gives an otherwise
boring subject
some life and
personality. The
same techniques
can be applied
to almost any
object - including
characters.
34
Transformation and
distortion
SQUASH, STRETCH, BULGE, warp, distort, rotate, skew,
deform - what do all these transformations have in
common? Hint: it’s not how you felt after that second
baked bean burrito you know you didn’t need to eat.
Answer: it’s the Free Transform tool, the single most
efficient and versatile tool Flash offers, and it will prove
to be one of the most used tools in your daily animation
workflow.
The Free Transform tool is truly the Swiss army knife
of tools as it allows you to perform a multitude of
transformation tasks to raw vector objects, instances of
symbols, imported images and broken apart text. This
chapter will focus on the versatility of the Free Transform
tool and how to apply it to your images.
35
Distorting bitmaps
A S A DESIGNER AND
ANIMATOR, one of the
most frequently used tools in
1 Enter Free Transform mode by
selecting the Free Transform tool in
the toolbox or by pressing the keyboard
shortcut q. Let’s start by transforming
2 Break apart your imported
image Cb Lb before
transforming it. If you want you can
convert it to a Drawing Object (Modify
an imported bitmap image. > Combine Objects > Union).
Flash is the Free Transform tool.
It is the most multifaceted tool
in the toolbox and will prove to
be critical to the transformation
and distortion of objects and then
some.
Free Transform is the tool to use
when you want to scale, rotate,
shear and distort your images.
Free Transform is also used to
edit the center point of instances
of symbols. You can use Free
Transform to transform imported
bitmaps or graphics created with
the Flash drawing tools.
There are a variety of modifier
keys to be used with the Free
Transform tool that allow you Hold down COS
6 Position the cursor outside the
7
PHOTO: CHRIS GEORGENES
to transform objects in different bounding box between the LAS and drag a
handles and drag to shear the object. corner handle to distort the object’s
ways, as we will discuss here. Hold down O A to shear based on perspective equally on both sides.
the center of the object. Unfortunately Flash does not distort
the image, but rather crops it.
36
HOT TIP
Some of the
Free Transform
tool features
cannot modify
instances of
symbols, sounds,
video objects
3 When you drag any of the four
corner handles, you will scale the
object. The corner you drag will move
4 If you grab any of the four center
side handles, you will scale the
object horizontally or vertically. This is
5 Grab one of the corner handles to
rotate the object. Hold down S
to constrain the rotation to 45 degree
or text. If you
want to warp
or distort text,
while the opposite corner will remain great for squashing and stretching the increments. Hold down O A to make sure to
stationary. Hold down the Shift key to object. hinge the object at the opposite corner. break apart the
scale based on the object’s center. text field into
raw shapes first.
Hold down C L to distort
8 the object in a freeform manner.
But unfortunately again, Flash doesn’t
9 Select the Envelope tool (sub-
selection of the Free Transform
tool). The Envelope modifier lets you
10 Drag the points and tangent
handles to modify the
envelope. Changes made to the
truly distort a bitmap image but rather warp and distort objects. envelope will affect the shape but not SHORTCUTS
crops it. the bitmap image itself. MAC WIN BOTH
37
The Envelope tool
W HEN USING THE FREE
TRANSFORM TOOL with
raw vector objects, the Distort and 1 Enter Free Transform mode by selecting the Free Transform tool in the toolbox
or by pressing the keyboard shortcut q. Select the Distort subselection tool
at the bottom of the toolbox. Click and drag any of the corner handles to distort
Envelope subselection tools become your shape.
available. This is where you can
really have some fun warping and
deforming shapes as if they were
clay. Think of how your reflection
looks in a fun house mirror and
you’ll start to get an idea as to
what these tools are useful for.
ANDREA ROSE GEORGENES CHARACTER: COPYRIGHT MUDBUBBLE PRODUCTIONS
If you need to be precise with
how your images are scaled, rotated
or skewed, use the Transform panel 4 The Envelope modifier is great for warping and distorting shape. When
you select the Envelope subselection tool, you will notice multiple handles
attached to the bounding box. Manipulating these handles will affect the shape
to type in your values for the contained within. Click and drag a corner handle to start warping your shape.
respective transformation.
38
HOT TIP
Holding down
CO LA
when dragging a
corner point will
lock the tangent
handles to their
current position.
Hold down the S key while dragging a corner handle Holding down
2 The Distort tool is useful for manipulating the
perspective of a shape by clicking and dragging the
corner handles.
3 to constrain the adjoining corner an equal distance
and in the opposite direction from each other. Think of it as
the same keys
while dragging
one of the side
tapering your shape.
handles will
constrain that
entire side and
all its points.
5 Drag any of the eight tangent handles to warp your
shape in almost any direction. These tangent handles are
located at each corner and along both horizontal and vertical
6 You can move any of the points to a new location to
further warp your shape. But be careful, once you click
outside of the selected shape, the transformation will end.
sides as well. You can select it again and continue to warp and distort it, SHORTCUTS
but the previous point and tangent positions will be lost. MAC WIN BOTH
39
Warping
1 Duplicate the artwork of the head
by creating a new keyframe in the 2 Using the Envelope tool, you can
move the handles to deform the
T
HE ENVELOPE TOOL can head symbol. Select the entire head relative area of the head.
and the Free Transform tool q, then
help shave some time off select the Envelope subselection tool.
your production schedule.
In this case, the Envelope tool
was used to deform the head
of the Evil Mime character to
represent the effect of being hit
by a self-imposed upper-cut.
Sure, the entire head could have
been drawn, but not often do we
have the luxury of time to start
from scratch when a deadline is
looming. It was much easier to
start with the head already drawn
and warp it to suit our needs.
EVIL MIME CHARACTER: YAHOO! SUPER MESSENGERS
6 Here’s the hand drawn in Flash
using the Line tool. You may find
the need for a variation of this same
7 Using the Envelope tool allows you
to quickly distort the drawing into
a different shape.
illustration and need to make it quickly.
40
HOT TIP
3 Continue to push and pull the
Envelope’s anchor points and
control handles to deform the shape to
4 You can start the envelope process
over by deselecting the artwork
and selecting the Envelope tool again.
5 Don’t be afraid to manually go
back into the artwork and adjust
your linework using the Selection tool. Don’t rely on
the Envelope
your liking. This will reset the anchors and handles Don’t rely purely on the tools, often it’s
tool for
which will allow you to further distort your own eye that is the best tool.
everything.
your image.
In a situation
like this, where
a complex
shape is being
warped, you
will probably
find that upon
ending your
transformation,
you will need
to refine your
shapes manually
by using the
Selection tool
or any of the
drawing tools.
8 Here’s the foot in its default state.
Depending on your animation,
you may need several feet in different
9 Once again, the Envelope tool
gets the job done, quickly and
efficiently.
10 Don’t rely completely on the
tools. In most cases, they
can only go so far. You may want to
shapes. further refine the details of your image SHORTCUTS
manually. MAC WIN BOTH
41
Copyright by webtailieu.net