Week 1

• Variables
• Events
• Conditionals
  Exercise 1

Week 2

• Timeline
• Switch
• Functions
  Exercise 2
  

Week 3

• TimerEvents
• Display
• Dynamic Text
  Exercise 3

Week 4

• For loops
  
• Dynamic Buttons
  Arrays - new
  Exercise 4

Week 5

• More Conditionals
  Boolean - new
  loading audio
• loading images
• Gestures - new
  Exercise 5 - new

Week 6

• Loading swf
• xml
• ParseXML

Week 7

• xml Images

Week 8

• xml dynamic menu
• xml menu pt2

Week 9

• CSS
• debugging
• xml Thumbs again

Teaching > ActionScript

XML Dynamic Image Menu

Download Images.xml, imgo.jpg and img1.jpg

 

Part 1

Open Flash and create a new flash file.
Create a dynamic text box on the stage and give it an instance name of tImages. This will be used to display the total number of images in the XML file.
Create a new layer name it actions and enter the following code:

var gallery_xml:XML;
var ImageRequest:URLRequest;
var imagetoLoad:Array = new Array();
var currentImage:Number = 0;
var thumbSpace:Number = 120;

You should be familar with the variables but in this instances we have created an Array to store the images that need to be loaded, one to store the curent image and a variable to enable the images to be spaced on the screen.

 

Excercise

Create the code to load the XML file, once loaded it needs to call the xmlLoaded function.

 

Part 2

In the xmlloaded function should look like below:

function xmlLoaded(event:Event):void{
 gallery_xml=new XML(xmlLoader.data);
 
 for(var i:Number=0; i<gallery_xml.image.length(); i++){
   imagetoLoad[i]=gallery_xml.image[i].@file;
 }
  loadImage(); 
}

As in previous tutorials the data is assigned to an xml variable gallery_xml. A for loop is then used to parse the xml and getting the name of each image file tehn assigning it to an element in the array. Once this is complete the loadImage function is called.

The loadImage function should look like below:

function loadImage():void{
// for loop required
   var ImageRequest:URLRequest = new URLRequest(imagetoLoad[i]);
   var imageLoader:Loader = new Loader();
   imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
   imageLoader.load(ImageRequest);
 
}
     

Excercise

Ammend the function as you need to create a for loop to loop through the images and load each one.

 

Part 3

Next we are going to create the imageLoaded functionwhich will be called each time a imageLoads.

function imageLoaded(evt:Event):void{
 var thumb:MovieClip = new MovieClip();
 thumb.bigPicture = gallery_xml.image[currentImage].@file
 thumb.y=50+currentImage*thumbSpace;
 thumb.addEventListener(MouseEvent.CLICK, updateStage);
 addChild(thumb);
 thumb.addChild(evt.target.content);
 currentImage++; 
}

The first line creates a new blank movieclip name thumb and then a new property of this movieclip is created called bigPicture and the file name from the xml gallery is assigned to this. The movieclip y position is created, an eventListner is created and this is then added to the stage.

Then inside the thumb movieclip using the addChild method the iamge is placed inside the movieclip using the evt.target.content. This is required as we do not have access directly to the imageloader variable as this is local to the loadImage function.

 

Excercise

Create the updateStage function which will display the content of bigPicture for the movieclip which has been selected in the dynamicText box on the stage name tImage

Note to do this you would need to create another varaiable at the start e.g.

var fullLoader:Loader = new Loader();
fullLoader.x=250;
fullLoader.y=100;
addChild(fullLoader);

This code would be outside the update stage so that when the file is loaded it is possible to use

fullLoader.unload();

to unload the content of the lfullLoader container first.