Thursday, 15 April 2010

Banner slider in Actionscript 3

In this tutorial you will learn how to create a banner slider in Actionscript 3. This effect will slide the images from the left when the corresponding thumbnail is selected. You will need four images for this tutorial and four resized thumbnail versions of the images. I have used free stock image which can be downloaded from

Banner slider in Actionscript 3

Step 1

Open a new AS3 Flash file.
Import all your images into the library by selecting File > Import > Import to library. You will also need to create thumbnails of your images in Photoshop. Or you can alternatively resize the images from the library using the Free transform tool (Q). Then on the timeline insert four layers as shown below.

Step 2

Drag each of your images from library onto the corresponding layer on the timeline. Make sure you leave a small gap on the right side of the stage for the thumbnails.

Step 3

On the timeline insert a new layer called ‘Thumbnails’ then drag your thumbnails onto the stage as shown below.

Step 4

Covert each of your images into movie clips (F8) then convert your thumbnails into buttons (F8). If you don’t know how to create buttons then checkout the basic buttons tutorial.

Step 5

Give your thumbnails the following instance names respectively: thumb1_btn, thumb2_btn, thumb3_btn and thumb4_btn. And for your images: image1_mc, image2_mc, image3_mc and image4_mc.

Step 6

On the timeline insert a new layer called Actions then open up the actions panel and enter the following code.

//Import the tweenlite packages.
import com.greensock.*;

//Array to all movie clips instance and all the button instances.
var mcArray:Array=[image1_mc, image2_mc, image3_mc, image4_mc];
var btnArray:Array=[thumb1_btn, thumb2_btn, thumb3_btn, thumb4_btn];

//This loops through all the buttons adding mouse events to each of the button.
for (var j:int = 0; j < btnArray.length; j++) {
btnArray[j].addEventListener(MouseEvent.CLICK, moveImage);

//This offsets the movie clip by placing it double the width and to the left of the stage.
for(var k:int =1; k < mcArray.length; k++){
mcArray[k].x = -mcArray[k].width*2;

//This function moves the images to the right of the stage to the 0 x position when
//the thumbnail is selected. If the thumbnail is not selected it remains in the same
function moveImage(event:MouseEvent):void {
for (var i:int = 0; i < btnArray.length; i++) {
if (event.currentTarget==btnArray[i]) {[i],1, {x:0});
} else {[i],1, {x:-image1_mc.width * 2});

Step 7

Test your movie clips Ctrl + Enter. Try clicking on the thumbnails and you should see the images sliding into position.


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP