XML Slideshow

Displaying slides

If you test your movie so far and comment the last line of the script from the previous page out, which is the addition of an event listener, you should be able to see the thumb arrangement. We now want to be able to click on a thumb and see the individual slides. We have finished adding an event listener to the thumbs and now we add the listener function.


function mouseHandler (ev:MouseEvent):void
{
		imName.text=ev.currentTarget.slideName;
		var myURL:String=ev.currentTarget.slideURL;
		

We first test if the imageHolder is empty. If it is empty we load the slide and fade it in. If it is not empty we first fade out the previous slide and add an event listener evoked when the fade out is complete. We test if the imageHolder is empty by simply measuring the width. If there is no slide loaded the width is 0. If it is 0 we just load the slide using the LoaderClassStatic, which will create one Loader object, which then we can reuse. This is different from the LoaderClass, which will create a Loader object every time the class is called, which we don't want here.


		if (imageHolder.width>0)
		{
		

Once a slide is loaded and we want to see another slide we want to add some fade out effect first, which we can achieve using the ApplyTweens or ApplyTweensTimer classes. The difference is that one is using the ENTER_FRAME event and the other is controlled by the Timer class. The function we use here is the "fadeOut" function.


		var at:ApplyTweensTimer = new ApplyTweensTimer(imageHolder,20,"alphaOut",10,1000);
		at.initTweens ();
		
We add an event listener "CALL_BACK", which is triggered when fading out is completed. We then trigger to load the next slide.

		at.addEventListener (ApplyTweensTimer.CALL_BACK,faderin);
		function faderin (ev:Event):void
		{
		lcs.initLoader (myURL,imageDisplay,imageHolder);
		}
		}
		else
		{
		lcs.initLoader (myURL,imageDisplay,imageHolder);
		}
}
		

The last function is the listener function once a slide is loaded into the imageHolder. We again call the ApplyTweensTimer class to achieve the fading in effect this time. Changing the duration time, which is 80 here, will either speed up the event (smaller value) or slow it down (larger value).


function imageDisplay (ev:Event):void
{
		var myTarget:Object=ev.target.content.parent.parent;
		var at:ApplyTweensTimer = new ApplyTweensTimer(ev.target.content.parent.parent,80,"alphaIn",10,1000);
		at.initTweens ();
}
		

And this gets us to the end of this tutorial.

previous