FANDOM


Multi-directional avatar (Flash tutorial)

From Whirled

Jump to: navigation, search

Flash Tutorial
Learn how to make an avatar that faces to the back as well as facing left and right.
Difficulty Level
Advanced
Requirements
Adobe Flash CS3, Whirled SDK
Other Information
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.


Contents

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