'3D for Beginners': Animating the Hitme Character

All images from 3D for the Web by Carol MacGillivray and Anthony Head. Reprinted with permission.

Pose your character in a good starting position and save it as your basic character (Figure 1). Select every part of the character and each bone and create a Key at frame 0. (You can do this by selecting everything and clicking on the Set Keys button in the bottom timeline menu bar.)

I have created a number of animations designed for pseudo interactivity. Each is created in a separate file from the basic character. That way, I know that there will be no jerkiness or movement between the different movies when they are played.

There is not enough room in this book to go into all the details of animation and it is well worth investing in one of the books recommended in the appendix if you want to study animation in any depth. However, as a broad quickie introduction let us look at an animation whose file is on the CD.

Open the basic character file and save a new version called Dodge. Set the timeline frame count to 50 frames. Check that you are running at the PAL rate of 25 frames per second (fps). I have positioned the Hitme character in a three-quarter profile because he looks best this way. There would however be some advantage in filming a symmetrical character head on, as this would enable any motion to be flipped and save time in animation.

[Figure 1] The basic Hitme character awaiting animation.

The Hitme character is posed with his hands resting on his rounded stomach and gazing stage right. The intention in the animation is to make him quickly dodge backwards and away, and then return to rest.

The first movement in the animation is to get the character to look toward camera. Select the Lookat Dummies and set a key at frame 6. In the Motion Panel > Key Info (Basic) make this Key a Hold In and Ease Out. Go to frame 8, move the Dummies to make the character look at camera and set another key, this time with an Ease In and a Hold Out. Without adding these extra interpolations to the keys, the eyeballs would slide around under the influence of the default Bezier controllers. (Animation hint: all eye movements tend to be fast with holds at the end.)

At frame 14 select the body and again set a key with a Hold In. This is the beginning of the character jerking backwards. Move to frame 19 and rotate the body backwards. Set keys for the first three bones of the neck at 14 as well. These bend backwards with a delay of one frame traveling up the body. (Animation hint: this ripple effect is called follow through in animation, where all movements start from the hips and travel outwards, ending at the extremities.) I have also rotated the neck to the characters right as it helps accentuate the movement from the camera angle I have chosen (Figure 2).

[Figure 2] Hitme dodging (frame 19).

As you can see from Figure 2, I have balanced this sudden movement backwards by rotating the lower arms forward so his hands help balance him and lifting his left foot. This is a fast movement and he is at full stretch at frame 19. I have held him there for three frames before returning him to his upright position. The hands go back to rest by frame 30 and 31. (Animation hint: a staggered movement looks more natural.) At frame 35, the character blinks and looks away, back to where he started. The blink combined with looking up is a classic Tch expression it has an exasperated dont be so childish feel to it. The blink is created with a slight bounce to the eyelid so that the eyes open wider as the lids come up, and then settle into the normal pose. By copying the keys from the beginning of the rest pose for each part of the body by Shift-dragging in the timeline, I can guarantee that the character has return to his original position. The hold at the end is to allow time for the hair to stop moving as the Flex modifier finishes animating it (Figure 3).

This animation is the shortest and simplest of the examples on the website. The other animations that you will find are for twanging the Hitmes bowtie, making him laugh, and a giant belch. I could have done any number of things to the character: the only limits are your imagination and the file sizes.

[Figure 3] The animated Hitme dodge.

Making the Animation Interactive

By now you will have created some interesting animations for our Hitme character. This is very nice, but how do we actually hit him? He needs to be interactive if he is going to have the desired effect of being an engaging and entertaining character. Essentially, he is going to be an animated button. He will interact with the mouse, which will trigger different animations. It makes sense that pressing the mouse button on parts of Hitmes body makes him perform certain actions, or he could even respond if we just passed the pointer over him.

We are going to use Macromedia Flash to make our Hitme character interactive. There are essentially two ways to output your files as high quality renders. One is to save that animation as a video file, e.g., QuickTime or AVI, the other is to save individual frames. Up until now we have rendered all our animations as individual frames. This had some advantages, in that we could composite layers in Flash, using PNGs with transparent background. Another reason for this was animation quality and compression issues with rendered video. However, the world of animation and Web creation is ever changing and what could not be done well one year, can be done well the next. Such is the case for us. It is now possible to import digital video files and edit them (with regards to where the clips start and stop), adjust the compression and output them at a decent quality with manageable file sizes. What we did with the turtle button was a useful technique, but now we can output files as digital video.

[Figure 4] The compression settings for a QuickTime movie.

[Figure 5] The QuickTime editing window in Macromedia Flash MX 2004.

Rendering Your Animations

With an ever-watchful eye on file sizes, we want to render our animations in the most efficient manner. In the Render Scene window, select the Files button and choose MOV QuickTime File as the Save File type. Click Setup to set the compression options. It should default to animation as a compression style, but you will see that there are many more options available. In short, they are all different ways of compressing files. Some are good for full screen video, some are best for imagery that gradually changes, some have very good compression (Figure 4). Sticking to animation at Best quality should be fine for our purposes though, as Flash will re-compress the files when we import them into it. Make the motion setting at 25 fps or 30 fps if that is your desired frame rate.

Render all your animations in this way. You will need as many animations as you have movements and each movement will go back to the original position of Hitme. We cannot blend animations on-the-fly using this method (we will cover this in a later chapter). We have to go back to the initial state before we can play a new animation. The animations were looped to ensure that our characters different movements merge seamlessly.

[Figure 6] The Macromedia Flash timeline for the Hitme animated character.

Importing the Animations

Flash MX 2004 has some improvements when it comes to importing video. As well as adjusting the compression of the imported movie, you can edit it for length. Start a new Flash movie and import your QuickTime Movies, one at a time on to separate layers. Make sure you select the Embed video in Macromedia Flash document option. The next window will allow you to import the entire movie, or edit it first. And the final window will ask you what compression you would like, choose DSL/Cable 512 kilobytes per second (Figure 5).

Once you have imported your animations, align them along the timeline so that when one finishes, the next one starts. An example would be Layer One - frames 1-40, Layer Two - frames 41-97, Layer Three - frames 98-160 (Figure 6).

[Figure 7] Twanging the bowtie.

When you play the Flash movie, all the animations should play smoothly. You may need to adjust the positions of them if they did not all appear in the same place. Just select the appropriate keyframe, click on the animation and nudge the frames around with the arrow keys.

The next stage will be to add frame actions to make the animations jump back to frame one when they reach the end. Create a new Layer and insert keyframes at the end of each animation. In the Actions window add a gotoAndStop(1); command. This will make sure the characters position is reset allowing the user to select a new animation (a new movement).

Triggering the Movements

So how do we get our Hitme guy to react to the mouse? The simplest answer is to use hotspots. Hotspots are just buttons, which will appear over the character. The buttons will be invisible and so become hot or interactive areas of the screen. You will need to have a hotspot to trigger each of your animations. I have simply used a rectangle shape, which has been turned into a Movie Clip symbol. I dragged a few instances of this onto the Hitme character, making sure they appear in four new layers. Scaling and positioning these instances allowed me to specify exactly where the animations could be triggered,

The next thing to do is to decide how to trigger the animations. The main options are rolling over the hotspot (on rollover) or pressing the mouse button when over the hotspots (on press). In the featured Hitme character, there are four movements. A Dodge and a Tickle are operated by a rollover command and the Burp is triggered by a Press command.

The fourth animation, the bowtie, is slightly more complicated. To add to the tension of the animation, you can hold down the mouse button, which pulls out the bowtie (Figure 7). There is a stop command on the frame where the bowtie is fully extended. Then there is a play command twice, in an on release action and an on releaseOutside action. This way whether the user drags the bowtie or just holds the mouse down, the animation should play successfully. This technique is slightly more interactive than just a simple press.

To learn more about designing and making characters, check out 3D for the Web by Carol MacGillivray and Anthony Head; Burlington, Massachusetts: Focal Press, 2005; 328 pages with illustrations and CD-ROM. ISBN 0-240-51910-8 ($36.95). Check back with Animation World Magazine frequently to read new excerpts.

Carol MacGillivray was already a successful film editor before forming the pop video production company, Giblets with three friends who were animators and directors. Giblets specialized in combining media, mixing live action with 2D and 3D animation in an almost pre-digital era. Although they worked with many stars, Giblets, are most famous for bringing about the re-release of a trilogy of Jackie Wilson songs, starting with the clay animation video for Reet Petite that was a number 1 hit in 1987. Carol still has the gold disc hanging in her loo! After teaching at the Royal College of Art, Carol became interested in the new digital technology and was given an AHRB award to study an MA in Digital Moving Image at London Guildhall. She is now a senior lecturer in Digital Animation and Digital Arts at The London College of Music and Media, Thames Valley University.

Anthony Head worked in design and printing industry for seven years before pursuing his digital art full time, he has a First in BA Digital Art and a Distinction in MA Computer Art, awards include D&AD Student Award for E-Toy Design 2001, Peterborough Prize for Digital Art, joint prize with Jeremy Gardiner for Purbeck Light Years. A digital artist who combines creative intelligence with a strong design background, Anthony specializes in interactive 3D and immersive environments. He recently exhibited at SIGGRAPH 2004, Art Gallery Synaesthesia and has won many cans of Pepsi for a digital picture of The Haywain for Amiga Format Magazine! Anthony is course leader at Bath Spa University College Design for Digital Technologies, after being a fellow Lecturer in Digital Art at Thames Valley University. Both Anthony and Carol are passionate about their roles as teachers, keen to pass on their knowledge and share ideas and information. They are equally passionate in their role as learners; digital media moves so quickly and there is always something new just around the corner.