Configurable avatar (Flash tutorial)

From Whirled Club Wiki
Jump to: navigation, search
Flash Tutorial
Learn how to make a configurable avatar.
Difficulty Level
Icon-Flash.png Adobe Flash CS3, Whirled SDK
Other Information
Previous tutorial: Advanced avatar (Flash tutorial)

You should be comfortable making an avatar such as those in the simple avatar (Flash tutorial) and the advanced avatar (Flash tutorial). If you feel sufficiently experienced, feel free to move forward with the more advanced steps below to create a configurable avatar.


  1. Download the Whirled SDK. "SDK" stands for Software Development Kit, and it contains handy tools for Whirled creators.
  2. Configure your Flash CS3 to use the Whirled SDK

Download the Template Files

First you need to download the SVN template files. You can do this one of two ways:

  • You can get the files straight from the SVN. The specific files that you need are in this directory or its subdirectories. To more easily retrieve the files from the SVN, you should get an SVN client.
  • If you don't have an SVN client, just download the .zip file here.

Either way, your config folder should at least have these 4 important files: config.fla,, and

Design Your Avatar

Make a new Flash File, and make an avatar. If you need help with this, see the earlier tutorials.

Unlike the previous tutorials, you must use This is included in all the SDK releases after 0.55. When using MovieClipBody, you discard scenes for movieclips using the help of exporting for ActionScript. So, instead of making a scene called state_Default, you make a movieclip called state_Default, export it for ActionScript, and put all states, actions, and transitions on the main scene, along with your ActionScript. For more details see the pictures.

Discard scenes for movieclips.
Put all states, actions, and transitions on the main scene.
How to export for ActionScript.

Also unlike the earlier tutorials, you must give all movieclip instances instance names. The prime time to do this would be when you have one state with all of your movieclips laid out and only one keyframe per layer (i.e. no animation). It is much easier to do this now when you only have about 20, than later when you have about 400+. Thankfully, instance names duplicate with movieclips and carry on with new keyframes. So to make a new state, right click on the movieclip in the library and then click duplicate. Rename it to your new state and animate that.

Naming an instance

For more movieclipbody help, go to

To name an instance, you must click on the instance. In the properties box, it should say Movie Clip and not Frame. Type the name in the text field right below it. Your instance names should be descriptive, yet concise.

Edit the ActionScript Files

Open the three ActionScript files:,, and

If you think you will do more than one config project, you should rename these files using Save As. Make sure to put them in the config folder, the same place that ConfigBody, ConfigData, and ConfigPanel are. I would name them according to your project. If you were making a config bee, then name them something like BeeBody, BeeData, and BeePanel. If you do this, you must replace all references to the old file names and point them to the new file names.

NOTE: If you have sdk 0.62 or later, you will have to edit a line: Line 3 of Panel - change to import com.threerings.display.DisplayUtil;

NOTE: If you have sdk 0.65 or later, you will have to edit an additional line: Line 5 of Body - change to import com.threerings.display.ColorMatrix;

Make the following replacements in the text:

Original Text Replacement Text Filename Line Numbers of Replacements
ConfigBody BeeBody → 14, 16, 38, 40, 48 (2x), 53, 63, 210
ConfigData BeeData → 5, 12, 14 (2x)
ConfigPanel BeePanel → 16, 18 (2x), 175, 176, 180

NOTE: Only replace the uppercased Config, not lowercased config (i.e. configData should remain the same). Leave it alone if it has more letters (i.e. createConfigPanel should remain the same).

Basic Avatar Code

You must copy and paste the following code into your avatar, on the main scene, on the first keyframe of the actions layer. You must replace Config where it says. (Lines 5, 11, 18)

<actionscript> import com.whirled.AvatarControl;

import config.ConfigBody; //REPLACE Config

if (_ctrl == null) {

   _ctrl = new AvatarControl(this);
   _ctrl.setHotSpot(300, 390, 300);
   _body = new ConfigBody(_ctrl, this,	600); //REPLACE Config


var _ctrl :AvatarControl; var _body :ConfigBody; //REPLACE Config </actionscript>

NOTE: The normal avatar code still works, such as seen in

You must also set your classpaths. Along with the 2 regular classpaths, you must find and set the path to your Body, Data, and Panel .as. This would be *Wherever you unzipped the configtut folder*/configtut/src . You must also find and set the path to "...\whirled\contrib\src\as".

Color Configuring Code

By this point, you should have made your basic avatar, and have a good idea of what you want to configure. Now you have to decide exactly what you want configured, and if you want color or frame/part, or both.

Instance names tell Flash the path to the movieclip to be colored.

For every color you want, you need a filter. In all three .as files, you will find code that says "*Filter", which applies the filter to the avatar; "*Color", which puts the colors in the avatar's memory; and "*_color", which is the instance name of the movieclip on the popup which gets the color from the user. You will also find code that says something like [ "torso", "shirt" ] This is how Flash finds the part to be colored. The * s are instance names. When tweening while color configuring, you must have a movieclip inside another movieclip. For example, on the config.fla, inside state_Default is the torso instance of torso_group, which is tweened (or will be). Tweened objects freeze when applied a code filter. Because of this, inside torso_group is the shirt instance of shirt_group, which isn't tweened. You can safely color it. So, if your avatar has tweens on movieclips you want to color, you have to open the movieclip, then click convert to symbol, then make sure to name the instance you just created. Go back to Body, and edit it so that from your states/actions/transitions, you have the instance names to your untweened movieclip.

Now, you have to replace/add/take away filters. Be sure to replace/add/take the ****Color lines, ****Filter lines and ****_color lines out. They are on these lines:

Filename Line Numbers of Replacements 101, 107 7, 22, 35 33

You can apply more than one filter to a movie clip, too. Just copy the applyFilter line, edit the path of the movieclip, and duplicate the ****Filter that you want. This time, you don't need to edit the others, because the filter was already made.

You also need to decide what you want the default colors to be, and what color ranges you want them to have. In BeeData, it says

<actionscript> public var ****Color :uint = 0x999999; </actionscript>

You need one of these for each filter too. Where it says 999999, that is the default color. Find the color you want in flash's color panel, and put the Hex code there. Also, in BeePanel (33), you can change MyColorPicker.PALLETE_GENERAL, to MyColorPicker.PALLETE_SKIN, for only skin colors to be chosen.

Frame/Part Configuring Code

Keyframes correspond to names in Panel.

Frame/Part configuring works like this - you give it frames inside the movieclip which are the choices. On the config panel, you choose one from the dropdown, and it selects it.

Just like in color, there are three things you need to change. "*Options" , the array that holds the choices, "*Number" , an integer that tells the frame number, and "*_option" , the dropdown that gets the user input. First edit the *Options array in Panel. You need to enter a name for every keyframe you want to put in. add/subtract/replace as needed. Next, edit the path of the keyframes in Body (the selectFrame lines). Use the instance names as in color config. Again, add/subtract/replace as needed. Finally, in Data, add/subtract/replace, then select the keyframe that you want to be the default, and put that in the *Number line.

There are *Options, *Number, and *_option s on these lines

Filename Line Numbers of Replacements 77 10, 25, 44 29, 30

Editing the Panel

Copy the config folder in config.fla 's library, and paste it into yours. Open popup_config, and edit the button_color instance names to reflect all of the *_color lines, and edit the button_option instance names to reflect the *_option lines in Data. Add/subtract/replace to make all of the filters. Now, organize them into a neat, easy to follow popup menu. You can also edit the buttons (button_color, button_option and button_shuffle) to have your own shape, and edit the background to your choosing. (You can change the background dimensions, and the popup will fit.)

You can also edit the buttons and Background

Final steps

Make the colored parts white, black or gray.

You are almost done! All you have to do now is to make all of the parts you are coloring either white, black, or gray. What the filter does is it adds the color on top of the existing color. So color everything white that you want to be colored. This will make it configure to the color that is chosen. Color all shadows and darker spots gray. They will show up as the gray + the color chosen. Finally, everything black will show up as black, because black is all colors.

Now, you can upload it, and sell it in the shop!

This tutorial was created by 1134calc. See Config Creations for more configurable items, and to showcase your own!

See Also