Display dynamic graphics with ActionScripting 3.0
This tutorial will show step by step of how graphics, links, titles, and descriptions are being load into flash dynamically at runtime through parsing XML. First create the xml file and save as tutorial2.xml
<?xml version="1.0" encoding="utf-8"?>
<site>
<links>
<link><![CDATA[home.html]]></link>
<title><![CDATA[HOME]]></title>
<image><![CDATA[xml-images/tutorial2-01.png]]></image>
<des><![CDATA[description 1 - here is my descriptions]]></des>
</links>
<links>
<link><![CDATA[about.html]]></link>
<title><![CDATA[ABOUT]]></title>
<image><![CDATA[xml-images/tutorial2-04.png]]></image>
<des><![CDATA[description 2 - here is my descriptions]]></des>
</links>
<links>
<link><![CDATA[product.html]]></link>
<title><![CDATA[PRODUCT]]></title>
<image><![CDATA[xml-images/tutorial2-04.png]]></image>
<des><![CDATA[description 3 - here is my descriptions]]></des>
</links>
<links>
<link><![CDATA[who-we-are.html]]></link>
<title><![CDATA[WHO WE ARE]]></title>
<image><![CDATA[xml-images/tutorial2-04.png]]></image>
<des><![CDATA[description 4 - here is my descriptions]]></des>
</links>
</site>
Let's go through this xml real quick. This document have 4 groups of links, each have the link location, title of the link, image path and the description of link. Next you will need 4 images, you can download this file and go from there too.
Add the code in flash and enjoy. Comments in the code should explain what each portion of the code is. Please email me if you found this tutorial helpful or comment on the tutorial. Thank you.
//Copyright by CreativeReform.com
//Developed by Don Le - contact: donle21@yahoo.com
//Feel free to use any portion of the code
//I will be greatly appreciated if CreativeReform.com is part of the credit or linked to.
//import for animation
import fl.transitions.Tween;
import fl.transitions.easing.*;
//all variables for storing XML, counter and textfield
var myXML:XML;
var loader:URLLoader = new URLLoader();
var i = 0;
var desTxt:TextField = new TextField();
//loader to load the xml then run runData function once completed loading xml
loader.load(new URLRequest("xml/tutorial2.xml"));
loader.addEventListener(Event.COMPLETE, runData);
function runData(e:Event):void{
//assigning data to myXML
myXML = new XML(loader.data);
myXML.ignoreWhitespace = true;
//parsing XML links
for each (var Links:XML in myXML.links){
// create container for graphic and title objects
var myObject:MovieClip = new MovieClip();
//set myOBject container's location, link and title
myObject.x = 140 *i +15;
myObject.ylocation = 0;
myObject.link = (myXML.links.link[i]);
myObject.title = myXML.links.title[i];
//create linkTxt and titleTxt textfields
var linkTxt:TextField = new TextField();
linkTxt.y = 220;
linkTxt.x = 50;
var titleTxt:TextField = new TextField();
titleTxt.y = 200;
titleTxt.x = 50;
//create description text holder, set x, y and width
desTxt.text = myXML.links.des[i];
desTxt.y = 270;
desTxt.x = 200;
desTxt.width = 200;
//create imageloader to load in image on the fly.
var imageLoader:Loader = new Loader();
//load image and set y position
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageComplete);
imageLoader.load(new URLRequest(myXML.links.image[i]));
imageLoader.y = 20;
//add image to myObject container
myObject.addChild(imageLoader);
//set description text
myObject.des = myXML.links.des[i];
//set mouse event over and out and call functions
myObject.addEventListener(MouseEvent.MOUSE_OVER, ObjectOver);
myObject.addEventListener(MouseEvent.MOUSE_OUT, ObjectOut);
myObject.useHandCursor = true;
//addchild to stage
stage.addChild(desTxt);
stage.addChild(myObject);
i++;
}
function ObjectOver(e:Event):void{
//tween on mouse over, set linktxt and titletxt text and add to myObject
var myTween = new Tween(e.currentTarget, "y", Strong.easeInOut, e.currentTarget.ylocation, e.currentTarget.ylocation +20, 0.5, true);
linkTxt.text = (e.currentTarget.link);
titleTxt.text = e.currentTarget.title;
desTxt.text = e.currentTarget.des;
e.currentTarget.addChild(linkTxt);
e.currentTarget.addChild(titleTxt);
}
function ObjectOut(e:Event):void{
//tween on mouse out and remove child
var myTween = new Tween(e.currentTarget, "y", Strong.easeInOut, e.currentTarget.ylocation + 20, e.currentTarget.ylocation, 0.5, true);
e.currentTarget.removeChild(linkTxt);
e.currentTarget.removeChild(titleTxt);
}
function imageComplete(e:Event):void{
}
}
