Components Factory from XML/AS3

In this post we will create Video and Image components by using only an XML file and AS3 code. Finally we will place all these Components into a Grid Gallery.

This approach has many benefits as it will render more smoothly in mobile devices and tablets as mxml code is a bit heavy even with the latest Flex Hero build.

This is the XML structure that we will use:

<main>
<items>
<item target=”assets/img.jpg” type=”image”/>
<item target=”http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-960.mp4″ type=”video”/>
<item target=”http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-960.mp4″ type=”video”/>
<item target=”http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-960.mp4″ type=”video”/>
<item target=”http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-960.mp4″ type=”video”/>
<item target=”assets/img.jpg” type=”image”/>
<item target=”assets/img.jpg” type=”image”/>
<item target=”assets/img.jpg” type=”image”/>
</items>
</main>

The MXML Tile component (this could also be AS3 code)

<s:TileGroup id=”grid” x=”0″ y=”0″  creationComplete=”buildItemsFromXML()”>
</s:TileGroup>

Now some AS3 code:

we will create the loader function

[cc lang=”actionscript”]

private function buildItemsFromXML()
{
var xmlCall:XMLService = new XMLService();
xmlCall.makeCall(XMLSource);
xmlCall.service.addEventListener(ResultEvent.RESULT,resultResponse);
xmlCall.service.addEventListener(FaultEvent.FAULT,faultResponse);
}

//The magic happens into the success response function

function resultResponse(evt:ResultEvent)
{
itemArray = new Array();
var result = evt.result as XML;
var xml = result.items.elements(“*”);
for each(var item in xml) //Parse all elements of the XML
{
//trace(item.@type+”::”+item.@target);
if(String(item.@type).toLowerCase()==”video”) // Create a VideoDisplayComponent
{
var vid:VideoDisplay = new VideoDisplay();
vid.source = String(item.@target);
vid.autoPlay = false;
vid.scaleMode = “stretch”;
vid.width = itemsWidth;
vid.height = itemsHeight;
vid.verticalCenter = 0;
vid.horizontalCenter = 0;
vid.validateNow();
vid.invalidateDisplayList();
itemArray.push(vid);
}
else if(String(item.@type).toLowerCase()==”image”) //Create a spark Image component
{
var img:Image = new Image();
img.source = String(item.@target);
img.width = itemsWidth;
img.height = itemsHeight;
img.verticalCenter = 0;
img.horizontalCenter = 0;
img.validateNow();
img.invalidateDisplayList();
itemArray.push(img);
}
else if(String(item.@type).toLowerCase()==”videoplayer”)  // Create a VideoPlayer component
{
var vidp:VideoPlayer = new VideoPlayer();
vidp.source = String(item.@target);
vidp.autoPlay = false;
vidp.scaleMode = “stretch”;
vidp.width = itemsWidth;
vidp.height = itemsHeight;
vidp.verticalCenter = 0;
vidp.horizontalCenter = 0;
vidp.validateNow();
vidp.invalidateDisplayList();
itemArray.push(vidp);
}
}

placeItems(); // The next function that will place the items into the grid
}

[/cc]

Now we place all elements into the Tile Gallery

[cc lang=”actionscript”]
function placeItems()
{
//add all elements into the grid,
for each(var item in itemArray)
{
var grp = new Group(); //We prefer the Group component because it makes it easy to position elements inside
grp.addElement(item);
grid.addElement(grp);
grid.validateNow();
grid.invalidateDisplayList();
}
}
[/cc]
 

And we are done! Now you have your own components factory build only by XML and AS3 code.

View an Example Here: http://www.netgfx.com/GridGallery/

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin
Tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *