Select the Oval tool and, in the Richard layer, draw a small circle about 22 pixels 22 pixels near one of the character’s hands.. Select the Bone tool, and then click and drag a bone fr
Trang 15 Switch to the Subselection tool and draw a selection around the whole shape
Each of those 50 stars is composed of 10 anchor points That’s 500 points already, and that doesn’t include the stripes We’re not sure where the official line is drawn, but 500+ anchor points is too much
Your turn: Animate a fully rigged IK model
We figure you appreciate worms and skeleton hands as much as the next designer (and so do we!) But surely, your thoughts have already wandered toward more complex implementations We suspect you’re wondering if the IK tools are useful for more than a few fingers What about a whole body? The answer to these questions is yes, and you’re about to find out firsthand In this final exercise of the chapter, you’ll expand on what you learned in previous sections by rigging up a character with arms and legs, and then animating it against a backdrop of hand- sketched poses Let’s do it
1 Open the Ne_d]n`*bh] file from the Atan_eoa folder for this chapter You’ll see an assembled collection of symbols in the likeness of Richard (see Figure 8-58), one of the regular characters
in Steve Napierski’s web comic “The Outer Circle” (dppl6++sss*pdakqpan_en_ha*_ki+)
The authors would like to give Steve a hearty thanks for letting us use his artwork!
See more at dppl6++sss*leanoge*_ki+.
Figure 8-58 Meet Richard
Give him a hug You’re going to make Richard jump
Trang 2CHAPTER 8
We chose Richard for this exercise for a particular reason: he’s super skinny, which means it’s not especially easy to rig up his armature Going this route will give you practice, which is good, because real- life projects have a tendency to introduce unexpected challenges Given this set of very narrow graphic symbols, we find that it helps if you take the reins from Flash in terms of bone placement
2 Select Edit (Flash) ° Preferences and click the Drawing choice in the Category area Deselect the
IK Bone tool: Auto Set Transformation Point check box As described in the “A note about bone preferences” section earlier, this means you’ll be the one deciding where to place your bone heads and tails, and you’ll adjust them afterward
3 Select the Oval tool and, in the Richard layer, draw a small circle about 22 pixels 22 pixels near one of the character’s hands Select the shape and convert it to a graphic symbol named handle This is going to be your “ghost handle,” which lets you constrain the hands, feet, and head
4 Drag additional instances of the handle symbol from the library to the stage, positioning them near the Richard’s other hand, his feet, and his head, as shown in Figure 8-59 In this exercise, Richard’s chest will act as the starting point for every new chain of bones, just as the skeleton’s palm did in earlier exercises
Figure 8-59 Make sure to include extra symbols to allow for rotation constraints.
5 Select the Bone tool, and then click and drag a bone from the torso symbol to one of the upper leg symbols Be sure to release the bone’s tail low enough on the upper leg that it clears the bounding box of the torso (see the bounding box in Figure 8-60, and note how the bone tail falls below it) Even though this puts the bone tail lower than it should on the leg symbol—effectively moving the “hip” into the thigh—you’ll be able to readjust it in just a moment
Trang 3ANIMATION, PART 2
Figure 8-60 Make sure the bone’s tail clears the bounding
box of the torso symbol
The fact that these symbols overlap is part of the reason we had you deselect Auto Set Transformation Point in step 2 While not always a problem, in this case, the obscured symbol rotation points make it harder for Flash to decide on its own where new chains of bones should begin
6 Just as you did earlier for the knuckles, continue adding a new bone that connects the upper
leg to the lower leg, the lower leg to the ankle, the ankle to the foot, and finally the foot to the foot’s ghost handle Feel free to zoom the stage—particularly for the ankle!—if necessary
7 Select the Free Transform tool, and then click the stage to deselect the armature itself
8 Click each symbol in turn, from the ghost handle back up
to the torso, and adjust the transformation point so that
it sits over the symbol’s registration point, as shown in
Figure 8-61 To do this, click the white circle
(transforma-tion point) and drag it to the small plus sign (registra(transforma-tion
point), and then release Selecting Snap to Objects in the
Tools panel will make this task easier for you
9 After you’ve adjusted the transformation point for each
boned symbol, select the Bone tool again and click the
head of the torso’s existing bone to begin a new chain of
bones down the other leg Follow this with a repeat of the
Free Transform tool adjustments of the relevant symbols’
transformation points
10 Obviously, the arms need the same treatment, as does the
head Starting from the same gathering of torso bones each time, use the Bone tool to create new bone chains from the torso to upper arm, lower arm, hand, to ghost handle on both sides, and then from torso to head to ghost handle at the top of the character When you’re finished, revisit all relevant symbols with the Free Transform tool to reposition transformation points over their corresponding registration points Your armature should look like the one shown in Figure 8-62
Figure 8-61 Situate symbol transformation
points over symbol registration points
Trang 4CHAPTER 8
Figure 8-62 A complete IK rig
At this point, Richard is nearly ready for his calisthenics First, we need a few rotation constraints
11 Using the Selection tool, click any of the torso bones and deselect the Enabled option in the Joint: Rotation area of the Property inspector Because all the torso bones share the same head, this action will disable rotation for the whole body
12 Zoom the stage, if necessary, and disable rotation for the ankle bones.
13 Add rotation constraints to the remaining bones according to your preferences For example,
select the lower leg’s bone and, in the Property inspector, select the Constrain option and adjust the Min and Max values to keep the knee from bending backward
When you’re finished, the Timeline’s original Richard layer will have long since been emptied, because every symbol was moved to the automatically created armature layer as it was associated with a bone
14 Rename the Richard layer to poses
15 Select File ° Import ° Import to Stage and import the fqilejc*flc file in this chapter’s Atan_eoa folder This JPG features a number of hand- drawn poses you can use as guides to manipulate the armature Position the imported JPG slightly to the right, so that it appears behind Richard, and then lock the poses layer
16 Select Edit ° Select All to select the armature’s symbols
17 Open the Transform panel (Window ° Transform) Make sure the Constrain option in the Transform panel is selected (the chain icon is not broken) and resize the fully selected arma-ture to approximately 75%, as shown in Figure 8-63 This matches the character’s size with the hand- drawn poses
Trang 5ANIMATION, PART 2
Figure 8-63 Resize the armature, and all its symbols, to the hand- drawn
guides, and you’re set
When you release the mouse after scrubbing, the Transform panel will seem to indicate that the ture is still scaled to 100%, but if you select each symbol individually, the Transform panel will correctly show the smaller scale you chose in step 18
arma-Richard’s jump should take about one second Because the movie’s frame rate is 24 fps, that means
24 frames is fine
18 Hover near the right edge of the of the armature’s single frame until the icon turns into
a double- headed arrow Drag out the armature span until it reaches frame 24
19 Right-click (Ctrl- click) the poses layer at frame 24 and select Insert Frame from the context menu This matches up the JPG to the time span of the armature layer
20 We’re about to cut you loose, so here’s the basic gist of what you’ll repeat until the sequence is
finished:
a Unlock the poses layer and slide the JPG to the left in order to position the next pose under
the armature Once the JPG is moved, lock the poses layer again
b Drag the playhead six frames to the right (one- fourth of the armature span, because there
are four poses after the first drawing)
c Use the Selection tool to manipulate the character’s body parts so they match the hand- drawn
pose
Here are two important tips:
Depending on how you might have constrained your joints, you may not be able to match the
drawing perfectly Treat the drawings as rough guides In Figure 8-64, for example, you can see
that our elbows don’t match the pose at all—they’re bent in the opposite direction! Just have fun with it
You will often need to move the whole armature at once To accomplish this, hold down the Ctrl (Cmd) key and click the current frame of the armature layer Doing so simultaneously selects all
of the armature’s symbols in the chosen frame At this point, slowly tap the keyboard’s arrow keys to move the armature If you hold down Shift while pressing the arrow keys, you can move
in 10- pixel increments, which makes it go faster
Trang 6CHAPTER 8
21 After you’ve finished posing the armature at frames 6, 12, 18, and 24, right- click (Ctrl- click) the
poses layer and convert it to a guide layer This will keep it from showing when you publish the SWF (Alternatively, you could hide the poses layer and configure your preferences to omit hidden layers from the SWF—see the “Using layers” section of Chapter 1—or simply delete the poses layer.)
22 Double-click the handle symbol in the library to open it in the Symbol Editor Change the opacity
of its fill color to 0%, to make the ghost handles invisible when you publish
23 Save your file and test the movie If you like, compare your work with the completed Ne_d]n`*bh] file in this chapter’s ?kilhapa folder
to lend us a screenshot from “Waterlollies” (see Figure 8-64) He draws and animates all his artwork directly in Flash When you see what’s possible with the authoring tool, you might just think (as one of the authors does), “When I grow up, I want to be Adam Phillips.”
Figure 8-64 A scene from Adam Phillips’s “Waterlollies” (http://www.biteycastle.com)
Trang 7ANIMATION, PART 2
For an additional 360 pages of top- notch Flash animation how- to, check out Foundation Flash
Cartoon Animation (friends of ED, 2007), by Tim Jones, Barry Kelly, Allan Rosson, and David
Wolfe (dppl6++sss*bneaj`okba`*_ki+^kkg*dpih;eo^j9534-15,155-.5) This book was written for Flash CS3, so it covers only the technical content discussed in Chapter 7, but it goes on to elaborate on industry practices, including library organization, storyboarding and animatics, frame-by- frame animation, and integration with After Effects
What you have learned
In this chapter, you learned the following:
How to use the Motion Editor panel
That even though the new tweening model is intended for the Motion Editor panel, the Timelinepanel continues to be useful for motion tweens
How to use and configure advanced easing graphs, and how to create your own
How to navigate property keyframes in the Motion Editor and Timeline panels
How to change the duration of a tween span
How to manipulate and reuse motion paths, with or without the Motion Presets panel
How IK works in Flash
How to use the Bone and Bind tools
Tips on improving your IK bone rigging workflow
How to animate an IK armature
This has been a rather intense chapter, but you have to admit there is some seriously cool new tion stuff in Flash CS4 We started by walking you through the Motion Editor, including motion paths,
anima-Up to this point in the book, the Motion Editor was something you “visited.” Now you have learned how valuable a tool it will be as you strengthen your Flash skills
From there, we took you deep into the new inverse kinematics features of Flash CS4 Starting with the Bone tool and a skeleton, we guided you through this subject By animating Vulcan greetings, steam engines, and an honest-to- goodness real cartoon character, you discovered the power of inverse kine-matics and quite a few of the gotchas and work- arounds being developed as the Flash industry adjusts
to this new animation capability
As you went through this chapter, you were probably thinking, “This is all well and good in a flat space, but where’s the 3D?” Great question Why don’t you turn the page and find out
Trang 8Designers have been asking for 3D manipulation tools in Flash for a long time In fact, this feature has been requested in some form or another since the beginning of the product line That makes sense if you consider that the mid- 1990s promise of Virtual Reality Modeling Language (VRML) gave web surfers a taste of 3D before Flash ever hit the market VRML was a great idea, but it was ahead of its time and, sadly, didn’t
go very far In any case, it was more of a programmer’s pursuit than something
a designer would want to grapple with
Then came Flash, which sparked an explosion of stylish 2D designs that began to reshape what the web experience meant Over the years, intrepid designers began experimenting with ways to simulate three dimensions in their SWFs They used centuries- old techniques to accomplish these goals—for example, increasing the size
of an object to “move it forward”—which were the same practices used in real- life painting and sketching Nothing in the Flash interface provided direct assistance This has changed in Flash CS4 The requested tools have arrived If you’ll pardon the pun, they open a whole new dimension in creative potential
Here’s what we’ll cover in this chapter:
Understanding the new 3D environment Using the 3D tools
Positioning symbols in 3D space
FLASH GETS A THIRD DIMENSION
Chapter 9
Trang 9If you want to supplement the benefits of the new 3D tools with older techniques, consider
check-ing out Flash 3D Cheats Most Wanted by Aral Balkan, Josh Dura, et al (friends of ED, 2003) To learn about simulating 3D with ActionScript 3.0, see Chapters 15 through 17 of Foundation ActionScript 3.0
Animation: Making Things Move! by Keith Peters (friends of ED, 2007).
What 3D really means in Flash (and what it doesn’t)
When it comes to 3D in Flash, consider the new feature as you would pizza No matter what the server
brings from the kitchen, you’re going to love it Capice? Good Now that you’re thinking of a delicious
pie with all your favorite toppings, tease your mind back to Flash for a moment Between bites, wrap your brain around three levels of wow factor:
Good (“Hey, this is super cool”)
Better (“My jaw just hit the floor”)
Best (“Somebody bring me oxygen!”)
Game consoles like the Wii, PlayStation 3, and Xbox 360 have redefined what consumers expect in terms of 3D interactivity This is the bring-me- oxygen stuff—the Best level—which isn’t available in Flash We need to mention that right out of the gate (Hey, are you going to eat that pepperoni?)
On the design side of things, you would need specialized 3D modeling software to produce that sort
of content for game consoles, television, or film We’re talking about software like Maya, 3ds Max, Blender, or Cinema 4D These industrial- strength powerhouses are designed specifically for the task, and are capable of turning out extremely complex, high- resolution output Examples include every-thing from Hollywood aliens, dragons, and virtual stunts, all the way to proof-of- concept vehicle mock- ups, such as the F- 15A aircraft shown in Figure 9-1
Trang 10FLASH GETS A THIRD DIMENSION
Figure 9-1 Highly complex 3D models are created in software designed for the task, which doesn’t include Flash
(aircraft modeled by Roy Baker)
For better or worse, advanced 3D modeling is not the sort of field trip you’ll be taking in Flash CS4—at least, not with the new drawing tools Don’t let that get you down, though For you code jockeys, be aware that ActionScript does give you a surprising range of possibilities, but you’ll probably want to use third- party code libraries to pull it off
For the jaw- dropping stuff—the Better level—you’ll want to check out Papervision3D (dppl6++sss*L]lanreoekj/@*knc+) This is open source software (created by core team members Carlos Ulloa, John Grden, Ralph Hauwert, Tim Knip, and Andy Zupko) consisting of a framework of ActionScript 3.0 and 2.0
class files Papervision3D allows programmers to create a range of 3D primitives (basic shapes, from which
other shapes can be built), and even import COLLADA (an open XML standard) data files from external modeling applications, and then bring those models to life in complex ways, as shown in Figure 9-2 Yup, that’s Flash, and that spaceship is interactive In many ways, this is comparable to VRML
Figure 9-2 An example of Papervision3D content (modeled by Carlos Ulloa)
Trang 11What you’ll learn about in this chapter is the super- cool stuff—the Good level—and a great place to start if you’re new to nonscripted 3D in Flash (which pretty much means anyone using Flash CS4 for the first time) We won’t be covering 3D in terms of ActionScript It’s simply a topic that merits its own book, and we again direct your attention to dppl6++sss*L]lanreoekj/@*knc+ What you are about to discover, behind that heavenly melted mozzarella, is a pair of shiny new additions to the Tools panel that give you direct three- dimensional manipulation of your symbols But first, we need to cover a bit
of theory
Understanding the vanishing point
When you open your eyelids and cast your gaze ahead, even if all you can see are the tweed walls of your cubicle, you have a horizon in front of you Turn your head, and it’s still there The horizon might
be hidden, but the principles of perspective still apply, just as gravity still applies even when you climb
a tree or take a dive in the swimming hole In a theoretical sense, this horizon holds something called
a vanishing point, which is a special location, usually off in the distance, where the parallel lines in
your view seem to converge It’s a natural optical illusion, and you see it every time you stare down
a length of railroad tracks In linear perspective drawings, you can have as many as three vanishing points, but Flash keeps things manageable for you by providing one Here’s how it works
Imagine a cube—just an ordinary cube like the one in Figure 9-3 It might be a cardboard box or a die whose spots have gone missing This sort of figure is easy enough to draw with the Rectangle and Linetools, but it helps if you think of the box as sitting on the ground somewhere, with the horizon above
or below it, depending on your line of sight
Figure 9-3 A plain- old box,
drawn in perspective
Trang 12FLASH GETS A THIRD DIMENSION
In this case, the horizon happens to be above the box If you draw a set of perspective lines along the edge of each corner, you’ll see that they all meet at one point on the horizon, as illustrated in Figure 9-4
Figure 9-4 The vanishing point is the location where parallel lines seem to converge
on the horizon
The point at which those lines meet is your vanishing point It’s your key to understanding how the 3D Rotation and 3D Translation tools, coupled with the Transform panel and Property inspector, give you access to 3D manipulation in Flash Without this concept, you can still experiment with these tools and have plenty of fun But if you want to actually wallpaper a three- dimensional cube with movieclips, or hang photos on a wall that isn’t displayed head- on, you should keep a firm grip on the notion of those perspective lines By actually drawing them as temporary guides over your artwork, you’ll find the new 3D tools a ton easier to work with
Consider the real- world example of the art gallery shown in Figure 9-5 You’re going to use this photo
to get acquainted with the new tools, so let’s put those perspective lines in place Here’s how
1 Open the Atde^epekj,-*bh] file from the Atan_eoa folder for this chapter Note the already- imported photo, in a layer named background
2 Create a new layer and name it perspective Right- click (Ctrl- click) the new layer’s name and select Guide from the context menu This converts the layer into a guide layer, which means you can see its contents during authoring, but anything on this layer will disappear in the pub-lished SWF, which is exactly what you want
3 Select the Line tool, and make sure the Object Drawing button is not selected in the Tools panel Use the Line tool to draw some lines, like those in Figure 9-5, into the perspective layer Start from the lower- right corner and follow the edge where the wall meets the floor This may not
be as easy as you think, because the pasteboard around the stage isn’t big enough to modate such a long line
Trang 13accom-CHAPTER 9
Figure 9-5 Use perspective lines in a guide layer to assist with the 3D drawing tools (photo by Yoana
S Bacheva from Satanasov exhibition)
When you find yourself in a tight spot like this, it helps to zoom the stage to a very small ber, like 12%, and take the Flash application window out of a maximized view Start your line on the right side, and then click and hold While holding, literally drag the line out past the Flash application window, seemingly onto your desktop In Figure 9-6, you can see the crosshairs cur-sor beyond the left edge of the application window Just follow the perspective line from the photo to the left and slightly up, and you’ll see it
When you release the mouse, Flash will resize the pasteboard to fit the line, and you can use the Selection tool to refine its placement
Figure 9-6 Depending on the reference photo, you may have to work a bit to draw your perspective lines.
Trang 14FLASH GETS A THIRD DIMENSION
4 Repeat this process with a few more lines, using the photo’s wall hangings as a start, until you
can pin down the vanishing point to the far left
5 Save your file, because you’re going to revisit it later in the chapter You can compare your
work with the completed Atde^epekj,-*bh] in the ?kilhapa folder, which shows the three lines already in place
Now, let’s have some fun with the 3D tools themselves
Using the 3D tools
As we’ve mentioned, Flash CS4 provides two brand- new 3D tools: the 3D Rotation tool and the 3D Transformation tool
The 3D Rotation tool
In terms of visual cool factor, the 3D Rotation tool is sure to please This tool allows you to quickly and intuitively rotate a movieclip in 3D space In previous versions of Flash, this was possible only with shapes, and even that technique required a bit of careful nudging with the Free Transform tool You simply couldn’t do this with a symbol Now you can, and that means you can perform perspective transforms on complex artwork, imported photos, and yes, even video Kind of makes the corners of the mouth go up, doesn’t it?
To illustrate how groundbreaking this is, let’s start with how it used to be
Old-school 3D rotation
Prior to this release of Flash, 3D perspective was not exactly up there in the realm of “really easy to accomplish.” You needed to actually draw in perspective by hand or use the Free Transform tool to simulate 3D rotation Let’s see how that technique works
1 Create a new FLA file and select the Rectangle tool Make sure the ObjectDrawing button is not selected, so that your shape is nothing more than a fill, with an optional stroke Color settings don’t matter Draw a square approximately 300 300 pixels
2 Once you’ve drawn your shape, double- click to select it, and then change to the Free Transformtool You’ll see a number of buttons appear in the options area of the Tools panel
3 Click the Distort button, which lets you make perspective distortions by individually clicking and dragging each corner of your square Go ahead and do precisely that With a bit of practice, you can reshape the square to appear as if you’re standing above it, looking slightly down on
it, as shown in Figure 9-7
4 Click away from the reshaped square to deselect it Now double- click the shape to select it
again When you do—assuming that Free Transform is still your current tool—you’ll notice that the shape’s bounding box no longer follows the contours of the shape That’s to be expected, since the bounding box represents the full area required to contain the shape
Trang 15CHAPTER 9
Figure 9-7 The Distort option of the Free Transform tool lets you
simulate perspective with shapes
At this point, if you hope to adjust your perspective distortion (see Figure 9-8), you’ll find it much harder to accomplish with precision, simply because the bounding box no longer matches the corners
or edges of the shape Worse, you can’t do a thing with imported photos, if that’s your aim Let’s see the problem with photos
Figure 9-8 Adjusting already- distorted shapes quickly becomes a challenge.