Tuesday, December 14, 2010

Create a simple slideshow using AS3: Part 6

In this tutorial we will make a slideshow with a zooming effect.

Here's what we're going to make:


What we basically do is make the pictures not only fade, but also change their size. In this slideshow, we have 2 movieclips - "gallery" and "gallery2", that have same size and coordinates on stage.

We add 3 new variables - fadeSpeed, sizeSpeed and startSize. FadeSpeed defines how fast is the alpha of the pictures being changed. SizeSpeed is how fast do they move. The smaller fadeSpeed value - the longer the animation goes, therefore - the bigger the pictures get.

SizeSpeed and fadeSpeed are variables you can change. StartSize variable is computed according to the previous two and defines from what size does the gallery picture 1 start enlarging.

Here's the code:

import flash.utils.Timer;

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

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

var nextframe:int;
var fadeSpeed:Number = 0.05;
var sizeSpeed:Number = 0.02;
var startSize:Number = 1-(1/fadeSpeed*sizeSpeed);

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

gallery2.alpha = 1;
gallery2.scaleX = gallery2.scaleY = 1;
gallery.scaleX = gallery.scaleY = startSize;
gallery2.gotoAndStop(gallery.currentFrame);
gallery.gotoAndStop(nextframe);
}

stage.addEventListener(Event.ENTER_FRAME, fadeManager);

function fadeManager(Event):void
{
if (gallery2.alpha > 0)
{
gallery2.alpha -=  fadeSpeed;
gallery2.scaleX += sizeSpeed;
gallery2.scaleY += sizeSpeed;
gallery.scaleX += sizeSpeed;
gallery.scaleY += sizeSpeed;
}
}

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