Flash XML Gallery from scratch – part 2

Here the second part of the tutorial about the creation of an XML Flash Gallery.
Now we’ll see how to load all the images and place them on the stage.

Right now is available the third post of this tutorial.

NEW: Try fXML, the brand new free XML editor!

Read the first post if you missed it, and as well the first part, the full source code is available to download right on the bottom of this post.

The first thing we need is to add a couple of global variables before to proceed:

// add other variables for the images loading
var progressLoad:int = 0
var bitmapSource:Array = []

Then it’s time of the loader function; this function will be called for each image that should be loaded.

function startImageLoading():void
{
       // here the check whether all the images are loaded
	if(progressLoad < imageFile.length)
	{
		// construct the url to load
		var actualUrl:String = rootPath + imageFile[progressLoad];

		// create the Loader object
		var file:Loader = new Loader()
		file.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errorLoadFile);
		file.contentLoaderInfo.addEventListener(Event.COMPLETE, loadedFile);
		file.load(new URLRequest(actualUrl));
	}else{
		// this will called only when all the images are loaded
		loadedComplete();
	}
}

For each image loaded, it’ll be pushed in a convenient array:

function loadedFile(e:Event):void
{
	var l:Loader = Loader(e.target.loader);
	bitmapSource.push( l.content );

	// update the progress id
	progressLoad++;

	// recall the loader function
	startImageLoading();
}

// this is useful to know if something goes wrong
function errorLoadFile(e:IOErrorEvent):void
{
	// this will handle the errors
	trace("The file could not be loaded: " + e.text );
}

Now we are assuming that all the images are loaded and ready to use, so it’s time to handle some visual aspect.
In this function each image will be resized and centered based on the Stage size:

function loadedComplete():void
{
	// now we are ready to proceed to the next step
	// all the images are loaded

	// now we want to see our images on the stage
	for(var i:int=0; i<bitmapSource.length; ++i)
	{
		// get the reference of the image
		var img:DisplayObject = bitmapSource[i]

		// get the scale factor for this image
		var scaleh:Number = 1 / (img.width / stage.stageWidth)
		var scalev:Number = 1 / (img.height / stage.stageHeight)

		// we are going to pick the min scale
		var scale:Number = Math.min(scaleh, scalev)

		// update size based on our stage size
		img.scaleX = img.scaleY = scale

		// center on the stage the image position
		img.x = (stage.stageWidth-img.width) / 2
		img.y = (stage.stageHeight-img.height) / 2

                // and now we add it to the stage
		addChild(img)
	}
}

That’s it for this part.
Download the sample file: [download id="7"] In the next part we will add some interfaces to navigate through the gallery.