Remixable avatar (Flash tutorial)
From Whirled
| Flash Tutorial |
|---|
| Turn an existing avatar project into a remixable avatar. |
| Difficulty Level |
| Advanced |
| Requirements |
 Adobe Flash CS3, Whirled SDK
|
| Other Information |
| Previous tutorial: Advanced avatar (Flash tutorial)
Next tutorial: Color remixable avatar (Flash tutorial) |
Contents |
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
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 posted in in the default 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.
For example in the picture displayed above, your code would now look like this:
var xOffset:Number = 89.6; var yOffset:Number = 154.8;
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 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.
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 DataPack for all the different type of values that you can have remixable.
