Importing Images

[frozenorb3]

This is my goal:
Allow the users to select a picture from a server and bring it into flash. We don't know the name of the picture or anything; the user should be able to select it.

Let's say for general purposes that there's a folder called images with the following items:
stone.jpg
brick.jpg
hat.jpg
yellow.jpg

I want the user to be able to select which image to display on the screen.

Here is what I am thinking:
Assume for a second that we know where the images are located. For example purposes, we will say they are located at http://locaclhost/images

Now, knowing that, we should probably be able to run a php script to bring back data about the folder (what images are contained in it). Somehow, this data needs to be sent back to flash and displayed on the screen. Once the user selects the appropriate one, flash should be able to import that image and display it on the screen.

Now the problem:
First of all, is this even possible? PHP can probably pull the name of the each individual file and send it back to flash (if anyone knows how to do this, please PM me), but in order to make it visually appealing, I'd probably want to give the user a thumbnail of each image. This would have to be done dynamically and to be honest, I'm not sure how to do it. I could probably put something together with URLLoader and URLRequest, but is there an easier way?

Thanks in advance.

[5TonsOfFlax]

If php can list files (I'm pretty sure it can), then you can build an xml document to send to flash with image and thumbnail paths. You could generate thumbnails by loading the images themselves into flash and then resizing them, but then you'd have to download each full image. It's probably better to automatically generate thumbnails on the server side and load those instead.
I think most of your work lies on the server side, so this is really more of a PHP question.
Here's a page I found by searching for "php gd thumbnail". It should help you out with the thumbnail generation part, and scanning a directory for images part.
http://icant.co.uk/articles/phpthumbnails/

[frozenorb3]

Wow, thanks so much for your help. That's a very good link and I'll look into the PHP->XML->AS3 pathway.

For the time being, let's assume I've created the thumbnails. What would be the most efficient way of writing it XML for it to be flash friendly?
Maybe something like this?

<THUMBNAILS>
     <THUMBNAIL url = "firsturl">
     <THUMBNAIL url = "secondurl">
     <THUMBNAIL url = "thirdurl">
</THUMBNAILS>

As for the AS3 code, should I pursue something like this?

function xmlDownloaded(event:Event):void {
   xmlData = new XML(event.target.data);
       for each (var object:XML in xmlData.*) {
          var Xcoord:int = 200;

           if (object.name() == "THUMBNAIL") {
           var url:String = object.@url;

           this.loader = new Loader();
           this.loader.load(url);
           this.loader.addEventListener(Event.COMPLETE, onLoadComplete);

           function onLoadComplete(event:Event):void {
           var thumbnail:Sprite = new Sprite();
           thumbnail.addChild(this.loader);
           Xcoord += 100;
                 }
           }     
        }
}

Thanks again for your help.

[5TonsOfFlax]

Just off the top of my head, I would suggest having a fullsize directory and a thumbnail directory on your server, so that if an image is at http://example.com/images/me1.jpg, then the thumbnail is at http://example.com/thumbnails/me1.jpg. This is by no means a requirement, but such a convention might come in handy later.

As for xml, I'd probably have it structured so that you have each image and thumbnail in a single parent node. Something like:

<images>
  <image>
     <fullsize width="640" height="480">http://example.com/images/me1.jpg</fullsize>
     <thumbnail width="64" height="48">http://example.com/thumbnails/me1.jpg</thumbnail>
  </image>
  <image>
     ...
  </image>
</images>

That way, you can process each image, loading the thumbnail and adding the click listener in the same loop.

You xmlDownloaded is screwy because your onLoadComplete function adds your loader to a new Sprite which is not on the displayList. You'll see no visual effect that way.

Something more like (using the xml above)

var fullUrlByLoader:Dictionary = new Dictionary();
var fullUrlBySprite:Dictionary = new Dictionary();
var Xcoord:int = 200;

function loadFull(event:MouseEvent):void{
  var url:URLRequest = fullUrlBySprite[event.currentTarget];
  var l2:Loader = new Loader();
  l2.load(url);
  addChild(l2); //also do any other displaylist manipulation here.
}

function onLoadComplete = function(event:Event):void {
  var thumb:Sprite = new Sprite();
  thumb.addEventListener(MouseEvent.CLICK, loadFull);
  thumb.x = Xcoord;
  var loader:Loader = LoaderInfo(event.currentTarget).loader;
  fullUrlBySprite[thumb] = fullUrlByLoader[loader];
  addChild(thumb);
  Xcoord += 100;
}


function xmlDownloaded(event:Event):void {
   xmlData = new XML(event.target.data);
   for each (var imageNode:XML in xmlData.*) {
      //imageNode is image node.  has fullsize and thumbnail children.
      var thumburl:URLRequest = new URLRequest(imageNode.thumbnail.toString());  //I think.  doublecheck
      var fullurl:URLRequest = new URLRequest(imageNode.fullsize.toString());

      var l:Loader = new Loader();
      fullUrlByLoader[l] = fullurl;
      l.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
      l.load(thumburl);
   }
}

I would actually probably have used dynamically built functions instead of mapping things with the dictionaries, but both should work.