(For more resources on Flash, see here.)

Customizing your avatar

A Flash virtual world is a social community in which players interact with each other and have their own identity. Virtual world usually lets a user decide the avatar’s appearance by choosing the combination of different styles and colors.

Customizing different styles

Each part of the avatar will have different styles and shapes to form different combinations of the appearance of the avatar. Thanks to the timeline and movie clip features in Flash, we can put different styles of each part within the movie clip. For example, the following screenshot shows the head movie clip with different head styles placed frame by frame and we can use gotoAndStop to display the style we want.

Customizing the color

ActionScript supports changing the color transform for a given movie clip. It supports not only color tint but also applying color filter and detailed RGB transformation. We will use the simple color tint to change the color of the avatar.

As the color transform is applying to the whole movie clip, we cannot simply tint the avatar movie clip because that will make the whole avatar tint to one solid color. In order to tint a partial part of the movie clip, we specifically create a movie clip in each part and name it color_area. We later program the ActionScript to change all movie clip names with color_area to the customized color.

Adding customization to avatar class

We are going to change the style and color by ActionScript in avatar class. We need to import the ColorTransform class in flash.geom package to change the color with ActionScript.

import flash.geom.ColorTransform;

We need several instance variables to hold the styles and color state.

public const totalStyles:Number = 3;
public var currentColor:Number = 0x704F4C;
public var currentStyle:Number = 1;

We wrap the whole block of color transform code into one function. The color transform adds RGB color transformation to the target movie clip. We only use colorTransform to tint the color here but it also supports percentage transform that adds partial color to the target movie clip. We will apply the color transform to the color area inside the head of the avatar in 4 directions.

public function changeColor(newColor:Number = 0x000000):void {
currentColor = newColor;
for each(var avatar:MovieClip in _directionArray){
var avatarColor:ColorTransform = new ColorTransform();
avatarColor.color = newColor;
avatar.head.color_area.transform.colorTransform =
avatarColor;
}
}

We modified the color by using color transform and used timeline to style the avatar style. Every frame in the head movie clip represents a style with its color tint area. We display the new style by changing the current frame of the avatar movie clip. It is also necessary to change the color again after switching the style because every style contains its own color area.

public function changeStyle(styleNumber:int):void {
for each(var avatar:MovieClip in _directionArray){
/* display the giving style in all parts of avatar*/
avatar.head.gotoAndStop(styleNumber);
avatar.body.gotoAndStop(styleNumber);
avatar.lefthand.gotoAndStop(styleNumber);
avatar.righthand.gotoAndStop(styleNumber);

/* need to apply the color again after changing the style */
var avatarColor:ColorTransform = new ColorTransform();
avatarColor.color = currentColor;
avatar.head.color_area.transform.colorTransform =
avatarColor;
}
currentStyle = styleNumber;
}

The purpose of the avatar class is to control the appearance of the avatar. We just implemented the direction, color, and style switching methods and it is now ready for customization panel to use.

Designing a customization panel

Avatars in virtual worlds and games often provide players with different kinds of customization. Some games allow users to customize the whole body with lots of options while some games may only provide two to three basic customizations. The layout design of the customization panel is often based on the number of options.

There are two common customization panel layouts in the market. One layout displays arrows for a user to select next and previous styles. The other one displays a thumbnail view of the options within the same category.

The arrows selection layout is suitable for an avatar that contains limited parts for customization. There may be only two to four categories and not many options in each category. Players can easily loop through different style combinations and choose their favorite one using this layout.

The following avatar customization screenshot from the 2D Online RPG called Dragon Fable uses the arrows selection layout:

The thumbnail view layout is suitable for avatars that can be highly customized. There are often many categories to customize and each category provides a lot of options for players to choose. Some virtual worlds even provide micro modification so that players can adjust details on the chosen style such as the distance between the eyes.

Players do not need to iterate the large amount of styles and can quickly choose a style option among them with the thumbnail view.

The following screenshot is an online Mii editor. Mii is the avatar system in the Nintendo Wii console. This is an online clone of the Mii avatar customization. It allows a large amount of avatar customization by the thumbnail view layout with extended features such as scaling and moving the elements.