Multi-Directional (Advanced Avatar Creation)

# Multi-directional avatar (Flash tutorial)

 Previous tutorial: Advanced 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.

[hide]
* 1 Prerequisites
* 2 Simple 4 Directional Avatar
	+ 2.1 Main Scene Code
	+ 2.2 Animation Scenes
	+ 2.3 Publish and Upload
* 3 Complex 4 Directional Avatar
	+ 3.1 Download
	+ 3.2 Modify Scene Names
	+ 3.3 Add Animations
	+ 3.4 Publish and Upload
* 4 Left and Right Directional Avatar
	+ 4.1 Download
	+ 4.2 Modify Scene Names
	+ 4.3 Publish and Upload
* 5 See Also

## 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:

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:

```
import com.whirled.AvatarControl;
import com.whirled.ControlEvent;

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