Adding Content to Media List: Through XML
Updated: Jan 24, 2008
Views: 2059
Description: This tutorial will show you how to use a XML document to load various types of content (images, movie clips, .swfs) into the Media List AS3.0 Component.
Components Used in this Tutorial: Media List AS3.0
The Completed Project:
Creating the XML Document
To begin, create your xml file using Dreamweaver or a text editor, saving the file with a .xml extension. With a blank document open, create the content tag to start the document:
Now for each of the items that you wish to add you will define its URL path for the image, a title, a description of the item, data for the item such as the path to the flv. The following is an example of an image, but later in this tutorial we will go into loading different types of content. You will repeat this step for each item that you wish to load.
When you have repeated the above for all items, close the content tag to finish the document:
A sample of the XML file is available at http://www.afcomponents.com/components/media_list_as3/content.xml. Make sure to view the page source to view the XML formatting.
Adding an External .SWF
You can also add an .swf file into the Media List, this is done similar to an image where you create the file and then load either the local or full URL path to the file. The code used in the XML document is also similar to the image where you only change the path to the .swf.
Adding a Movie Clip
Another type of content that you can load into your XML document is a Movie Clip that is part of your flash file. This is a two step process. First, you need to add the item through XML. The path will be the class name you give the movie clip in linkage. (We go through this in the next step). The type will now change from image to instance.
The other important step is exporting the Movie Clip for ActionScript. Now, inside of flash create you movie clip however you would like. Once you have create a movie clip, find it in the library (Window > Library). Right click on the movie clip and select Linkage. In the pop-up define the class as the same name you used in the XML document - DisplayObjectName. Also make sure Export for ActionScript and Export in First Frame are both selected.
Connecting Media List to XML Document
Once we have created our xml document with all of our items inside of flash, we are now ready to connect our XML document to Media List. Make sure that you have installed the component using the extension manager, created a new ActionScript 3.0 Flash file, and dragged a instance of the Media List onto the stage from the Component Panel (Window > Components). To connect the Media List to the XML document and select the instance of the Media List on stage, and using the component inspector (Window > Component Inspector) or parameters panel (Window > Properties > Parameters) to set the following parameters of the instance of the Media List:
The Completed Project:
Creating the XML Document
To begin, create your xml file using Dreamweaver or a text editor, saving the file with a .xml extension. With a blank document open, create the content tag to start the document:
<content>
Now for each of the items that you wish to add you will define its URL path for the image, a title, a description of the item, data for the item such as the path to the flv. The following is an example of an image, but later in this tutorial we will go into loading different types of content. You will repeat this step for each item that you wish to load.
<image>
<title>My Title</title>
<description>Item Description</description>
<path>image.jpg</path>
<data>movie.flv</data>
</image>
<title>My Title</title>
<description>Item Description</description>
<path>image.jpg</path>
<data>movie.flv</data>
</image>
When you have repeated the above for all items, close the content tag to finish the document:
</content>
A sample of the XML file is available at http://www.afcomponents.com/components/media_list_as3/content.xml. Make sure to view the page source to view the XML formatting.
Adding an External .SWF
You can also add an .swf file into the Media List, this is done similar to an image where you create the file and then load either the local or full URL path to the file. The code used in the XML document is also similar to the image where you only change the path to the .swf.
<image>
<title>My Title</title>
<description>Item Description</description>
<path>image.swf</path>
<data>movie.flv</data>
</image>
<title>My Title</title>
<description>Item Description</description>
<path>image.swf</path>
<data>movie.flv</data>
</image>
Adding a Movie Clip
Another type of content that you can load into your XML document is a Movie Clip that is part of your flash file. This is a two step process. First, you need to add the item through XML. The path will be the class name you give the movie clip in linkage. (We go through this in the next step). The type will now change from image to instance.
<image>
<title>My Title</title>
<description>Item Description</description>
<path>DisplayObjectName</path>
<data>>movie.flv</data>
</image>
<title>My Title</title>
<description>Item Description</description>
<path>DisplayObjectName</path>
<data>>movie.flv</data>
</image>
The other important step is exporting the Movie Clip for ActionScript. Now, inside of flash create you movie clip however you would like. Once you have create a movie clip, find it in the library (Window > Library). Right click on the movie clip and select Linkage. In the pop-up define the class as the same name you used in the XML document - DisplayObjectName. Also make sure Export for ActionScript and Export in First Frame are both selected.
Connecting Media List to XML Document
Once we have created our xml document with all of our items inside of flash, we are now ready to connect our XML document to Media List. Make sure that you have installed the component using the extension manager, created a new ActionScript 3.0 Flash file, and dragged a instance of the Media List onto the stage from the Component Panel (Window > Components). To connect the Media List to the XML document and select the instance of the Media List on stage, and using the component inspector (Window > Component Inspector) or parameters panel (Window > Properties > Parameters) to set the following parameters of the instance of the Media List:
- contentXML to the URL path of where you saved the XML Document
myList.contentXML = "http://www.afcomponents.com/components/media_list_as3/content.xml";
Other Tutorials
