Saturday, December 18, 2010

Create a simple slideshow using AS3: Part 10

Today we will make a slideshow effect with a gradient fade.

Take a look:


You should have 2 movieclips (with each picture as a frame) called gallery and gallery2 placed in the same coordinates (gallery2 on top of gallery). Their registration points should be at the top side (the Y of the contents of the movieclip = 0).

What we're doing here is creating a gradient overlay and applying it to the slides as a mask. When the timer makes a loop, the gallery movieclip underneath gallery2 will change its picture to next slide, while gallery2 will switch to the gallery's previous picture (making no change to be seen at first), but then comes in the mask. The mask is constantly moving up, progressively hiding gallery2 and revealing gallery.

We draw the gradient dynamically, you can learn about drawing gradient shapes here.

Here is the code:

import flash.utils.Timer;
import flash.display.MovieClip;
import flash.display.Shape;
import flash.geom.Matrix;

var gradientHeight:Number = 130;
var fadeSpeed:Number = 15;

var myMask:MovieClip = new MovieClip();
var myGradient:Shape = new Shape();

addChild(myMask);
myMask.addChild(myGradient);
myGradient.x =  -  gallery2.width / 2;
myGradient.graphics.beginFill(0x000000,1);
myGradient.graphics.drawRect(0, 0, gallery2.width, gallery2.height);
myGradient.graphics.endFill();

var myMatrix:Matrix = new Matrix();
myMatrix.createGradientBox(gallery2.width, gradientHeight, (Math.PI / 2), 0, gallery2.height);

myGradient.graphics.beginGradientFill(GradientType.LINEAR, [0x000000, 0x000000], [1, 0], [0,255], myMatrix);
myGradient.graphics.drawRect(0, gallery2.height, gallery2.width, gradientHeight);
myGradient.graphics.endFill();


myMask.y = gallery2.y;
myMask.x = gallery2.x;
gallery2.mask = myMask;

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


gallery2.cacheAsBitmap = true;
myMask.cacheAsBitmap = true;

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

var nextframe:int;

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);
gallery.gotoAndStop(nextframe);
myMask.y = gallery2.y;
}

stage.addEventListener(Event.ENTER_FRAME, fadeManager);

function fadeManager(Event):void
{
myMask.y -=  fadeSpeed;
}

And there you have 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 7
Create a simple slideshow using AS3: Part 8
Create a simple slideshow using AS3: Part 9

No comments:

Post a Comment