Friday, December 17, 2010

Create a simple slideshow using AS3: Part 9

Today we will make a calendar-like page switch slideshow effect.

Check this out:


To do this, you'll need 2 same gallery movieclips on stage, where each frame contains a picture. One movieclip's instance name should be gallery, and the other one's - gallery2. Make sure gallery2 is on top.

For this effect to work, it is important that you set the registration point to the center top side of the slide (Y coordinate of the contents in gallery movieclip = 0).

Here's the code I used:

import flash.utils.Timer;

gallery.stop();
gallery2.stop();
gallery2.alpha = 0;

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

var nextframe:int;
var rotateSpeed:Number = 6;

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

gallery2.gotoAndStop(gallery.currentFrame);
gallery2.rotationX = 0;
gallery2.alpha = 1;
gallery.gotoAndStop(nextframe);
}

stage.addEventListener(Event.ENTER_FRAME, fadeManager);

function fadeManager(Event):void
{
if (gallery2.rotationX > -270)
{
gallery2.rotationX -=  rotateSpeed;
}
if (gallery2.rotationX <= -270)
{
gallery2.alpha = 0;
}
}

As you can see, with each loop the gallery movieclip in the back is updated to the next slide picture and the gallery2 movieclip gets the previous picture and does the rotating animation. If gallery2's rotation is less than -270 (when it should go behind the 'gallery' movieclip), its alpha is set to 0, giving an illusion of going underneath that first gallery movieclip.

The rotateSpeed variable can be any value not less than (or equal to) 0. Just make sure the timer (2000 milliseconds in the example) can keep up with the animation and vice versa.

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

No comments:

Post a Comment