Flash User

In this tutorial I will describe how to create an image sliding in Actionscript 3.0. For creating the transition we’ll use the standard Tween from Flash. You can use this in your projects, product presentation, anywhere you need such a tool.

The images used in this tutorial were taken from flickr user mundilfari_gjk

The end result (rollover the image for the navigation buttons to appear):

1. Create a new Flash AS3 file (500 x 250) with a frame rate of 30 fps and 3 layers inside of it.

2. In the last layer, create an empty Movie Clip with the registration point in the top left corner (Insert ->New Symbol). Place the images side by side in the Movie Clip together with the text name and description in front of each picture. Give it an instance name of mc.

3. Select the buttons layer from the timeline and draw a 30×30 rectangle and two lines for the button arrow. Center align and convert them to a Movie Clip(right click – Convert to Symbol). Give an instance name of button_left. Duplicate this and inside of it change the arrow shape to point in the right direction and give an instance name of button_right.

4. In the as layer open the Actions tab. Import the transition classes for tweening. Declare variables for the image to play, total images and an array with the X coordinate of each image.

import fl.transitions.easing.*;
import fl.transitions.*;

//know what image to play
var count :Number = 0;

//an array with the images  x - coordinate
var imagePos :Array = [0,-500,-1000,-1500,-2000];

var imgLength = imagePos.length-1;

5. Create the buttons and the functions for them to appear or disapper according to the mouse move.

//left button
button_left.buttonMode = true;
button_left.useHandCursor = true;
button_left.mouseChildren = false;
button_left.addEventListener("mouseDown",buttonLeftPress);
button_left.visible = false;

//right button
button_right.buttonMode = true;
button_right.useHandCursor = true;
button_right.mouseChildren = false;
button_right.addEventListener("mouseDown",buttonRightPress);
button_right.visible = false;

//functions for buttons to appear or disapper according to the mouse move
stage.addEventListener("mouseMove", getPosition);
stage.addEventListener( Event.MOUSE_LEAVE,leftStage );

function leftStage(e:Event) {
	button_left.visible = false;
	button_right.visible = false;
}
function getPosition(e:MouseEvent) {
	if (mouseX < stage.stageWidth/2) {
		button_left.visible = true;
		button_right.visible = false;
	} else {
		button_left.visible = false;
		button_right.visible = true;
	}

}

6. Create the functions for the images transition when you click the left or the right button.

//left button press
function buttonLeftPress(e:MouseEvent) {
	count--;
	if (count <0) {
		count = imgLength;
	}
	new Tween(mc,"x",Regular.easeOut,mc.x,imagePos[count],1,true);
}
//right button press
function buttonRightPress(e:MouseEvent) {
	count++;
	if (count >imgLength) {
		count = 0;
	}

	new Tween(mc,"x",Regular.easeOut,mc.x,imagePos[count],1,true);
}