Remixable Frame Tutorial

Flash Tutorial
Examine the remixable picture frame's source code.
Difficulty Level
Intermediate
Requirements
Adobe Flash CS3, Whirled SDK
Other Information
Previous tutorial: Create furniture Other tutorials: Remixable furniture (Flash tutorial)

The remixable picture frame adjusts its size to suit the picture that is provided via the remix tools. It demonstrates remixing in a furniture project.

Prerequisites

This tutorial assumes that you have set up the Flex SDK and the Whirled SDK.

Downloading the Example

1. Get the Remix Frame example here.
2. Extract the archive's contents into whirled/projects/furni (creating that directory first, if necessary). This will create the "remixframe" directory.

The Default Data Pack

The default data pack contains an XML file with a description of the project's remixable components and two image files -- one for the default frame and one for the default picture.

These files are in the "data" directory. The build process will pick them up from there and bundle them with the compiled project SWF into a Zip file. The Zip file is then uploaded to Whirled as the Furniture Media.

_data.xml

The data definition file must be named _data.xml, and must be in the "data" directory. See the Data Pack article for details about the data file in general. This particular data file contains the following: <geshi lang=xml> <?xml version="1.0" encoding="UTF-8"?>

<datapack>

   <file name="_CONTENT" type="Blob" value="RemixFrame.swf"/>
   <file name="frameImage" info="The picture frame." type="DisplayObject" value="frame.png"/>
   <file name="pictureImage" info="The framed picture." type="DisplayObject" value="vonnegut.jpg"/>

</datapack> </geshi>

The first line is the XML declaration. This is a standard part of an XML document, and you can read more about it and other basic XML information in the Wikipedia XML article.

In the datapack element, we declare three file elements. The first, "_CONTENT", defines the project's executable object. This will be built from the Actionscript file (described below). The value needs to match the name of your compiled SWF file--in this case, "RemixFrame.swf".

Then next two elements define slots for remixable content and default content for those slots. In this case, we define two components named "frameImage" and "pictureImage" of type "DisplayObject". We will use those names to retrieve the images in the Actionscript file.

RemixFrame.as

RemixFrame.as is the furniture's main class. It loads the image resources, adjusts their sizes and positions, and displays them.

The Furniture Controller

As usual, the constructor builds a FurniControl to communicate with Whirled.

<actionscript> _control = new FurniControl(this); </actionscript>

Loading the DataPack

This statement in the contructor begins an asynchronous load of the Data Pack: <actionscript> DataPack.load(_control.getDefaultDataPack(), gotPack); </actionscript>

It sets the "gotPack" function as the callback. This function will be called when the Data Pack has been completely loaded. The resources from the Data Pack are not available for use until this function is called.

This furniture item simply doesn't draw itself until the data pack has been loaded. A more complex project might draw a placeholder or loading image in the mean time.

gotPack

The data loaded callback is triggered when the load is complete. If the load was successful, the parameter is an object containing the loaded DataPack.

The function confirms that it is dealing with a DataPack rather than an error message (which this example irresponsibly discards without logging it). <actionscript> if (result is DataPack) { ... } </actionscript>

Having confirmed that it has a Data Pack, the function makes another asynchronous call to extract the images: <actionscript> var pack :DataPack = result as DataPack; var sources :Object = new Object(); sources.pictureImage = "pictureImage"; sources.frameImage = "frameImage"; pack.getDisplayObjects(sources, gotDisplayObjects); </actionscript>

For each key on the passed object, the getDisplayObjects function will look for a resource with a matching name. These are the resource names declared with the "name" attribute in the XML file. In this example, we place two keys on the object with values matching the key ("pictureImage" and "frameImage").

The second argument to getDisplayObjects is another callback function. This function will be called when the requested display objects have been retrieved.

gotDisplayObjects

If the display objects are successfully loaded from the Data Pack, this function's parameter will contain keys pointing to each of them. You can retrieve them as properties on the object:

<actionscript> _pictureImage = result.pictureImage as DisplayObject; ... _frameImage = result.frameImage as DisplayObject; </actionscript>

(If the call failed completely or partially, we ignore the error and carry on without the failed component(s)...possibly resulting in furniture with no image at all! It's a simple example, not a complete one.)

With the images retrieved and cast into DisplayObjects, all that's left is to scale, position and display them as with any other DisplayObject.