Flash Tutorial – 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!
Source: tutorials.flashmymind.com
you may also like:
Leave a Reply
