Color remixable avatar (Flash tutorial)

From Whirled

Flash Tutorial
Turn an existing avatar project into a remixable avatar.
Difficulty Level
Advanced
Requirements
Adobe Flash CS3, Flash file for an avatar
Other Information
Previous tutorial: Advanced avatar (Flash tutorial) Other tutorials: Remixable avatar (Flash tutorial)

This tutorial assumes you are already comfortable creating avatars from the Advanced avatar (Flash tutorial) tutorial using CS3. This tutorial covers converting an existing whirled avatar project into a remixable avatar. WARNING: This tutorial is a work in progress, and is presently incomplete

Contents 1 Before you Begin 2 Requirements 3 Setting up your Symbol 4 Avatar Code 5 Create the _data.xml file 6 Build, Package, Test 7 Above and Beyond 8 More Information

Before you Begin

• Download and unzip the Whirled SDK
• Set classpaths if you haven't already. You will need 3 paths to use the avatar code below:

1. The Whirled classpath
2. The Contrib classpath
3. The Avatar body classpath

Requirements

First decide what component from your avatar that you wish to recolor (the head? the body? the eyes?). In order to make that component re-colorable using this tutorial the following must be true:

• The component must be in its own symbol and that symbol is used in every scene that the component appears.
• The component should be mostly one color, or shade of colors. If it isn't, the re-coloring will leave it mostly one color possibly leading to undesirable results. Greyscale lends itself very well to color remixing.
• If the components symbol is tweened you will have to go through extra steps to ensure that the tween will still work.

Setting up your Symbol

Our first step will be to assign an instance name to every instance of our symbol, if we havn't already. To do this click on the symbol that has been placed to the stage. In the properties tab below the symbol type give it a instance name of remixPart. You will need to do this in every keyframe of every scene that contains the symbol. Note: symbol type does not matter with color remixes like it does with image remixes. Note: You can name the symbol almost anything you want, you just must remember to name every instance of it the same way. (If you want to call it remixTorso, or remixLeg, make sure you name every instance of it accordingly)

If this symbol is motion tweened you will not be able to directly apply the re-color without breaking the motion tween. To get around this you need to embed your animation a level deeper.

1. Create a layer for the animation you wish to color remix. Add one keyframe and place or draw the graphic you wish to tween on that keyframe. Make sure the layer has only one keyframe!
2. Click on that keyframe in the timeline to select the contents. Right-click over your selected drawing and select "Convert to Symbol" and give it a suitable name. Make sure the symbol is a movie clip.
3. Now, right-click on that symbol again, and "Convert to Symbol." You can prefix it with the word "container" when you name it to keep things clear. Give this symbol the instance name, "remixPart".
4. Double-click on the symbol you wish to remix to go one level deeper. You can create a motion tween here without affecting the remix.

Avatar Code

Cut/Paste the following code into the main scene of your avatar. Adjust the hotspot as directed in the Advanced avatar (Flash tutorial) tutorial, and replace width in Body(_ctrl, this, width) with the actual width of your scene.

import flash.events.Event;
import com.whirled.AvatarControl;
import com.whirled.DataPack;
 
import com.whirled.contrib.ColorMatrix;
 
if (_ctrl == null) {
    _ctrl = new AvatarControl(this);
	DataPack.load(_ctrl.getDefaultDataPack(), gotPack);
	_ctrl.setHotSpot(130, 370);
    _body = new Body(_ctrl, this, 260);
    addEventListener(Event.UNLOAD, handleUnload);
    function handleUnload (... ignored) :void {
        _body.shutdown();
    }
}
 
function gotPack(result:Object) : void
{	
	if (result is DataPack) {		
	        var mat:ColorMatrix = new ColorMatrix
		mat.colorize(result.getColor("RemixColor"));
		_remixFilter = mat.createFilter();
	}
}
 
var _remixFilter:ColorMatrixFilter;
var _ctrl :AvatarControl;
var _body :Body;

In every scene that contains the symbol we are remixing, put the following code in the first frame:

if (remixPart && _remixFilter) {
	remixPart.filters = [_remixFilter];
}

Create the _data.xml file

Open up a text editor and cut/paste the following:

<datapack>  
  <file name="_CONTENT" type="Blob" value="remixExample.swf"/>
  <data name="RemixColor" type="Color" 
     value="FF0000" info="Recolor description here"/>
</datapack>

In the place of remixExample.swf, put the name of your avatars built swf.

Now save this file to your avatars directory as _data.xml

Build, Package, Test

Now it is time to build your avatar (finally). Build your avatar and put the compiled .swf in the same directory as your .fla.

Add your built swf, and _data.xml to a zip file.

Create a new avatar in whirled and instead of uploading a swf like usual, upload the zip file you created for the avatars media. Congratulations you have just made a remixable avatar.

Above and Beyond

This is just a simple example, you can do so much more with remixing above and beyond just image remixing. If you want to pull up your sleeves and dig into the code, check out DataPack for all the different type of values that you can have remixable.

More Information

• Avatar creation FAQ
• Whirled Builders
• Whirled Coders
• Remix!

Categories: Flash tutorials | Avatar tutorials