Monday, December 13, 2010

Create a simple slideshow using AS3: Part 5

In this tutorial we will make a photo slider effect.

The whole thing is like a long line of photos together, which moves to show each photo to the user. When we reach the last picture, the construction returns to the first photo and starts the ride again.


Firstly, make a movieclip called 'gallery' and put it on stage. Put all your photos in this movieclip one after another, they all must be the same size and follow eachother without any gaps.

Return to the main timeline and create a square/rectangle which will be the mask for your pictures. Make sure it has size of one slide, call it 'myMask' and put it on stage so it covers the first photo of your gallery.

Here is the code:

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)
{
goX = initX;
nowSlide = 0;
}
}

stage.addEventListener(Event.ENTER_FRAME, moveManager);

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

As you can see, the code finds out how many slides there are in total and computes everything automatically, so if you want to add more pictures - just add them to the gallery movieclip, no changes need to be made to the code.

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 6
Create a simple slideshow using AS3: Part 7
Create a simple slideshow using AS3: Part 8
Create a simple slideshow using AS3: Part 9
Create a simple slideshow using AS3: Part 10

No comments:

Post a Comment