Multi-directional avatar (Flash tutorial)

If you have never created an avatar for Whirled, you probably want to look into our Simple avatar (Flash tutorial) and Advanced avatar (Flash tutorial). This tutorial explains how to make an avatar that faces to the back as well as facing left and right.

Prerequisites

 * Download and unzip the Whirled SDK and set your classpaths if you haven't already.
 * In Adobe Flash CS3,CS4, or CS5 Open a new Actionscript 3.0 file.

Simple 4 Directional Avatar
This section explains how to make a very simple avatar that faces and walks in 4 directions (front left, front right, back left and back right).

Main Scene Code
Before adding any artwork, set up your main scene as follows: import com.whirled.AvatarControl; import com.whirled.ControlEvent;
 * 1) Rename the default scene "main".
 * 2) Click on the first keyframe, and open the Actions panel (press F9).
 * 3) Paste the following code into the Actions box:

var _ctrl :AvatarControl = new AvatarControl(this); _ctrl.addEventListener(ControlEvent.APPEARANCE_CHANGED, updateLook);

updateLook;

function updateLook(o :Object = null):void { var isMoving :Boolean = _ctrl.isMoving; var orient :Number = _ctrl.getOrientation; var scene :String = (isMoving ? "walk" : "face") + "_" + (orient < 180 ? "right" : "left") + (orient > 91 && orient < 269 ? "_back" : ""); gotoAndPlay(1, scene); }
 * You can also set your hotspot and  movespeed by adding lines above updateLook;

Animation Scenes

 * 1) Create scenes with the following names, and add animations to each scene showing your character facing or walking in the named direction:
 * face_left
 * face_right
 * walk_left
 * walk_right
 * face_left_back
 * face_right_back
 * walk_left_back
 * walk_right_back


 * 1) Add the following code to the last frame of each scene so the animations will loop:

gotoAndPlay(1);

Publish and Upload

 * 1) Publish your avatar.
 * 2) Upload it to Whirled and enjoy!

Complex 4 Directional Avatar
If you're looking for all the features of a standard avatar plus the ability to walk backwards, you can download a 'Body Mod' that will handle things for you.

Download

 * This Body mod can be found [[Media:Multi-directional_avatar_tutorial.zip|here]]
 * Save it in the same folder as your existing avatar. Do not rename it.

Modify Scene Names
All of the scene names should match those described in the Advanced avatar (Flash tutorial), modified as follows:
 * add _front to the end of all scene names that show the avatar facing forward
 * add _back to the end of all scene names that show the avatar facing backward
 * For example: state_default_walking becomes state_default_walking_front and state_default_walking_back
 * incidental numbers and weights should be added after the _front or _back
 * For example: state_default_01:90 becomes state_default_front_01:90

Add Animations
You will need to add all animations that show your avatar looking toward the back of the room. The avatar should always be facing left, as this Body mod automatically flips it to face right.

Publish and Upload

 * 1) Publish the avatar.
 * 2) Upload it to Whirled.

Left and Right Directional Avatar
All the features of a standard avatar, plus the ability to have different animations when facing or walking right. This 'Body Mod' has been tested with SDK 0.67.

Download

 * This Body mod can be found [[Media:LeftRightBodySDK67.zip|here]]
 * Save it and unzip it. Change the classpath for your avatar examples folder to point to the folder where you saved this Body Mod instead.

Modify Scene Names
All of the scene names should match those described in the Advanced avatar (Flash tutorial), modified as follows:
 * add _left to the end of all scene names that show the avatar facing left
 * add _right to the end of all scene names that show the avatar facing right. You will need to animate them facing right, as the Body will not flip them for you.
 * For example: state_default_walking becomes state_default_walking_left and state_default_walking_right
 * incidental numbers and weights should be added after the _left or _right
 * For example: state_default_01:90 becomes state_default_left_01:90

Publish and Upload

 * 1) Publish the avatar.
 * 2) Upload it to Whirled.