使用AS3将图像和文本加载到闪存中？

Question

I am trying to load some images (10 exactly) images with their names/details into a flash file using AS3.

The images and their details get stored via PHP and I have a PHP file that creates an XML file with the details and path to the images from mysql database ready to be used in Flash.

I just need a simple way to show those 10 images and their details in a flash file.

This is the structure of my XML file when viewed in a browser:

<XML>
<Data>
<ID>127</ID>
<Name>Example 1</Name>
<Price>12!!</Price>
<Image>../inventory_images/127.jpg</Image>
<Date>Mar 08, 2013</Date>
</Data>

Could someone please help me out with this?

I am really stuck.

Thanks in advance.

Answer 1

Allright, here is a barebone class that does what you want: loading xml, parsing it, loading images one after another, adding images, adding info text:

package
{
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;

    public class LoadImagesFromXML extends Sprite
    {

        private var _xmlList:XMLList;
        private var _loadIndex:int;
        private var _baseURL:String = "http://example.com/";

        public function LoadImagesFromXML()
        {
            loadXML();
        }

        private function loadXML():void{
            var urlLoader:URLLoader = new URLLoader();
            urlLoader.addEventListener( Event.COMPLETE, onXMLComplete );
            urlLoader.load( new URLRequest( _baseURL + "myxmlurl/images.xml" ) );
        }

        private function onXMLComplete( e:Event ):void{
            var urlLoader:URLLoader = e.target as URLLoader;
            urlLoader.removeEventListener( Event.COMPLETE, onXMLComplete );
            var xml:XML = new XML( urlLoader.data );
            loadImages( xml );
        }

        private function loadImages( xml:XML ):void{
            _loadIndex = 0;
            _xmlList = xml.Data;
            loadSingleImage();
        }

        private function loadSingleImage():void{
            var imageData:XML = _xmlList[ _loadIndex ];
            var imageURL:String = imageData.Image.toString();
            var loader:Loader = new Loader();
            loader.contentLoaderInfo.addEventListener( Event.COMPLETE, onImageComplete );
            loader.load( new URLRequest( _baseURL + imageURL ) );
        }

        private function onImageComplete( e:Event ):void{
            var loader:Loader = e.target.loader as Loader;
            loader.y = height;
            loader.contentLoaderInfo.removeEventListener( Event.COMPLETE, onImageComplete );
            addChild( loader );
            var imageData:XML = _xmlList[ _loadIndex ];
            var imageName:String = imageData.Name.toString();
            var imagePrice:String = imageData.Price.toString();
            var imageDate:String = imageData.Date.toString();
            var tf:TextField = new TextField();
            tf.autoSize = TextFieldAutoSize.LEFT;
            tf.text = imageName + ", Price: " + imagePrice + ", Date: " + imageDate;
            tf.y = height;
            addChild( tf );
            _loadIndex++;
            if ( _loadIndex < _xmlList.length() ){
                loadSingleImage();
            }
        }

    }
}

The structure of the xml is this:

<?xml version="1.0" encoding="UTF-8" ?>
<images>
    <Data>
        <ID>127</ID>
        <Name>Example 1</Name>
        <Price>12!!</Price>
        <Image>image1.png</Image>
        <Date>Mar 08, 2013</Date>
    </Data>
    <Data>
        <ID>127</ID>
        <Name>Example 2</Name>
        <Price>10!!</Price>
        <Image>image2.png</Image>
        <Date>Mar 20, 2013</Date>
    </Data>
</images> 

Please note that this code has no error handling whatsoever, but you definitely should implement some in case the images are not present, the urls are wrong, or you get security errors…