Our concepting portfolio

Display dynamic graphics with ActionScripting 3.0

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Download this file >>


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





<![CDATA[HOME]]>





<![CDATA[ABOUT]]>





<![CDATA[PRODUCT]]>





<![CDATA[WHO WE ARE]]>

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{
//nothing required here

}
}