As3.0 instances learn how to use XML

Case 4: familiar with the use of XML

Note: For a simple album, first load XML, then load the images thumbnails in the XML list, and click the thumbnail to display the large image and the description of the big image. This case is a little more complicated than the previous ones, but it is easier to understand if you are familiar with the as3 syntax.

Demo: http://www.live-my-life-with-yuyi.com/as3_cases/gallery_tween/

Code:Copy codeThe Code is as follows: Import Fl. transitions. Tween;
Import Fl. transitions. Easing .*;
VaR imagetext: textfield = new textfield ();
VaR fadetween: tween;
VaR imageloader: loader;
VaR XML: XML;
VaR xmllist: xmllist;
VaR xmlloader: urlloader = new urlloader ();
Xmlloader. Load (New URLRequest ("Data/images. xml "));
Xmlloader. addeventlistener (event. Complete, xmlloaded );

As before, pilot several packages to achieve the effect of image fade-in and fade-out. Then we define several variables. xmllist may be unfamiliar here. The main function of this variable is to obtain the Child list of XML. When we use it in detail below, its role will be clear at a glance.
Use urlloader to load XML and then listen to XML. Once the loading is complete, the xmlloaded function is triggered.

Copy code The Code is as follows: function xmlloaded (Event: Event): void
{
Xml = xml(event.tar get. data );
Xmllist = xml. Children ();
For (var I: Int = 0; I <xmllist. Length (); I ++)
{
Imageloader = new loader ();
Imageloader. Load (New URLRequest (xmllist [I]. Attribute ("Thumb ")));
Imageloader. x = 25;
Imageloader. Y = I * 150 + 25;
Imageloader. Name = xmllist [I]. Attribute ("Source ");
Addchild (imageloader );
Imageloader. addeventlistener (mouseevent. Click, showpicture );
}

}

Note the following:

Xml = xml(event.tar get. data );
If direct

Xml = event.tar get. Data
An error is reported because the two variables have different types.

Here we can see that xmllist is the children of XML, which is very convenient for using XML.
Then instantiate imageloader and load the thumbnail defined in xmllist. Note the writing method here.
Adjust the coordinates and add a name attribute to imageloader. The value of this attribute is the image address in the XML file, which facilitates the following showpicture function.
Then place the thumbnail on the stage and listen for its mouse-click events.

Copy code The Code is as follows: function showpicture (Event: mouseevent): void
{
Imageloader = new loader ();
Imageloader. Load (New urlrequest(event.tar get. Name ));
Imageloader. x = 200;
Imageloader. Y = 25;
Addchild (imageloader );
Imagetext. x = imageloader. X;
Imagetext. Y = 351;
For (var j: Int = 0; j <xmllist. Length (); j ++)
{
If (xmllist [J]. Attribute ("Source") = event.tar get. Name)
{
Imagetext. Text = xmllist [J];
}
}
Fadetween = new tween (imageloader, "Alpha", none. easenone, 0, 1, true );
}
Imagetext. autosize = textfieldautosize. Left;
Addchild (imagetext );

The function that displays the big image after clicking this button. Because the image address has been added to the name attribute, you can use it directly here.
After the big chart is loaded, assign the coordinates and add them to the stage. Next we will show the image description.
Here, we will use a circular xmllist to compare whether the source in XML is equal to the name here. If yes, we will assign the XML value to imagetext, but obviously there is a simpler method, in the above xmlloaded function, add a text attribute for imageloader and use it directly in showpicture.
Then give the image a gradient effect, which has been discussed before.
The last two rows define the alignment of imagetext, which is left alignment and then put on the stage.

This is the end of the case.
Package files