Simple avatar (Flash tutorial)
|Create an avatar based on a downloaded avatar framework.|
|Adobe Flash CS3, Whirled SDK|
|Next tutorial: Advanced avatar (Flash tutorial)|
Download and open the template
- Download the Whirled SDK. "SDK" stands for Software Development Kit, and it contains handy tools for Whirled creators.
- Configure your Flash CS3 to use the Whirled SDK
- Open the Whirled Avatar Template, found in ...\whirled\templates\avatar.fla (this is included among the files in the SDK that you installed)
Note: This tutorial assumes you'll be working right over the template file and saving in the same folder as the template. Otherwise you will need to manually set up the required code.
See Advanced avatar (Flash tutorial) for setting up the base Whirled code from scratch (without template).
Sketch in your avatar
- Avatars' 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.
- In the Scene window, click "state_Default" to create your avatar's standard view. The "main" scene just holds the code, which we won't need to change.
- Sketch a simple avatar (a body with two legs and two arms) 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.
See Advanced avatar (Flash tutorial) for configuring the scene size, avatar size or the standing point.
Draw your avatar parts
- Click the dot in the lock column to lock the sketch layer so you don't mess it up while drawing in the clean version.
- Now you'll draw the separate parts of the avatar (body with head, right leg, left leg, right arm, left arm) on different layers, so that you can animate them.
- Click the page icon to make a new layer and double-click its name to change it to "arm right".
- Draw a clean version of your avatar's right arm, shoulder to fingertips, right over the sketch.
- Select the entire arm drawing by hitting Ctrl-a.
- Hit F8 to turn the arm drawing into a Movie clip "symbol" and name it "arm right". Symbols are how Flash bundles up lines and fills into a single unit for animating.
- Using the Selection Tool, double-click the new symbol to edit its contents.
- Select all (Ctrl-a) and move the arm so that the shoulder 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 arm away from the sketch, but that's fine.
- Click "state_Default" to back out of the symbol and return to the full scene.
- Use the Free Transform Tool to move the transformation point to the same spot as the crosshatch. This will make it easier for you to rotate the limbs during animation.
- Now switch back to the Selection Tool and move the "arm right" symbol so that it lines up over the sketch again. This brings the arm and its rotation point back to where it belongs.
- Repeat the above steps for "leg right", "body", "leg left", and "arm left".
- Click and drag to rearrange any layers that are out of order so that your avatar looks right with the correct body parts on top of or below other parts.
- Select the sketch layer (Layer 1) and use the trashcan icon to delete it now that you don't need it.
See Advanced avatar (Flash tutorial) for multiple and jointed limbs.
Setup the scene and keyframes
- Duplicate the "state_Default" scene and name the new one "state_Default_walking". This creates and selects a new scene for our walk cycle.
- Click the top layer at frame 20 and drag down to select the whole column of frames.
- 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 short animation.
- Now set keyframes at frame 5, 10 and 15 using the same technique. These will be the points of action in our walk cycle.
- Note: The walk in this tutorial inherits the standing pose (state_Default) for frames 1, 10, and 20.
Pose the avatar in the keyframes
- Since we're on Frame 15, we'll start animating here.
- Hit Ctrl-a to select all the parts at this frame.
- Hit Shift-Down Arrow to move the whole avatar down a little on this frame. This will be one point in the natural bob of the walk cycle.
- Use the Free Transform tool and rotate the left leg symbol forward and the right leg symbol back, to give the avatar a stride.
- Rotate the arms so that the right is forward and the left arm is back. When you walk, you swing your arms in the opposite direction of your legs, to keep balance.
- Click Frame 5 to pose the opposite end of the walk cycle.
- Select all (Ctrl-a) and hit Shift-Down Arrow to bob the avatar here too.
- Rotate all the limbs the opposite from before: left leg back, right leg forward, right arm back, left arm forward.
- Flash can fill in all the frames between our keyframes automatically. Click and drag to select all the active frames of all the layers.
- At the bottom of the screen under Properties, set "Tween" to "Motion". This makes Flash automatically animate between the keyframes you just set.
- Hit Enter to watch your animation. Select and tweak any frames or symbols you think need improving.
- Save As your file with a convenient name. This is your source file for creating this avatar. Make sure you save your file in the same folder as the template.
- Choose File → Publish to output a swf file of the avatar. This is the file you'll upload to Whirled.
- Upload your avatar
Ready for the next step? Try the Advanced avatar (Flash tutorial).
The example used in this tutorial can be found in ...\whirled\examples\avatars\FATexample\FATexample.fla (this is included among the files in the SDK that you installed) and can be seen in the shop at http://www.whirled.com/#shop-l_5_251.