Remixable Frame Tutorial - Revision history

Whirled vox: Text replacement - "<" to "<"

2018-09-05T22:27:02Z

Text replacement - "<" to "<"

← Older revision		Revision as of 22:27, 5 September 2018
Line 4:		Line 4:
	\|description=Examine the remixable picture frame's source code.		\|description=Examine the remixable picture frame's source code.
	\|requirements=[[Image:Icon-Flash.png\|20px]] [[Adobe Flash CS3]], [[Whirled SDK]]		\|requirements=[[Image:Icon-Flash.png\|20px]] [[Adobe Flash CS3]], [[Whirled SDK]]
	\|other = Previous tutorial: [[Create furniture]]~~<~~br>		\|other = Previous tutorial: [[Create furniture]]<br>
	Other tutorials: [[Remixable furniture (Flash tutorial)]]		Other tutorials: [[Remixable furniture (Flash tutorial)]]
	\|item=furniture		\|item=furniture
Line 25:		Line 25:
	== _data.xml ==		== _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:		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>		<geshi lang=xml>
	~~<~~?xml version="1.0" encoding="UTF-8"?>		<?xml version="1.0" encoding="UTF-8"?>

	~~<~~datapack>		<datapack>
	~~<~~file name="_CONTENT" type="Blob" value="RemixFrame.swf"/>		<file name="_CONTENT" type="Blob" value="RemixFrame.swf"/>
	~~<~~file name="frameImage" info="The picture frame." type="DisplayObject" value="frame.png"/>		<file name="frameImage" info="The picture frame." type="DisplayObject" value="frame.png"/>
	~~<~~file name="pictureImage" info="The framed picture." type="DisplayObject" value="vonnegut.jpg"/>		<file name="pictureImage" info="The framed picture." type="DisplayObject" value="vonnegut.jpg"/>
	~~<~~/datapack>		</datapack>
	~~<~~/geshi>		</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 [http://wikipedia.org/wiki/XML Wikipedia XML article].		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 [http://wikipedia.org/wiki/XML Wikipedia XML article].
Line 47:		Line 47:
	As usual, the constructor builds a FurniControl to communicate with Whirled.		As usual, the constructor builds a FurniControl to communicate with Whirled.

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

	=== Loading the DataPack ===		=== Loading the DataPack ===
	This statement in the contructor begins an asynchronous load of the Data Pack:		This statement in the contructor begins an asynchronous load of the Data Pack:
	~~<~~actionscript>		<actionscript>
	DataPack.load(_control.getDefaultDataPack(), gotPack);		DataPack.load(_control.getDefaultDataPack(), gotPack);
	~~<~~/actionscript>		</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.		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.
Line 65:		Line 65:

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

	Having confirmed that it has a Data Pack, the function makes another asynchronous call to extract the images:		Having confirmed that it has a Data Pack, the function makes another asynchronous call to extract the images:
	~~<~~actionscript>		<actionscript>
	var pack :DataPack = result as DataPack;		var pack :DataPack = result as DataPack;
	var sources :Object = new Object();		var sources :Object = new Object();
Line 78:		Line 78:
	sources.frameImage = "frameImage";		sources.frameImage = "frameImage";
	pack.getDisplayObjects(sources, gotDisplayObjects);		pack.getDisplayObjects(sources, gotDisplayObjects);
	~~<~~/actionscript>		</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").		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").
Line 87:		Line 87:
	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:		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>		<actionscript>
	_pictureImage = result.pictureImage as DisplayObject;		_pictureImage = result.pictureImage as DisplayObject;
	...		...
	_frameImage = result.frameImage as DisplayObject;		_frameImage = result.frameImage as DisplayObject;
	~~<~~/actionscript>		</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.)		(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.		With the images retrieved and cast into DisplayObjects, all that's left is to scale, position and display them as with any other DisplayObject.

Whirled vox: Text replacement - ">" to ">"

2018-09-05T18:23:41Z

Text replacement - ">" to ">"

← Older revision		Revision as of 18:23, 5 September 2018
Line 4:		Line 4:
	\|description=Examine the remixable picture frame's source code.		\|description=Examine the remixable picture frame's source code.
	\|requirements=[[Image:Icon-Flash.png\|20px]] [[Adobe Flash CS3]], [[Whirled SDK]]		\|requirements=[[Image:Icon-Flash.png\|20px]] [[Adobe Flash CS3]], [[Whirled SDK]]
	\|other = Previous tutorial: [[Create furniture]]<br~~>~~		\|other = Previous tutorial: [[Create furniture]]<br>
	Other tutorials: [[Remixable furniture (Flash tutorial)]]		Other tutorials: [[Remixable furniture (Flash tutorial)]]
	\|item=furniture		\|item=furniture
Line 25:		Line 25:
	== _data.xml ==		== _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:		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~~>~~		<geshi lang=xml>
	<?xml version="1.0" encoding="UTF-8"?~~>~~		<?xml version="1.0" encoding="UTF-8"?>

	<datapack~~>~~		<datapack>
	<file name="_CONTENT" type="Blob" value="RemixFrame.swf"/~~>~~		<file name="_CONTENT" type="Blob" value="RemixFrame.swf"/>
	<file name="frameImage" info="The picture frame." type="DisplayObject" value="frame.png"/~~>~~		<file name="frameImage" info="The picture frame." type="DisplayObject" value="frame.png"/>
	<file name="pictureImage" info="The framed picture." type="DisplayObject" value="vonnegut.jpg"/~~>~~		<file name="pictureImage" info="The framed picture." type="DisplayObject" value="vonnegut.jpg"/>
	</datapack~~>~~		</datapack>
	</geshi~~>~~		</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 [http://wikipedia.org/wiki/XML Wikipedia XML article].		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 [http://wikipedia.org/wiki/XML Wikipedia XML article].
Line 47:		Line 47:
	As usual, the constructor builds a FurniControl to communicate with Whirled.		As usual, the constructor builds a FurniControl to communicate with Whirled.

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

	=== Loading the DataPack ===		=== Loading the DataPack ===
	This statement in the contructor begins an asynchronous load of the Data Pack:		This statement in the contructor begins an asynchronous load of the Data Pack:
	<actionscript~~>~~		<actionscript>
	DataPack.load(_control.getDefaultDataPack(), gotPack);		DataPack.load(_control.getDefaultDataPack(), gotPack);
	</actionscript~~>~~		</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.		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.
Line 65:		Line 65:

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

	Having confirmed that it has a Data Pack, the function makes another asynchronous call to extract the images:		Having confirmed that it has a Data Pack, the function makes another asynchronous call to extract the images:
	<actionscript~~>~~		<actionscript>
	var pack :DataPack = result as DataPack;		var pack :DataPack = result as DataPack;
	var sources :Object = new Object();		var sources :Object = new Object();
Line 78:		Line 78:
	sources.frameImage = "frameImage";		sources.frameImage = "frameImage";
	pack.getDisplayObjects(sources, gotDisplayObjects);		pack.getDisplayObjects(sources, gotDisplayObjects);
	</actionscript~~>~~		</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").		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").
Line 87:		Line 87:
	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:		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~~>~~		<actionscript>
	_pictureImage = result.pictureImage as DisplayObject;		_pictureImage = result.pictureImage as DisplayObject;
	...		...
	_frameImage = result.frameImage as DisplayObject;		_frameImage = result.frameImage as DisplayObject;
	</actionscript~~>~~		</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.)		(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.		With the images retrieved and cast into DisplayObjects, all that's left is to scale, position and display them as with any other DisplayObject.

Whirled vox: Text replacement - """ to """

2018-09-02T13:13:15Z

Text replacement - """ to """

← Older revision		Revision as of 13:13, 2 September 2018
Line 16:		Line 16:
	== Downloading the Example ==		== Downloading the Example ==
	# Get the Remix Frame example [[Media:RemixFrame.zip\|here]].		# Get the Remix Frame example [[Media:RemixFrame.zip\|here]].
	# Extract the archive's contents into whirled/projects/furni (creating that directory first, if necessary). This will create the ~~"~~remixframe~~"~~ directory.		# 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 ==
	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.		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.		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 ==		== _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:		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>		<geshi lang=xml>
	<?xml version=~~"~~1.0~~"~~ encoding=~~"~~UTF-8~~"~~?>		<?xml version="1.0" encoding="UTF-8"?>

	<datapack>		<datapack>
	<file name=~~"~~_CONTENT~~"~~ type=~~"~~Blob~~"~~ value=~~"~~RemixFrame.swf~~"~~/>		<file name="_CONTENT" type="Blob" value="RemixFrame.swf"/>
	<file name=~~"~~frameImage~~"~~ info=~~"~~The picture frame.~~"~~ type=~~"~~DisplayObject~~"~~ value=~~"~~frame.png~~"~~/>		<file name="frameImage" info="The picture frame." type="DisplayObject" value="frame.png"/>
	<file name=~~"~~pictureImage~~"~~ info=~~"~~The framed picture.~~"~~ type=~~"~~DisplayObject~~"~~ value=~~"~~vonnegut.jpg~~"~~/>		<file name="pictureImage" info="The framed picture." type="DisplayObject" value="vonnegut.jpg"/>
	</datapack>		</datapack>
	</geshi>		</geshi>
Line 37:		Line 37:
	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 [http://wikipedia.org/wiki/XML Wikipedia XML article].		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 [http://wikipedia.org/wiki/XML 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~~"~~.		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.		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 ==
Line 57:		Line 57:
	</actionscript>		</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.		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.		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.
Line 75:		Line 75:
	var pack :DataPack = result as DataPack;		var pack :DataPack = result as DataPack;
	var sources :Object = new Object();		var sources :Object = new Object();
	sources.pictureImage = ~~"~~pictureImage~~"~~;		sources.pictureImage = "pictureImage";
	sources.frameImage = ~~"~~frameImage~~"~~;		sources.frameImage = "frameImage";
	pack.getDisplayObjects(sources, gotDisplayObjects);		pack.getDisplayObjects(sources, gotDisplayObjects);
	</actionscript>		</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~~"~~).		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.		The second argument to getDisplayObjects is another callback function. This function will be called when the requested display objects have been retrieved.

Dragawn: Created page with "{{Infobox tutorial |type=Flash |difficulty=Intermediate |description=Examine the remixable picture frame's source code. |requirements=20px Adobe Fla..."

2018-08-26T14:45:01Z

Created page with "{{Infobox tutorial |type=Flash |difficulty=Intermediate |description=Examine the remixable picture frame's source code. |requirements=20px Adobe Fla..."

New page

{{Infobox tutorial
|type=Flash
|difficulty=Intermediate
|description=Examine the remixable picture frame's source code.
|requirements=[[Image:Icon-Flash.png|20px]] [[Adobe Flash CS3]], [[Whirled SDK]]
|other = Previous tutorial: [[Create furniture]]<br>
Other tutorials: [[Remixable furniture (Flash tutorial)]]
|item=furniture
}}
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.
{{clearleft}}

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

== Downloading the Example ==
# Get the Remix Frame example [[Media:RemixFrame.zip|here]].
# 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 [http://wikipedia.org/wiki/XML 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.