Remixable furniture (Flash tutorial)

From Whirled

Flash Tutorial
Create a remixable furniture item.
Difficulty Level
Intermediate
Requirements
Adobe Flash CS3, Whirled SDK
Other Information
Example file: Remix furniture zip Previous tutorial: Create furniture Other tutorials: Remixable Frame Tutorial

Remixable furniture can be easily modified by Whirled players to have different text, colors or other options. This tutorial explains how to use text, boolean (true/false), number and color remix options. Remixable furniture with additional interactivity can be written using the same code, and should be uploaded and listed as toys.

Contents 1 Before You Begin 1.1 Download the Whirled SDK 1.2 Create a New Flash File 1.3 Find a Text Editor 1.4 Plan Your Project 2 Create 2.1 Draw Your Basic Graphics 2.2 Prepare a Text Box for Remixing 2.3 Prepare a movieClip for Multiple Options 2.4 Prepare a movieClip for Visibility Toggle 2.5 Prepare a movieClip for Color Remix 3 Add Remixible Code 3.1 Required Remixable Code in Your Flash File 3.2 Required _data.xml Text File 3.3 Optional Text Remix Code 3.3.1 In Your Flash File 3.3.2 In the _data.xml File 3.4 Optional Number Remix Code 3.4.1 In Your Flash File 3.4.2 In the _data.xml File 3.5 Optional Boolean Remix Code 3.5.1 In Your Flash File 3.5.2 In the _data.xml File 3.6 Optional Color Remix Code 3.6.1 In Your Flash File 3.6.2 In the _data.xml File 4 Save 5 Publish and Upload to Whirled 5.1 Publish the Flash File 5.2 Create a Zip File 5.3 Upload, Test and Sell 6 More Information

Before You Begin

Download the Whirled SDK

If you have already downloaded the SDK, check to see if a new version has come out. If you have never downloaded the SDK, do so now.

1. Download the Whirled SDK. "SDK" stands for Software Development Kit, and it contains handy tools for Whirled creators.
2. Configure your Flash CS3 to use the Whirled SDK

Create a New Flash File

This is a basic file that will allow you to add code that will work with the Whirled servers.

1. Create a new ActionScript 3.0 file in Flash CS3.
2. Press CTRL+F3 (Window → Property → Properties) to open the Properties toolbar if it is not already visible.
3. Double check to make sure you set your classpath (source path) when you configured Flash to use the Whirled SDK (above).
4. Set your framerate to 30 frames per second. Whirled furniture cannot run at any other speed.

Find a Text Editor

You will need to write an .xml file. Notepad is a good option for Windows users.

Plan Your Project

Decide at the beginning what remix options you would like to use in your furniture. This makes it easier to set things up.

• This tutorial shows the creation of a doorway with the following remixable options:
  • Remixable text on sign next to doorway.
  • Remixable number that determines which sign background will display.
  • Remixable boolean to turn the glow at the floor on and off.
  • Remixable color of the curtain hanging in front of the doorway.

Create

Draw, paint, layer and design the visible portions of your furniture item.

Draw Your Basic Graphics

Basic graphics are things that will not change as an item is remixed. They can be drawn as usual. Check the list of useful programs if you need a graphics editor.

• Remember to:
  • Save often (see below)
  • Use layers for different items, especially items that may appear in front of or behind remixable content.

Prepare a Text Box for Remixing

Use a named instance of a dynamic text box and embed your font for best results.

1. Add a textbox to the scene as usual using the text tool. Add text (this text will not be visible in the final product).
2. Format the text as usual including font, size and color.
3. In the properties toolbar, set the type to Dynamic Text.
4. In the properties toolbar, replace '<instance name>' with 'remixableText'. If you have more than one piece of remixable text, each must have its own instance name.
5. Click the Embed button to embed your font. This allows to see the text as you intended.
6. Save your file (see below).

Prepare a movieClip for Multiple Options

Make a named movieClip instance with multiple keyframes, one for each desired option. Add a stop command to each keyframe to prevent it from playing automatically.

1. Draw the first option of your movieClip on its own layer.
2. Press F8 (Modify → Convert to symbol) to make it into a movieClip.
3. In the properties toolbar, replace '<instance name>' with 'sign' (or another name of your choice).
4. Double click on the movieClip to open it.
5. Create new keyframes in frame 2 and 3 (or more) and draw in your other options.
6. Add a new layer called 'Actions' at the top of your layer list, with a keyframe at each option.
7. Click the first keyframe.
8. Press F9 (Window → Actions) to bring up the actions for that keyframe.
9. Type stop(); next to the number 1, and then repeat this for each keyframe.
10. Doubleclick outside the movieclip area to return to editing the main scene.
11. Save your file (see below).

Prepare a movieClip for Visibility Toggle

Make a named movieClip instance that includes the image that should be hidden sometimes.

1. Draw your graphic on its own layer.
2. Press F8 (Modify → Convert to symbol) to make it into a movieClip.
3. In the properties toolbar, replace '<instance name>' with 'glow' (or another name of your choice).
4. Save your file (see below).

Prepare a movieClip for Color Remix

This simple method creates 2 movieClips on top of eachother. The top movieClip is named and is set to the multiply blend mode. The bottom is the same shape and includes all the desired greyscale shading.

1. Draw your graphic on its own layer using white and greys. White will show the selected remix color in the final remix. Black will always be black. Greys will be shades in between the two.
2. Press F8 (Modify → Convert to symbol) to make it into a movieClip.
3. Create a new layer above your new movieClip. Copy and paste the movieClip onto this layer.
4. For the top copy of the movieClip, in the properties toolbar, change the blend mode to 'Multiply' and replace '<instance name>' with 'remixableCurtain' (or another name of your choice).
5. Save your file (see below).

Add Remixible Code

Now that the images, movieClips and instance names are set, it's time to add code to make the item remixable.

Required Remixable Code in Your Flash File

This is the code you will need for any remixable item to make it remixable. Additional code will be needed for each remixable option in your furniture (see below).

1. In your main scene, make a new layer called 'Script();' at the top of your layer list.
2. Click on the first frame of the new layer and press F9 (Window → Actions) to open the Actions toolbar.
3. Paste the following code into the open white box next to the number 1. You will only need to do this once per remixable furniture item.

import flash.events.Event;
import com.whirled.FurniControl;
import com.whirled.ControlEvent;
import com.whirled.DataPack;
 
var _ctrl:FurniControl = new FurniControl(this);
 
if (_ctrl != null && _ctrl.isConnected() ) {
	_ctrl.setHotSpot(144, 435);
	DataPack.load(_ctrl.getDefaultDataPack(), gotPack);
	updateDoor();
}
else {
}
 
function gotPack (result :Object) :void
{
	if (result is DataPack) {		
	} 
	else {
	}
}
function updateDoor ():void
{
}

• This code tells Flash what pieces of the Whirled SDK to look at, makes a new furniture control, sets the hotSpot, asks for a DataPack and then updates the swf file (a door in this case). Choose additional code from the options below to complete the functions and make your furniture remixable.

Required _data.xml Text File

In addition to the code in Flash, you will need to create an .xml file to store remix options.

1. Open a new notepad file and name it _data.xml .
2. Paste the following into the text file. Replace 'Door.swf' with the name of your Flash file followed by the .swf extension. You will only need this code once per remixable item.

<?xml version="1.0" encoding="utf-8"?>
<datapack>
	<file name="_CONTENT" type="Blob" value="Door.swf"/>
</datapack>

• This code tells Whirled that it is a data pack belonging to the Door.swf. Right now, it contains no options to remix. Options can be added as described below.

Optional Text Remix Code

This will bring text into your file through the remix interface and display it in the text box prepared above.

In Your Flash File

• Add a new variable below the var _ctrl line. It should be a String. For example:

var _signText:String = "remix me please";

• Add a new line of code within the gotPack function to get the remix information into the swf. For example:

_signText = (result as DataPack).getString("signText");

• Add a new line of code within the updateDoor (or your furniture name) function to tell the furniture what to do with the String. For example, tell it to display the remix text in the text box:

remixableText.text = _signText;

• Your code should now look like this:

import flash.events.Event;
import com.whirled.FurniControl;
import com.whirled.ControlEvent;
import com.whirled.DataPack;
 
var _ctrl:FurniControl = new FurniControl(this);
var _signText:String = "remix me please";
 
if (_ctrl != null && _ctrl.isConnected() ) {
	_ctrl.setHotSpot(144, 435);
	DataPack.load(_ctrl.getDefaultDataPack(), gotPack);
	updateDoor();
}
else {
	remixableText.text = "Not Connected";
}
 
function gotPack (result :Object) :void
{
	if (result is DataPack) {		
		_signText = (result as DataPack).getString("signText");
	} 
	else {
		_signText = "Oops, broken!";
	}
}
 
function updateDoor ():void
{
	remixableText.text = _signText;
}

• If you want to have multiple text options, you will need to repeat these steps with new variable names.

In the _data.xml File

• Add the following code above the </datapack> line:

<data name="signText" info="This is what the sign says." type="String" value="Level 1"/>

• You may change "This is what the sign says." to what you would like displayed in the remix interface. Change "Level 1" to the default text you would like to have displayed. The "signText" may be changed to any value if it is also changed in the gotPack function in your Flash file. The type="String" must stay the same.

Optional Number Remix Code

This will bring a number into your Flash file. IN this example, the number will then be used to determine which frame of a movieclip to play.

In Your Flash File

• Add a new variable below the var _ctrl line. It should be a Number. For example:

var _optionNumber:Number = 2;

• Add a new line of code within the gotPack function to get the remix information into the swf. For example:

_optionNumber = (result as DataPack).getNumber("optionNumber");

• Add a new line of code within the updateDoor (or your furniture name) function to tell the furniture what to do with the Number. For example, tell it to play a keyframe based on the value of the number:

if (_optionNumber <= 1.5){
		sign.gotoAndStop(1);
	}
	else if (_optionNumber <= 2.5){
		sign.gotoAndStop(2);
	}
	else{
		sign.gotoAndStop(3);
	}

• Your code should now look like this (including the text remix code from above):

import flash.events.Event;
import com.whirled.FurniControl;
import com.whirled.ControlEvent;
import com.whirled.DataPack;
 
var _ctrl:FurniControl = new FurniControl(this);
var _signText:String = "remix me please";
var _optionNumber:Number = 2;
 
if (_ctrl != null && _ctrl.isConnected() ) {
	_ctrl.setHotSpot(144, 435);
	DataPack.load(_ctrl.getDefaultDataPack(), gotPack);
	updateDoor();
}
else {
}
 
function gotPack (result :Object) :void
{
	if (result is DataPack) {		
		_signText = (result as DataPack).getString("signText");
		_optionNumber = (result as DataPack).getNumber("optionNumber");
	} 
	else {
	}
}
 
function updateDoor ():void
{
	remixableText.text = _signText;
	if (_optionNumber <= 1.5){
		sign.gotoAndStop(1);
	}
	else if (_optionNumber <= 2.5){
		sign.gotoAndStop(2);
	}
	else{
		sign.gotoAndStop(3);
	}
}

• Again, you can add more than one Number option. Each Number you want to use will need to have its own variable name.

In the _data.xml File

• Add the following code above the </datapack> line:

<data name="optionNumber" info="Choose a sign background." type="Number" min="1" max="3" value="2"/>

• You may change "Choose a sign background." to any value you would like. You may change "optionNumber" in this file and the Flash file. You may replace "1", "3" and "2" with any numbers you would like to use. Omit the min= and max = parts to allow any number to be used in the remix. The type="Number" part must stay the same so the right remix option will show.

Optional Boolean Remix Code

The remix file will display a check box. In this example, checking the box (true) will tell the Flash file to make a movieClip visible, while unchecking it will make the movieClip invisible.

In Your Flash File

• Add a new variable below the var _ctrl line. It should be a Boolean. For example:

var _visibleGlow:Boolean = true;

• Add a new line of code within the gotPack function to get the remix information into the swf. For example:

_visibleGlow = (result as DataPack).getBoolean("visibleGlow");

• Add a new line of code within the updateDoor (or your furniture name) function to tell the furniture what to do with the Number. For example, tell it to set its visiblity to the same value as the boolean:

	glow.visible = _visibleGlow;

• Your code should now look like this (including the text remix and number remix code from above):

import flash.events.Event;
import com.whirled.FurniControl;
import com.whirled.ControlEvent;
import com.whirled.DataPack;
 
var _ctrl:FurniControl = new FurniControl(this);
var _signText:String = "remix me please";
var _optionNumber:Number = 2;
var _visibleGlow:Boolean = true;
 
if (_ctrl != null && _ctrl.isConnected() ) {
	_ctrl.setHotSpot(144, 435);
	DataPack.load(_ctrl.getDefaultDataPack(), gotPack);
	updateDoor();
}
else {
}
 
function gotPack (result :Object) :void
{
	if (result is DataPack) {		
		_signText = (result as DataPack).getString("signText");
		_optionNumber = (result as DataPack).getNumber("optionNumber");
		_visibleGlow = (result as DataPack).getBoolean("visibleGlow");
	} 
	else {
	}
}
 
function updateDoor ():void
{
	remixableText.text = _signText;
 
	if (_optionNumber <= 1.5){
		sign.gotoAndStop(1);
	}
	else if (_optionNumber <= 2.5){
		sign.gotoAndStop(2);
	}
	else{
		sign.gotoAndStop(3);
	}
 
	glow.visible = _visibleGlow;
}

• Once more, you can add more than one Boolean option. Each Boolean you want to use will need to have its own variable name.

In the _data.xml File

• Add the following code above the </datapack> line:

<data name="visibleGlow" info="Show glow on floor?" type="Boolean" value="true"/>

• You may change "Show glow on floor?" to any value you would like. You may change "visibleGlow" in both this and the Flash file. You may either use value="true" or value="false". The type="Boolean" must stay the same so the remix interface will show the checkbox.

Optional Color Remix Code

The remix file will display a color picker that will allow players to choose their own color from the default colors, or enter the hex value for a color not shown. In this example, this information will be used by the Flash file to change the color of a movieClip.

In Your Flash File

• Add two new variables below the var _ctrl line. The first should be a unit. The second will be a ColorTransform. For example:

var _curtainColor:uint = 0x333333;
var curtainColorTransform:ColorTransform = new ColorTransform();

• Add a new line of code within the gotPack function to get the remix information into the swf. For example:

_curtainColor = (result as DataPack).getColor("curtainColor");

• Add a new line of code within the updateDoor (or your furniture name) function to tell the furniture to take the uint, make it into a colorTransform, and then use that to change the color of a movieClip. For example:

curtainColorTransform.color = _curtainColor;
remixableCurtain.transform.colorTransform = curtainColorTransform;

• Your code should now look like this (including the text remix, number remix and boolean remix code from above):

 import flash.events.Event;
import com.whirled.FurniControl;
import com.whirled.ControlEvent;
import com.whirled.DataPack;
 
var _ctrl:FurniControl = new FurniControl(this);
var _signText:String = "remix me please";
var _optionNumber:Number = 2;
var _visibleGlow:Boolean = true;
var _curtainColor:uint = 0x333333;
var curtainColorTransform:ColorTransform = new ColorTransform();
 
if (_ctrl != null && _ctrl.isConnected() ) {
	_ctrl.setHotSpot(144, 435);
	DataPack.load(_ctrl.getDefaultDataPack(), gotPack);
	updateDoor();
}
else {
}
 
function gotPack (result :Object) :void
{
	if (result is DataPack) {		
		_signText = (result as DataPack).getString("signText");
		_optionNumber = (result as DataPack).getNumber("optionNumber");
		_visibleGlow = (result as DataPack).getBoolean("visibleGlow");
		_curtainColor = (result as DataPack).getColor("curtainColor");
	} 
	else {
	}
}
 
function updateDoor ():void
{
	remixableText.text = _signText;
 
	if (_optionNumber <= 1.5){
		sign.gotoAndStop(1);
	}
	else if (_optionNumber <= 2.5){
		sign.gotoAndStop(2);
	}
	else{
		sign.gotoAndStop(3);
	}	
	glow.visible = _visibleGlow;	
	curtainColorTransform.color = _curtainColor;
	remixableCurtain.transform.colorTransform = curtainColorTransform;
}

• You can use more than one color as long as they each have unique names. You can also use the same color on multiple movieClips by giving them unique instance names.

In the _data.xml File

• Add the following code above the </datapack> line:

<data name="curtainColor" info="The color of the curtain." type="Color" value="FF0000"/>

• You may change "The color of the curtain." to any value you would like. You may change "curtainColor" in both this and the Flash file. You may use any color value in hex format after value=. The type="Color" must stay the same so the remixable interface will show the color picker.

Save

1. Save your Flash .fla file on your computer anywhere you like.
2. Save the _data.xml text file anywhere you like. Make sure there are no extra file types (such as .txt or .doc) after the .xml .

Publish and Upload to Whirled

Once you have your Flash file and xml ready, you can publish your Flash file to an .swf and put it in a zip folder with your _data.xml file.

Publish the Flash File

• Press Shift and F12 (File → Publish) to publish your creation as a .swf file. It will appear in the directory where you saved your flash .fla file.

Create a Zip File

• Put your .swf file and your _data.xml file into a .zip file.
• Zip files are made differently with different operating systems. Use your computer's help feature to learn how to make one in your operating system, or search online for directions or useful zip software.

Upload, Test and Sell

1. Upload your .zip file to Whirled just as you would upload a regular furniture item.
2. A pen and paper icon will appear in the preview window once the upload is complete. No item preview will be visible before saving.
3. Name your item. You may also add a thumbnail and a description. Save.
4. Test your item to see if it is working the way you want it to.
5. List your item in the shop.
6. Profit!

If you have any problems, you can check against our .fla, .xml and .swf file for this tutorial.

Ready for the next step? Try adding more remixable options to your furniture or take what you've learned and try the Remixable avatar (Flash tutorial).

More Information

• The .fla, .xml and .swf file for this tutorial.
• Create furniture
• DataPack
• Remix!
• Whirled Builders
• Whirled Coders

Categories: Flash tutorials | Furniture tutorials