Webforumz Newsletter - September 2007

Tutorials

Creating your own Basic Sliding Image Gallery.

This tutorial is long, I´d give yourself about 1-2 hours to complete it, but it is a lot of fun and will get the creative juices flowing! This tutorial assumes you have some basic knowledge of flash, but walks through every step from start to finish.

We will be doing 3 things in this tutorial:

  • Creating buttons and images for an Image Gallery
  • Creating interactivity on the buttons and learning best practices for layout.
  • Creating a scrolling menu of buttons for some fun interactivity.

Let´s get started!

  1. Set the stage of your flash file, for this example we will use 350 x 500 px, Click OK.
    Image 1
  2. The next step is to create a few layers on your main timeline. Create 4 different layers named: Actions, Images, Scroller, and Background so it looks like
    Image 2
  3. On the Background Layer, use the Rectangle Tool (R) and create a rectangle that is 350x12 px. Choose whatever color(s) you want.
  4. Place the first rectangle at X: 0 Y: 500 so it is at the bottom of the stage. Duplicate the rectangle and place another at X:0 Y: 365
    Image 3
  5. Now let´s create our scroller, Select the Scroller Layer - first we need to create some buttons, let´s make 7 buttons. For now let´s make them look very basic so we can build the functionality around it and pretty it up later.
  6. Use the rectangle tool (R) again and create a box that is 120 x 89 px. Use the text tool and put a "1" inside the box and place it as shown is
    Image 4
  7. Duplicate this box/number 6 more times and place them accordingly on the stage so it looks like
    Image 5
  8. Now that we have the buttons created select the box and the number 1 of your first button and press F8 to turn it into a Movieclip, this will allow us to apply action to this object.
    Image 6
  9. Label the Movieclip whatever you like, as it doesn´t affect anything except for how it shows up in your library items.
  10. Now, give the newly created Movieclip an instance name of "b1" this is very important because this is how we will access the movieclip/button from our actionscript we will create shortly.
    Image 7
  11. Repeat steps 8 - 10 for each of your buttons and give them instance names of b2, b3, b4, b5, etc until all the buttons have been created.
  12. So to recap, all of your buttons you just created should now be Movieclips, have instance names associated with them, and all be located on the scroller layer.

    If you said yes to all of the above things, then continue on!
  13. Now, on your actions layer, insert blank keyframes (F7) every 10 frames all the way to frame 70 so it looks like the image below. *** Putting all ActionScript on a separate layer is a best practice when creating flash projects, keep all of your ActionScript on a separate layer that way it makes it easier to locate the script in the future.*** (click image below to see an enlarged version)
    Image 8
  14. Now, we are still on the actions layer, we want to create labels for each of the blank keyframes we just inserted. This will be used for navigation purposes from one image to another.
  15. Select the blank keyframe at frame 0 and give it a Frame Label (like an instance name) of "one".
  16. Repeat this process for the other 6 blank keyframes you´ve created giving them instance names of "two", "three", "four", "five", etc all the way to "seven". Your project should now look like (click image below to see an enlarged version)
    Image 9
  17. Alright, now on the Images layer on the main timeline insert blank keyframes (F7) right below the corresponding frame labels.
  18. On the Images Layer Select the frame below the frame label "One". Make a box 305 x 330 px and put the appropriate number on the box. It will look like the image below. Repeat this process for each of the 7 images changing the number of the pictures accordingly.
    Image 10
  19. On the Scroller and Background layer, select frame 61 and press F6 (Insert Keyframe) so that the scroller and background are visible throughout the entire project.
    Image 11
  20. Alright, the first part of the gallery is set up! Press CTRL-Enter to preview your movie, and it will look like Flash 1.0 below!

You´re probably asking yourself why does it cycle through each image so fast! I want it to stay on an image until the user clicks a button! Then it advances to the next image! The next part of the tutorial will teach you how to do that!

  1. On the Actions Layer, we need to insert some basic Action Scripting to the flash project stops on certain frames. Press F9 to open your Actions Panel if it is not already open.
  2. Select the Frame Label "One" on the actions layer, and in the Actions Panel type stop(); this tells flash to stop the timeline at frame "One" Repeat this process by adding the stop(); command to each of your frame labels of "One" though "Seven" It will then look like the figure below, you´ll notice the small "a" on each of your frame labels. This indicates that these frames have actions applied to them.
    Image 12
  3. Now, lets create the interactivity with our buttons we´ve created. Select the scroller layer and make sure all 7 buttons are selected. Press F8 (create new movieclip) and give it a name of "menu".
  4. With the new movieclip selected, also give the movie clip an instance name of "menu" we will need this a bit later when we create the scroller.
  5. Double Click on the "menu" Movieclip to access the buttons inside of the movieclip you just created. Inside this movieclip should be 1 layer with all of the buttons on it, create another layer above the buttons layer and name it Actions.
    Image 13
  6. Paste this code onto the actions layer inside the menu movieclip: 
    b1.onRelease = function()
{
	_root.gotoAndStop("one");
}
  7. Since we were very smart earlier and gave each of our buttons instance names and labeled each of our frames, this code is saying when the object "b1" is clicked on and released, it will go to the _root (main) timeline and access the frame labeled "one".
  8. On the actions layer inside the menu Movieclip, repeat this code for each button and each frame label as appropriate. (i.e. replace "b1" with "b2" and "one" with "two, all the way to "b7" and "seven)
    Image 14
  9. Alright, press CTRL-Enter to play your movieclip and it will look something like mine! Click the 1, 2, 3 buttons accordingly and they should change to the appropriate picture above! Great work so far! Flash 2.0

Awesome job so far, now, as you´ll notice the buttons we´ve created don´t scroll anywhere! But never fear, that is what we will build next. It takes just a small bit of code and a little thinking to make it work. I know, this is long, but we´re almost there!

  1. Back on your main timeline on the Scroller layer, select the menu movieclip you´ve just created, and make sure it has an instance name of "menu" (very important)
  2. With the Menu movieclip selected press F8. give this new Movieclip a name of "parent". So we´ve now embedded the buttons, inside a movieclip named menu, and the menu movieclip inside a movieclip named "parent". (I´ll explain why we did this a bit later).
  3. Now, double click on the parent movieclip and you screen should look like mine.
    Image 15
  4. Inside of the parent movieclip create another layer called Actions, on this layer we will create the scrolling functionality. Select the actions layer and press F9 to open your actions panel again unless it is already open.
  5. The first thing to do is to create some variables for the scroller, paste the following: 
    stop();

var mouseX:Number;
var mouseY:Number;
var menuX:Number;
var diff:Number;
  6. These variables are used to define the position of the mouse (X and Y), the "menu" movieclip based on the X axis and the difference between the sides of the stage to find the center of the stage for scrolling purposes. Below the variables enter this code: 
    menu.onEnterFrame = function()
{

}
  7. This is where giving our menu movieclip an instance name of "menu" was very important. This code is telling flash that once the "menu" movieclip is displayed keep cycling through whatever code we place inside of the { and } brackets.
  8. Now let´s insert the code to make it scroll and the code to determine the mouse position for scrolling. Your code will look like this: 
    menu.onEnterFrame = function()
{
mouseX  = _root._xmouse;
	mouseY  = _root._ymouse;
	menuX  = menu._x;

	//ACTION: Set diff property for the mouse movement
	if (mouseX > 175) diff = (mouseX-205)/30; 
	if (mouseX < 175) diff = (145-mouseX)/30; 
	

	if (mouseX <= 175 && menuX <= 400) this._x += diff; 
	if (mouseX >= 175 && menuX >= -325) this._x -= diff; 
	
}
  9. Ok, lets analyze this bit of code. The first 3 lines set the variables declared above to the _root(main timeline) of the X and Y mouse positions and the X location of the "menu" movieclip.
  10. The next bit of code basically figures out the "middle" of the "stage" and tells the movieclip to scroll left or right depending on the position of the mouse.
  11. The last bit sets the "bounding" box for the movieclip that sets the max distance to the left and right that the "menu" movieclip will scroll. The top part sets the distance to the "left" that it will scroll and the bottom sets the distance to the "right" that it will scroll. This might seem backwards, but feel free to change the 400 and the -325 to see the effect on the scrolling.
  12. Ok! Code is done! Press CTRL-Enter to view your progression! You should now see the buttons scrolling based on mouse movement, and you can click on the buttons and the corresponding picture will show up. Flash 3.0

What´s next?

You will notice that the scrolling menu keeps scrolling no matter where your mouse position is, which is fine I suppose, but I would prefer that the buttons only scroll when the mouse is in that section of the stage...so let´s make it happen!

This can be accomplished with an IF statement on the code that we were just modifying above. Here is what it would look like:



menu.onEnterFrame = function()
{
	mouseX  = _root._xmouse;
	mouseY  = _root._ymouse;
	menuX  = menu._x;

	//ACTION: Set diff property 
	if (mouseX > 175) diff = (mouseX-205)/30; 
	if (mouseX < 175) diff = (145-mouseX)/30; 
	
	if(_root._ymouse > this._parent._y)
	{
		if (mouseX <= 175 && menuX <= 400) this._x += diff; 
		if (mouseX >= 175 && menuX >= -325) this._x -= diff; 
	}	
}

So, what does this mean? Well remember how we had the Menu MC, and then nested that within another MC called parent? What this lets us do is to tell the menu to only scroll if certain parameters are "true". So if the Y: mouse on the main timeline is greater than (higher) than the parent movieclips Y: value then do the following scroll values. Change the > to a < and publish your file to see the difference just for the fun of it.

Alright, your finished file should look something like mine! Flash 4.0

You can then go crazy and add fun transitions in to your slide show, and see how the buttons function, it´s all up to you!

You can also use XML to call in the pictures and create a dynamic text field to display a short description of each picture. This makes for greater flexibility and scalability of your image gallery. But that´s another tutorial!

Have fun!