Infinite Gallery / Menu

In this new and interesting Flash and ActionScript 3 tutorial I will teach you how to create an infinite gallery. This will also work perfectly for menus and so on. Let’s get started straight away!

Note: You need TweenMax in order to fully complete this tutorial.

Getting the images

Download six images (100×100) that you want to use in this tutorial. I downloaded the images from FreeDigitalPhotos.net.

Creating the Flash document

Create a new Flash (ActionScript 3) document of size 500×200. Make the background black.

Importing the Images to Flash

From the menu select File -> Import -> Import to Stage. Select the images that you have decided to use in this tutorial.

The images should now be on the stage.

Positioning the Images

Position the images vertically to the center of the stage. Space them evenly horizontally (leave some space between the images). You can use the align buttons to help you out.

Converting the Images to Movie Clips

Convert the leftmost image to a movie clip. Name it “My Image 1″ and set the registration point to the left edge.

Repeat this step to the rest of the images. Name them “My Image 2″, “My Image 3″ and so on…

Your library should now look like the following.

Adding ActionScript 3

Double click the “My Image 1″ movie clip. You should now be “inside” the movie clip. Go ahead and create a new layer called “actions”.

In the actions layer type the following code.

//Import TweenMax 
import gs.*;
 
//Set the initial state for this movie clip 
TweenMax.to(this, 0.5, {alpha: 0.4});
 
//Add mouse over & out event listeners 
this.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
this.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
 
//This function is called when mouse is over this movie clip 
function mouseOverHandler(e:Event):void { 
 
 //Tween the alpha 
 TweenMax.to(this, 0.5, {alpha: 1});
} 
 
//This function is called when mouse is out of this movie clip 
function mouseOutHandler(e:Event):void { 
 
 //Tween the alpha 
 TweenMax.to(this, 0.5, {alpha: 0.4});
}

Repeat this step to the rest of the images! We simply add some functionality when the user hovers over an image…

More Movie Clips

Now that we have the individual images all set up, we can start building the infinite gallery. In the main timeline, select all six image movie clips. Convert them to a single movie clip named “Gallery Images”.

and Still More Movie Clips …

In order to have the illusion of an endless loop of images, we need another instance of “Gallery Images” movie clip on the stage. So drag another “Gallery Images” movie clip on the stage and position it behind the first instance so that they are horizontally aligned.

The Last Movie Clip

Select both instances of the “Gallery Images” movie clips that are on the stage. Convert them to a single movie clip named “Infinite Gallery” and set the registration point to the left edge.

Give this movie clip an instance name of “infiniteGallery”.

Adding Final ActionScript 3

In the main timeline, create a new layer called “actions”. Type the following code.

//Import TweenMax 
import gs.*;
 
//Save the horizontal center 
var centerX:Number = stage.stageWidth / 2;
 
//Save the width of the whole gallery 
var galleryWidth:Number = infiniteGallery.width;
 
//Speed of the movement (calculated by the mouse position in the moveGallery() function) 
var speed:Number = 0;
 
//Add an ENTER_FRAME listener for the animation 
addEventListener(Event.ENTER_FRAME, moveGallery);
 
function moveGallery(e:Event):void { 
 
 //Calculate the new speed 
 speed = -(0.05 * (mouseX - centerX));
 
 //Update the x coordinate 
 infiniteGallery.x+=speed;
 
 //Check if we are too far on the right (no more stuff on the left edge) 
 if (infiniteGallery.x>0) { 
 
  //Update the gallery's coordinates 
  infiniteGallery.x= (-galleryWidth/2);
 } 
 
 //Check if we are too far on the left (no more stuff on the right edge) 
 if (infiniteGallery.x<(-galleryWidth/2)) { 
 
  //Update the gallery's coordinates 
  infiniteGallery.x=0;
 } 
 
}

This code is responsible for the illusion of an infinite loop. We simply check when we are too far on the left or the right side and repostion the “infiniteGallery” movie clip accordingly.

Final words

That’s it for this tutorial. I hoped you enjoyed it and learned some new ways of working with Flash and ActionScript 3. Feel free to download the .fla file to have a closer look. Comments are always welcome!

Download .fla