Flash XML Gallery from scratch – part 3

Now it’s time to see something on screen.
The third part of this tutorial will cover the interface elements and the basic transition between images.

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

.

The following code will complete the loadedComplete function from the previous part:

	// now we'll add some ui components
	prepareUI()

	// we trig the fist action so the first image will be showed
	nextItem(null)

The prepareUI set the ui elements properly:

// useful variables for the 3° part
var currentImageID:int = -1

// prepare the interface elements
function prepareUI()
{
	// this bring to front the buttons over the images
	this.setChildIndex(left, this.numChildren-1)
	this.setChildIndex(right, this.numChildren-1)

	// auto position relative the stage size
	left.y = right.y = stage.stageHeight - left.height - 5
	left.x = 5
	right.x = stage.stageWidth - right.width - 5

	left.buttonMode = right.buttonMode = true

	// add the listeners to the buttons
	right.addEventListener(MouseEvent.MOUSE_UP, nextItem)
	left.addEventListener(MouseEvent.MOUSE_UP, prevItem)
}

Now it’s time to make the mouse related function.

// this will show the next image
function nextItem(e:MouseEvent)
{
	if(currentImageID>=0) hideImage(currentImageID)
	currentImageID++
	showImage(currentImageID)
	manageUI()
}

// this will show the previous image
function prevItem(e:MouseEvent)
{
	if(currentImageID>=0) hideImage(currentImageID)
	currentImageID--
	showImage(currentImageID)
	manageUI()
}

To handle the ui element properly we’ll use this convenient function:

// this will enable/disable the ui button correctly
function manageUI()
{
	right.alpha = 1
	left.alpha  = 1
	left.mouseEnabled = right.mouseEnabled = true
	if(currentImageID==0)
	{
		left.alpha = .5
		left.mouseEnabled = false
	}
	if(currentImageID==bitmapSource.length-1)
	{
		right.alpha = .5
		right.mouseEnabled = false
	}
}

Thanks to Tweener library, the easing process is quite straightforward:

// we are going to show the current image
function showImage(id:int)
{
	bitmapSource[id].alpha = 0
	bitmapSource[id].visible = true
	Tweener.addTween(bitmapSource[id], {alpha:1, time:1})
}

// we are going to hide the previous image
function hideImage(id:int)
{
	Tweener.addTween(bitmapSource[id], {alpha:0, time:1, onComplete:hideObject, onCompleteParams:[id]})
}
// this will complete the hiding process, to avoid to consume useless cpu computation.
function hideObject(id:int)
{
	bitmapSource[id].visible = false
}

That’s it.
As usual you can download the full source file: [download id="9"]