Saturday, December 11, 2010

Create a simple slideshow using AS3: Part 3

Today we'll create a slideshow with a shuffle effect.

Check it out:


Just like in the previous tutorial, there are 2 gallery objects (gallery and gallery2), which are located in the same position on start. Now, create a mask with the size of one slide and add this mask to these two objects. This can be done through the timeline or using code.

Here's the script used for this effect:

import flash.utils.Timer;

gallery.stop();
gallery2.stop();

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

var nextframe:int;
gallery2.x = gallery.x - gallery.width;

function updateSlideshow(TimerEvent):void
{
if (gallery.currentFrame < gallery.totalFrames)
{
nextframe = gallery.currentFrame + 1;
}
else if (gallery.currentFrame == gallery.totalFrames)
{
nextframe = 1;
}
gallery2.x = gallery.x;
gallery2.gotoAndStop(gallery.currentFrame);
gallery.gotoAndStop(nextframe);
}

stage.addEventListener(Event.ENTER_FRAME, fadeManager);

function fadeManager(Event):void
{
gallery2.x -=  15;
}

As you can see, gallery2 is always going left. When the timer loops, gallery2's x is set to gallery's x, making an illusion of photo shuffle.

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 4
Create a simple slideshow using AS3: Part 5
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

1 comment:

Nitesh said...

in both the fade and shuffle tutorial the speed increases so after 3 or more round the fade or shuffle effect doesnt get seen.

thanks

Post a Comment