Saturday, 3 July 2010

Banner slider in Actionscript 3 part 2

This tutorial is slight modification of the Banner slider in Actionscript 3 tutorial where one of the bigger images will remain on the banner instead of moving in and out. You will again need four images and four thumbnails for this banner.

Step 1

Repeat steps 1 – 5 in Banner slider in Actionscript 3 tutorial, but for step 2 only have one large image on the stage and the other three images off the stage.

Step 2

Open up the Actions panel and add the following code:

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

//Array to hold all movie clip instances 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 is a temporary movie clip to hold the selected target movie clip.
var tempMC:MovieClip;

//The start position is the x position of the first image and the 
//the end position is the x positions of the other three images.
var startPos:Number = 0;
var endPos:Number = -300;

//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 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 ([i] && mcArray[i].x !=0) {
  setChildIndex(mcArray[i], numChildren - 1);[i], 1, {x:startPos, onComplete:moveBack});

//This function moves back all the images apart from the one selected.
function moveBack():void {
 for (var ii:uint = 0; ii < mcArray.length; ii++) {
  if (mcArray[ii]!=tempMC) {

Step 3

Test your movie Ctrl + Enter.


shadolen 3 July 2010 at 17:08  

I love your work. You keep me Inspired

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP