XML Loading

Use the files from the previous week xml dynamic menu and modify the xml file to include a new attribute <Big> for example <Big>pic1Large.jpg</Big>

This will store the file name of the large picture that is to be loaded. You can just use the same images as the thumbs to demonstrate the working.

Create a new flash file and open the actions panel and type:

var gallery_xml:XML;
var ImageRequest:URLRequest;
var imagetoLoad:Array = new Array();
var bigtoLoad:Array = new Array();
var thumbLoader:Loader;
var bigLoader:Loader = new Loader();

Here we are creating a xml variable.

Next a ImageRequest variable is created to enable us to load dynamic content.

Two arrays are created one to hold the thumb image and one to load hold the large Images. You will loop through this in a for lopop to access the images later.

Excercise

Load in the XML file when this has loaded it should call the xmlLoaded function which you need to create an populate with the code below (part 2).

Part 2

Inside the xmlLoaded function attach the following code:

 gallery_xml=new XML(xmlLoader.data);
     
 for(you need to create the code for this based on the length of gallery_xml.image){
 imagetoLoad[i]=gallery_xml.image[i].@file;
 bigtoLoad[i]=gallery_xml.image[i].Big;
 }
 loadImage();

Here we are looping through the xml file and assigning the data to the array for example imagetoLoad[0] = thum01.jpg; imagetoLoad[1] = thum02.jpg; bigtoLoad[0] = Big01.jpg; bigtoLoad[1] = Big02.jpg;

Once the for loop has been completed the loadImage function is called you MUST create this function.

The loadImage function will contain the following:

  	var ImageRequest:URLRequest = new URLRequest(imagetoLoad[i]);
		thumbLoader = new Loader();
		 thumbLoader.name=bigtoLoad[i];
		 thumbLoader.x=20;
		 thumbLoader.y=i*120+10;
		 addChild(thumbLoader);
		thumbLoader.addEventListener(MouseEvent.CLICK, loadBigImage);
  	thumbLoader.load(ImageRequest);

You are creating a thumbLoader and giving it an instance name which will be the elements of the array bigtoLoad. So in the first loop the content of bigtoLoad[0] will be assigned to the first loader created then in the second loop bigtoLoad[1]. Note this Array contains the file name of the large image so the thumbLoaders name is the same as the file you want to Load.

You are then adding an eventListener to the thumbLoader so that when it is pressed the loadBigImage function is called.

Exercise

Create a for loop to loop through this code within the loadImage function. This will loop through based on the size of gallery_xml.image. You can refer to previous weeks examples.

Part 3

Add the following code:

function loadBigImage(evt:MouseEvent):void{
 bigLoader.load(new URLRequest(evt.target.name));
 addChild(bigLoader);
 }

This will get the instance name of the object that triggered the event by using evt.target.name. If the first thumbLoader is clicked this will call this function and the instance name will contain the value of bigtoLoad[0] which is the large file we want to load. We then load the image and add it to the stage.

Week 1

Week 2

Week 3

Week 4

Week 5

Week 6

Week 7

Week 8

Week 9

XML Loading

Excercise

Part 2

Exercise

Part 3