Actionscript 2 Image slider timing

Question

I have created an image slider in Flash using Actionscript 2. Basically I have five 600 px images stacked beside eachother inside one clip called ContentMC. Currently the slider works fine to scroll between images when the corresponding buttons are pressed, But what I am trying ro figure out is how to have the images scroll on their own every few seconds, without requiring user interaction. I have the following code on an actions layer on the main timeline:

import mx.transitions.Tween;
import mx.transitions.easing.*;

btn1.endX = 64;
btn1.onPress = doPress;
btn2.endX = -536;
btn2.onPress = doPress;
btn3.endX = -1136;
btn3.onPress = doPress;
btn4.endX = -1736;
btn4.onPress = doPress;
btn5.endX = -2336;
btn5.onPress = doPress;

function doPress() {
    var twX = new Tween(contentMC, "_x", Strong.easeInOut, contentMC._x, this.endX, 1.5, true);
}

I have an instance called contentMC containing all of the images. I have 5 instances called btn1 through btn5 each containing the button movie clip.

Again, The specific functionality I am looking for help with is having the images slide on their own every few seconds (as well as retaining the ability to slide to a specific image by hitting the corresponding button). I apologize for any ignorance on my part, but I am not too proficient with Actionscript.

Thank you all in advance.

coderates coderates · Accepted Answer · 2012-04-26T20:32:34

Okay, my actionscript is a bit rusty but I think you would want to try something like this.

import mx.transitions.Tween;
import mx.transitions.easing.*;

// Initialize Pixel Offsets in an array
// This is the equivalent of what you were doing before but more accessible 
// to code. It has to start at 0 though, so btn1.endX is offsetArray[0] and 
// btn2.endX is offsetArray[1] and so on and so on.
var offsetArray = new Array();
offsetArray[0] = 64;
offsetArray[1] = -536;
offsetArray[2] = -1136;
offsetArray[3] = -1736;
offsetArray[4] = -2336;

// Setup button callbacks
btn1.onPress = function() { changeImage(1); }
btn2.onPress = function() { changeImage(2); }
btn3.onPress = function() { changeImage(3); }
btn4.onPress = function() { changeImage(4); }
btn5.onPress = function() { changeImage(5); }

// Array of buttons, used to dynamically set buttons to down state
var btnArray = new Array();
btnArray[0] = btn1;
btnArray[1] = btn2;
btnArray[2] = btn3;
btnArray[3] = btn4;
btnArray[4] = btn5;

// Button one down by default
btnArray[0].gotoAndStop(3);

// Setup the Timer
// Change this value to alter the delay in image changes
secondDelay = 4;
totalDelay = 30;
// Number of images in the slider (Don't change this unless you add more onPress and endX variables above)
totalImages = 5;

// Don't change these
secondCounter = 0;
totalCounter = 0;
var imageCounter = 1;
// Fires the delay function every 1000 milliseconds
var imageTimer = setInterval(delay, 1000);

// General Function for changing an image in the slider
function changeImage(offset) {
    imageCounter = offset;
    clearInterval(imageTimer);

    if (totalCounter < totalDelay) {
        secondCounter=0;
        imageTimer = setInterval(delay, 1000);
        // Make sure we don't try to move to an image that doesn't exist
        if (imageCounter > totalImages) {
             imageCounter = 1;
        }
    }

    var twX = new Tween(contentMC, "_x", Strong.easeInOut, contentMC._x, offsetArray[imageCounter - 1], 1.5, true);

    // Reset buttons
    for (var i=0;i<totalImages;i++) {
        btnArray[i].gotoAndStop(1);
    }
    // Set button to downstate
    btnArray[imageCounter - 1].gotoAndStop(3);
}

// Timer function for dealing with the passing of time
function delay() {
    secondCounter++;
    totalCounter++;

    if (totalCounter > totalDelay) {
        clearInterval(imageTimer);
    }

    // If it is time to do something, we can do it!
    if (secondCounter >= secondDelay) {
        secondCounter = 0;
        imageCounter++;
        // Now call our changeImage function with the correct offset value
        changeImage(imageCounter);
    }
}

// Script for button animations
btn1.onRollOver = function() {
btn1.gotoAndPlay(2);
}
btn1.onRollOut = function() {
    if (imageCounter == 1) {
        btn1.gotoAndStop(3);
    } else {
        btn1.gotoAndStop(1);
    }
}

btn2.onRollOver = function() {
btn2.gotoAndPlay(2);
}
btn2.onRollOut = function() {
    if (imageCounter == 2) {
        btn2.gotoAndStop(3);
    } else {
        btn2.gotoAndStop(1);
    }
}

btn3.onRollOver = function() {
btn3.gotoAndPlay(2);
}
btn3.onRollOut = function() {
    if (imageCounter == 3) {
        btn3.gotoAndStop(3);
    } else {
        btn3.gotoAndStop(1);
    }
}

btn4.onRollOver = function() {
btn4.gotoAndPlay(2);
}
btn4.onRollOut = function() {
    if (imageCounter == 4) {
        btn4.gotoAndStop(3);
    } else {
        btn4.gotoAndStop(1);
    }
}

btn5.onRollOver = function() {
btn5.gotoAndPlay(2);
}
btn5.onRollOut = function() {
    if (imageCounter == 5) {
        btn5.gotoAndStop(3);
    } else {
        btn5.gotoAndStop(1);
    }
}

This could definitely be refactored because it was done a bit quickly, but it should get anyone started.

Unfortunately I didn't have flash studio available to test this, but it should be a good start. Fire me a comment if you have any issues or questions.

Actionscript 2 Image slider timing

1 Answers