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

This page has been heavily modified and updated by Moogie 18:40, 4 October 2011 (PDT)

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 a symbol (MovieClip or Graphic) inside another symbol. The outer symbol will be referred to as the "Container" and will contain any tweens needed to animate the remixable symbol. The remixable symbol itself should contain no tweens and be no longer than 1 Frame in length.
 * The component should be painted in greyscale colors. White areas will show the full remix color; grey shades will darken the color in those areas; black will always display black.

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. Make sure you do this on Frame 1. In the properties tab (below the stage area), give it a memorable instance name (in this tutorial, we will be using the name "remixObject", but the screenshot to the right shows it as "remixPart"). You only need to do this on the first keyframe of the remixable symbol's layer, but certain things will break it. Follow these rules and it should be fine:


 * Always give Frame 1 (the first keyframe) the instance name. Leave others blank.
 * The remixable symbol must be present throughout the entire timeline. Use additional keyframes and Alpha filters if you need to hide it for certain parts of the animation, but NEVER leave blank frames at the beginning of the layer, or have gaps with blank frames anywhere in the layer.
 * You can use the same instance name for the symbol across multiple scenes, but you cannot give two or more symbols in the same scene identical names.

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 you are converting a pre-tweened symbol to a remixable symbol, try this:


 * 1) Highlight the whole length of the symbol's animation and do Rightclick --> Copy Motion.
 * 2) Now, except for Frame 1, clear all of the symbol's keyframes, so that you just have one keyframe at the beginning and no animation.
 * 3) Look in your library and rename your symbol to "remixContainer", or whatever name you've chosen with "Container" appended for easy readability.
 * 4) Back to your symbol's timeline, rightclick the symbol in Frame 1 and choose Convert to Symbol. Name this new symbol "remixObject", or whatever its old name was before step 2.
 * 5) Finally, highlight the entire layer and do Rightclick --> Paste Motion.

Note: This is not guaranteed to work in all cases, and is just a suggestion. If it didn't work for you, try to find another way to either preserve the tweens you had, or start over and re-animate the symbol.

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;

if (_ctrl == null) { _ctrl = new AvatarControl(this); _body = new Body(_ctrl, this, w); _ctrl.setHotSpot(130, 370); DataPack.load(_ctrl.getDefaultDataPack, gotPack); addEventListener(Event.UNLOAD, handleUnload); function handleUnload (... ignored) :void { _body.shutdown; } }

function gotPack(result:Object):void { if (result is DataPack) { remixTransform = new ColorTransform; remixTransform.color = (result as DataPack).getColor("RemixColor"); } }

function colorStuff(e:Event = null):void { remixContainer.remixObject.transform.colorTransform = remixTransform; }

var remixTransform:ColorTransform; 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 (_ctrl && remixContainer.remixObject) { colorStuff; }

Create the _data.xml file
Open up a text editor and cut/paste the following:  

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.

Recoloring multiple movieClips with the same color
If you have several movieClips that you want to remix with the same color all the time (for example, the upper and lower parts of an arm), you can make the following adjustments:
 * Give each container symbol a unique instance name. Follow the same rules listed at the top of this tutorial. For example, the container holding the second symbol you want to remix could be called "remixTwoContainer".
 * If you began with remixObject and are now adding remixObjectTwo, your colorStuff function should be edited like so to include the new symbol:

function colorStuff(e:Event = null):void { remixContainer.remixObject.colorTransform = remixTransform; remixTwoContainer.remixObject.colorTransform = remixTransform; }

An important thing to realise here, is that naming conflicts occur only on the same depth level. What I mean by this is, you could not have a scene with two containers both named "remixContainer", because they would conflict. However, if you have "remixContainer" containing "remixObject", and then "remixTwoContainer" containing "remixObject" (note the identical remixObject names!) this will NOT conflict.

Knowing this, it is possible to apply color to multiple symbols inside a single container, but only if their names are different from each other (because the share the same level):

function colorStuff(e:Event = null):void { remixContainer.remixObject.colorTransform = remixTransform; remixContainer.remixObjectTwo.colorTransform = remixTransform;

// This is safe, because these two child symbols are different // objects sharing a single container.

remixTwoContainer.remixObject.colorTransform = remixTransform; remixTwoContainer.remixObjectTwo.colorTransform = remixTransform;

// And this is safe, because we only have one instance of each container // on the stage. }

You can continue to add as many movieClips as you need in this manner, as long as you pay careful attention to these naming conventions.

NOTE: These examples assume that all the remixable objects in your avatar exist in ALL scenes. This may not always be the case (for example, special objects that appear only in one or two scenes). To pretect against errors resulting from this, you will need to apply some safety checks to the colorStuff function. For example, let's assume we have a "remixContainer" symbol on every scene of our avatar, but "remixTwoContainer" only appears in some scenes. You would check the existence of the latter before attempting to do anything with it:

function colorStuff(e:Event = null):void { remixContainer.remixObject.colorTransform = remixTransform; if (remixTwoContainer) { remixTwoContainer.remixObject.colorTransform = remixTransform; } }

Adding a second remixable color
If you want to add another color picker to your remix, you will need to adjust the main scene code and the .xml as well. Again, make sure each movieClip has its own name, and it is named the same thing in every scene. import flash.events.Event; import com.whirled.AvatarControl; import com.whirled.DataPack;
 * On your main scene, adjust the code as follows to add a second color (note: new lines commented as "New" so you can compare the difference):

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) { remixTransform = new ColorTransform; remixTransformTwo = new ColorTransform; // New remixTransform.color = (result as DataPack).getColor("RemixColor"); remixTransformTwo = (result as DataPack).getColor("RemixColor2"); // New } }

var remixTransform:ColorTransform; var remixTransformTwo:ColorTransform; // New var _ctrl :AvatarControl; var _body :Body;

  
 * Edit your _data.xml file to include your second color picker, RemixColor2:

function colorStuff(e:Event = null):void { remixContainer.remixObject.colorTransform = remixTransform; remixContainer.remixObjectTwo.colorTransform = remixTransformTwo; }
 * Adjust your Main code to explain which movieClip should use which color. This example shows 2 movieClips using different colors:

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