Extending the Actionscript 3 / Flash CS3 Slideshow with XML

Extending the Actionscript 3.0 / Flash CS3 Slideshow with XML

Wed, Sep 10, 2008

Effects, Flash, Interfaces, Tutorials, XML

Extending the Actionscript 3.0 / Flash CS3 Slideshow with XML

In this second part tutorial we’re going to add some more features to the slideshow application.

Those would be forwarding and rewinding slides, play and pause the slideshow and linkable slides. If you haven’t read the first part tutorial yet, you should do it before continue. You can read it here.

Requirements

Adobe Flash CS3

Try / Buy

Sample files:

slideshowprt2.zip

Adjust XML structure

To store the link of each slide, we just add it as an attribute to the xml file, or to be more accurate, on the image nodes. We also set the target window of the link, which might be neccesary to set in some cases. So, our xml is looking now like this:

<slideshow>
	<image src="images/fly.jpg" desc="Fly" link="http://www.wikipedia.org" target="_self"/>
	<image src="images/mouse.jpg" desc="Computer mouse" link="http://www.google.com" target="_blank"/>
	<image src="images/country.jpg" desc="Country" link="http://www.thetechlabs.com" target="_self"/>
	<image src="images/rope.jpg" desc="Rope" link="http://www.amazon.com" target="_blank"/>
	<image src="images/flower.jpg" desc="Flower" link="http://www.adobe.com" target="_self"/>
</slideshow>

Adding new objects

Since we know, how the xml looks like, we can move on to the knew stuff on the stage. In the mcInfo movieclip we’ve added 4 new buttons. Pause/Play and Forward/Rewind, which will later be assigned to event listeners. On the main stage is a invisible button as big as the size of the slides which will be used to open the links defined in the xml.
Alright, that’s already enough to go on with the coding part.

Adding new variables

First of all, we need to add some new variables to our script.

To know, if the slideshow is currently playing or paused, we set a flag:

var bolPlaying:Boolean = true;

And we also store the current slide link and target window in a variable:

var strLink:String = "";
var strTarget:String = "";

Init function

This is all we need for the variable. Now let’s take a look about what’s changing in the init function of the slideshow. We added the following two lines at the beginning of the function to prevent the user to click any button as long as the xml file hasn’t been loaded completely:

	mcInfo.visible = false;
	btnLink.visible = false;

We’ve also changed the function that will be called once the slideTimer event is fired. Now the function nextSlide() will be called, which we’ll create later:

	slideTimer.addEventListener(TimerEvent.TIMER, nextSlide);

On the last line of the initSlideshow() function we add the event listeners for the buttons. The play and button pause event listeners will be assigned to the same function togglePause(). The next and previous button will be asssigned to the nextSlide() and previousSlide() function. And last of all, we connect the invisible link button that covers the slide area with the goToWebsite() function. And since our slideshow will automatically be playing at the beginning, we hide the play button.

	btnLink.addEventListener(MouseEvent.CLICK, goToWebsite);
	mcInfo.btnPlay.addEventListener(MouseEvent.CLICK, togglePause);
	mcInfo.btnPause.addEventListener(MouseEvent.CLICK, togglePause);
	mcInfo.btnNext.addEventListener(MouseEvent.CLICK, nextSlide);
	mcInfo.btnPrevious.addEventListener(MouseEvent.CLICK, previousSlide);
	mcInfo.btnPlay.visible = false;

onXMLLoadComplete function

Once the xml is completely loaded, we need to show the mcInfo and the button link again. So we add the following two line of code to the function onXMLLoadComplete()

	mcInfo.visible = true;
	btnLink.visible = true;

And since our switchSlide() function will now need to have the index number of the slide, we add a zero as the parameter. We’ll explain the changes in the switchSlide() function later.

	switchSlide(0);

NextSlide/PreviousSide function

Let’s take a look at the nextSlide() and previousSlide() functions. They are called when clicking the next and previous button and the nextSlide() function is also called when the Timer event of the sliderTimer has been fired.
The nextSlide() function checks, if there are any slides left to move on. If so, the current switchSlide() function will be called with the next slide index. If there are no more slides left, then the parameter will be zero standing for the first slide.
The previousSlide() function works the same way. If there are slide we can go back, then the switchSlide() function will be called with the previous slide index. If we’re already on the first slide, then we start the slideshow from the last slide with calling the switchSlide() function with the parameter of the total slide count minus one since the array count begins with zero.

function nextSlide(e:Event = null):void {
	if(intCurrentSlide + 1 < intSlideCount)
		switchSlide(intCurrentSlide + 1);
	else
		switchSlide(0);

}

function previousSlide(e:Event = null):void {
	if(intCurrentSlide - 1 >= 0)
		switchSlide(intCurrentSlide - 1);
	else
		switchSlide(intSlideCount - 1);
}

SwitchSlide function

Since the nextSlide() and previousSlide() functions are now handling the checking for the slides, we can take out this part in the switchSlide() function.
To prevent the user from clicking too fast on the next and previous button, we check, if the tweener is still fading in the slides. If so, we just ignore the action. We’re doing this by adding the following if-statement to the first line of the switchSlide() function.

	if(!Tweener.isTweening(currentContainer)) {

Now we only need to set the new link and the target of it. This will be done exactly the same way as setting the description of the slide.

		strLink		= xmlSlideshow..image[intCurrentSlide].@link;
		strTarget	= xmlSlideshow..image[intCurrentSlide].@target;

FadeSideIn function

The fadeSlideIn() function has also a small addition. We check if the slideshow is currently playing and show the number of seconds to the next slide. If the slideshow is paused, we show a status message. The text will be assigned to the lbl_info label.

	if(bolPlaying) {
		mcInfo.lbl_loading.text = "Next slide in " + TIMER_DELAY / 1000 + " sec.";
	} else {
		mcInfo.lbl_loading.text = "Slideshow paused";
	}

OnSlideFadeIn function

On the onSlideFadeIn() function we now need to check, if the slideshow is playing. If so, we can start the timer again:

	if(bolPlaying && !slideTimer.running)
		slideTimer.start();

TogglePause function

The togglePause() function will be called when the user clicks on the play and pause button. First, we check, if the slideshow is playing, if so, we show the play button, set the bolPlaying variable to false, change the status message of the lbl_info label to “Slideshow paused” and stop the timer.
If the slideshow is currently paused, we show the pause button, set the bolPlaying variable to true again, show the time to the next slide and restart the timer.

function togglePause(e:MouseEvent):void {
	if(bolPlaying) {
		mcInfo.btnPlay.visible = true;
		mcInfo.btnPause.visible = false;

		bolPlaying = false;
		mcInfo.lbl_loading.text = "Slideshow paused";
		slideTimer.stop();
	} else {
		mcInfo.btnPlay.visible = false;
		mcInfo.btnPause.visible = true;

		bolPlaying = true;
		mcInfo.lbl_loading.text = "Next slide in " + TIMER_DELAY / 1000 + " sec.";
		slideTimer.reset();
		slideTimer.start();
	}
}

GotToWebsite function

The last function we need to define is the goToWebsite() function. This function will be called once the user clicks on the invisible button. It will check, if the strLink variable is empty or null. If not, the link will be opened.

function goToWebsite(e:MouseEvent):void {
	if(strLink != "" && strLink != null) {
		navigateToURL(new URLRequest(strLink), strTarget);
	}
}

We’ve already reached the end of the second part of the slideshow tutorial. We hope that you enjoyed reading it and we appreciate any kind of feedback.

Note

The feature for clicking the invisible button only works, when you’re running the flash on a webserver or in the flash sdk.

Full code with comments

// import tweener
import caurina.transitions.Tweener;

// delay between slides
const TIMER_DELAY:int = 5000;
// fade time between slides
const FADE_TIME:Number =	1;

// flag for knowing if slideshow is playing
var bolPlaying:Boolean = true;
// reference to the current slider container
var currentContainer:Sprite;
// index of the current slide
var intCurrentSlide:int = -1;
// total slides
var intSlideCount:int;
// timer for switching slides
var slideTimer:Timer;
// slides holder
var sprContainer1:Sprite;
var sprContainer2:Sprite;
// slides loader
var slideLoader:Loader;
// current slide link
var strLink:String = "";
// current slide link target
var strTarget:String = "";
// url to slideshow xml
var strXMLPath:String = "slideshow-data.xml";
// slideshow xml loader
var xmlLoader:URLLoader;
// slideshow xml
var xmlSlideshow:XML;

function initSlideshow():void {
	// hide buttons, labels and link
	mcInfo.visible = false;
	btnLink.visible = false;

	// create new urlloader for xml file
	xmlLoader = new URLLoader();
	// add listener for complete event
	xmlLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
	// load xml file
	xmlLoader.load(new URLRequest(strXMLPath));

	// create new timer with delay from constant
	slideTimer = new Timer(TIMER_DELAY);
	// add event listener for timer event
	slideTimer.addEventListener(TimerEvent.TIMER, nextSlide);

	// create 2 container sprite which will hold the slides and
	// add them to the masked movieclip
	sprContainer1 = new Sprite();
	sprContainer2 = new Sprite();
	mcSlideHolder.addChild(sprContainer1);
	mcSlideHolder.addChild(sprContainer2);

	// keep a reference of the container which is currently
	// in the front
	currentContainer = sprContainer2;

	// add event listeners for buttons
	btnLink.addEventListener(MouseEvent.CLICK, goToWebsite);
	mcInfo.btnPlay.addEventListener(MouseEvent.CLICK, togglePause);
	mcInfo.btnPause.addEventListener(MouseEvent.CLICK, togglePause);
	mcInfo.btnNext.addEventListener(MouseEvent.CLICK, nextSlide);
	mcInfo.btnPrevious.addEventListener(MouseEvent.CLICK, previousSlide);

	// hide play button
	mcInfo.btnPlay.visible = false;
}

function onXMLLoadComplete(e:Event):void {
	// show buttons, labels and link
	mcInfo.visible = true;
	btnLink.visible = true;	

	// create new xml with the received data
	xmlSlideshow = new XML(e.target.data);
	// get total slide count
	intSlideCount = xmlSlideshow..image.length();
	// switch the first slide without a delay
	switchSlide(0);
}

function fadeSlideIn(e:Event):void {
	// add loaded slide from slide loader to the
	// current container
	currentContainer.addChild(slideLoader.content);
	// clear preloader text
	mcInfo.lbl_loading.text = "";

	// check if the slideshow is currently playing
	// if so, show time to the next slide. If not, show
	// a status message
	if(bolPlaying) {
		mcInfo.lbl_loading.text = "Next slide in " + TIMER_DELAY / 1000 + " sec.";
	} else {
		mcInfo.lbl_loading.text = "Slideshow paused";
	}

	// fade the current container in and start the slide timer
	// when the tween is finished
	Tweener.addTween(currentContainer, {alpha:1, time:FADE_TIME, onComplete:onSlideFadeIn});
}

function onSlideFadeIn():void {
	// check, if the slideshow is currently playing
	// if so, start the timer again
	if(bolPlaying && !slideTimer.running)
		slideTimer.start();
}

function togglePause(e:MouseEvent):void {
	// check if the slideshow is currently playing
	if(bolPlaying) {
		// show play button
		mcInfo.btnPlay.visible = true;
		mcInfo.btnPause.visible = false;

		// set playing flag to false
		bolPlaying = false;
		// set status message
		mcInfo.lbl_loading.text = "Slideshow paused";
		// stop the timer
		slideTimer.stop();
	} else {
		// show pause button
		mcInfo.btnPlay.visible = false;
		mcInfo.btnPause.visible = true;

		// set playing flag to true
		bolPlaying = true;
		// show time to next slide
		mcInfo.lbl_loading.text = "Next slide in " + TIMER_DELAY / 1000 + " sec.";
		// reset and start timer
		slideTimer.reset();
		slideTimer.start();
	}
}

function switchSlide(intSlide:int):void {
	// check if the last slide is still fading in
	if(!Tweener.isTweening(currentContainer)) {
		// check, if the timer is running (needed for the
		// very first switch of the slide)
		if(slideTimer.running)
			slideTimer.stop();

		// change slide index
		intCurrentSlide = intSlide;

		// check which container is currently in the front and
		// assign currentContainer to the one that's in the back with
		// the old slide
		if(currentContainer == sprContainer2)
			currentContainer = sprContainer1;
		else
			currentContainer = sprContainer2;

		// hide the old slide
		currentContainer.alpha = 0;
		// bring the old slide to the front
		mcSlideHolder.swapChildren(sprContainer2, sprContainer1);

		// create a new loader for the slide
		slideLoader = new Loader();
		// add event listener when slide is loaded
		slideLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, fadeSlideIn);
		// add event listener for the progress
		slideLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress);
		// load the next slide
		slideLoader.load(new URLRequest(xmlSlideshow..image[intCurrentSlide].@src));

		// show description of the next slide
		mcInfo.lbl_description.text = xmlSlideshow..image[intCurrentSlide].@desc;

		// set link and link target variable of the slide
		strLink		= xmlSlideshow..image[intCurrentSlide].@link;
		strTarget	= xmlSlideshow..image[intCurrentSlide].@target;

		// show current slide and total slides
		mcInfo.lbl_count.text = (intCurrentSlide + 1) + " / " + intSlideCount + " Slides";
	}
}

function showProgress(e:ProgressEvent):void {
	// show percentage of the bytes loaded from the current slide
	mcInfo.lbl_loading.text = "Loading..." + Math.ceil(e.bytesLoaded * 100 / e.bytesTotal) + "%";
}

function goToWebsite(e:MouseEvent):void {
	// check if the strLink is not empty and open the link in the
	// defined target window
	if(strLink != "" && strLink != null) {
		navigateToURL(new URLRequest(strLink), strTarget);
	}
}

function nextSlide(e:Event = null):void {
	// check, if there are any slides left, if so, increment slide
	// index
	if(intCurrentSlide + 1 < intSlideCount)
		switchSlide(intCurrentSlide + 1);
	// if not, start slideshow from beginning
	else
		switchSlide(0);

}

function previousSlide(e:Event = null):void {
	// check, if there are any slides left, if so, decrement slide
	// index
	if(intCurrentSlide - 1 >= 0)
		switchSlide(intCurrentSlide - 1);
	// if not, start slideshow from the last slide
	else
		switchSlide(intSlideCount - 1);
}

// init slideshow
initSlideshow();

About the Author

Rafael Nünlist is currently working at orange8 as a Richmedia Developer. He will complete his apprenticeship with a swiss federal vocational diploma in information technology this summer. His strengths are Flash, Flex, Actionscript, Php/MySQL and AIR. He is also a member of the dreaminginflash team.

73 Comments For This Post

Magici1 Says:
September 11th, 2008 at 9:23 am

I can’t download the source files (404 error).
Could you repair it ?

Thanks

Carlos Pinho Says:
September 11th, 2008 at 10:29 am

Hi Magic,

Thank you for pointing the broken link. I’ve fixed it.

Cheers,
Carlos

Ronald Says:
September 15th, 2008 at 10:12 am

In this second version the memory leak still isn’t addressed properly. When using 200kb images, the browser goes from 40mb to 250mb in like 5 minutes. This is a really big problem when using it for normal slideshow purposes.

Except for the memleak it’s a pretty cool slideshow with nice features.

John Says:
September 21st, 2008 at 6:41 am

Thanks for the great tutorial. One thing I noticed is when for example, slide 3 is transitioning to slide 4, slide 2 pops up during the transition. Any idea what could be causing that?

andreb Says:
September 24th, 2008 at 3:40 pm

Hi, i was wondering if this gallery could be a video gallery instead of an image gallery! And if so, what do i have to change? Probably the timer event?

Thansk for this tutorial…very usefulL!

andreb Says:
September 24th, 2008 at 3:45 pm

When i say the timer event has to change i mean that the swf file can only switch when de movie ends!! How can i do that?

Sorry for 2 posts..

andreb Says:
September 25th, 2008 at 11:59 am

Hi again I figured out how maybe i can change this to load swf video files. My problem is that the TIMER_DELAY can´t always be the same because of the lenght of the swf’s, so i need to change that var for each new swf. I created a new xml tag called time=”" and tried to pass it to the TIMER_DELAY in the switchSlide function like tis:

TIMER_DELAY = xmlSlideshow..file[intCurrentSlide].@time;

But since i had to determine the TIMER_DELAY at the beginning as a value (2000 for ex) the timer keeps that value and doesnt change for the value time from xml!

What am i doing wrong? plz help

Rafael Nünlist Says:
September 26th, 2008 at 6:15 am

@andreb: i was also thinking of adding this feature to this version but i really missed that one.

You can change it this way:

function onSlideFadeIn():void {
slideTimer.removeEventListener(TimerEvent.TIMER, nextSlide);
slideTimer = new Timer(xmlSlideshow..file[intCurrentSlide].@time);
slideTimer.addEventListener(TimerEvent.TIMER, nextSlide);
if(bolPlaying && !slideTimer.running)
slideTimer.start();
}

jtomm Says:
September 30th, 2008 at 6:40 am

This is awesome, however I have noticed the memory leak as well. Has there been any steps made to address this?

Rafael Nünlist Says:
October 1st, 2008 at 11:15 am

@all on the memory leak complaining: Please check back later. The zip file contains a version that doesn’t fix that problem. Carlos will upload the right version in the coming time.

Carlos Pinho Says:
October 24th, 2008 at 12:10 am

I’m sorry for my late update on the right file.

Derrick Bradley Says:
October 28th, 2008 at 1:57 am

@Carlos

Any idea when we will see this fix? I would love to start using this slideshow.

Carlos Pinho Says:
October 28th, 2008 at 7:41 pm

@ Derrick, the file was already updated. Pls go ahead and download it.

nathaniel Says:
November 6th, 2008 at 10:12 pm

Was just wondering if we could have a tilelist on there and and link the xml file to that list so we can get a small preview of what is coming b4 we see it.

Really good tutorial. I’ll definitely link back 2 this from my site.

nathaniel Says:
November 6th, 2008 at 10:14 pm

oh please pardon me, I am new to AS and Flash…

Adam Says:
November 11th, 2008 at 6:46 pm

I’ve used a version on this type of slideshow for a few projects now…I’ve also been trying to extend it a little bit so that it can also show numbered thumbnails that can be clicked and fade to the appropriate picture in the sequence…

here’s my code…
private function onXMLLoadComplete(e:Event):void {
xmlSlideshow = new XML(e.target.data);
slideCount = xmlSlideshow..image.length();
switchSlide(null);

for (var i:int = 0; i < slideCount; i++) {

var thumb = this.addChild(new Thumb());
thumb.name = “thumb” + i;
thumb.x = X + (SPACE * i);
thumb.y = Y;

thumb.theNum.text = i + 1;
thumb.buttonMode = true;
thumb.mouseChildren = false;
thumb.addEventListener(MouseEvent.CLICK, onClick);
}
}

private function onClick(e:MouseEvent):void {
var currentBtnName:String = e.currentTarget.name;
var splitName:Array = currentBtnName.split(“b”);
var btnNumber:int = splitName[1];

switchSlide(null);
}

this just adds Thumb movieClips to the movie and puts an onClick event on them to call the same function as the switchSlide function…how can I get this to switch to the corresponding picture?

Thanks in advance…

Adam Says:
November 11th, 2008 at 6:53 pm

Actually I changed my onClick code to this…

private function onClick(e:MouseEvent):void {
if(slideTimer.running) {
slideTimer.stop();
}

var currentBtnName:String = e.currentTarget.name;
var splitName:Array = currentBtnName.split(“b”);
var btnNumber:int = splitName[1];

slideLoader = new Loader();
slideLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, fadeSlideIn);
slideLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress);
slideLoader.load(new URLRequest(xmlSlideshow..image[btnNumber].@src));
}

This changes the picture but it doesn’t fade like the other ones.

Audrey Says:
November 19th, 2008 at 2:29 pm

Hi – great tutorial! This will help for the base of a lot of projects. I’m just learning AS3, and I’m a cross between a designer/programmer, so it’s taking me awhile to get the hang of things. If I wanted to change up the tween a bit, how would I do this? I would like to do a solarized effect. I can do this on the timeline using filters, but not sure how to do in code. Generally I just change the Brightness, Contrast on the Adjust Color filter from 0 to 100 during the tween. Any ideas?

Audrey Says:
November 19th, 2008 at 3:15 pm

Also, when you change the Fade time -

// fade time between slides
const FADE_TIME:int = 1;

The descriptions pop up before the photos. I’m using the first version of the gallery you put up without the extra features.

kopetkai Says:
November 20th, 2008 at 11:50 pm

can this be made to go to a random image?

Stephanie Says:
December 5th, 2008 at 8:09 pm

Great slideshow! I’m new to AS3 and XML but this tutorial is the only one I’ve been able to understand thanks to the comments! However, I’m wanting to make some tweaks to do the following (I know I’m picky, but I know there’s ways to do this since I’ve seen it before in finished shows):

1. Fade the non-current container out so if different sized images are used you don’t see what was just shown (using the removeChild script from the first part, it works once the 3rd image is shown, but not on the 2nd)

2. I’d rather use a randomization of images so the slideshow is not always in the same sequence. Is this possible?

3. Is there a way to link to pages not yet published online (still building the site I want to link images to) so that they work correctly when uploaded to the web etc without having to re-write the XML data to reflect such?

4. What would be the best way to center the images (not all the same size)?

I appreciate everything you can help with now and already! Thanks!

Balaji Says:
December 15th, 2008 at 12:11 pm

Great thanks…. for a nice work..
Is it possible to add external SWF file, instead of JPG images….
if possible,Can anybody help me…..

Jonwah Says:
January 23rd, 2009 at 5:38 pm

Hi Rafael,

Thank you for the 2 slideshow tutorials, they have proved very useful. I have adapted them for a project I’m working on but have hit a problem. I need to empty the currentContainer before the:

” currentContainer.addChild(slideLoader.content); ”

loads in the next image (or in my case a swf) into the same currentContainer. I have tried using the removeChild (in many different ways) but I cannot reference the container’s content, the closest I get is removing the container itself rather than it’s content.

Any thoughts…?

Jon Says:
January 28th, 2009 at 12:22 pm

Hi Rafael,

Great slideshow and very useful. I’m new to AS3 and am trying to adapt parts of the code. 2 days of trying to solve the following problem so far, so time to ask for help.

Can you explain how to remove the contents of the currentContainer (sprContainer2 or sprContainer1) before adding in the new content. The loaded content seems to load “on top of” of an earlier piece of loaded content. This is causing me problems as I am loading in swfs rather than images and have type on a transparent background (therefore you see the earlier swf’s type underneath.

I have tried using the removeChild but I keep removing the container rather than the swf within.

Any help would be greatly appreciated. Many thanks.

Fobio Says:
February 10th, 2009 at 3:16 am

This is excellent is it possible to use this adding external SWF file, instead of JPG images….

Thank you ..

Jozias Says:
February 11th, 2009 at 3:37 pm

Hello Rafael,

Thanks for this powerful and usefull tutorial.

Like Andreb I tried to change the time for each slide, but I don’t understand where excatly to put the code for the script you posted.

Do you have an example where to place it?

Regards

Vincent Ogloblinsky Says:
February 23rd, 2009 at 9:42 pm

I fix today the memory leak if the trick is not available, these lines solved my memory leak problem:

in switchSlide function, after swapchildren the two sprite containers:

mcSlideHolder.swapChildren(sprContainer2, sprContainer1);

add this:

if(sprContainer1.numChildren > 0)
{
sprContainer1.removeChildAt(0);
}

if(sprContainer2.numChildren > 0)
{
sprContainer2.removeChildAt(0);
}

Hope this helps

Regards

William Owens Says:
March 2nd, 2009 at 2:17 pm

Vincent — I handled the memory leak problem the same way. However, I not only removed the object from the display list but also removed it from RAM. The code is placed in the same location:

if (currentContainer.numChildren > 0) {
var slideObjRef:DisplayObject = currentContainer.getChildAt(0);
currentContainer.removeChildAt(0);
slideObjRef = null;
}

This is discussed in detail on page 63 of the “Learning ActionScript 3.0″ book.

mara Says:
March 5th, 2009 at 1:48 pm

Great tutorial! I have one Problem: How can i modificate this source that the slideshow doesn’t loop and stop after last slide? I have tried with (var repeatCount:int = 1;) but it doesn’t work! Can anybody help me???
Mara

Alex Says:
March 5th, 2009 at 7:54 pm

Awesome…memory leak woes have been solved!

Masterjonte Says:
March 31st, 2009 at 9:41 pm

Nice…tutorial…it works very good! Anyone know how to solve this: If a picture is missing and the xml file is pointing out that missing file how can we ignor it? Then the application should try to load the next one. Is it possible with this code to make a check somewhere?

Rafael Nünlist Says:
April 2nd, 2009 at 6:13 am

@ Masterjonte: For that case you’d have to listen for a IOErrorEvent and then switch to the next slide. So that would mean, that you have to add the following line after adding the progress event listener to the Loader object:

slideLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioError)

And then you could add a function like this:

function ioError(ioError:IOErrorEvent):void {
nextSlide()
}

Jorge Londono Says:
April 11th, 2009 at 11:10 pm

Thanks, excelent tutorial.

Please, How change size for resolution of user, full screen?

Jasen Burkett Says:
April 15th, 2009 at 1:32 am

I would like to use this, but here is my situation. I need to size it down and have it to get its source from a mysql database. (basically a php file will out put a xml file) anyway….

I have a list component that is populating with ‘gallery’ names. This then once clicked would feed the proper info to the slideshow which woudl load the images from that gallery.

is that possible?
thanks

alexxcz Says:
April 20th, 2009 at 12:11 am

Nice slideshow!
Thanks for sharing!

Alem Otr Says:
April 29th, 2009 at 6:09 pm

Can someone tell me how to change script to load xml file from swf?

Like this or similar:

slideshow.prt2.swf?=slideshow-data.xml

thanks

(sorry for my english)

Alem Otr Says:
April 29th, 2009 at 6:12 pm

Can someone tell me how to change script to load xml file from swf?

Like this or similar:

slideshow.prt2.swf?=slideshow-data.xml

thanks

(sorry for my english)

(I forget check e-mail notify)

Josh Says:
April 29th, 2009 at 6:54 pm

I was wondering how to set the description to be visible at all times, I’ve got it to stay when moused over/out but not visible @ all times.
any help would be appreciated.

Thanks,

Josh

Rafael Nünlist Says:
April 30th, 2009 at 1:06 pm

@Alem Otr: You can access a flashvariable like this: root.loaderInfo.parameters.yourFlashVariableName.
For the loading you’d write it like this:
xmlLoader.load(new URLRequest(root.loaderInfo.parameters.yourFlashVariableName));

@Josh: Just remove the MouseEvent Listeners and position the Sprite wherever you want

Alem Otr Says:
April 30th, 2009 at 2:40 pm

Rafael

Thanks a lot

Harkonenn Says:
May 6th, 2009 at 8:04 pm

This is a great tutorial, and very useful application!

I have 2 questions/problems.

I’m adapting this for use in my personal gallery, but the way that I’ve set up the page requires that I use ‘wmode’,'transparent’ to allow a div background image to bleed into the SWF.

When this is set to ‘window’ the transition between slides is fine, however, with ‘transparent’ there’s a brief flicker. The current slide goes to an alpha of 0, then immediately reappears and fades out.

My second problem is that sometimes the previous and next buttons require a double click. This is perhaps due to the fact that made the following code change to always start the slideshow paused:

function onSlideFadeIn():void {
// check, if the slideshow is currently playing
// if so, start the timer again
if(bolPlaying && !slideTimer.running)
// was previously slideTimer.start();
// but I wanted to disable the slideshow
// i.e. always be paused
slideTimer.stop();
}

I’m not very concerned with the second issue, but I would like to solve the flickering problem.

Thanks again!

Mechan Says:
June 5th, 2009 at 7:42 pm

Hello. I’m trying to get this to work with swf files but i can’t get it right…
I managed to load the swf files but the ones with video in them just won’t shut up and die :p

I guess that all the work needs to be done in the following lines. I’m attaching the original source file script because mine got really messy.

———————————————————————-

function clearLoader():void {
try {
// get loader info object
var li:LoaderInfo = slideLoader.contentLoaderInfo;
// check if content is bitmap and delete it
if(li.childAllowsParent && li.content is Bitmap){
(li.content as Bitmap).bitmapData.dispose();
}
} catch(e:*) {}
}

function addSlideContent():void {
// empty current slide and delete previous bitmap
while(currentContainer.numChildren){Bitmap(currentContainer.getChildAt(0)).bitmapData.dispose(); currentContainer.removeChildAt(0);}

// create a new bitmap with the slider content, clone it and add it to the slider container
var bitMp:Bitmap = new Bitmap(Bitmap(slideLoader.contentLoaderInfo.content).bitmapData.clone());
currentContainer.addChild(bitMp);
}

———————————————————————-

Can anyone help me out with this?

Lila Says:
July 20th, 2009 at 6:48 pm

I used this gallery but somebody knew how to make this:

when all my photos play one time, could be stop?

sorry for my english

i hope you can hel me

Lila Says:
July 20th, 2009 at 6:48 pm

How to stop this Slideshow after 1 cycle?

Scott Says:
July 21st, 2009 at 8:47 pm

Just wanted to say this tutorial was extremely helpful. Thanks!

Scott Says:
July 22nd, 2009 at 4:24 pm

Also, how would I go about setting the slides to display randomly?

Anton Says:
August 6th, 2009 at 1:16 pm

Hi, great tutorial, ive used the code to adapt it to my website. I was wondering if there its possible to make a wipe out transition for the slides

Anton Says:
August 6th, 2009 at 1:34 pm

or scroll effect, does anyone have a code example?

Vic Says:
August 11th, 2009 at 3:02 pm

Hello Rafael,

Thanks for this wonderful tutorial. I have a doubt though, instead of directing to an url based on the click, I want to show the larger/original size of the the image clicked on a full screen mode. How do I go about it? Can you or anybody help me with this? Any help would be greatly appreciated. Thanks.

P.S. Also, thanks to Vincent Ogloblinsky and William Owens for their Memory Leak work around, it worked great and helped me to a great deal.

senim Says:
August 18th, 2009 at 7:13 pm

It is really help full Tutorial. Thanks a lot.
@ Alem Otr or Rafael could you send me please the changed part of this Script? It doesn’t work by me or anyone who used swf too. I am thankful for any help.

Jeff Says:
August 26th, 2009 at 1:14 pm

Hi…

Did anyone manage to get .swf files loaded instead of image files?

I’m assuming it must be to do with the script below

any help would be appreciated

thanks

Chachie Says:
August 29th, 2009 at 7:02 am

Rafael, wondering if you can help me create this code to open in new window instead of turning from home page where you have to hit back to view home page. I would rather have a new window open but can’t figure out how to code it. here is the code:
fm_button.visible = false;

// Tweener
// http://code.google.com/p/tweener/
import caurina.transitions.Tweener;

// To make a link to an external page, write label as “Label|URL” in array value
// EXAMPLE 1: “Flash |http://www..com”
// EXAMPLE 2: “new window|http://www..com”
var menu_label:Array = new Array(“WELCOME|http://www..com”, “CONTACT” );
var total:Number = menu_label.length;
var center_x:Number = 470;
var center_y:Number = 800;
var i:Number = 0;
var page:Number;
var main_menu:MovieClip = new MovieClip();
stage.addChild(main_menu);

for( i = 0; i < total; i++ )
{
var btn = new cp_button();
btn.name = “cp_btn” + i;
btn.x = center_x;
btn.y = center_y;

btn.scaleX = btn.scaleY = btn.alpha = 0;
btn.item_no = i;

btn.cp_button_pic.gotoAndStop( i + 1 );
btn.addEventListener( Event.ENTER_FRAME, btn_enter );
btn.addEventListener( MouseEvent.ROLL_OVER, btn_over );
btn.addEventListener( MouseEvent.ROLL_OUT, btn_out );
btn.addEventListener( MouseEvent.CLICK, btn_click );

var each_substring:Array = menu_label[i].split(“|”);
btn.cp_button_label.fm_label.text = each_substring[0];
btn.item_url = each_substring[1];
main_menu.addChild(btn);
}

function btn_over(e:MouseEvent):void
{
e.target.over = true;
}

function btn_out(e:MouseEvent):void
{
e.target.over = false;
}

function btn_click(e:MouseEvent):void
{
var mc = e.target.parent;
if( mc.item_url != undefined )
navigateToURL( new URLRequest( mc.item_url ), “_parent” );
else
change_page(mc.item_no);
}

function btn_enter(e:Event):void
{
var mc = e.target;
if( mc.over == true )
mc.nextFrame();
else
mc.prevFrame();
}

function change_page(no:Number):void
{
page = no + 1;
play();
}

lilien Says:
September 1st, 2009 at 12:01 pm

hi,

great tutorial. i’m using different sized images and using the current code you can still see the previous image. is there anyway to make sure that each image fades out completely?

cheers lilien

Ishia Says:
September 7th, 2009 at 11:32 pm

Hey Rafael very nice Tutorials:) Thanks alot. I am using the concept of the first tutorial with some minor changes on my personal website however I am having a problem getting to actually display. I can view the SWF file and it works just fine also the HTML file. The problem is when I embed it into my index file it does not play. Do you have any ideas on why this could be happening. Thanks

Tru Says:
September 9th, 2009 at 11:20 pm

I was just wondering if we can include the ability to read descriptions as html (rather than plain text) I’de like to boldface some of the words in the the XML file.?

Awesome Tutorial!

Thanks
Tru

Tru Says:
September 10th, 2009 at 12:46 am

Rafael, have you been able to figure out how to remove previous images when new ones have loaded, this would help when images are not identical sizes.

Tru

Tru Says:
September 10th, 2009 at 1:57 am

For those wanting to get rid of the current image try this: ==> add currentcontainer.alpha = 0 above its current location as shown below:

———————————————————————-

// change slide index
intCurrentSlide = intSlide;

// check which container is currently in the front and
// assign currentContainer to the one that’s in the back with
// the old slide below is where I duplicated currentcontainer.alpha = 0
currentContainer.alpha = 0;
if(currentContainer == sprContainer2)
currentContainer = sprContainer1;
else
currentContainer = sprContainer2;

// hide the old slide
currentContainer.alpha = 0;

Tru Says:
September 10th, 2009 at 2:58 am

Never Mind the question about the HTML, I was able to get Boldfacing to work using </b> & <b>

Scott Says:
September 21st, 2009 at 6:37 am

How exactly do you go about changing the image size?
Also, is there a way to get the image to display in the center of the stage (at least horizontally)?

Lets say that I want to be able to put images sized 800×533 pixels, what would I change/add to the code?

Mike Peters Says:
September 28th, 2009 at 1:34 am

Is there a way to modify this code to allow the use of external image locations in the XML file. I want to store all images on a image server website to share across multiple websites

eg
http://wwww.image.mywebsite.com/file/tree.jpg

SouthWind14 Says:
October 23rd, 2009 at 2:28 pm

I saw another blog review this one a while back and they liked it too. ,

Greg Says:
November 7th, 2009 at 3:46 am

I’m trying to find a way to create two movieclips that load the same slideshow image. Essentially, currentContainer and a duplicateContainer. So when a new image loads, it is placed in both movieclips at the same time, same fade in, etc…

My current attempts result in the image being loaded into one movieclip or the other, but not both at the same time.

Anyone know what needs to be done to achieve this?

Thanks,

Steve Says:
November 10th, 2009 at 2:02 pm

I got the underneath images to disapear and also center the images. Note I loathe AS as it is so complicated for me, so sure to be a better way to do it…

I modified the original downloadable source file on this page and made the following modifications. Note:I am not sure if the code lines will wrap here or break to a new line, so correct if necessary…

replace:

// reference to the current slider container
var currentContainer:Sprite;

with:

// reference to the current slider container
var currentContainer:Sprite;
// reference to the non current slider container
var nonCurrentContainer:Sprite;

replace:

if(currentContainer == sprContainer2)
currentContainer = sprContainer1;
else
currentContainer = sprContainer2;

with:

if(currentContainer == sprContainer2) {
currentContainer = sprContainer1;
nonCurrentContainer = sprContainer2;
} else {
currentContainer = sprContainer2;
nonCurrentContainer = sprContainer1;
}

replace:

var bitMp:Bitmap = new Bitmap(Bitmap(slideLoader.contentLoaderInfo.content).bitmapData.clone());
currentContainer.addChild(bitMp);

with:

var bitMp:Bitmap = new Bitmap(Bitmap(slideLoader.contentLoaderInfo.content).bitmapData.clone());
currentContainer.addChild(bitMp);
nonCurrentContainer.alpha = 0;
currentContainer.x = (stage.stageWidth / 2) – (currentContainer.width / 2);
currentContainer.y = (stage.stageHeight / 2) – (currentContainer.height / 2);

Stefan Says:
November 13th, 2009 at 10:38 am

Thanks for that script! I´m a bloody beginner and it helped me to understand many things! My suggestion: write a part 3 and make a sequel out of it (if you´ve the time). I added a slide navigation (1,2,3 …) but it´s spaghetti-code … so …

Stefan Says:
November 13th, 2009 at 3:24 pm

Me again.

I found a bug, which you can trace with:
trace(sprContainer1.numChildren);
trace(sprContainer2.numChildren);

You will see that after a few minutes of rotating, you will have dozens of childs and your cpu is under heavy duty by flash.exe

Here my suggestion (i´m a beginner, so be careful!):

Remember the last container with a new sprite oldContainer.

//Hide the old slide
currentContainer.alpha=0;
oldContainer=currentContainer;

and in the function fadeSlideIn delete unwanted childs:
if (oldContainer.numChildren==1) oldContainer.removeChildAt(0);

If you then delete all tweens before starting a new one …

Tweener.removeAllTweens();
//Fade the current container in and start the slide timer when the tween is finished
Tweener.addTween(currentContainer, {alpha:1, time:FADETIME, onComplete:onFadeSlideIn});

… you don´t need any checks like if(!Tweener.isTweening(currentContainer)){

… so the user don´t has to wait, when he want´s to see the next slide …

Matthias Kappenberg Says:
January 14th, 2010 at 11:22 pm

@ memory leaks, tested on ie8, ff, chrome:
Please try something like this one
(if useless delete the comment):
———————————————
function fadeSlideIn(e:Event):void {
// ADDITIONS BEGIN
// —-
// remove unused childs
while(currentContainer.numChildren)
{currentContainer.removeChildAt(0)};
// force immediate garbage collection
// see grant skinner’s article at
// http://www.gskinner.com/blog/
// archives/2006/08/as3_resource_ma_2.html
try {
new LocalConnection().connect(‘foo’);
new LocalConnection().connect(‘foo’);
} catch (e:*) {}
// —
// ADDITIONS END
// add loaded slide from slide loader to the
// current container
addSlideContent();
…….
———————————————
and
BIG THANKS to all the friendly people here
REALLY BIG THANKS to the tech labs developer/s

Marish Says:
January 22nd, 2010 at 10:53 am

My timer is malfunctioned. When i press the pause button, it works (turns invisible, play button becomes visible, and en the Infobar prints “Slideshow Paused”, however, the timer (slideTimer) does not stop, and the slideshow continues due to the pause. What’s wrong?

// ——————–[ CODE (AS3) ]———————-\\

function togglePause (evt:MouseEvent):void
{
if (bolPlaying == true)
{
mcInfo.btnPlay.visible = true;
mcInfo.btnPause.visible = false;

bolPlaying = false;
mcInfo.lbl_loading.text = “Pause”;
slideTimer.stop();
}

else if (bolPlaying == false)
{
mcInfo.btnPlay.visible = false;
mcInfo.btnPause.visible = true;

bolPlaying = true;
mcInfo.lbl_loading.text = “Neste bilde om ” + timerDelay / 1000 + ” sek.”;

slideTimer.reset();
slideTimer.start();
}
}

———————————————————-

Thanks,
Norwegian dude

Warrior_Elite Says:
January 26th, 2010 at 5:39 pm

This tutorial is great! Good job! I want to add a few buttons on the side so that I can go to specific slides? Do I have to add a name/ID on the XML, and reference it with the buttons? Or do have to create a third child to hold a specific image?

All help is greatly appreciated!

pominette Says:
February 21st, 2010 at 5:44 pm

It is possible to put a button full screen please??
How to make
Thank you very much of your answer

nate Says:
March 11th, 2010 at 12:19 am

how can i make this gallery a true fit gallery so it can fill the whole screen ??

Gemma Says:
April 15th, 2010 at 2:23 pm

Thank you for the tutorial Rafael.
I know you have a lots of requests but if you or anybody have a bit of time to explain how to call swf would be very appreciate.

Cheers,
Gemma

Kunal Shewale Says:
May 10th, 2010 at 10:35 am

Hey, Can you please help me on modifying the above tutorial to following requirements.

1) I need to add n number of images but only 25 images should be visible at any time.
2) Images thumbnail could move left and right as per the mouse move direction.
3) To navigate between the pages (25 image thumbnail on each page) on click of back and next.

I am working on it but finding it difficult to customize the above code. I am novice to Action Script 3.0.

Any help would be highly appreciated.

Thanks in advance.

Parasar Says:
June 1st, 2010 at 9:04 am

Thanks a lot Rafael

3 Trackbacks For This Post

Tecinfor » Blog Archive » Slideshow XML /AS3 Says:
September 11th, 2008 at 11:32 am

[...] Se você ainda não leu a primeira parte tutorial ainda, você deve fazê-lo antes de continuar. Você pode lê-lo aqui. Start Slide Show with PicLens Lite Tags: adobe, as3, flash, Slideshow, [...]

Extending the Actionscript 3 / Flash CS3 Slideshow with XML - The … at Flash Designers Says:
May 6th, 2009 at 11:35 am

[...] original here: Extending the Actionscript 3 / Flash CS3 Slideshow with XML – The … [...]

Best of FREE Flash Tutorials - Hidden Pixels Says:
May 7th, 2009 at 10:26 am

[...] Extending the Actionscript 3.0 / Flash CS3 Slideshow with XML [...]

Magici1 Says:
September 11th, 2008 at 9:23 am
I can’t download the source files (404 error).
Could you repair it ?

Thanks
Carlos Pinho Says:
September 11th, 2008 at 10:29 am
Hi Magic,

Thank you for pointing the broken link. I’ve fixed it.

Cheers,
Carlos
Ronald Says:
September 15th, 2008 at 10:12 am
In this second version the memory leak still isn’t addressed properly. When using 200kb images, the browser goes from 40mb to 250mb in like 5 minutes. This is a really big problem when using it for normal slideshow purposes.

Except for the memleak it’s a pretty cool slideshow with nice features.
John Says:
September 21st, 2008 at 6:41 am
Thanks for the great tutorial. One thing I noticed is when for example, slide 3 is transitioning to slide 4, slide 2 pops up during the transition. Any idea what could be causing that?
andreb Says:
September 24th, 2008 at 3:40 pm
Hi, i was wondering if this gallery could be a video gallery instead of an image gallery! And if so, what do i have to change? Probably the timer event?

Thansk for this tutorial…very usefulL!
andreb Says:
September 24th, 2008 at 3:45 pm
When i say the timer event has to change i mean that the swf file can only switch when de movie ends!! How can i do that?

Sorry for 2 posts..
andreb Says:
September 25th, 2008 at 11:59 am
Hi again I figured out how maybe i can change this to load swf video files. My problem is that the TIMER_DELAY can´t always be the same because of the lenght of the swf’s, so i need to change that var for each new swf. I created a new xml tag called time=”" and tried to pass it to the TIMER_DELAY in the switchSlide function like tis:

TIMER_DELAY = xmlSlideshow..file[intCurrentSlide].@time;

But since i had to determine the TIMER_DELAY at the beginning as a value (2000 for ex) the timer keeps that value and doesnt change for the value time from xml!

What am i doing wrong? plz help
Rafael Nünlist Says:
September 26th, 2008 at 6:15 am
@andreb: i was also thinking of adding this feature to this version but i really missed that one.

You can change it this way:

function onSlideFadeIn():void {
slideTimer.removeEventListener(TimerEvent.TIMER, nextSlide);
slideTimer = new Timer(xmlSlideshow..file[intCurrentSlide].@time);
slideTimer.addEventListener(TimerEvent.TIMER, nextSlide);
if(bolPlaying && !slideTimer.running)
slideTimer.start();
}
jtomm Says:
September 30th, 2008 at 6:40 am
This is awesome, however I have noticed the memory leak as well. Has there been any steps made to address this?
Rafael Nünlist Says:
October 1st, 2008 at 11:15 am
@all on the memory leak complaining: Please check back later. The zip file contains a version that doesn’t fix that problem. Carlos will upload the right version in the coming time.
Carlos Pinho Says:
October 24th, 2008 at 12:10 am
I’m sorry for my late update on the right file.
Derrick Bradley Says:
October 28th, 2008 at 1:57 am
@Carlos

Any idea when we will see this fix? I would love to start using this slideshow.
Carlos Pinho Says:
October 28th, 2008 at 7:41 pm
@ Derrick, the file was already updated. Pls go ahead and download it.
nathaniel Says:
November 6th, 2008 at 10:12 pm
Was just wondering if we could have a tilelist on there and and link the xml file to that list so we can get a small preview of what is coming b4 we see it.

Really good tutorial. I’ll definitely link back 2 this from my site.
nathaniel Says:
November 6th, 2008 at 10:14 pm
oh please pardon me, I am new to AS and Flash…
Adam Says:
November 11th, 2008 at 6:46 pm
I’ve used a version on this type of slideshow for a few projects now…I’ve also been trying to extend it a little bit so that it can also show numbered thumbnails that can be clicked and fade to the appropriate picture in the sequence…

here’s my code…
private function onXMLLoadComplete(e:Event):void {
xmlSlideshow = new XML(e.target.data);
slideCount = xmlSlideshow..image.length();
switchSlide(null);

for (var i:int = 0; i < slideCount; i++) {

var thumb = this.addChild(new Thumb());
thumb.name = “thumb” + i;
thumb.x = X + (SPACE * i);
thumb.y = Y;

thumb.theNum.text = i + 1;
thumb.buttonMode = true;
thumb.mouseChildren = false;
thumb.addEventListener(MouseEvent.CLICK, onClick);
}
}

private function onClick(e:MouseEvent):void {
var currentBtnName:String = e.currentTarget.name;
var splitName:Array = currentBtnName.split(“b”);
var btnNumber:int = splitName[1];

switchSlide(null);
}

this just adds Thumb movieClips to the movie and puts an onClick event on them to call the same function as the switchSlide function…how can I get this to switch to the corresponding picture?

Thanks in advance…
Adam Says:
November 11th, 2008 at 6:53 pm
Actually I changed my onClick code to this…

private function onClick(e:MouseEvent):void {
if(slideTimer.running) {
slideTimer.stop();
}

var currentBtnName:String = e.currentTarget.name;
var splitName:Array = currentBtnName.split(“b”);
var btnNumber:int = splitName[1];

slideLoader = new Loader();
slideLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, fadeSlideIn);
slideLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress);
slideLoader.load(new URLRequest(xmlSlideshow..image[btnNumber].@src));
}

This changes the picture but it doesn’t fade like the other ones.
Audrey Says:
November 19th, 2008 at 2:29 pm
Hi – great tutorial! This will help for the base of a lot of projects. I’m just learning AS3, and I’m a cross between a designer/programmer, so it’s taking me awhile to get the hang of things. If I wanted to change up the tween a bit, how would I do this? I would like to do a solarized effect. I can do this on the timeline using filters, but not sure how to do in code. Generally I just change the Brightness, Contrast on the Adjust Color filter from 0 to 100 during the tween. Any ideas?
Audrey Says:
November 19th, 2008 at 3:15 pm
Also, when you change the Fade time -

// fade time between slides
const FADE_TIME:int = 1;

The descriptions pop up before the photos. I’m using the first version of the gallery you put up without the extra features.
kopetkai Says:
November 20th, 2008 at 11:50 pm
can this be made to go to a random image?
Stephanie Says:
December 5th, 2008 at 8:09 pm
Great slideshow! I’m new to AS3 and XML but this tutorial is the only one I’ve been able to understand thanks to the comments! However, I’m wanting to make some tweaks to do the following (I know I’m picky, but I know there’s ways to do this since I’ve seen it before in finished shows):

1. Fade the non-current container out so if different sized images are used you don’t see what was just shown (using the removeChild script from the first part, it works once the 3rd image is shown, but not on the 2nd)

2. I’d rather use a randomization of images so the slideshow is not always in the same sequence. Is this possible?

3. Is there a way to link to pages not yet published online (still building the site I want to link images to) so that they work correctly when uploaded to the web etc without having to re-write the XML data to reflect such?

4. What would be the best way to center the images (not all the same size)?

I appreciate everything you can help with now and already! Thanks!
Balaji Says:
December 15th, 2008 at 12:11 pm
Great thanks…. for a nice work..
Is it possible to add external SWF file, instead of JPG images….
if possible,Can anybody help me…..
Jonwah Says:
January 23rd, 2009 at 5:38 pm
Hi Rafael,

Thank you for the 2 slideshow tutorials, they have proved very useful. I have adapted them for a project I’m working on but have hit a problem. I need to empty the currentContainer before the:

” currentContainer.addChild(slideLoader.content); ”

loads in the next image (or in my case a swf) into the same currentContainer. I have tried using the removeChild (in many different ways) but I cannot reference the container’s content, the closest I get is removing the container itself rather than it’s content.

Any thoughts…?
Jon Says:
January 28th, 2009 at 12:22 pm
Hi Rafael,

Great slideshow and very useful. I’m new to AS3 and am trying to adapt parts of the code. 2 days of trying to solve the following problem so far, so time to ask for help.

Can you explain how to remove the contents of the currentContainer (sprContainer2 or sprContainer1) before adding in the new content. The loaded content seems to load “on top of” of an earlier piece of loaded content. This is causing me problems as I am loading in swfs rather than images and have type on a transparent background (therefore you see the earlier swf’s type underneath.

I have tried using the removeChild but I keep removing the container rather than the swf within.

Any help would be greatly appreciated. Many thanks.
Fobio Says:
February 10th, 2009 at 3:16 am
This is excellent is it possible to use this adding external SWF file, instead of JPG images….

Thank you ..
Jozias Says:
February 11th, 2009 at 3:37 pm
Hello Rafael,

Thanks for this powerful and usefull tutorial.

Like Andreb I tried to change the time for each slide, but I don’t understand where excatly to put the code for the script you posted.

Do you have an example where to place it?

Regards
Vincent Ogloblinsky Says:
February 23rd, 2009 at 9:42 pm
I fix today the memory leak if the trick is not available, these lines solved my memory leak problem:

in switchSlide function, after swapchildren the two sprite containers:

mcSlideHolder.swapChildren(sprContainer2, sprContainer1);

add this:

if(sprContainer1.numChildren > 0)
{
sprContainer1.removeChildAt(0);
}

if(sprContainer2.numChildren > 0)
{
sprContainer2.removeChildAt(0);
}

Hope this helps

Regards
William Owens Says:
March 2nd, 2009 at 2:17 pm
Vincent — I handled the memory leak problem the same way. However, I not only removed the object from the display list but also removed it from RAM. The code is placed in the same location:

if (currentContainer.numChildren > 0) {
var slideObjRef:DisplayObject = currentContainer.getChildAt(0);
currentContainer.removeChildAt(0);
slideObjRef = null;
}

This is discussed in detail on page 63 of the “Learning ActionScript 3.0″ book.
mara Says:
March 5th, 2009 at 1:48 pm
Great tutorial! I have one Problem: How can i modificate this source that the slideshow doesn’t loop and stop after last slide? I have tried with (var repeatCount:int = 1;) but it doesn’t work! Can anybody help me???
Mara
Alex Says:
March 5th, 2009 at 7:54 pm
Awesome…memory leak woes have been solved!
Masterjonte Says:
March 31st, 2009 at 9:41 pm
Nice…tutorial…it works very good! Anyone know how to solve this: If a picture is missing and the xml file is pointing out that missing file how can we ignor it? Then the application should try to load the next one. Is it possible with this code to make a check somewhere?
Rafael Nünlist Says:
April 2nd, 2009 at 6:13 am
@ Masterjonte: For that case you’d have to listen for a IOErrorEvent and then switch to the next slide. So that would mean, that you have to add the following line after adding the progress event listener to the Loader object:

slideLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioError)

And then you could add a function like this:

function ioError(ioError:IOErrorEvent):void {
nextSlide()
}
Jorge Londono Says:
April 11th, 2009 at 11:10 pm
Thanks, excelent tutorial.

Please, How change size for resolution of user, full screen?
Jasen Burkett Says:
April 15th, 2009 at 1:32 am
I would like to use this, but here is my situation. I need to size it down and have it to get its source from a mysql database. (basically a php file will out put a xml file) anyway….

I have a list component that is populating with ‘gallery’ names. This then once clicked would feed the proper info to the slideshow which woudl load the images from that gallery.

is that possible?
thanks
alexxcz Says:
April 20th, 2009 at 12:11 am
Nice slideshow!
Thanks for sharing!
Alem Otr Says:
April 29th, 2009 at 6:09 pm
Can someone tell me how to change script to load xml file from swf?

Like this or similar:

slideshow.prt2.swf?=slideshow-data.xml

thanks

(sorry for my english)
Alem Otr Says:
April 29th, 2009 at 6:12 pm
Can someone tell me how to change script to load xml file from swf?

Like this or similar:

slideshow.prt2.swf?=slideshow-data.xml

thanks

(sorry for my english)

(I forget check e-mail notify)
Josh Says:
April 29th, 2009 at 6:54 pm
I was wondering how to set the description to be visible at all times, I’ve got it to stay when moused over/out but not visible @ all times.
any help would be appreciated.

Thanks,

Josh
Rafael Nünlist Says:
April 30th, 2009 at 1:06 pm
@Alem Otr: You can access a flashvariable like this: root.loaderInfo.parameters.yourFlashVariableName.
For the loading you’d write it like this:
xmlLoader.load(new URLRequest(root.loaderInfo.parameters.yourFlashVariableName));

@Josh: Just remove the MouseEvent Listeners and position the Sprite wherever you want
Alem Otr Says:
April 30th, 2009 at 2:40 pm
Rafael

Thanks a lot
Harkonenn Says:
May 6th, 2009 at 8:04 pm
This is a great tutorial, and very useful application!

I have 2 questions/problems.

I’m adapting this for use in my personal gallery, but the way that I’ve set up the page requires that I use ‘wmode’,'transparent’ to allow a div background image to bleed into the SWF.

When this is set to ‘window’ the transition between slides is fine, however, with ‘transparent’ there’s a brief flicker. The current slide goes to an alpha of 0, then immediately reappears and fades out.

My second problem is that sometimes the previous and next buttons require a double click. This is perhaps due to the fact that made the following code change to always start the slideshow paused:

function onSlideFadeIn():void {
// check, if the slideshow is currently playing
// if so, start the timer again
if(bolPlaying && !slideTimer.running)
// was previously slideTimer.start();
// but I wanted to disable the slideshow
// i.e. always be paused
slideTimer.stop();
}

I’m not very concerned with the second issue, but I would like to solve the flickering problem.

Thanks again!
Mechan Says:
June 5th, 2009 at 7:42 pm
Hello. I’m trying to get this to work with swf files but i can’t get it right…
I managed to load the swf files but the ones with video in them just won’t shut up and die :p

I guess that all the work needs to be done in the following lines. I’m attaching the original source file script because mine got really messy.

———————————————————————-

function clearLoader():void {
try {
// get loader info object
var li:LoaderInfo = slideLoader.contentLoaderInfo;
// check if content is bitmap and delete it
if(li.childAllowsParent && li.content is Bitmap){
(li.content as Bitmap).bitmapData.dispose();
}
} catch(e:*) {}
}

function addSlideContent():void {
// empty current slide and delete previous bitmap
while(currentContainer.numChildren){Bitmap(currentContainer.getChildAt(0)).bitmapData.dispose(); currentContainer.removeChildAt(0);}

// create a new bitmap with the slider content, clone it and add it to the slider container
var bitMp:Bitmap = new Bitmap(Bitmap(slideLoader.contentLoaderInfo.content).bitmapData.clone());
currentContainer.addChild(bitMp);
}

———————————————————————-

Can anyone help me out with this?
Lila Says:
July 20th, 2009 at 6:48 pm
I used this gallery but somebody knew how to make this:

when all my photos play one time, could be stop?

sorry for my english

i hope you can hel me
Lila Says:
July 20th, 2009 at 6:48 pm
How to stop this Slideshow after 1 cycle?
Scott Says:
July 21st, 2009 at 8:47 pm
Just wanted to say this tutorial was extremely helpful. Thanks!
Scott Says:
July 22nd, 2009 at 4:24 pm
Also, how would I go about setting the slides to display randomly?
Anton Says:
August 6th, 2009 at 1:16 pm
Hi, great tutorial, ive used the code to adapt it to my website. I was wondering if there its possible to make a wipe out transition for the slides
Anton Says:
August 6th, 2009 at 1:34 pm
or scroll effect, does anyone have a code example?
Vic Says:
August 11th, 2009 at 3:02 pm
Hello Rafael,

Thanks for this wonderful tutorial. I have a doubt though, instead of directing to an url based on the click, I want to show the larger/original size of the the image clicked on a full screen mode. How do I go about it? Can you or anybody help me with this? Any help would be greatly appreciated. Thanks.

P.S. Also, thanks to Vincent Ogloblinsky and William Owens for their Memory Leak work around, it worked great and helped me to a great deal.
senim Says:
August 18th, 2009 at 7:13 pm
It is really help full Tutorial. Thanks a lot.
@ Alem Otr or Rafael could you send me please the changed part of this Script? It doesn’t work by me or anyone who used swf too. I am thankful for any help.
Jeff Says:
August 26th, 2009 at 1:14 pm
Hi…

Did anyone manage to get .swf files loaded instead of image files?

I’m assuming it must be to do with the script below

function addSlideContent():void {
// empty current slide and delete previous bitmap
while(currentContainer.numChildren){Bitmap(currentContainer.getChildAt(0)).bitmapData.dispose(); currentContainer.removeChildAt(0);}

// create a new bitmap with the slider content, clone it and add it to the slider container
var bitMp:Bitmap = new Bitmap(Bitmap(slideLoader.contentLoaderInfo.content).bitmapData.clone());
currentContainer.addChild(bitMp);
}

any help would be appreciated

thanks
Chachie Says:
August 29th, 2009 at 7:02 am
Rafael, wondering if you can help me create this code to open in new window instead of turning from home page where you have to hit back to view home page. I would rather have a new window open but can’t figure out how to code it. here is the code:
fm_button.visible = false;

// Tweener
// http://code.google.com/p/tweener/
import caurina.transitions.Tweener;

// To make a link to an external page, write label as “Label|URL” in array value
// EXAMPLE 1: “Flash |http://www..com”
// EXAMPLE 2: “new window|http://www..com”
var menu_label:Array = new Array(“WELCOME|http://www..com”, “CONTACT” );
var total:Number = menu_label.length;
var center_x:Number = 470;
var center_y:Number = 800;
var i:Number = 0;
var page:Number;
var main_menu:MovieClip = new MovieClip();
stage.addChild(main_menu);

for( i = 0; i < total; i++ )
{
var btn = new cp_button();
btn.name = “cp_btn” + i;
btn.x = center_x;
btn.y = center_y;

btn.scaleX = btn.scaleY = btn.alpha = 0;
btn.item_no = i;

btn.cp_button_pic.gotoAndStop( i + 1 );
btn.addEventListener( Event.ENTER_FRAME, btn_enter );
btn.addEventListener( MouseEvent.ROLL_OVER, btn_over );
btn.addEventListener( MouseEvent.ROLL_OUT, btn_out );
btn.addEventListener( MouseEvent.CLICK, btn_click );

var each_substring:Array = menu_label[i].split(“|”);
btn.cp_button_label.fm_label.text = each_substring[0];
btn.item_url = each_substring[1];
main_menu.addChild(btn);
}

function btn_over(e:MouseEvent):void
{
e.target.over = true;
}

function btn_out(e:MouseEvent):void
{
e.target.over = false;
}

function btn_click(e:MouseEvent):void
{
var mc = e.target.parent;
if( mc.item_url != undefined )
navigateToURL( new URLRequest( mc.item_url ), “_parent” );
else
change_page(mc.item_no);
}

function btn_enter(e:Event):void
{
var mc = e.target;
if( mc.over == true )
mc.nextFrame();
else
mc.prevFrame();
}

function change_page(no:Number):void
{
page = no + 1;
play();
}
lilien Says:
September 1st, 2009 at 12:01 pm
hi,

great tutorial. i’m using different sized images and using the current code you can still see the previous image. is there anyway to make sure that each image fades out completely?

cheers lilien
Ishia Says:
September 7th, 2009 at 11:32 pm
Hey Rafael very nice Tutorials:) Thanks alot. I am using the concept of the first tutorial with some minor changes on my personal website however I am having a problem getting to actually display. I can view the SWF file and it works just fine also the HTML file. The problem is when I embed it into my index file it does not play. Do you have any ideas on why this could be happening. Thanks
Tru Says:
September 9th, 2009 at 11:20 pm
I was just wondering if we can include the ability to read descriptions as html (rather than plain text) I’de like to boldface some of the words in the the XML file.?

Awesome Tutorial!

Thanks
Tru
Tru Says:
September 10th, 2009 at 12:46 am
Rafael, have you been able to figure out how to remove previous images when new ones have loaded, this would help when images are not identical sizes.

Tru
Tru Says:
September 10th, 2009 at 1:57 am
For those wanting to get rid of the current image try this: ==> add currentcontainer.alpha = 0 above its current location as shown below:

———————————————————————-

// change slide index
intCurrentSlide = intSlide;

// check which container is currently in the front and
// assign currentContainer to the one that’s in the back with
// the old slide below is where I duplicated currentcontainer.alpha = 0
currentContainer.alpha = 0;
if(currentContainer == sprContainer2)
currentContainer = sprContainer1;
else
currentContainer = sprContainer2;

// hide the old slide
currentContainer.alpha = 0;
Tru Says:
September 10th, 2009 at 2:58 am
Never Mind the question about the HTML, I was able to get Boldfacing to work using </b> & <b>
Scott Says:
September 21st, 2009 at 6:37 am
How exactly do you go about changing the image size?
Also, is there a way to get the image to display in the center of the stage (at least horizontally)?

Lets say that I want to be able to put images sized 800×533 pixels, what would I change/add to the code?
Mike Peters Says:
September 28th, 2009 at 1:34 am
Is there a way to modify this code to allow the use of external image locations in the XML file. I want to store all images on a image server website to share across multiple websites

eg
http://wwww.image.mywebsite.com/file/tree.jpg
SouthWind14 Says:
October 23rd, 2009 at 2:28 pm
I saw another blog review this one a while back and they liked it too. ,
Greg Says:
November 7th, 2009 at 3:46 am
I’m trying to find a way to create two movieclips that load the same slideshow image. Essentially, currentContainer and a duplicateContainer. So when a new image loads, it is placed in both movieclips at the same time, same fade in, etc…

My current attempts result in the image being loaded into one movieclip or the other, but not both at the same time.

Anyone know what needs to be done to achieve this?

Thanks,
Steve Says:
November 10th, 2009 at 2:02 pm
I got the underneath images to disapear and also center the images. Note I loathe AS as it is so complicated for me, so sure to be a better way to do it…

I modified the original downloadable source file on this page and made the following modifications. Note:I am not sure if the code lines will wrap here or break to a new line, so correct if necessary…

replace:

// reference to the current slider container
var currentContainer:Sprite;

with:

// reference to the current slider container
var currentContainer:Sprite;
// reference to the non current slider container
var nonCurrentContainer:Sprite;

replace:

if(currentContainer == sprContainer2)
currentContainer = sprContainer1;
else
currentContainer = sprContainer2;

with:

if(currentContainer == sprContainer2) {
currentContainer = sprContainer1;
nonCurrentContainer = sprContainer2;
} else {
currentContainer = sprContainer2;
nonCurrentContainer = sprContainer1;
}

replace:

var bitMp:Bitmap = new Bitmap(Bitmap(slideLoader.contentLoaderInfo.content).bitmapData.clone());
currentContainer.addChild(bitMp);

with:

var bitMp:Bitmap = new Bitmap(Bitmap(slideLoader.contentLoaderInfo.content).bitmapData.clone());
currentContainer.addChild(bitMp);
nonCurrentContainer.alpha = 0;
currentContainer.x = (stage.stageWidth / 2) – (currentContainer.width / 2);
currentContainer.y = (stage.stageHeight / 2) – (currentContainer.height / 2);
Stefan Says:
November 13th, 2009 at 10:38 am
Thanks for that script! I´m a bloody beginner and it helped me to understand many things! My suggestion: write a part 3 and make a sequel out of it (if you´ve the time). I added a slide navigation (1,2,3 …) but it´s spaghetti-code … so …
Stefan Says:
November 13th, 2009 at 3:24 pm
Me again.

I found a bug, which you can trace with:
trace(sprContainer1.numChildren);
trace(sprContainer2.numChildren);

You will see that after a few minutes of rotating, you will have dozens of childs and your cpu is under heavy duty by flash.exe

Here my suggestion (i´m a beginner, so be careful!):

Remember the last container with a new sprite oldContainer.

//Hide the old slide
currentContainer.alpha=0;
oldContainer=currentContainer;

and in the function fadeSlideIn delete unwanted childs:
if (oldContainer.numChildren==1) oldContainer.removeChildAt(0);

If you then delete all tweens before starting a new one …

Tweener.removeAllTweens();
//Fade the current container in and start the slide timer when the tween is finished
Tweener.addTween(currentContainer, {alpha:1, time:FADETIME, onComplete:onFadeSlideIn});

… you don´t need any checks like if(!Tweener.isTweening(currentContainer)){

… so the user don´t has to wait, when he want´s to see the next slide …
Matthias Kappenberg Says:
January 14th, 2010 at 11:22 pm
@ memory leaks, tested on ie8, ff, chrome:
Please try something like this one
(if useless delete the comment):
———————————————
function fadeSlideIn(e:Event):void {
// ADDITIONS BEGIN
// —-
// remove unused childs
while(currentContainer.numChildren)
{currentContainer.removeChildAt(0)};
// force immediate garbage collection
// see grant skinner’s article at
// http://www.gskinner.com/blog/
// archives/2006/08/as3_resource_ma_2.html
try {
new LocalConnection().connect(‘foo’);
new LocalConnection().connect(‘foo’);
} catch (e:*) {}
// —
// ADDITIONS END
// add loaded slide from slide loader to the
// current container
addSlideContent();
…….
———————————————
and
BIG THANKS to all the friendly people here
REALLY BIG THANKS to the tech labs developer/s
Marish Says:
January 22nd, 2010 at 10:53 am
My timer is malfunctioned. When i press the pause button, it works (turns invisible, play button becomes visible, and en the Infobar prints “Slideshow Paused”, however, the timer (slideTimer) does not stop, and the slideshow continues due to the pause. What’s wrong?

// ——————–[ CODE (AS3) ]———————-\\

function togglePause (evt:MouseEvent):void
{
if (bolPlaying == true)
{
mcInfo.btnPlay.visible = true;
mcInfo.btnPause.visible = false;

bolPlaying = false;
mcInfo.lbl_loading.text = “Pause”;
slideTimer.stop();
}

else if (bolPlaying == false)
{
mcInfo.btnPlay.visible = false;
mcInfo.btnPause.visible = true;

bolPlaying = true;
mcInfo.lbl_loading.text = “Neste bilde om ” + timerDelay / 1000 + ” sek.”;

slideTimer.reset();
slideTimer.start();
}
}

———————————————————-

Thanks,
Norwegian dude
Warrior_Elite Says:
January 26th, 2010 at 5:39 pm
This tutorial is great! Good job! I want to add a few buttons on the side so that I can go to specific slides? Do I have to add a name/ID on the XML, and reference it with the buttons? Or do have to create a third child to hold a specific image?

All help is greatly appreciated!
pominette Says:
February 21st, 2010 at 5:44 pm
It is possible to put a button full screen please??
How to make
Thank you very much of your answer
nate Says:
March 11th, 2010 at 12:19 am
how can i make this gallery a true fit gallery so it can fill the whole screen ??
Gemma Says:
April 15th, 2010 at 2:23 pm
Thank you for the tutorial Rafael.
I know you have a lots of requests but if you or anybody have a bit of time to explain how to call swf would be very appreciate.

Cheers,
Gemma
Kunal Shewale Says:
May 10th, 2010 at 10:35 am
Hey, Can you please help me on modifying the above tutorial to following requirements.

1) I need to add n number of images but only 25 images should be visible at any time.
2) Images thumbnail could move left and right as per the mouse move direction.
3) To navigate between the pages (25 image thumbnail on each page) on click of back and next.

I am working on it but finding it difficult to customize the above code. I am novice to Action Script 3.0.

Any help would be highly appreciated.

Thanks in advance.
Parasar Says:
June 1st, 2010 at 9:04 am
Thanks a lot Rafael

Tecinfor » Blog Archive » Slideshow XML /AS3 Says:
September 11th, 2008 at 11:32 am
[...] Se você ainda não leu a primeira parte tutorial ainda, você deve fazê-lo antes de continuar. Você pode lê-lo aqui. Start Slide Show with PicLens Lite Tags: adobe, as3, flash, Slideshow, [...]
Extending the Actionscript 3 / Flash CS3 Slideshow with XML - The … at Flash Designers Says:
May 6th, 2009 at 11:35 am
[...] original here: Extending the Actionscript 3 / Flash CS3 Slideshow with XML – The … [...]
Best of FREE Flash Tutorials - Hidden Pixels Says:
May 7th, 2009 at 10:26 am
[...] Extending the Actionscript 3.0 / Flash CS3 Slideshow with XML [...]

Flash Platform and ActionScript Tutorials

Extending the Actionscript 3.0 / Flash CS3 Slideshow with XML

Requirements

Adjust XML structure

Adding new objects

Adding new variables

Init function

onXMLLoadComplete function

NextSlide/PreviousSide function

SwitchSlide function

FadeSideIn function

OnSlideFadeIn function

TogglePause function

GotToWebsite function

Note

Full code with comments

Related posts:

About the Author

73 Comments For This Post

3 Trackbacks For This Post

Leave a Reply

Become an Author

Suggest a Tutorial

What's Coming Next

0 Subscribers