How to Make a Scrolling Menu in AS3

Difficulty: Medium


Skills Used: tweens, buttons, links


Instructions:
1. Get your posters (or whatever you'd like to display) together. Open them up in Photoshop and make thumbnails of each one. In my menu the vertical posters are about 200 px tall, and the horizontal posters are about 150 px tall.

2. As long as you're in Photoshop, let's go ahead and make the buttons that you will need. If you'd rather, you can download mine at the bottom of this tutorial. (Note: These are pngs, so download them, don't just copy and paste them, or you will get backgrounds.) Create a new layer, delete the background layer (so you can see the grey and white grid), then make your button. I made mine a circle with an arrow-shaped hole cut out of it, and I added shading and drop shadows. The circle is about 100 x 100. Save your button as a png. Remember, you can just make one and then flip it horizontally.

Don't know how to use Photoshop? There's an ebook that can teach you in just a few hours. Check it out here.

3. Open up a new Flash document. Make sure you're using Actionscript 3.0. My stage is 600 x 300, and I made the background color 333333. You'll have to decide what's best for your website and your posters. Import your arrows and poster thumbnails into the library.

4. From the menu at the top, select Insert -> New Symbol. Name your new symbol "posters", or something you'll remember. In the timeline, create a layer, name it "posterThumbnails". Drag the symbol posters into the layer posters, then use the align menu to center it. (I know, it's just a little circle, just center that circle.)

5. Double click on the little circle that represents your posters movieclip so that at the top of the stage, where it said "Scene 1", now it should say "Scene 1 posterThumbnails". Create a layer in the timeline and name it "thumbnails". Start dragging your thumbnails to the stage. Make sure they all have the same Y value in the properties inspector and look evenly spaced. When you run out of room, select all the posters and slide them over. You can quickly select all of the posters at once by clicking on the "thumbnails" layer you created. The length of your thumbnails should be significantly wider than the stage, otherwise what would be the point of scrolling? When you're done, position the thumbnails so that the leftmost poster is close to the left edge of the stage.

6. Go through the thumbnails (know, it's very tedious) and convert each one to a movieclip by right clicking the thumbnail and choosing "Convert to Symbol". Then name the instance on the stage a name that will be easy to remember.

7. Create another layer and name it "Actions". Open up the Actions Window and for each poster thumbnail, you will need to add the following code:

posterName.addEventListener(MouseEvent.CLICK, clickPosterName);

function clickPosterName(evt:MouseEvent):void
{
navigateToURL(new URLRequest("http://yourPostersURL.com"), "_same");
}

The "poster name" is the name you gave to the instance of the thumbnail in step 6. The URL should be a website that displays the poster or whatever is related to it.

Test your movie. Make sure the proper website opens up when you click on each thumbnail.

8. Go back to the main frame by clicking on "Scene 1" above the stage. Create a layer on the timeline (above the thumbnails layer) called "buttons". Place the left and right buttons in this layer. In the properties inspector, name the instance of the left button "leftButton" and the instance of the right button "rightButton".

9. Select the thumbnails layer. You need to decide how far the thumbnails should move to the right and left before they automatically stop. Drag it to the left as far as you want it to go. Look at the properties inspector and write down the X position. Now drag the thumbnails layer to the right as far as you want it to go. Look at the properties inspector again and write down the X position again. Then put the thumbnails layer back where you want it to be when the menu first opens up.

10.  Create another layer in the timeline. Name this one "Actions". (Yes, you made an actions layer before, but that was within the thumbnails movieclip, remember?) Open up the actions window and paste in the following code...

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

var leftTween:Tween;
var rightTween:Tween;

rightButton.addEventListener(MouseEvent.CLICK, goRight);
leftButton.addEventListener(MouseEvent.CLICK, goLeft);

function goRight(evt:MouseEvent):void
{
if (thumbnails.x > -700)
{
leftTween = new Tween(thumbnails,"x",Strong.easeOut, thumbnails.x, (thumbnails.x - 200),2,true);
}
}

function goLeft(evt:MouseEvent):void
{
if (thumbnails.x < 2350)
{
rightTween = new Tween(thumbnails,"x",Strong.easeOut, thumbnails.x,(thumbnails.x + 200),2,true);
}
}

Both of the functions begin with an if statement. Change the "-700" and the "2350" to the x values you wrote down in step 9. The smaller number should go in the "goRight" function, the larger number should go in the "goLeft" function.


10. Test your movie. Do the buttons work? Are you happy with how far the thumbnails scroll? Do the thumbnails automatically stop when you go too far to the right or left? If your thumbnails aren't scrolling, make sure that you named the instances properly. The thumbnails should be called "thumbnails", the left button should be called "leftButton" and the right button should be called "rightButton".


11. Make another layer in the timeline, below the "buttons" layer. Call it "fadeout". This is where you will place your gradient rectangles, so your posters fade away instead of just falling off the stage. Download my gradient from the bottom of this tutorial if you need an example. Open it up in Photoshop. Mine is 100 pixels wide, about 1/6 of of the width of the stage, and 300 pixels tall, the same height as the stage. If you need to make your own, just open up a new file that's the size you need. Create a new layer. Delete the background layer. In layer 1, use the gradient tool to make a gradient that starts out the same color as the background of your movie and ends up transparent. Save it as a png. Then flip it horizontally and save it again.

12. Go back to Flash. Import your two gradients to the library, then drag them to the "fadeout" layer. Place the left one so it is centered vertically and hangs just to the left of the left side of the stage. Place the right one so it is centered vertically and ends just to the right of the right edge of the stage. Test your movie one more time and make sure you can't see a gap on the edges of your movie.

You're done!


Download the Image Files: