FAT Pet Tutorial

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.

Before you begin...

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 Glowbe too). It also contains the template files used in this tutorial.

Create!

Sketch in your pet

1. Open the Pet Template (found in the 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.

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".
3. Trash the sketch layer (Layer 1) now that you don't need it.

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.
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.

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.
4. At the bottom of the screen under Properties, set "Tween" to "Motion". This makes Flash automatically animate between the keyframes you just set.
5. Hit Enter to watch your animation. Select and tweak any frames or symbols you think need improving.

And finally 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 Glowbe.