Create a Flash AS3 Slideshow with XML

Create a Flash Actionscript 3.0 Slideshow with XML

Wed, Jul 23, 2008

This tutorial shows you how to create a simple slideshow using as3/flash and xml like this one. In order to complete this tutorial you can download the source files here.

In our xml file, we want to store the path to the slides and a description for each of it. So let’s take a look at the example file

<?xml version="1.0" encoding="UTF-8"?>

  <slideshow>

<image src="images/fly.jpg" desc="Fly"/>

<image src="images/mouse.jpg" desc="Computer mouse"/>

<image src="images/country.jpg" desc="Country"/>

<image src="images/rope.jpg" desc="Rope"/>

<image src="images/flower.jpg" desc="Flower"/>

</slideshow>

On the first line we describe the version and the encoding of the file. Flash uses UTF-8 for encoding, so we should edit the file in UTF-8 only to avoid character encoding problems.

The first node defines the root node of the xml file and contains further nodes. These are the images with the attributes src and desc. Okey, that’s how the structure of the xml looks like, let’s move on to the flash file.
The stage has a movieclip which contains the textfields which will show us the description of the slides, the loading process and the slide count later. Under it you will find a mask layer which masks an empty movieclip, where our slides will be loaded into. And on our first layer we have the whole script, at wich we’ll take a look now.

As always, we need to import the necessary librarys first. In our case, we only have caurinas tweener engine which will later be used to fade in the slides.

import caurina.transitions.Tweener;

Then we define two constants. One for the delay between the slides in milliseconds and the other one for the fade time between the slides in seconds. You can change them freely according to your needs

const TIMER_DELAY:int = 5000;
const FADE_TIME:int =	1;

Now we need to set some variables for the slideshow. We’re beginning with a variable, that holds a reference to the current container which holds the slide and is in the front

var currentContainer:Sprite;

To know which slide is currently active, we set a integer. We start at -1 because the function switchSlide will go to the first slide, which is 0.

var intCurrentSlide:int = -1;

The total count of the slides will be stored in a integer variable

var intSlideCount:int;

Then we need to define a timer, which calls the switchSlide function after the delay time we set in the constant

var slideTimer:Timer;

To have a nice fade effect, we need two containers for the slides. Each one will contain one slide

var sprContainer1:Sprite;
var sprContainer2:Sprite;

Next we set a variable for loading our slides

var slideLoader:Loader;

The next variable defines the path to the xml file

var strXMLPath:String = "slideshow-data.xml";

xmlLoader will be used to load the xml file

var xmlLoader:URLLoader;

And finally we need a variable to store the xml stuff

var xmlSlideshow:XML;

Now we need to initialize the whole slideshow. First, we create a new urlloader for the slideshow xml file, add an event listener when it’s completely and load it

xmlLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
xmlLoader.load(new URLRequest(strXMLPath));

Then we create the time with the delay from the constant and add an event listener for the timer event

slideTimer = new Timer(TIMER_DELAY);
slideTimer.addEventListener(TimerEvent.TIMER, switchSlide);

Next we 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);

And last of all, we keep a reference of the container which is currently in the front

currentContainer = sprContainer2;

Once our xml file is fully loaded, the function onXMLLoadComplete will be called. This function assigns the received data to xmlSlideshow, gets the total slide count and stores it in the variable intSlideCount. Then it’ll call the function switchSlide which will immediately load the next slide without waiting on the timer event.

xmlSlideshow = new XML(e.target.data);
intSlideCount = xmlSlideshow..image.length();
switchSlide(null);

Ok, let’s move on to the switchSlide function. This function will be called every time the timer has reached the delay and fires the timer event. First of all, we check, if the timer is running and stop it, because we need to wait until the next slide will be loaded and faded in. Then we check if there are any slides left. If not, we go back to the beginning. Now we need to figure out, wich container is currently in the front and assign currentContainer to the one, that’s in the back containing the old slide. Next we hide the old slide and bring it to the front.

if(slideTimer.running)
	slideTimer.stop();

if(intCurrentSlide + 1 < intSlideCount)
	intCurrentSlide++;
else
	intCurrentSlide = 0;

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

currentContainer.alpha = 0;
mcSlideHolder.swapChildren(sprContainer2, sprContainer1);

Then we create a new loader for the slide. We add an event listener when it’s loaded and an event listener for the progress of the loading. Next we load the picture with a urlrequest that contains the source path to the current image. And last of all, we show the description of the slide on the lbl_description and update the current number of the slide on lbl_count.

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

mcInfo.lbl_description.text = xmlSlideshow..image[intCurrentSlide].@desc;
mcInfo.lbl_count.text = (intCurrentSlide + 1) + " / " + intSlideCount + " Slides";

The showProgress function is quite small. It’s just one line that calculates the percentage of the bytes loaded from the current slide and displays it on the lbl_loading

mcInfo.lbl_loading.text = "Loading..." + Math.ceil(e.bytesLoaded * 100 / e.bytesTotal) + "%";

The last function is fadeSlideIn and will be called once the picture is fully loaded. First, we add the loaded slide from the slideLoader to the current container. Then we clear the preloader text. And finally, we fade the current container in with caurinas tweener engine and start the slide timer when the tween is finished. Like this, we’ll have an endless loop, which will switch the slides.

currentContainer.addChild(slideLoader.content);
mcInfo.lbl_loading.text = "";
Tweener.addTween(currentContainer, {alpha:1, time:FADE_TIME, onComplete:function(){ slideTimer.start();} });
}

That was already it. I hope you enjoyed reading the tutorial. Please feel free to ask questions or leave a feedback.

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:int =	1;

// 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;
// url to slideshow xml
var strXMLPath:String = "slideshow-data.xml";
// slideshow xml loader
var xmlLoader:URLLoader;
// slideshow xml
var xmlSlideshow:XML;

function init():void {
	// 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, switchSlide);

	// 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;

}

function onXMLLoadComplete(e:Event):void {
	// 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(null);
}

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 = "";
	// fade the current container in and start the slide timer
	// when the tween is finished
	Tweener.addTween(currentContainer, {alpha:1, time:FADE_TIME, onComplete:function() { slideTimer.start(); }});
}

function switchSlide(e:Event):void {
	// check, if the timer is running (needed for the
	// very first switch of the slide)
	if(slideTimer.running)
		slideTimer.stop();

	// check if we have any slides left and increment
	// current slide index
	if(intCurrentSlide + 1 < intSlideCount)
		intCurrentSlide++;
	// if not, start slideshow from beginning
	else
		intCurrentSlide = 0;

	// 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;
	// 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) + "%";
}

// init slideshow
init();

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.

94 Comments For This Post

Andy Says:
July 28th, 2008 at 5:17 am

So the only .as file I need is the Tweener?

Chris Says:
August 3rd, 2008 at 12:26 am

Getting this error:

“Error with autoFormat near line:intCurrentSlide = 0;

Rafael Nünlist Says:
August 3rd, 2008 at 6:54 pm

@Andy: No, the Tweener class will import all the necessary ones. Don’t delete any of the files if you want to stay on the save side.

@Chris: Remove the comment on the line #85

83. if(intCurrentSlide + 1 < intSlideCount)
84. intCurrentSlide++;
85. // REMOVE THIS ONE! if not, start slideshow from beginning
86. else
87. intCurrentSlide = 0;

mike Says:
August 8th, 2008 at 4:37 am

I’m having issues using the caurina classes. I tried adding them as a document class to the movie, linking to the transitions folder through as3 preferences, taking them out of the folders and changing the package names, etc., and of course using it the way it expanded. can you give more details on how to use them?

thanks.

Rafael Nünlist Says:
August 8th, 2008 at 4:49 pm

@mike: Your problem isn’t related with the slideshow. You can’t set the Tweener engine as a document class. I think, this should help you out:
http://www.adobe.com/devnet/flash/quickstart/external_files_as3/

mike Says:
August 9th, 2008 at 2:52 am

the problem turned out to be a corrupted program. once I re-installed flash, all connections began to work. I couldn’t connect to any external actionscripts it turned out. all’s well! thanks for your prompt reply and excellent tutorial!

Aloysio Says:
August 16th, 2008 at 4:15 am

Hi Rafael! First I want to say thats you do a good work. Congrats. Well.. when slides begin and it will change to next image I see all images loaded when it changes. Do you know what I need to do to fix it?

Thanks!

Rafael Nünlist Says:
August 16th, 2008 at 12:00 pm

Hey Aloysio

Thanks for your feedback. Did you made any changes to the code? The example ( http://www.thetechlabs.com/tutorials/files/flash/rnunlist/slideshow/slideshow.html ) should be working fine.

Greetings

Tom Says:
August 17th, 2008 at 5:43 am

Thanks for sharing your excellent code and also amazed by your good quality pictures. Wondering how can I enable mouse function, for example, when double-click any image, it would load a corresponding website as defined in the xml file. Also wondering how can I add some button functions, for example, for your 5 pictures, when click button#1, the movie would stop at image#1, etc., and you can also pause/continue to auto play the movie. Thanks a lot in advance.

Aloysio Says:
August 17th, 2008 at 8:56 pm

Hey, No.. i’m not change the code.I note that when slides begin I see the firs image that is a Bee, the next is a Mouse, but when it changes I see the previous image that is Bee and it to the nexts images, I only see the previous images when the slides load new image! Understand?

Sorry my bad english!

Aloysio Says:
August 17th, 2008 at 8:58 pm

I note that when holder swap the image the last image not desapear. I think that when the images changes the last needs to desapear to apear the new loaded image!

Rafael Nünlist Says:
August 18th, 2008 at 8:11 am

Hey,

@ Aloysio
No, this is actually the right behaviour.
We have 2 holders. On in the front, and one in the back. Then we load the first slide in the container that’s in the back. Once it’s loaded, we switch the order and bring it to the front and fade it in. Without this, you wouldn’t have a nice fade in effect of your slides. You need to have the two containers in order to do that

@Tom
It’s quite simple to implement your functions. Maybe there will be another part of this tutorial that will cover these. Be sure to check back later

cheers

Tom Says:
August 18th, 2008 at 2:54 pm

Thanks for your quick response. Can you show me how to enable the mouse? I added the following code, but the HandCursor does not appear.

import flash.events.MouseEvent;
currentContainer.buttonMode = true;
currentContainer.useHandCursor = true;
currentContainer.mouseChildren = false;
currentContainer.addEventListener(MouseEvent.DOUBLE_CLICK, gotoWebside);
Thanks.

Rafael Nünlist Says:
August 19th, 2008 at 8:45 am

@ Tom: Easiest way to to that: Create a new button, add a key frame to the “active” frame, draw a rectangle as big as your wished button area. Drag the button on the stage on top of everything. Give it an instance name and add the following to the init() function of the slideshow:

your_invisible_button.doubleClickEnabled = true;
your_invisible_button.addEventListener(MouseEvent.DOUBLE_CLICK, function():void {trace(“YO”);navigateToURL(new URLRequest(“http://www.google.com”), “_blank”);});

Replace your_invisible_button with the instance name of course

cheers

Tom Says:
August 20th, 2008 at 3:37 pm

Thank you. The invisible button works.

Jan Says:
August 25th, 2008 at 3:39 pm

Rafael: Wondering how to avoid xml cache issue. The IE and/or Firefox browser would still show the old images even after the slideshow-data.xml file has been updated.

Rafael Nünlist Says:
August 26th, 2008 at 8:03 am

Hey Jan
Yes, that’s a cache issue. You can easily solve this problem by adding a parameter to the loaded images/xml files.

Like this:

var strXMLPath:String = “slideshow-data.xml?d=” + String(new Date().time);

And of the image loading:

slideLoader.load(new URLRequest(xmlSlideshow..image[intCurrentSlide].@src + “?d=” + String(new Date().time)));

Greetings

Jan Says:
August 27th, 2008 at 3:21 pm

Thank you. Following above suggestion to resolve the cache issue, I got the following error message:
Error #2044: Unhandled ioError:. text=Error #2032: Stream Error. URL: file:///D|/SlideShow/slideshow-data.xml?d=1219846606983
at slideshow_fla::MainTimeline/init()
at slideshow_fla::MainTimeline/frame1()
Wondering if you have any idea. Regards.

Rafael Nünlist Says:
August 27th, 2008 at 9:00 pm

Hey Jan

Try putting your files online and request them from your browser. Like this, it should work just fine.
For developing, you don’t have to use the caching

greetings
Rafael

Aloysio Chagas Says:
August 31st, 2008 at 11:41 pm

Hello Rafael. I’m back. Well, i take two printscreen to show you what I say times ago. If you look to these images you will see the transitions.

http://img144.imageshack.us/my.php?image=slideshowui9.jpg
http://img262.imageshack.us/my.php?image=slideshow2sj5.jpg

When I load all images and it start again I see all images in background.
You know how do I fix it? =)

Thanks a lot!

alex Says:
September 2nd, 2008 at 8:23 pm

I added a resize image to the fadeSlideIn function but the image in the background stays so yo see 2 images one on top of the other. how I can send the background image alpha to 0? by the way nice component
ty

Rusty Says:
September 2nd, 2008 at 9:26 pm

Rafael, thanks for posting your code, this looks GREAT!! However; I’ve implemented the code and left the browser open and went to lunch, when I returned FF had crashed… didn’t think much of it at the time but did investigate further… it seems that I’m getting a memory and/or cpu leak from the slideshow.

I have no idea if it’s your code causing the memory leak or the tweener class. I have moved the slideshow to it’s own fla and indeed it is sucking memory/cpu at a constant rate. I don’t know if it’s holding onto the images, the tweens or both….. I’m stumped so just figured I’d ask if anyone else had run into this and if a solution had been found.

Any ideas of how to remedy this?

Thanks,

rusty

Brian Says:
September 2nd, 2008 at 9:58 pm

Rafael,

Great code! Is there a way to have it unload the images after transition? Firefox and IE processes are increasing the longer the slideshow is viewed. Anyone else have this issue as well?

Thanks,

Brian

Jarne Says:
September 3rd, 2008 at 9:36 am

Hi Rafael, thanks for the code.
But I’m having one major problem with it: after a while, it begins to lag. It has to do something with the ‘addchild’ I think.
It must remove the previous images after the fade in of the new image is complete… but how? Any help would be greatly appreciated!

Cheers.

Rafael Nünlist Says:
September 3rd, 2008 at 12:42 pm

Hey guys

There seem to be a memory leak in the slideshow. This will be fixed in the next part of the tutorial which will come very soon.

Greetings
Rafael

r Says:
September 6th, 2008 at 12:44 am

yeah..

this slide show has a memory leak.

any thoughts on how to troubleshoot it? i’ve spent 6 hours trying to fix it and nothing is working. has to be the use of the loader?

Carlos Pinho Says:
September 6th, 2008 at 2:16 am

Hi,

The next part of the tutorial will have the solution for the memory leak. It will be published within the next week. So stay tuned…

Joe Says:
September 8th, 2008 at 10:36 pm

If you change the images so they are not all the same size, it breaks the slideshow. Once it cycles through the images once, then they start to overlap and two or three images appear at once.

I am assuming this is because the code does not removeChild from the currentContainer? So the images just keep getting attached, is that correct? I am no AS3 genius, so I could be wrong about the problem, but I do know that it is happening.

Could you email me if you come up with a solution? The email for this comment is the correct one.

Thanks

Rafael Nünlist Says:
September 9th, 2008 at 8:10 am

Hey Joe

Yes, that’s right. But this problem will be fixed in the next part of the tutorial.

Or you can add this line on top of the fadeSlideIn() function:

while(currentContainer.numChildren){currentContainer.removeChildAt(0);}

Greetings
Rafael

alessandro Says:
September 9th, 2008 at 5:35 pm

Dear Rafael thanks for this excellent tutorial. Please when you will workout the second part, can you take a look at the problem of previous images appearing below, as shown here:

http://img144.imageshack.us/my.php?image=slideshowui9.jpg
http://img262.imageshack.us/my.php?image=slideshow2sj5.jpg

thank you very much !

alessandro Says:
September 9th, 2008 at 5:42 pm

ok I figured out myself: just add the following instruction at the beginning of the fadeSlideIn function, like this:

function fadeSlideIn(e:Event):void {
if (currentContainer.numChildren>0) currentContainer.removeChildAt(0);

…

Didn’t test much more, so I can’t be sure 100% but after this modification I’m not having anymore memory leaks …

JNigon Says:
October 8th, 2008 at 6:10 pm

Nice program.

I’m new to flash and AS3, so I’m probably missing something…Where can I resize the show width and height – preferably to full-screen?

I’ve tried modifying the included .html file – no luck.

Thanks!

Lydian Says:
October 27th, 2008 at 6:59 am

Hey guys,

I’ve created an advanced XML news slider. Check the following link. http://www.flashden.net/item/xml-driven-news-slide-show/20094/?ref=cpinho

Renato Says:
October 31st, 2008 at 9:24 pm

Hi there,

I tried to use Alessandro´s idea to solve the memory leak issue, but continues the same thing here.

Any other ideas?

PS: Gongratz for the nice tutorial Rafael!

sonic22 Says:
November 10th, 2008 at 9:26 am

Hi, i’m trying to add a Zoom FX to each image after the fade in, in the “Stealth Time” while the image is shown, i need to add a zoom FX, and after that the fadeIn from the next image (wich is done in the tutorial), could you help me a little??? i’m new in AS3 and i could’n reach it yet.

Thks.

Joey R Says:
December 5th, 2008 at 4:02 am

It need crazy flash skills.

I prefer making flash slide shows with 3rd software such as proshow gold or Flash Gallery Factory.

No complicated skills needed and no need to sit down in front of the computer for hours.

Here I share tutorials using 3rd party flash software that I have found on Ourpix.com

http://www.ourpix.com/xmas/tutorial.html#106

Hope it helps.

Ryan Says:
December 27th, 2008 at 6:59 am

works very well! Easy to plug in, thanks!

das Says:
January 13th, 2009 at 10:55 pm

Great and simple to implement. Could you answer how I could get the first container to completely fade out and then the other container to fade in?

Thanks.

Alex Says:
February 1st, 2009 at 11:07 pm

Great tutorial! Is there anyway to get the flash movie to randomly display the images in the xml file?

Alex Says:
March 4th, 2009 at 8:29 pm

Hi I’ve implemented this slideshow script into an swf I’m making for a company website. The problem of the memory leak is presenting quite a problem. I’ve tried all the suggestions here and I still have FF climbing in memory usage every time a new slide is loaded. If someone has solved this please let me know, or help me figure out what to do to fix it. email me at alex[at]themouseartist.com if you can help. Thanks

Rafael Nünlist Says:
March 4th, 2009 at 8:48 pm

@ Alex: Please Take a look at the second part of the tutorial where the memory leak is fixed.

amit Says:
March 22nd, 2009 at 12:27 pm

awesome…..i just loved it…

tinnu Says:
March 27th, 2009 at 5:49 pm

Its really very helpfull ,thanx a lot.

sean brock Says:
April 6th, 2009 at 11:33 am

Hi First of thanks for this Tutorial it was a massive help in understanding the code not just copying it. But I have a problem it all works on my local pc but when I upload it i get an error url not found error the xml file is the samlocation reletive to the xml file. I am using dreamweaver to do the layout and uploading the slideshow as a flash element. Any help would be great thanks

Roger Says:
April 7th, 2009 at 12:03 am

Having an odd issue. I was able to modify the parameters and images to fit into a site layout. It works great in FireFox and Safari on the Mac. On the PC though in both FireFox and IE, it only loads the background image but the images don’t ‘play’. Any insights?

thanks
– Roger

paulopaiva Says:
April 15th, 2009 at 4:17 pm

1172: Definition caurina.transitions:Tweener could not be found.import caurina.transitions.Tweener;

1120: Access of undefined property mcSlideHolder.mcSlideHolder.addChild(sprContainer1);

1120: Access of undefined property mcSlideHolder.mcSlideHolder.addChild(sprContainer2);

1120: Access of undefined property mcInfo.mcInfo.lbl_loading.text = “”;

1120: Access of undefined property Tweener.Tweener.addTween(currentContainer, {alpha:1, time:FADE_TIME, onComplete:function() { slideTimer.start(); }});

1120: Access of undefined property mcSlideHolder.mcSlideHolder.swapChildren(sprContainer2, sprContainer1);

1120: Access of undefined property mcInfo.mcInfo.lbl_description.text = xmlSlideshow..image[intCurrentSlide].@desc;

1120: Access of undefined property mcInfo.mcInfo.lbl_count.text = (intCurrentSlide + 1) + ” / ” + intSlideCount + ” Slides”;

1120: Access of undefined property mcInfo.mcInfo.lbl_loading.text = “Loading…” + Math.ceil(e.bytesLoaded * 100 / e.bytesTotal) + “%”;

(

bill Says:
April 15th, 2009 at 7:26 pm

so I followed this tutorial and when I upload it to my server it doesnt work in Firefox or safari but it does in chrome and IE i even uploaded the example and it does the same thing any advice?

Carlos Pinho Says:
April 15th, 2009 at 8:41 pm

@bill

Can you post here the script you use in the html page? Maybe you are using <embed></embed> snippets only while at firefox it needs to use <object><param></param></object>.

bill Says:
April 15th, 2009 at 8:47 pm

http://pastebin.com/d219508da

above is the actionscript

I have the file loaded on two ftps

http://your-memory.net/pinnaclesolutions/Erica/erica.html

http://umlan.com/pinnaclesolutions/erica/erica.html

could it be a permission error?
thanks in advance

Carlos Pinho Says:
April 15th, 2009 at 9:13 pm

Don’t know, but i would try to insert in the the following param base=”.” and see if anything changes.

sean brock Says:
April 16th, 2009 at 12:23 am

Hi I can ger my code to work in flash but when i put it on my page in dreamweaver and try to preview it i get
TypeError: Error #1010: A term is undefined and has no properties.
at slideshowworkingxml_fla::MainTimeline/bringslidein()
at slideshowworkingxml_fla::MainTimeline/xmlloaded()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()

I am completly stumped my code is as follows

import caurina.transitions.Tweener;
var xmldata:XML=new XML ;
var xmlloader:Loader=new Loader ;
var urlloader:URLLoader=new URLLoader ;
var container1:Sprite=new Sprite ;
var container2:Sprite=new Sprite ;
var currentcontainer:Sprite=new Sprite ;
var slideindex:int=-1;
var slidecount:int;

var timer:Timer;
const delay=5000;
const fadetime=1;

function startslideshow():void {

urlloader=new URLLoader ;
urlloader.addEventListener(Event.COMPLETE,xmlloaded);
urlloader.load(new URLRequest(“slideshow-data.xml”));
trace();
timer=new Timer(delay);
timer.addEventListener(TimerEvent.TIMER, bringslidein);
container2=new Sprite ;
container1 = new Sprite;
mc_slide.addChild(container1);
mc_slide.addChild(container2);
currentcontainer=container2;
currentcontainer.x = ((currentcontainer.stage.stageWidth / 10) – (currentcontainer.width+150 ));
currentcontainer.y =((currentcontainer.stage.stageHeight / 10) – (currentcontainer.height+100));
container1.x = ((container1.stage.stageWidth/10 ) – (container1.width+150 ));
container1.y =((container1.stage.stageHeight/10 ) – (container1.height+100));

}

function xmlloaded(e:Event):void {

xmldata=new XML(e.target.data);
slidecount=xmldata..image.length();
slidecount = slidecount -1;
trace (slidecount);
bringslidein(null);

}

function slidein(e:Event):void {
trace(“slidein”);
currentcontainer.addChild(xmlloader.content);
Tweener.addTween(currentcontainer, {alpha:1, time:fadetime, onComplete:function() { timer.start(); }});

}

function bringslidein(e:Event):void {
trace(“BRINGSLIDEIN”);
if (timer.running) {
timer.stop();
}

if (slideindex+1<slidecount) {
slideindex++;
} else {
slideindex=0;
}
if (currentcontainer==container2) {
currentcontainer=container1;
} else {
currentcontainer=container2;

}
currentcontainer.alpha=0;
mc_slide.swapChildren(container2,container1);
xmlloader = new Loader();
trace(“slide count “,slideindex);
xmlloader.contentLoaderInfo.addEventListener(Event.COMPLETE, slidein);
xmlloader.load(new URLRequest(xmldata.image[slideindex].@src));

}

startslideshow();

Please any Help would be great

paulopaiva Says:
April 16th, 2009 at 2:58 pm

Oi Carlos
não consegui emplementar o slide show
de qq forma muito obrigado

Kumar Says:
May 7th, 2009 at 8:21 am

Hi,

Nice tutorial on 3d gallery .. thank you very much..

I would like to work on this kind of gallery .. http://www.ubisoft.com

Need help with this or can we do this … Please if possible also can u refer me some tutorials as such .. so that i could follow…

Your help would be much appreciated..

Thanks & Regards
Kumar

rtm Says:
May 8th, 2009 at 6:12 pm

can somebody point where is that second part with fixed memory leaks exactly?

>@ Alex: Please Take a look at the second part of the tutorial where the memory leak is fixed.

Tinku Says:
May 13th, 2009 at 6:16 am

Thanks. Nice and I used TweenMax. it rocks.

Newbie Says:
May 14th, 2009 at 8:58 pm

Hi I have the problem with the fading too. This script is awesome, I was able to add some custom stuff to it.. then I just realized there’s a fading or memory leaking issue you mentioned in earlier comments.

I have changed the code you put in the comment.. also uploaded it. Still having a weird issue where I can see the “ghosted image” of other slide images between transition??

Any other suggestions I’d GREATLY appreciate! Thank you.

Ilap Says:
May 15th, 2009 at 2:33 pm

Thanks so much!!
VERY VERY handy!
Yey!

Sven Says:
June 8th, 2009 at 3:34 pm

Great tutorial and function. I am trying to use it as a sort of banner. I’m using the description to display a message for each image. I also added another text field with an instance. Then the xml file contains the content of the text fields as attributes of each image. It works perfectly… almost.

I added another attribute providing a value for word wrapping. In AS, I take that value an convert it into a boolean value that AS understands for the word wrap property. The idea is to enable text wrapping in the description so the text does not interfere with the picture.

It works, but only the first time the slideshow goes. From the second time the loops displays the first picture again, it keeps the word wrapping value of the last image instead of the assigned value in the xml file.

Any suggestions?

Chase Says:
June 14th, 2009 at 4:03 am

Thank you so much for such a great tutorial, I have been searching for days trying to find a tutorial on this, but everyone I came across I had to pay for. The code is commented upon perfectly and is very versatile. Once aagin thankyou soo much

Mat Says:
June 30th, 2009 at 11:14 am

Hi,
thanks for the tutorial. Having it working great but currently trying to add google tracking tracking. When I do so the xml text is not rendering in the document when viewed from server but works fine locally. Here is the code I have added:

import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker;
var tracker:AnalyticsTracker = new GATracker( this, “UA-111222″, “AS3″, false );

function goToWebsite(e:MouseEvent):void {
// check if the strLink is not empty and open the link in the
// defined target window
tracker.trackPageview(“/HomeFlashCaseStudyHit”);
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
tracker.trackPageview(“/FlashNextSlide”);
if(intCurrentSlide + 1 = 0)
switchSlide(intCurrentSlide – 1);
// if not, start slideshow from the last slide
else
switchSlide(intSlideCount – 1);
}

Any suggestions would be gratefully received.
Thanks
Mat

Pablo Says:
July 3rd, 2009 at 3:46 am

Excellent, just what I’ve been looking for.

Thanks a lot from a guy from Argentina

Tom Says:
July 5th, 2009 at 1:30 pm

Great work, open source IS the future, lets keep helping people and not see them as potential profit,

Thanks!

Will Says:
July 12th, 2009 at 1:32 am

Nice one. I am however looking for a version that stores the jpgs somewhere so there is no memory drain and the same 5 pictures keep loading over and over again. is there an easy was to just capture the jpgs one by one and once you reach the end of the slides, they are all loaded then stop loading and just do the transitions. i’ve been looking everywhere for something like that, let me know thx!
-wil

Lisa Says:
July 13th, 2009 at 8:34 pm

Hi Rafael,

Great tutorial. Thanks you for posting it. I learned a lot from it. It works great I just need to modify it. My images are smaller than yours and I wanted to move images to a different position on the mask. Instead of Top/left, it needs to be somewhere near the center. Is there a way to do this?

Lisa Says:
July 15th, 2009 at 2:48 pm

I figured out how to position my smaller image towards the middle of the stage. I am new to actionscript and figured there might be someone else like me who needs this answer too.

At line 50 add the following changing it to your correct coordinates of course:
mcSlideHolder.y = 185;
mcSlideHolder.x = 102;

Rygar Says:
July 15th, 2009 at 11:29 pm

At what point in the code do you actually attach the image to the sprite???

Thanks for putting this, BTW!

Lisa Says:
July 16th, 2009 at 4:53 pm

Hi Ryan,

If this question is for me? If so, I just changed the image source in the xml to my own image.

Lisa Says:
July 16th, 2009 at 4:54 pm

Oops, sorry. Rygar, I meant.

amanda Says:
July 20th, 2009 at 6:15 pm

Thanks so much –

I am trying to make the description text a url link. I have rendeed the text as html but i am not getting it to work – it shows up as a parsing error – any suggestions?

amanda

Jakob Says:
July 20th, 2009 at 9:40 pm

About the memory leak, could it be something with these call:

// create a new loader for the slide
slideLoader = new Loader();

slideLoader.load(new URLRequest(xmlSlideshow.image[intCurrentSlide].@src));

They are called everytime a switch is made.

giulio Says:
July 21st, 2009 at 3:16 pm

AMAZING tutorial! thanks

veeru Says:
July 24th, 2009 at 11:25 am

plz insert flash imagegallery fla files in your site.

veeru Says:
July 24th, 2009 at 11:25 am

thank u

Jakob Says:
July 24th, 2009 at 8:46 pm

If you did not find the link, the link is in the top section or right here: http://www.thetechlabs.com/tutorials/files/flash/rnunlist/slideshow_tut.zip

Teresa Says:
July 29th, 2009 at 6:55 pm

Great tutorial! Streamlined code and very well commented. Thanks Rafael!

Jeppe Says:
August 21st, 2009 at 10:31 am

If i wan’t to add a different link to each slide, how do i go about that?

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

in your reply to joe you said add in the extra code

while(currentContainer.numChildren){currentContainer.removeChildAt(0);
}

above the fadeSlideIn() function:

however when i do i get this error

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at slideshow_fla::MainTimeline/frame1()

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

sorry should have said this post is in relation to trying to make sure that different sized images are removed when the new image appears.

JANJ@N Says:
October 16th, 2009 at 12:54 am

good job thanks

Matt Says:
October 16th, 2009 at 8:23 pm

I would like to remove the bar on the bottom that shows the description and the number of slides. How can I go about doing that?

wolfmarter Says:
November 3rd, 2009 at 2:01 pm

Thank you for your script. I am just getting started with as3 and it helped me out a lot.

I would like the images to play randomly. Can you help me out?

Thank you

Wolf

leonardo Says:
November 10th, 2009 at 3:19 am

To fix the “ghost fly” fix the code like this:

function fadeSlideIn(e:Event):void {
// add loaded slide from slide loader to the
// current container

//– begin fix
try{
currentContainer.removeChildAt(0);
}catch(e:*){}
//– end fix

currentContainer.addChild(slideLoader.content);
// clear preloader text
mcInfo.lbl_loading.text = “”;
// fade the current container in and start the slide timer
// when the tween is finished
Tweener.addTween(currentContainer, {alpha:1, time:FADE_TIME, onComplete:function() { slideTimer.start(); }});
}

this work fine!

sorry for my english

Steve Says:
November 10th, 2009 at 5:58 am

Re Error:
TypeError: Error #1010: A term…
(sean brock)

I got same error.. forgot to move the .xml file with the other files, which fixed it.

Thanks for the code! Now trying to use instead of the XML file, using remoting to receive an array of arrays with image details

Steve Says:
November 10th, 2009 at 8:40 am

Here is part 2:
http://www.thetechlabs.com/tutorials/xml/extending-the-as3flash9-slideshow-with-xml/

Becky Says:
November 13th, 2009 at 9:57 am

Can you help me…I keep getting this error message:
Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found.

Sebastian Says:
November 13th, 2009 at 11:33 pm

Thank you for this good code. At some point I will transform it to become object orientated, with the XML loading separate from the slide engine, so that it can be called from any project as an encapsulated entity..

But this does the trick just fine!

Best,

Sebastian.

Nicola Says:
December 4th, 2009 at 5:33 am

Okay I got it all functioning well but the images are terribly pixelated. What suggestion do you have to fix the compression. Seeing as they are pulled in through XML I am not sure how to set the compression for the images.

flashSpec Says:
December 15th, 2009 at 10:34 pm

Hehe Simple slideshow, but it’s not enouth, imho Nice tutorial, thow
I have coded a smooth xml picture gallery with slideshow functionality, check it out here: bit.ly/7aWzXt

Elaine Says:
January 13th, 2010 at 5:36 pm

Great tutorial! I have the same question as Amanda. I noticed the link in xml works on an image, but how would I go about link to text within the description so that just a portion of the text is link? I scoured the web and they say to use CDATA but I get parsing errors when I try that.

Thanks again!

Brad Says:
February 22nd, 2010 at 8:02 pm

So, I’m a bit confused, trying to do this tutorial with almost no knowledge of what goes where .. is there any beginner guides that would cover something like this? I’m just not seeing where to put the code at. (I seriously just started using flash within the last week.) Also, I got the xml thing down, that was as simple as can be, I just don’t know my way around Flash Pro CS4. I use dreamweaver daily however.

Jakob Says:
February 25th, 2010 at 1:33 pm

Brad: Try to download the tut-file: http://www.thetechlabs.com/tutorials/files/flash/rnunlist/slideshow_tut.zip
And see how thing is done…

atasözleri Says:
February 26th, 2010 at 9:52 am

thank you admin, wonderful working.

Danni Says:
February 27th, 2010 at 8:40 pm

I just want to leave a note and tell you how much I appreciate your code and tutorial. Very nice and useful! Thanks a lot!

Stefan Says:
March 9th, 2010 at 9:16 am

Great tutorial. It was very useful as it gave me a starting ground for my current project. Thanks:)

4 Trackbacks For This Post

Andy Says:
July 28th, 2008 at 5:17 am
So the only .as file I need is the Tweener?
Chris Says:
August 3rd, 2008 at 12:26 am
Getting this error:

“Error with autoFormat near line:intCurrentSlide = 0;
Rafael Nünlist Says:
August 3rd, 2008 at 6:54 pm
@Andy: No, the Tweener class will import all the necessary ones. Don’t delete any of the files if you want to stay on the save side.

@Chris: Remove the comment on the line #85

83. if(intCurrentSlide + 1 < intSlideCount)
84. intCurrentSlide++;
85. // REMOVE THIS ONE! if not, start slideshow from beginning
86. else
87. intCurrentSlide = 0;
mike Says:
August 8th, 2008 at 4:37 am
I’m having issues using the caurina classes. I tried adding them as a document class to the movie, linking to the transitions folder through as3 preferences, taking them out of the folders and changing the package names, etc., and of course using it the way it expanded. can you give more details on how to use them?

thanks.
Rafael Nünlist Says:
August 8th, 2008 at 4:49 pm
@mike: Your problem isn’t related with the slideshow. You can’t set the Tweener engine as a document class. I think, this should help you out:
http://www.adobe.com/devnet/flash/quickstart/external_files_as3/
mike Says:
August 9th, 2008 at 2:52 am
the problem turned out to be a corrupted program. once I re-installed flash, all connections began to work. I couldn’t connect to any external actionscripts it turned out. all’s well! thanks for your prompt reply and excellent tutorial!
Aloysio Says:
August 16th, 2008 at 4:15 am
Hi Rafael! First I want to say thats you do a good work. Congrats. Well.. when slides begin and it will change to next image I see all images loaded when it changes. Do you know what I need to do to fix it?

Thanks!
Rafael Nünlist Says:
August 16th, 2008 at 12:00 pm
Hey Aloysio

Thanks for your feedback. Did you made any changes to the code? The example ( http://www.thetechlabs.com/tutorials/files/flash/rnunlist/slideshow/slideshow.html ) should be working fine.

Greetings
Tom Says:
August 17th, 2008 at 5:43 am
Thanks for sharing your excellent code and also amazed by your good quality pictures. Wondering how can I enable mouse function, for example, when double-click any image, it would load a corresponding website as defined in the xml file. Also wondering how can I add some button functions, for example, for your 5 pictures, when click button#1, the movie would stop at image#1, etc., and you can also pause/continue to auto play the movie. Thanks a lot in advance.
Aloysio Says:
August 17th, 2008 at 8:56 pm
Hey, No.. i’m not change the code.I note that when slides begin I see the firs image that is a Bee, the next is a Mouse, but when it changes I see the previous image that is Bee and it to the nexts images, I only see the previous images when the slides load new image! Understand?

Sorry my bad english!
Aloysio Says:
August 17th, 2008 at 8:58 pm
I note that when holder swap the image the last image not desapear. I think that when the images changes the last needs to desapear to apear the new loaded image!
Rafael Nünlist Says:
August 18th, 2008 at 8:11 am
Hey,

@ Aloysio
No, this is actually the right behaviour.
We have 2 holders. On in the front, and one in the back. Then we load the first slide in the container that’s in the back. Once it’s loaded, we switch the order and bring it to the front and fade it in. Without this, you wouldn’t have a nice fade in effect of your slides. You need to have the two containers in order to do that

@Tom
It’s quite simple to implement your functions. Maybe there will be another part of this tutorial that will cover these. Be sure to check back later

cheers
Tom Says:
August 18th, 2008 at 2:54 pm
Thanks for your quick response. Can you show me how to enable the mouse? I added the following code, but the HandCursor does not appear.

import flash.events.MouseEvent;
currentContainer.buttonMode = true;
currentContainer.useHandCursor = true;
currentContainer.mouseChildren = false;
currentContainer.addEventListener(MouseEvent.DOUBLE_CLICK, gotoWebside);
Thanks.
Rafael Nünlist Says:
August 19th, 2008 at 8:45 am
@ Tom: Easiest way to to that: Create a new button, add a key frame to the “active” frame, draw a rectangle as big as your wished button area. Drag the button on the stage on top of everything. Give it an instance name and add the following to the init() function of the slideshow:

your_invisible_button.doubleClickEnabled = true;
your_invisible_button.addEventListener(MouseEvent.DOUBLE_CLICK, function():void {trace(“YO”);navigateToURL(new URLRequest(“http://www.google.com”), “_blank”);});

Replace your_invisible_button with the instance name of course

cheers
Tom Says:
August 20th, 2008 at 3:37 pm
Thank you. The invisible button works.
Jan Says:
August 25th, 2008 at 3:39 pm
Rafael: Wondering how to avoid xml cache issue. The IE and/or Firefox browser would still show the old images even after the slideshow-data.xml file has been updated.
Rafael Nünlist Says:
August 26th, 2008 at 8:03 am
Hey Jan
Yes, that’s a cache issue. You can easily solve this problem by adding a parameter to the loaded images/xml files.

Like this:

var strXMLPath:String = “slideshow-data.xml?d=” + String(new Date().time);

And of the image loading:

slideLoader.load(new URLRequest(xmlSlideshow..image[intCurrentSlide].@src + “?d=” + String(new Date().time)));

Greetings
Jan Says:
August 27th, 2008 at 3:21 pm
Thank you. Following above suggestion to resolve the cache issue, I got the following error message:
Error #2044: Unhandled ioError:. text=Error #2032: Stream Error. URL: file:///D|/SlideShow/slideshow-data.xml?d=1219846606983
at slideshow_fla::MainTimeline/init()
at slideshow_fla::MainTimeline/frame1()
Wondering if you have any idea. Regards.
Rafael Nünlist Says:
August 27th, 2008 at 9:00 pm
Hey Jan

Try putting your files online and request them from your browser. Like this, it should work just fine.
For developing, you don’t have to use the caching

greetings
Rafael
Aloysio Chagas Says:
August 31st, 2008 at 11:41 pm
Hello Rafael. I’m back. Well, i take two printscreen to show you what I say times ago. If you look to these images you will see the transitions.

http://img144.imageshack.us/my.php?image=slideshowui9.jpg
http://img262.imageshack.us/my.php?image=slideshow2sj5.jpg

When I load all images and it start again I see all images in background.
You know how do I fix it? =)

Thanks a lot!
alex Says:
September 2nd, 2008 at 8:23 pm
I added a resize image to the fadeSlideIn function but the image in the background stays so yo see 2 images one on top of the other. how I can send the background image alpha to 0? by the way nice component
ty
Rusty Says:
September 2nd, 2008 at 9:26 pm
Rafael, thanks for posting your code, this looks GREAT!! However; I’ve implemented the code and left the browser open and went to lunch, when I returned FF had crashed… didn’t think much of it at the time but did investigate further… it seems that I’m getting a memory and/or cpu leak from the slideshow.

I have no idea if it’s your code causing the memory leak or the tweener class. I have moved the slideshow to it’s own fla and indeed it is sucking memory/cpu at a constant rate. I don’t know if it’s holding onto the images, the tweens or both….. I’m stumped so just figured I’d ask if anyone else had run into this and if a solution had been found.

Any ideas of how to remedy this?

Thanks,

rusty
Brian Says:
September 2nd, 2008 at 9:58 pm
Rafael,

Great code! Is there a way to have it unload the images after transition? Firefox and IE processes are increasing the longer the slideshow is viewed. Anyone else have this issue as well?

Thanks,

Brian
Jarne Says:
September 3rd, 2008 at 9:36 am
Hi Rafael, thanks for the code.
But I’m having one major problem with it: after a while, it begins to lag. It has to do something with the ‘addchild’ I think.
It must remove the previous images after the fade in of the new image is complete… but how? Any help would be greatly appreciated!

Cheers.
Rafael Nünlist Says:
September 3rd, 2008 at 12:42 pm
Hey guys

There seem to be a memory leak in the slideshow. This will be fixed in the next part of the tutorial which will come very soon.

Greetings
Rafael
r Says:
September 6th, 2008 at 12:44 am
yeah..

this slide show has a memory leak.

any thoughts on how to troubleshoot it? i’ve spent 6 hours trying to fix it and nothing is working. has to be the use of the loader?
Carlos Pinho Says:
September 6th, 2008 at 2:16 am
Hi,

The next part of the tutorial will have the solution for the memory leak. It will be published within the next week. So stay tuned…
Joe Says:
September 8th, 2008 at 10:36 pm
If you change the images so they are not all the same size, it breaks the slideshow. Once it cycles through the images once, then they start to overlap and two or three images appear at once.

I am assuming this is because the code does not removeChild from the currentContainer? So the images just keep getting attached, is that correct? I am no AS3 genius, so I could be wrong about the problem, but I do know that it is happening.

Could you email me if you come up with a solution? The email for this comment is the correct one.

Thanks
Rafael Nünlist Says:
September 9th, 2008 at 8:10 am
Hey Joe

Yes, that’s right. But this problem will be fixed in the next part of the tutorial.

Or you can add this line on top of the fadeSlideIn() function:

while(currentContainer.numChildren){currentContainer.removeChildAt(0);}

Greetings
Rafael
alessandro Says:
September 9th, 2008 at 5:35 pm
Dear Rafael thanks for this excellent tutorial. Please when you will workout the second part, can you take a look at the problem of previous images appearing below, as shown here:

http://img144.imageshack.us/my.php?image=slideshowui9.jpg
http://img262.imageshack.us/my.php?image=slideshow2sj5.jpg

thank you very much !
alessandro Says:
September 9th, 2008 at 5:42 pm
ok I figured out myself: just add the following instruction at the beginning of the fadeSlideIn function, like this:

function fadeSlideIn(e:Event):void {
if (currentContainer.numChildren>0) currentContainer.removeChildAt(0);

…

Didn’t test much more, so I can’t be sure 100% but after this modification I’m not having anymore memory leaks …
JNigon Says:
October 8th, 2008 at 6:10 pm
Nice program.

I’m new to flash and AS3, so I’m probably missing something…Where can I resize the show width and height – preferably to full-screen?

I’ve tried modifying the included .html file – no luck.

Thanks!
Lydian Says:
October 27th, 2008 at 6:59 am
Hey guys,

I’ve created an advanced XML news slider. Check the following link. http://www.flashden.net/item/xml-driven-news-slide-show/20094/?ref=cpinho
Renato Says:
October 31st, 2008 at 9:24 pm
Hi there,

I tried to use Alessandro´s idea to solve the memory leak issue, but continues the same thing here.

Any other ideas?

PS: Gongratz for the nice tutorial Rafael!
sonic22 Says:
November 10th, 2008 at 9:26 am
Hi, i’m trying to add a Zoom FX to each image after the fade in, in the “Stealth Time” while the image is shown, i need to add a zoom FX, and after that the fadeIn from the next image (wich is done in the tutorial), could you help me a little??? i’m new in AS3 and i could’n reach it yet.

Thks.
Joey R Says:
December 5th, 2008 at 4:02 am
It need crazy flash skills.

I prefer making flash slide shows with 3rd software such as proshow gold or Flash Gallery Factory.

No complicated skills needed and no need to sit down in front of the computer for hours.

Here I share tutorials using 3rd party flash software that I have found on Ourpix.com

http://www.ourpix.com/xmas/tutorial.html#106

Hope it helps.
Ryan Says:
December 27th, 2008 at 6:59 am
works very well! Easy to plug in, thanks!
das Says:
January 13th, 2009 at 10:55 pm
Great and simple to implement. Could you answer how I could get the first container to completely fade out and then the other container to fade in?

Thanks.
Alex Says:
February 1st, 2009 at 11:07 pm
Great tutorial! Is there anyway to get the flash movie to randomly display the images in the xml file?
Alex Says:
March 4th, 2009 at 8:29 pm
Hi I’ve implemented this slideshow script into an swf I’m making for a company website. The problem of the memory leak is presenting quite a problem. I’ve tried all the suggestions here and I still have FF climbing in memory usage every time a new slide is loaded. If someone has solved this please let me know, or help me figure out what to do to fix it. email me at alex[at]themouseartist.com if you can help. Thanks
Rafael Nünlist Says:
March 4th, 2009 at 8:48 pm
@ Alex: Please Take a look at the second part of the tutorial where the memory leak is fixed.
amit Says:
March 22nd, 2009 at 12:27 pm
awesome…..i just loved it…
tinnu Says:
March 27th, 2009 at 5:49 pm
Its really very helpfull ,thanx a lot.
sean brock Says:
April 6th, 2009 at 11:33 am
Hi First of thanks for this Tutorial it was a massive help in understanding the code not just copying it. But I have a problem it all works on my local pc but when I upload it i get an error url not found error the xml file is the samlocation reletive to the xml file. I am using dreamweaver to do the layout and uploading the slideshow as a flash element. Any help would be great thanks
Roger Says:
April 7th, 2009 at 12:03 am
Having an odd issue. I was able to modify the parameters and images to fit into a site layout. It works great in FireFox and Safari on the Mac. On the PC though in both FireFox and IE, it only loads the background image but the images don’t ‘play’. Any insights?

thanks
– Roger
paulopaiva Says:
April 15th, 2009 at 4:17 pm
1172: Definition caurina.transitions:Tweener could not be found.import caurina.transitions.Tweener;

1120: Access of undefined property mcSlideHolder.mcSlideHolder.addChild(sprContainer1);

1120: Access of undefined property mcSlideHolder.mcSlideHolder.addChild(sprContainer2);

1120: Access of undefined property mcInfo.mcInfo.lbl_loading.text = “”;

1120: Access of undefined property Tweener.Tweener.addTween(currentContainer, {alpha:1, time:FADE_TIME, onComplete:function() { slideTimer.start(); }});

1120: Access of undefined property mcSlideHolder.mcSlideHolder.swapChildren(sprContainer2, sprContainer1);

1120: Access of undefined property mcInfo.mcInfo.lbl_description.text = xmlSlideshow..image[intCurrentSlide].@desc;

1120: Access of undefined property mcInfo.mcInfo.lbl_count.text = (intCurrentSlide + 1) + ” / ” + intSlideCount + ” Slides”;

1120: Access of undefined property mcInfo.mcInfo.lbl_loading.text = “Loading…” + Math.ceil(e.bytesLoaded * 100 / e.bytesTotal) + “%”;

(
bill Says:
April 15th, 2009 at 7:26 pm
so I followed this tutorial and when I upload it to my server it doesnt work in Firefox or safari but it does in chrome and IE i even uploaded the example and it does the same thing any advice?
Carlos Pinho Says:
April 15th, 2009 at 8:41 pm
@bill

Can you post here the script you use in the html page? Maybe you are using <embed></embed> snippets only while at firefox it needs to use <object><param></param></object>.
bill Says:
April 15th, 2009 at 8:47 pm
http://pastebin.com/d219508da

above is the actionscript

I have the file loaded on two ftps

http://your-memory.net/pinnaclesolutions/Erica/erica.html

http://umlan.com/pinnaclesolutions/erica/erica.html

could it be a permission error?
thanks in advance
Carlos Pinho Says:
April 15th, 2009 at 9:13 pm
Don’t know, but i would try to insert in the the following param base=”.” and see if anything changes.
sean brock Says:
April 16th, 2009 at 12:23 am
Hi I can ger my code to work in flash but when i put it on my page in dreamweaver and try to preview it i get
TypeError: Error #1010: A term is undefined and has no properties.
at slideshowworkingxml_fla::MainTimeline/bringslidein()
at slideshowworkingxml_fla::MainTimeline/xmlloaded()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()

I am completly stumped my code is as follows

import caurina.transitions.Tweener;
var xmldata:XML=new XML ;
var xmlloader:Loader=new Loader ;
var urlloader:URLLoader=new URLLoader ;
var container1:Sprite=new Sprite ;
var container2:Sprite=new Sprite ;
var currentcontainer:Sprite=new Sprite ;
var slideindex:int=-1;
var slidecount:int;

var timer:Timer;
const delay=5000;
const fadetime=1;

function startslideshow():void {

urlloader=new URLLoader ;
urlloader.addEventListener(Event.COMPLETE,xmlloaded);
urlloader.load(new URLRequest(“slideshow-data.xml”));
trace();
timer=new Timer(delay);
timer.addEventListener(TimerEvent.TIMER, bringslidein);
container2=new Sprite ;
container1 = new Sprite;
mc_slide.addChild(container1);
mc_slide.addChild(container2);
currentcontainer=container2;
currentcontainer.x = ((currentcontainer.stage.stageWidth / 10) – (currentcontainer.width+150 ));
currentcontainer.y =((currentcontainer.stage.stageHeight / 10) – (currentcontainer.height+100));
container1.x = ((container1.stage.stageWidth/10 ) – (container1.width+150 ));
container1.y =((container1.stage.stageHeight/10 ) – (container1.height+100));

}

function xmlloaded(e:Event):void {

xmldata=new XML(e.target.data);
slidecount=xmldata..image.length();
slidecount = slidecount -1;
trace (slidecount);
bringslidein(null);

}

function slidein(e:Event):void {
trace(“slidein”);
currentcontainer.addChild(xmlloader.content);
Tweener.addTween(currentcontainer, {alpha:1, time:fadetime, onComplete:function() { timer.start(); }});

}

function bringslidein(e:Event):void {
trace(“BRINGSLIDEIN”);
if (timer.running) {
timer.stop();
}

if (slideindex+1<slidecount) {
slideindex++;
} else {
slideindex=0;
}
if (currentcontainer==container2) {
currentcontainer=container1;
} else {
currentcontainer=container2;

}
currentcontainer.alpha=0;
mc_slide.swapChildren(container2,container1);
xmlloader = new Loader();
trace(“slide count “,slideindex);
xmlloader.contentLoaderInfo.addEventListener(Event.COMPLETE, slidein);
xmlloader.load(new URLRequest(xmldata.image[slideindex].@src));

}

startslideshow();

Please any Help would be great
paulopaiva Says:
April 16th, 2009 at 2:58 pm
Oi Carlos
não consegui emplementar o slide show
de qq forma muito obrigado
Kumar Says:
May 7th, 2009 at 8:21 am
Hi,

Nice tutorial on 3d gallery .. thank you very much..

I would like to work on this kind of gallery .. http://www.ubisoft.com

Need help with this or can we do this … Please if possible also can u refer me some tutorials as such .. so that i could follow…

Your help would be much appreciated..

Thanks & Regards
Kumar
rtm Says:
May 8th, 2009 at 6:12 pm
can somebody point where is that second part with fixed memory leaks exactly?

>@ Alex: Please Take a look at the second part of the tutorial where the memory leak is fixed.
Tinku Says:
May 13th, 2009 at 6:16 am
Thanks. Nice and I used TweenMax. it rocks.
Newbie Says:
May 14th, 2009 at 8:58 pm
Hi I have the problem with the fading too. This script is awesome, I was able to add some custom stuff to it.. then I just realized there’s a fading or memory leaking issue you mentioned in earlier comments.

I have changed the code you put in the comment.. also uploaded it. Still having a weird issue where I can see the “ghosted image” of other slide images between transition??

Any other suggestions I’d GREATLY appreciate! Thank you.
Ilap Says:
May 15th, 2009 at 2:33 pm
Thanks so much!!
VERY VERY handy!
Yey!
Sven Says:
June 8th, 2009 at 3:34 pm
Great tutorial and function. I am trying to use it as a sort of banner. I’m using the description to display a message for each image. I also added another text field with an instance. Then the xml file contains the content of the text fields as attributes of each image. It works perfectly… almost.

I added another attribute providing a value for word wrapping. In AS, I take that value an convert it into a boolean value that AS understands for the word wrap property. The idea is to enable text wrapping in the description so the text does not interfere with the picture.

It works, but only the first time the slideshow goes. From the second time the loops displays the first picture again, it keeps the word wrapping value of the last image instead of the assigned value in the xml file.

Any suggestions?
Chase Says:
June 14th, 2009 at 4:03 am
Thank you so much for such a great tutorial, I have been searching for days trying to find a tutorial on this, but everyone I came across I had to pay for. The code is commented upon perfectly and is very versatile. Once aagin thankyou soo much
Mat Says:
June 30th, 2009 at 11:14 am
Hi,
thanks for the tutorial. Having it working great but currently trying to add google tracking tracking. When I do so the xml text is not rendering in the document when viewed from server but works fine locally. Here is the code I have added:

import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker;
var tracker:AnalyticsTracker = new GATracker( this, “UA-111222″, “AS3″, false );

function goToWebsite(e:MouseEvent):void {
// check if the strLink is not empty and open the link in the
// defined target window
tracker.trackPageview(“/HomeFlashCaseStudyHit”);
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
tracker.trackPageview(“/FlashNextSlide”);
if(intCurrentSlide + 1 = 0)
switchSlide(intCurrentSlide – 1);
// if not, start slideshow from the last slide
else
switchSlide(intSlideCount – 1);
}

Any suggestions would be gratefully received.
Thanks
Mat
Pablo Says:
July 3rd, 2009 at 3:46 am
Excellent, just what I’ve been looking for.

Thanks a lot from a guy from Argentina
Tom Says:
July 5th, 2009 at 1:30 pm
Great work, open source IS the future, lets keep helping people and not see them as potential profit,

Thanks!
Will Says:
July 12th, 2009 at 1:32 am
Nice one. I am however looking for a version that stores the jpgs somewhere so there is no memory drain and the same 5 pictures keep loading over and over again. is there an easy was to just capture the jpgs one by one and once you reach the end of the slides, they are all loaded then stop loading and just do the transitions. i’ve been looking everywhere for something like that, let me know thx!
-wil
Lisa Says:
July 13th, 2009 at 8:34 pm
Hi Rafael,

Great tutorial. Thanks you for posting it. I learned a lot from it. It works great I just need to modify it. My images are smaller than yours and I wanted to move images to a different position on the mask. Instead of Top/left, it needs to be somewhere near the center. Is there a way to do this?
Lisa Says:
July 15th, 2009 at 2:48 pm
I figured out how to position my smaller image towards the middle of the stage. I am new to actionscript and figured there might be someone else like me who needs this answer too.

At line 50 add the following changing it to your correct coordinates of course:
mcSlideHolder.y = 185;
mcSlideHolder.x = 102;
Rygar Says:
July 15th, 2009 at 11:29 pm
At what point in the code do you actually attach the image to the sprite???

Thanks for putting this, BTW!
Lisa Says:
July 16th, 2009 at 4:53 pm
Hi Ryan,

If this question is for me? If so, I just changed the image source in the xml to my own image.
Lisa Says:
July 16th, 2009 at 4:54 pm
Oops, sorry. Rygar, I meant.
amanda Says:
July 20th, 2009 at 6:15 pm
Thanks so much –

I am trying to make the description text a url link. I have rendeed the text as html but i am not getting it to work – it shows up as a parsing error – any suggestions?

amanda
Jakob Says:
July 20th, 2009 at 9:40 pm
About the memory leak, could it be something with these call:

// create a new loader for the slide
slideLoader = new Loader();

slideLoader.load(new URLRequest(xmlSlideshow.image[intCurrentSlide].@src));

They are called everytime a switch is made.
giulio Says:
July 21st, 2009 at 3:16 pm
AMAZING tutorial! thanks
veeru Says:
July 24th, 2009 at 11:25 am
plz insert flash imagegallery fla files in your site.
veeru Says:
July 24th, 2009 at 11:25 am
thank u
Jakob Says:
July 24th, 2009 at 8:46 pm
If you did not find the link, the link is in the top section or right here: http://www.thetechlabs.com/tutorials/files/flash/rnunlist/slideshow_tut.zip
Teresa Says:
July 29th, 2009 at 6:55 pm
Great tutorial! Streamlined code and very well commented. Thanks Rafael!
Jeppe Says:
August 21st, 2009 at 10:31 am
If i wan’t to add a different link to each slide, how do i go about that?
lilien Says:
September 1st, 2009 at 12:23 pm
in your reply to joe you said add in the extra code

while(currentContainer.numChildren){currentContainer.removeChildAt(0);
}

above the fadeSlideIn() function:

however when i do i get this error

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at slideshow_fla::MainTimeline/frame1()
lilien Says:
September 1st, 2009 at 12:24 pm
sorry should have said this post is in relation to trying to make sure that different sized images are removed when the new image appears.
JANJ@N Says:
October 16th, 2009 at 12:54 am
good job thanks
Matt Says:
October 16th, 2009 at 8:23 pm
I would like to remove the bar on the bottom that shows the description and the number of slides. How can I go about doing that?
wolfmarter Says:
November 3rd, 2009 at 2:01 pm
Thank you for your script. I am just getting started with as3 and it helped me out a lot.

I would like the images to play randomly. Can you help me out?

Thank you

Wolf
leonardo Says:
November 10th, 2009 at 3:19 am
To fix the “ghost fly” fix the code like this:

function fadeSlideIn(e:Event):void {
// add loaded slide from slide loader to the
// current container

//– begin fix
try{
currentContainer.removeChildAt(0);
}catch(e:*){}
//– end fix

currentContainer.addChild(slideLoader.content);
// clear preloader text
mcInfo.lbl_loading.text = “”;
// fade the current container in and start the slide timer
// when the tween is finished
Tweener.addTween(currentContainer, {alpha:1, time:FADE_TIME, onComplete:function() { slideTimer.start(); }});
}

this work fine!

sorry for my english
Steve Says:
November 10th, 2009 at 5:58 am
Re Error:
TypeError: Error #1010: A term…
(sean brock)

I got same error.. forgot to move the .xml file with the other files, which fixed it.

Thanks for the code! Now trying to use instead of the XML file, using remoting to receive an array of arrays with image details
Steve Says:
November 10th, 2009 at 8:40 am
Here is part 2:
http://www.thetechlabs.com/tutorials/xml/extending-the-as3flash9-slideshow-with-xml/
Becky Says:
November 13th, 2009 at 9:57 am
Can you help me…I keep getting this error message:
Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found.
Sebastian Says:
November 13th, 2009 at 11:33 pm
Thank you for this good code. At some point I will transform it to become object orientated, with the XML loading separate from the slide engine, so that it can be called from any project as an encapsulated entity..

But this does the trick just fine!

Best,

Sebastian.
Nicola Says:
December 4th, 2009 at 5:33 am
Okay I got it all functioning well but the images are terribly pixelated. What suggestion do you have to fix the compression. Seeing as they are pulled in through XML I am not sure how to set the compression for the images.
flashSpec Says:
December 15th, 2009 at 10:34 pm
Hehe Simple slideshow, but it’s not enouth, imho Nice tutorial, thow
I have coded a smooth xml picture gallery with slideshow functionality, check it out here: bit.ly/7aWzXt
Elaine Says:
January 13th, 2010 at 5:36 pm
Great tutorial! I have the same question as Amanda. I noticed the link in xml works on an image, but how would I go about link to text within the description so that just a portion of the text is link? I scoured the web and they say to use CDATA but I get parsing errors when I try that.

Thanks again!
Brad Says:
February 22nd, 2010 at 8:02 pm
So, I’m a bit confused, trying to do this tutorial with almost no knowledge of what goes where .. is there any beginner guides that would cover something like this? I’m just not seeing where to put the code at. (I seriously just started using flash within the last week.) Also, I got the xml thing down, that was as simple as can be, I just don’t know my way around Flash Pro CS4. I use dreamweaver daily however.
Jakob Says:
February 25th, 2010 at 1:33 pm
Brad: Try to download the tut-file: http://www.thetechlabs.com/tutorials/files/flash/rnunlist/slideshow_tut.zip
And see how thing is done…
atasözleri Says:
February 26th, 2010 at 9:52 am
thank you admin, wonderful working.
Danni Says:
February 27th, 2010 at 8:40 pm
I just want to leave a note and tell you how much I appreciate your code and tutorial. Very nice and useful! Thanks a lot!
Stefan Says:
March 9th, 2010 at 9:16 am
Great tutorial. It was very useful as it gave me a starting ground for my current project. Thanks:)

Tecinfor » Blog Archive » Criando slideshow com xml em AS3 Says:
July 24th, 2008 at 10:43 am
[...] hoje lendo meus rss vi um tutorial muito intereçante sobre flash as3 criando um slideshow com xml com um visual muito fixe. Este tutorial é do site The Tech Labs. ver tutorial [...]
Flash Tutorials | 18 AS3 Image Gallery Tutorials Roundup | Lemlinh.com Says:
August 8th, 2008 at 2:22 pm
[...] Create a AS3 Slideshow with XML [...]
Extending the AS3/Flash9 Slideshow with XML | The Tech Labs Says:
September 10th, 2008 at 11:34 pm
[...] 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. [...]
10 Sleek and Professional Flash Image Gallery Tutorials : Speckyboy Design Magazine Says:
May 28th, 2009 at 3:10 pm
[...] Create a Flash AS3 Slideshow with XML – The Tech Labs [...]

Flash Platform and ActionScript Tutorials

Create a Flash Actionscript 3.0 Slideshow with XML

Related posts:

About the Author

94 Comments For This Post

4 Trackbacks For This Post

Leave a Reply

Become an Author

Suggest a Tutorial

What's Coming Next

0 Subscribers