Flash Actionscript3 Tutorial : Animated Slideshow

August 20th, 2009 »

The Slideshow

the end product

You need Flash 10 to view the awesome. It’s a free and fast upgrade.

i’m using photos from Humanhand Blog

This tutorial is for Flash CS3/CS4 using Actionscript 3.0

Here is the full source

Step 1. Gather all resources and code libraries.

We’ll need some images to slide around, and the TweenLite library.

Step 1

Back in Flash CS3/4, make sure your library is open, drag some images from your computer into it.

Dragging images into library

Step 2. Setup library linking

Right click / Command+click on the first library image to open it’s library properties pane

Linking photos

Linking photos

Do this to all images in your library. It’s tedious, but we’re learning right now, and we’ll learn how to improve management of your assets later.
Rename the classes appropriately (like “Photo_2”)
and always make sure to Allow Smoothing on each image, else your animations will look ugly.

Linking photos

Step 3. Setup your main class file, Slideshow.as

Linking photos

Now go to File -> New and create a new Actionscript File.

Linking photos

save this file as… Slideshow/Slideshow.as

Linking photos

Step 4. Code !

setup our anonymous package

package{

}

import classes that we need

import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.utils.Timer;
import flash.events.TimerEvent;
import gs.TweenLite;
import gs.easing.*;

create the Slideshow class that extends flash.display.Sprite, and Slideshow constructor

public class Slideshow extends Sprite
{
    public function Slideshow()
    {

    }
}

this is what we have so far:

package{
    import flash.display.Sprite;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.utils.Timer;
    import flash.events.TimerEvent;
    import gs.TweenLite;
    import gs.easing.*;
    public class Slideshow extends Sprite
    {
        public function Slideshow()
        {

        }
    }
}

inside the class

you can change the global animation speed and pause duration to whatever you want, they define time in seconds.

private var slides:Array;
private var curSlide:int;
private var timer:Timer;
private static const ANIMATION_SPEED:Number = 1.5;
private static const PAUSE_DURATION:Number = 3 + ANIMATION_SPEED;

inside the constructor

stick the photos in the array
since each Photo extends BitmapData, we need to pass a width and height as parameters otherwise the flash compiler will complain
lets use (0,0)

slides = [
    new Photo_0(0,0),
    new Photo_1(0,0),
    new Photo_2(0,0),
    new Photo_3(0,0),
    new Photo_4(0,0),
    new Photo_5(0,0),
    new Photo_6(0,0),
    new Photo_7(0,0),
    new Photo_8(0,0)
];

we will be adding these photos onto stage so we can see the slides in this slideshow.
in order to do that, the photos must be a DisplayObject, so we’ll wrap each one in a new Bitmap object (which extends flash.display.DisplayObject).
the Bitmap objects are stored in the slides array

slides = [
    new Bitmap(new Photo_0(0,0)),
    new Bitmap(new Photo_1(0,0)),
    new Bitmap(new Photo_2(0,0)),
    new Bitmap(new Photo_3(0,0)),
    new Bitmap(new Photo_4(0,0)),
    new Bitmap(new Photo_5(0,0)),
    new Bitmap(new Photo_6(0,0)),
    new Bitmap(new Photo_7(0,0)),
    new Bitmap(new Photo_8(0,0))
];

now lets add them to stage, and hide them to the left edge of the stage, initially out of sight
and vertically center them on stage.

var i:int;
var l:int = slides.length;
for ( i; i < l; i++ ) {
    addChild(slides[i]);
    slides[i].x = stage.stageWidth;
    slides[i].y = stage.stageHeight/2 - slides[i].height/2;
}

after that, create the timer object

timer = new Timer(PAUSE_DURATION);

so now we have

package{
    import flash.display.Sprite;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.utils.Timer;
    import flash.events.TimerEvent;
    import gs.TweenLite;
    import gs.easing.*;
    public class Slideshow extends Sprite
    {
        private var slides:Array;
        private var curSlide:int;
        private var timer:Timer;

        private static const ANIMATION_SPEED:Number = 1.5;
        private static const PAUSE_DURATION:Number = 3 + ANIMATION_SPEED;

        public function Slideshow()
        {
            slides = [
                new Bitmap(new Photo_0(0,0)),
                new Bitmap(new Photo_1(0,0)),
                new Bitmap(new Photo_2(0,0)),
                new Bitmap(new Photo_3(0,0)),
                new Bitmap(new Photo_4(0,0)),
                new Bitmap(new Photo_5(0,0)),
                new Bitmap(new Photo_6(0,0)),
                new Bitmap(new Photo_7(0,0)),
                new Bitmap(new Photo_8(0,0))
            ];

            var i:int;
            var l:int = slides.length;
            for ( i; i < l; i++ ){
                addChild(slides[i]);
                slides[i].x = stage.stageWidth;
                slides[i].y = stage.stageHeight/2 - slides[i].height/2;
            }

            timer = new Timer(PAUSE_DURATION);
        }
    }
}

create event listeners, and start the timer.
after the timer object has been created, add an event listener.

timer = new Timer(PAUSE_DURATION);
timer.addEventListener(TimerEvent.TIMER, slide);

and call

create a quick helper method to find the horizontal center for the sliding image to land, we’ll use this a couple places

private function getCenter(bitmap:Bitmap):Number // find the x endpoint, the horizontal center for the next slide
{
    return stage.stageWidth/2 - bitmap.width/2;
}

create an initial_slide method to call once to animate in the first slide

private function initial_slide():void // this happens first, and only once
{

}

in this method, we animate the first slide into view from the right side. then increment the curSlide counter; our TweenLite.to parameters are

  1. what we will animate, the first slide, same as saying slides[0]
  2. our global animation speed value
  3. an object that defines 2 options for this animation

x: here we use the getCenter() method we just wrote, and pass in the first image so that it returns an accurate x target getCenter(slides[curSlide])

ease: i like how Cubic.easeInOut looks, you can change this to your preference

private function initial_slide():void // this happens first, and only once
{
    // animate the next slide in
    TweenLite.to(slides[curSlide], ANIMATION_SPEED, {x:getCenter(slides[curSlide]), ease:Cubic.easeInOut});

    // increment curSlide
    curSlide++;
}

create the slide method that will run every four and a half seconds

public function slide(event:TimerEvent):void{

}

we’ll handle slideshow looping in this method
and use TweenLite’s to() static method to move slides in and out.

inside the slide listener

define a couple variables that will be animated

var newSlide:Bitmap = slides[curSlide];
var oldSlide:Bitmap;

set where the new slide comes from, off stage right

newSlide.x = stage.stageWidth;

check if we looped and set the oldSlide variable

if(curSlide == 0) // slideshow looped, animate out last slide in slides
{
    oldSlide = slides[slides.length-1];
}
else // animate old slide out
{
    oldSlide = slides[curSlide-1];
}

do our animations
nextSlide starts off stage to the right, animates left to the center
oldSlide animates left from the center to the far left off stage

// animate the next slide in
TweenLite.to(newSlide, ANIMATION_SPEED, {x:getCenter(newSlide), ease:Cubic.easeInOut});

// animate the old slide out
TweenLite.to(oldSlide, ANIMATION_SPEED, {x:-oldSlide.width, ease:Cubic.easeInOut});

finally increment the curSlide counter and loop if necessary

// increment curSlide or loop
if(curSlide++ == slides.length-1)
{ 
    curSlide = 0;
}

the entire slide event listener method looks like this

private function slide(event:TimerEvent):void
{
    var newSlide:Bitmap = slides[curSlide];
    var oldSlide:Bitmap;

    // set where this slide comes from , off stage right
    newSlide.x = stage.stageWidth;

    // check if we looped. set oldSlide

    if(curSlide == 0) // slideshow looped, animate out last slide in slides
    {
        oldSlide = slides[slides.length-1];
    }
    else // animate old slide out
    {
        oldSlide = slides[curSlide-1];
    }

    // animate the next slide in
    TweenLite.to(newSlide, ANIMATION_SPEED, {x:getCenter(newSlide), ease:Cubic.easeInOut});

    // animate the old slide out
    TweenLite.to(oldSlide, ANIMATION_SPEED, {x:-oldSlide.width, ease:Cubic.easeInOut});

    // increment curSlide or loop
    if(curSlide++ == slides.length-1)
    { 
        curSlide = 0;
    }

}

Here is the entire Slideshow.as file, all the code you need to complete this project

package{
    import flash.display.Sprite;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.utils.Timer;
    import flash.events.TimerEvent;
    import gs.TweenLite;
    import gs.easing.*;
    public class Slideshow extends Sprite
    {
        private var slides:Array;
        private var curSlide:int;
        private var timer:Timer;

        private static const ANIMATION_SPEED:Number = 1.5;
        private static const PAUSE_DURATION:Number = 3 + ANIMATION_SPEED;

        public function Slideshow()
        {
            slides = [
                new Bitmap(new Photo_0(0,0)),
                new Bitmap(new Photo_1(0,0)),
                new Bitmap(new Photo_2(0,0)),
                new Bitmap(new Photo_3(0,0)),
                new Bitmap(new Photo_4(0,0)),
                new Bitmap(new Photo_5(0,0)),
                new Bitmap(new Photo_6(0,0)),
                new Bitmap(new Photo_7(0,0)),
                new Bitmap(new Photo_8(0,0))
            ];

            var i:int;
            var l:int = slides.length;
            for ( i; i < l; i++ ){
                addChild(slides[i]);
                slides[i].x = stage.stageWidth;
                slides[i].y = stage.stageHeight/2 - slides[i].height/2;
            }

            timer = new Timer(PAUSE_DURATION*1000);
            timer.addEventListener(TimerEvent.TIMER, slide);
            timer.start();

            initial_slide();
        }
        private function getCenter(bitmap:Bitmap):Number // find the x endpoint, the horizontal center for the next slide
        {
            return stage.stageWidth/2 - bitmap.width/2;
        }
        private function initial_slide():void // this happens first, and only once
        {
            // animate the next slide in
            TweenLite.to(slides[curSlide], ANIMATION_SPEED, {x:getCenter(slides[curSlide]), ease:Cubic.easeInOut});

            // increment curSlide
            curSlide++;
        }
        private function slide(event:TimerEvent):void
        {
            var newSlide:Bitmap = slides[curSlide];
            var oldSlide:Bitmap;

            // set where this slide comes from , off stage right
            newSlide.x = stage.stageWidth;

            // check if we looped. set oldSlide

            if(curSlide == 0) // slideshow looped, animate out last slide in slides
            {
                oldSlide = slides[slides.length-1];
            }
            else // animate old slide out
            {
                oldSlide = slides[curSlide-1];
            }

            // animate the next slide in
            TweenLite.to(newSlide, ANIMATION_SPEED, {x:getCenter(newSlide), ease:Cubic.easeInOut});

            // animate the old slide out
            TweenLite.to(oldSlide, ANIMATION_SPEED, {x:-oldSlide.width, ease:Cubic.easeInOut});

            // increment curSlide or loop
            if(curSlide++ == slides.length-1)
            { 
                curSlide = 0;
            }

        }
    }
}

Download the full source everything you need that we just did in these 4 steps, including the latest greensock tweening engine
it is better to download the latest *gs* library from the greensock site because there are frequent updates.

that’s it for this tutorial. what you now have is a working slideshow that loops. once you have a good understanding of this simple process, it should be pretty simple to make minor modifications.
i suggest you try this tutorial first, download the source, and play with it. change the constants that we defined at the top to make the delay and animation speeds more to your liking. and also explore different easing methods like Quint.easeIn, Quart.easeOut, Sine.easeInOut. etc.

then if you want to add more features like user interaction / control, or better and easier management and loading of images for massive photo sets, or preloading, then post your requests in the comments below.

now here’s a picture of my cat.

Mochi

7 Responses to “Flash Actionscript3 Tutorial : Animated Slideshow”

Say Anything