Thursday, 9 September 2010

Simple slideshow in Actionscript 3

This tutorial is a simple slideshow using the timeline where you can go back and forth between the images. There is also a dynamic text field which displays the current image in the slideshow. I have used free stock images for this tutorial.


Simple slideshow in Actionscript 3

Step 1


Open a new AS3 file and import the images you want to use by selecting File > Import > Import to library. On the menu bar select Insert > New Symbol give an appropriate name, choose movie clip for the type and click ok. Drag an image onto the stage then create an empty key frame (F6) and drag another image onto the stage. Repeats this for the number of the images you have assuring that all the images are lined up. You should eventually have a different image on a different key frame.


Step 2


Return to the main timeline and drag the movie clip onto the stage and give the instance name: slideShow. Create two buttons one for the left and one for the right. And give them the instance name: left and right accordingly.


Step 3  


Select the Text tool with dynamic text and drag a text field onto the stage. You will need to embed the Numerals and the ‘/’ (forward slash character). Give the dynamic text the instance: numSlide_txt. 


Step 4

On the timeline create a new layer called Actions then add the following code:

//Stops the images from looping.
slideShow.stop();

//Add the mouse click event to the left and right buttons.
left.addEventListener(MouseEvent.CLICK, goLeft);
right.addEventListener(MouseEvent.CLICK, goRight);

//Initially hides the left button.
left.visible = false;

//This goes to the next frame on the slideshow timeline and if the current frame is equal
//to the total number of frames then right button is set to invisible. Otherwise
//both buttons are showing.
function goRight(e:Event):void{
slideShow.nextFrame();
slideShow.currentFrame == slideShow.totalFrames ? right.visible = false: right.visible = true; left.visible = true;            
}

//This goes to the previous frame on the slideshow timeline and will
//show the left button if the first images is not showing.
function goLeft(e:Event):void{
slideShow.prevFrame();    
slideShow.currentFrame == 1 ? left.visible = false : right.visible = true; 
}

//Adds the event frame event to the stage.
stage.addEventListener(Event.ENTER_FRAME, frameNumber);

//This displays the current frame in the dynamic text field using the 
//the slideShow.currentFrame property as the current number 
//and the slideShow.totalFrames as the total number of images. 
function frameNumber(e:Event):void{
var sNumber:int = slideShow.currentFrame;
var sTotal:int = slideShow.totalFrames;    
numSlide_txt.text = sNumber+"/" +sTotal;
}

Step 5

Test your movie Ctrl + Enter.

1 comments:

Shaddy 19 March 2013 at 21:14  

THANK YOU VERY MUCH!

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP