Wednesday, December 15, 2010

Create a simple slideshow using AS3: Part 7

Today we'll create a slideshow similar to the one in photo slider tutorial, except that now we will make it loop and not go backwards to return to the first photo in the end of a cycle.

Check it out here:


Just like in that tutorial, we have one gallery movieclip with all the photos lined up one after another and a mask movieclip on stage, that covers one slide.

To make the slider loop, go to your gallery movieclip, copy the first photo and put it in the end. Now, here is the modified code that brings this idea to life:

import flash.utils.Timer;

var changeTimer:Timer = new Timer(2000);
changeTimer.addEventListener(TimerEvent.TIMER, updateSlideshow);
changeTimer.start();

gallery.mask = myMask;

var initX:int = gallery.x;
var goX:int = initX;
var slideWidth:int = myMask.width;
var totalSlides:int = Math.round(gallery.width / slideWidth);
var nowSlide:int = 0;

function updateSlideshow(TimerEvent):void
{
nowSlide++;
if (nowSlide < totalSlides)
{
goX -=  slideWidth;
}
else if (nowSlide == totalSlides)
{
gallery.x = initX;
goX = initX - slideWidth;
nowSlide = 1;
}
}

stage.addEventListener(Event.ENTER_FRAME, fadeManager);

function fadeManager(Event):void
{
gallery.x+=(goX-gallery.x)/5;
}

As you can see, the code checks whether the slider has reached (and stopped on) the last slide, and if it did - the next step will be displaying the transition from 1st to 2nd slide. We set the movieclip's position to first and immediately tell it to keep moving to the second slide:

gallery.x = initX;
goX = initX - slideWidth;
nowSlide = 1;

And that's how you do it.

Thanks for reading!

Related:

Create a simple slideshow using AS3: Part 1
Create a simple slideshow using AS3: Part 2
Create a simple slideshow using AS3: Part 3
Create a simple slideshow using AS3: Part 4
Create a simple slideshow using AS3: Part 5
Create a simple slideshow using AS3: Part 6
Create a simple slideshow using AS3: Part 8
Create a simple slideshow using AS3: Part 9
Create a simple slideshow using AS3: Part 10

1 comment:

Anonymous said...

Hi and thank for this method.
Unfortunately, my images are too wide to be on inside the MC (Flash limitation: no MCs beyond 2500px or so...). How can I tweak this script to use many wide images?

/Don

Post a Comment