Basic Avatar Tutorial

## SDK Setup

If you have not yet configured the SDK, please refer to SDK Setup.

## Create

* Being in animator mode is recommended but not required. You can access animator mode in the top right corner of flash.
* An avatar may be any size under 600 x 450 pixels.
* Background colours will not appear in Glowbe.
* All scenes should depict the avatar facing left. Glowbe will automatically flip the avatar when it moves.
* All scenes run the duration of the frames.
* Glowbe avatars must be under thirty frames per second.

### States

States are avatar behaviours that continue until you change them. If you walk or play an action, the avatar will promptly return to the selected state. Other people will also be able to see the state you have chosen.

* State names are case-sensitive and **must be capitalised properly.**
* States automatically loop.
* Scenes must be named according to the state you wish for it to be.

Some example states:

* state\_Default
* state\_Sit
* state\_Dancing

### Walking

Walking scenes are triggered when your avatar moves across the room. Walking scenes can also be unique to specific states. If you have a state without a walking scene, Glowbe will move your avatar across the room without walking.

Some example walks:

* state\_Default\_walking
* state\_Sit\_walking
* state\_Dancing\_walking

### Idle

Idle scenes are triggered when you are inactive for more than a few minutes at a time. Idle scenes are associated with specific states and should be named StateName\_sleeping (where state name is the name of the associated state). If you do not add idle state, Glowbe will simply show the avatar's current state. In both cases, animated ZZZ's will be shown coming off the top of your avatar.

Some example idles:

* state\_Default\_sleeping
* state\_Sit\_sleeping

### Actions

Actions are similar to states, but play once rather than looping, and promptly return to the current state.

Some example actions:

* action\_Laugh
* action\_Attack
* action\_Gasp

### Transitions

Transitions are scenes that create a smooth change from one state or action to another. They are played in-between the end and start of a scene or action. You do not need to add transitions to all or even any of your states or actions. Please note that naming is different for walking transitions than it is for state or action transitions.

Some example transitions:

#### Walk transitions

* state\_Default\_towalking
* state\_Default\_fromwalking

#### State/action transitions

* Default\_to\_Dancing
* Dancing\_to\_Default
* Attack\_to\_Default
* Default\_to\_Attack

#### Idle transitions

* state\_Default\_tosleeping
* state\_Default\_fromsleeping

### Incidentals

Incidentals are a series of scenes which create a state that plays normally most of the time, with alternate animations playing randomly. For example, if you want an avatar to yawn every so often in an idle animation, or want a dance state to mix up three different moves, you may use incidentals. To explain, you split the state into multiple numbered versions and then add percent probabilities that total up to one hundred. The first number represents the scene number, and the second represents the probability.

Some example incidentals:

* state\_Default\_01:95
* state\_Default\_02:05

or

* state\_Dance\_01:33
* state\_Dance\_02:34
* state\_Dance\_03:33

## Setting Up Your Avatar Code

As a typical Whirled avatar is built in Adobe Flash CS3+, the code for the avatar is written in Flash's Actionscript. Moving beyond bases does not require complex code, and is usually as easy as copy and paste.

* If you have not yet done so, download and setup the Glowbe/Whirled SDK.
* Glowbe avatars require actionscript in order to communicate with the server. This code tells the avatar which way it is facing, and whether or not it is walking. You'll need a basic understanding of how to set it up yourself.

## Basic Actionscript

Your avatar file should contain a main scene that is above your state scenes. The main scene contains the actionscript for handling avatar behaviour in Glowbe.

1. Open the actions window (F9) in your main scene.
2. Paste in this code:

```
import flash.events.Event;

import com.whirled.AvatarControl;

if (_ctrl == null) {

    _ctrl = new AvatarControl(this);

_ctrl.setMoveSpeed(n);

_ctrl.setHotSpot(x, y);

    _body = new Body(_ctrl, this, W);

    addEventListener(Event.UNLOAD, handleUnload);

    function handleUnload (... ignored) :void {

        _body.shutdown();

    }

}

var _ctrl :AvatarControl;

var _body :Body;

```

3. Replace W with the width of your scene.

4. Click info and hover your mouse on the 'floor' over your avatars centre of gravity. Note the coordinates.

5. Replace x and y with the coordinates from your info tab.

6. The default move speed in Glowbe is 500, you can insert a number in n for to change your move speed. N may not be less than 50.

## State Specified Actions

An avatar can be set up to have specific actions available only in certain states. This would be useful, if, for example you wanted to create a 'blow bubbles' action to use in a 'scuba diving' state.

Using this example, lets assume the avatar has no other actions. To set this up correctly, your state\_Default scene would contain:

```
\_ctrl.registerActions();

```

This unregisters all actions whenever your Default scene is triggered, removing "blow bubbles" (and any other actions) from the user's selection. After this, you would add the following to your "scuba diving" scene:

```
_ctrl.registerActions("blow bubbles");

```

This would make the action available again.

## Non-flipping Scenes

The default Body.as file automatically flips all scenes when an avatar faces right. If you'd like a specific scene to always face the same direction, the following code will reverse the flipping. That scene will always look exactly as drawn no matter how a player walks around.

```
//Don't Flip
if (_ctrl.getOrientation() < 180) {
 this.x = 0;
 this.scaleX = 1;
}

```

## Automatically Flying

This is code that you can use to make your avatar float automatically in certain states. To use it, add the following to your Main scene:

```
//Change the 0.2 below to change how high above the floor the avatar will appear once it is moved. 0 is the floor and 1 is the ceiling
function fly():void{
	updateRoom();
	flyHeight = (roomSize[1] as int)*0.2;
	_ctrl.setPreferredY(flyHeight);
}

function unFly():void{
	_ctrl.setPreferredY(0);
}

function updateRoom():void{
	roomSize = _ctrl.getRoomBounds();
}

var flyHeight:int = 0;
var roomSize:Array = new Array(100,100,100);

```

On transitions to scenes where the avatar should fly, or scenes where the avatar should be flying, add the following code:

```
fly();

```

On transitions to scenes where the avatar should land, or scenes where the avatar should be on the ground, add the following code:

```
unFly();

```

## Automatically Walking on the Ceiling

Similar to the code above, you can make your avatar hang from the ceiling. In this case, your avatar will be upside down and you will need to remember to set your HotSpot at the top of the scene.

```
function fly():void{
	updateRoom();
	flyHeight = (roomSize[1] as int)*1;
	_ctrl.setPreferredY(flyHeight);
}

function unFly():void{
	_ctrl.setPreferredY(0);
}

function updateRoom():void{
	roomSize = _ctrl.getRoomBounds();
}

var flyHeight:int = 0;
var roomSize:Array = new Array(100,100,100);

```

On scenes where the avatar should hang from the ceiling, add the following:

```
fly();

```

On scenes where the avatar should be on the ground, add the following:

```
unFly();

```

If you want to have a mix of states that show the avatar on the floor and on the ceiling, you may want to make a transition between the two. Changing the preferred Y won't automatically move the avatar to a new location, so you will need to tell it to move. To do this, you'll want to add these variables on the main scene:

```
var myLocation:Array = [0.0,0.0,0.0]
var myDirection:Number = 180;

```

And you'll want to add this code to the transition to your hanging state (for the transition from the hanging state, replace the 1.0 with 0.0):

```
myLocation = _ctrl.getLogicalLocation();
myDirection = _ctrl.getOrientation();
_ctrl.setLogicalLocation (myLocation[0],1.0,myLocation[2],myDirection);

```

## Adding an About Action

This code will allow the user to click an action and view a popup. This action is only visible in the inventory and shop listing screen, the idea being that it's a description built into the avatar file itself. It should not interfere with any version of Body.as or MovieClipBody.as that you may be using.

First, make a new movieClip that shows exactly what you want to see in the About Popup. Click on the Properties of it in the library, and export it for ActionScript. Make sure the class name is AboutPopup.

You'll need to add three chunks of code in your main scene:

Below your import... lines, add this code:

```
import com.whirled.ControlEvent;
import com.whirled.EntityControl;
//Create a new instance of the AboutPopup movieClip and name it aboutPopup
var aboutPopup = new AboutPopup();

```

Just under the setMoveSpeed(...) line, add the following code (You must change "Victory" to include the names of all your actions, for example "Attack","Die","Juggle"):

```
      //Check where the avatar is loaded.  If it is in the shop or inventory viewer, register your actions and the About action
	_environment = _ctrl.getEnvironment();
	if (_environment == EntityControl.ENV_VIEWER || _environment == EntityControl.ENV_SHOP){
		_ctrl.registerActions("Victory","About");
		_ctrl.addEventListener(ControlEvent.ACTION_TRIGGERED, triggerAbout);
	}

```

* At the bottom of the code (above the var... lines), add:

```
function triggerAbout(event:ControlEvent):void{
	if (event.name == "About"){
                //Edit the numbers at the end of this line to be the width and height of your AboutPopup movieClip
		_ctrl.showPopup("Info:", aboutPopup, 200, 75 );
	}
}

var _environment :String;

```

## Adding an Outline

To create an outline around your entire avatar, add the following code to your main scene:

```
filters = [new GlowFilter(0x000000, 1, 5, 5, 5)];

```

To remove the outline, simply add the following code when you want to toggle it off:

```
filters = [];

```

## State Changed Code

To make certain codes run when you change states make a new layer in the main scene and use this code:

```
import com.whirled.ControlEvent;
///Only import ControlEvent if you haven't already

_ctrl.addEventListener(ControlEvent.STATE_CHANGED, stateChanged);

function stateChanged(event:ControlEvent):void {
    switch(event.name) {
        case "Fly":
        ///What will happen if we're in the state Fly?
        ///Hotspot changes so the name is higher
        _ctrl.setHotspot(250, 350, 700);
        ///Change speed so its faster when in this state
        _ctrl.setMoveSpeed(450);
        break;

        default:
        ///What happens if we're in any other state/default?
        ///Hotspot changes back if in any other state
        _ctrl.setHotspot(250, 350, 600);
        ///Speed changes to default
        _ctrl.setMoveSpeed(300);
        break;
    }
}

```

### Action Triggered Code

To make certain codes run when you play actions make a new layer in the main scene and use this code:

```
import com.whirled.ControlEvent;
///Only import ControlEvent if you haven't already

_ctrl.addEventListener(ControlEvent.ACTION_TRIGGERED, actionTriggered);

function actionTriggered(event:ControlEvent):void {
    switch(event.name) {
        case "Speak":
         ///What happens when this action is played?
         ///The symbol with the instance name "Face" plays the frame with the label "speak"
        Face.gotoAndPlay("speak");
        break;

    }
}

```

## Avatar Spoke Code

To make an action/code to play when your avatar has spoken, make a new layer in the main scene and add this code:

```
import com.whirled.ControlEvent;
///Only import ControlEvent if you haven't already
_ctrl.addEventListener(ControlEvent.AVATAR_SPOKE, startTalking);

function startTalking(event:ControlEvent):void {
///This is what the avatar does when it talks
///The symbol with the instance name "Face" plays the frame with the label "Talk"
Face.gotoAndPlay("Talk");
    }

```