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.

Requirements

First decide what component from your avatar that you want to be remixable (the head? the body? the eyes?). In order to make that component remixable 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.
• You may not use shape tweens on the component in any scenes that it appears (Motion tweens are allowed).
• Your symbol may be animated, but keep in mind that when the user remixes it, it will lose its animated frames.

Setting up your Symbol

Our first step will be to convert the symbol we want to be remixable into a MovieClip symbol, if it isn't already. We will also need to assign an instance name to every instance of this symbol. To do this click on the symbol that has been placed to the stage. In the properties tab select MovieClip from the drop down, and below that give it a instance name of remixPart. You will need to do this in every keyframe of every scene that contains the symbol.

Make note of the height and width of the symbol in the properties panel, we will need those numbers later. (The width and height are represented by the w: and h: in the properties panel) 

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);
	_ctrl.setHotSpot(130, 370);
	_body = new Body(_ctrl, this, width);
	addEventListener(Event.UNLOAD, handleUnload);
	function handleUnload (... ignored) :void {
		_body.shutdown();
	}
 
	var xOffset:Number = 0;
	var yOffset:Number = 0;
	DataPack.load(_ctrl.getDefaultDataPack(), gotPack);
}
 
function gotPack (result :Object) :void
{
	if (result is DataPack) {		
		(result as DataPack).getDisplayObjects("RemixImage", gotDisplayObject);
	} else {
 
	}
}
 
function gotDisplayObject(result:Object) 
{
	if (result is DisplayObject) {
		_remixImage = result as DisplayObject;
		if (_remixImage.transform.pixelBounds.x == 0) {
			_remixImage.x-= xOffset;
		}
		if (_remixImage.transform.pixelBounds.y == 0) {
			_remixImage.y-= yOffset;
		}
	}
 
}
 
var _ctrl :AvatarControl;
var _remixImage:DisplayObject;
var _body :Body;

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

if (remixPart && _remixImage != null) {
	remixPart.addChild(_remixImage);
}

Adjust the offset

In the code you pasted in the main scene, there were two variables:

var xOffset:Number = 0;
var yOffset:Number = 0;

These numbers will make sure that the center point of your symbol is used for any user remixed art. If the center point of the symbol is the upper left hand corner, then you don't have to do anything. Otherwise we need to do a little math to find the offsets. Select your symbol, then place in the mouse in the upper-left corner of the blue box, as shown. Look at the info panel for a pair of x and y values as pictured. Take the top x and subtract the bottom x, this is your xOffset. Take the top y, and subtract the bottom y, this is your yOffset.

Put these numbers in place of the zeros in the code in your main scene.

Export your default symbol

Now that our remixable part is all set up, lets export a copy of it to be used by default. Right click on the symbol in the library, and select Export Flash Movie... (If this option is not present, switch the type of the symbol to movieclip first). For now save the movie to the same directory as our source .fla file, so we can find it easier later. Name it remixPart.swf.

Create the _data.xml file

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

<datapack>  
  <file name="_CONTENT" type="Blob" value="remixExample.swf"/>
  <file name="RemixImage" type="DisplayObject" width="179.1" height="308.4" 
     value="remixPart.swf" info="Make a custom image for this avatar"/>
</datapack>

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

On the next line, "RemixImage" should match the word in quotes in the gotPack function, in your avatar's Main code. As long as they are identical to each other, you can call this whatever you want.

On the remixImage line, replace the width number with the width of your symbol, and the height number with the height of your symbol. (Both of these are in the info or property pane when you click on your symbol.)

"info" is the text description seen in the Remix user interface inside Glowbe, and should provide a short explanation of its purpose.

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

Delete the Contents of your Symbol

Before you do this step, you may want to save a copy of your avatar for backup purposes. Since we are going to be loading the art for the remixed part externally, we don't need any art inside the remixPart symbol itself. Double click on the symbol in the library, then select Edit->Timeline->Select All Frames then Edit->Timeline->Remove All Frames

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, remixPart.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 the DataPack page, which will be made later, for all the different type of values that you can have remixable.