FAT Pet Tutorial

Flash Tutorial
Create a pet based on a downloaded pet template.
Difficulty Level
Beginner
Requirements
Adobe Flash CS3, Whirled SDK
Other Information
Next tutorial: FAT Pet Advanced

Making your own Flash pet gives you total control of the look and feel of your pet. With our template you just create, animate and save, and you're ready to upload! No code required.

Prep Step

IMPORTANT: There is one preparatory step required for making Flash pets. It's very easy and you only ever need to do it once (it works for avatars and other content that communicates with Whirled too). It also contains the template files used in this tutorial.

1. Set up the Whirled SDK.

Create

Sketch in your pet

Shift F2 brings up the Scene Window.

1. Open the Whirled Pet Template (found in the Whirled SDK \whirled\examples\pets\FATexample\FATexample.fla) to start on a file with all the code already written. The folder also contains an example pet made from this tutorial.
2. Pets' various actions and animations are organized into "scenes" in the Flash file. If you do not already have a Scene window, hit Shift F2 (Window -> Other Panels -> Scene) to bring it up.
3. In the Scene window, click "content_idle" to create your pet's standard view. The "main" scene just holds the code, which we won't need to change.
4. Sketch a very simple pet (a body with two legs) facing left, with the feet as close to the bottom of the scene as possible without leaving the scene. Center the sketch horizontally in the scene to make sure it flips properly when it faces the other way.

Use a light color to sketch your pet so that you'll be able to draw over it clearly.

See FAT Pet Advanced for configuring the scene size, pet size or the standing point.

The lock icon locks a layer.
The page icon creates a new layer.

Move the leg art so the hip is under the crosshatch.

Move the leg symbol so the leg lines up with the sketch again.

Draw your pet parts

1. Click the lock icon to lock the sketch layer so you don't mess it up while drawing in the clean version.
2. Now you'll draw the separate parts of the pet (body, right leg, left leg) on different layers, so that you can animate them.
   1. Click the page icon to make a new layer and double-click its name to change it to "leg right".
   2. Draw a clean version of your pet's right leg, hip to toe, right over the sketch.
   3. Select the entire leg drawing by hitting CTRL-A.
   4. Hit F8 to turn the leg drawing into a "symbol" and name it "leg right". Symbols are how Flash bundles up lines and fills into a single unit for animating.
   5. Double-click the new symbol to edit its contents.
   6. Select all (CTRL-A) and move the leg so that the hip joint lines up over the crosshatch. This is the rotation point for the symbol, so we want it to line up with the rotation we intend. This will move the leg away from the sketch, but that's fine.
   7. Click "content_idle" to back out of the symbol and return to the full scene.
   8. Now move the "leg right" symbol so that it lines up over the sketch again. This brings the leg and its rotation point back to where it belongs.
   9. Repeat the above steps for "body" and "leg left".
      

      The final image of the pet, with a bit of the sketch peeking out from underneath.
3. Trash the sketch layer (Layer 1) now that you don't need it.

See FAT Pet Advanced for multiple and jointed limbs.

Duplicate the selected scene.

Animate

Setup the scene and keyframes

1. Duplicate the "content_idle" scene and name the new one "content_walk". This creates and selects a new scene for our walk cycle.
2. Click the top layer at frame 20 and drag down to select the whole column of frames.
   

   Click and drag to select the frames at 20.
3. Hit F6 to make a keyframe at frame 20 for all the layers in the scene. Even though nothing actually moves yet, you now have an animation.
4. Now set keyframes at frame 5, 10 and 15 using the same technique. These will be the points of action in our walk cycle.
   

   Set periodic keyframes for a regular walk cycle.

Rotate the legs to set a walking pose.

Set the legs in the opposite direction on frame 8.

Pose the pet in the keyframes

1. Since we're on Frame 15, we'll start animating here.
   1. Hit CTRL-A to select all the parts at this frame.
   2. Hit SHIFT-Down Arrow to move the whole pet down a little on this frame. This will be one point in the natural bob of the walk cycle.
   3. Use the Free Transform tool and rotate the left leg symbol forward and the right leg symbol back, to give your pet a stride.
2. Click Frame 5 to pose the opposite end of the walk cycle.
   1. Select all (CTRL-A) and hit SHIFT-Down to bob the avatar here too.
   2. Rotate the legs the opposite from before: left leg back, right leg forward.
3. Flash can fill in all the frames between our keyframes automatically. Click and drag to select all the active frames of all the layers.
   

   Click and drag to select all the animation frames.
4. At the bottom of the screen under Properties, set "Tween" to "Motion". This makes Flash automatically animate between the keyframes you just set.
   

   Set "Tween" to "Motion".
5. Hit Enter to watch your animation. Select and tweak any frames or symbols you think need improving.

See the list of Flash tutorials for more complex animation. See FAT Pet Advanced for handling transitional or random alternate animations and pet moods.

Save

1. Save your file with a convenient name. This is your source file for creating this pet.
2. Choose File -> Publish to output a swf file of the avatar. This is the file you'll upload to Whirled.

Ready for the next step? Try the FAT Pet Advanced.