Flash tutorial on how to slide menus (and other objects) on and off screen.	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash - Sliding Menus
Moving an Object on Roll Over using ActionScript

Free Flash Tutorial

In this tutorial you will learn an animation technique makes things slide on and off the Stage. This could be used to slide Menus on and off. It could also be used to slide photos, forms, animations or any other objects. In fact you can use it to move multiple objects on and off screen all at the same time. Some can come from the top or bottom whilst other can slide in and out from from the sides.

This tutorial shows you the simple technique and explains the ActionScript needed. There a two reasons why you would use ActionScript to move an object. The first is that ActionScript is smaller than animation and the second is that you can move the object from any place to any other place irrespective of it's starting position. This makes the movement more versatile.  In an animation movement must be linear, that is it must follow a pre-defined path. It will go from A to B to C.  With ActionScript the object will go any order: A to B or A to C.  You may have as many stop position as you want and the flash movie will not get any bigger as it is only a few lines of script.

My Example: Download the Flash file  Int 101a

In this example I have used four positions for the Movie Clip:

1. The start position: This is off Stage to the bottom.

2. The position the Movie Clip moves to when the movie first starts (click refresh to see this).

3. The position for button one: Scroll up.

4. The position for button two: Scroll down.

You could have as many objects sliding in and out as you wish. These sliding objects may contain any flash objects such as pictures, buttons, text, animation or anything else. The only condition is that the objects must be nested into a Movie Clip Symbol. So if you make a button, that button must be placed inside a Movie Clip then placed on the Stage.

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

Step One: Setting Up the Document

You will need to set up an new Flash document and create a new Movie Clip.

1. Open a New Flash Document: File > New (Ctrl N)
2. If the General Tab is not selected, select it:
3. Select Flash Document: (ActionScript 2.0 or 3.0)

Note: If you are not sure which version of ActionScript to use just default back to ActionScript 2.0 as it will work on more computers. You can always change this to ActionScript 3.0 later by going to File > Publish Settings > Flash > ActionScript version.

4. Click: OK
   
   
5. Go to: Modify > Document (Ctrl J)
6. Select an appropriate size. Mine is: 500 x 300 px
7. If you wish select a background color. Mine is: #660066
   
8. Click: OK
   

Step Two: Creating the Movie's Content

1. Go to Insert > New Symbol (Ctrl F8)
2. For Name type: Movie Clip Slider
3. For Type select: Movie Clip
4. Click: OK
   
   
5. Create your Movie Clip's: Content or Menu

Draw or type or place other symbols such as buttons into the Movie Clip. You could place photos, animations, text or any other type of content. I paced some triangular buttons, text and some miscellaneous dotted lines:


My Movie Clip's Content.

Cross Ref: To learn how to create your own buttons see the beginners tutorial: Buttons

6. When you have finished go back to the: Main Stage

Note: To return to the Main Stage click on the Scene 1 Tab in the Edit Bar: .
If the Edit Bar is not open, open it: Window > Tool Bars > Edit Bar

Step Three: Place the Movie Clip on the Stage

Take the Movie Clip out of the Library and place it on the Main Stage.

1. Open the Library: Window > Library (Ctrl L or F11)
2. Drag your new Movie Clip onto the: Main Stage
3. Place you Movie Clip just: Below the Main Stage

   Note: It is best if the Movie Clip is just above or below the Main Stage so when the frame loads the Movie Clip rolls into view. I placed my Movie Clip just below the Main Stage. If you want the Movie Clip to roll in from one side place the clip to the left or right of the Main Stage (in the ActionScript that follows you will need to swap all the Y's for X's).

4. If the Property Panel is closed, open it: Window > Properties > Properties (Ctrl F3)
5. In the Property Panel give the Movie Clip an Instance name: MC



Note: The name MC is specific to the instance on Stage and does not relate to the name of the symbol in the Library.

Step Four: Frame 1 Actions

1. In the Timeline click on the Insert Layer button: Insert Layer
2. Rename the new Layer: Actions



3. In the Actions Layer select: Frame 1
4. If the Actions Panel is closed, open it: Window > Actions (F9)
5. If Script Assist is on, Switch it off:

   Note: With Script Assist on you cannot type in the Actions Panel. If you want to learn more about Script Assist see the tutorial on the Actions Panel

6. Type (or copy & paste) the following actions:

yTargetMC = 100;


Note: The top of the Actions Panel says: Actions - Frame


Actions Panel.

Note: The number 100 will determine where the Movie Clip will stop when the frame is loaded. You may want to come back and place a different number once you have tested the Movie Clip. The higher the number the further down the page the Movie Clip will roll and visa versa.

Step Five: Movie Clip Actions

1. Select your Movie Clip
2. If the Actions Panel is closed, open it: Window > Actions (F9)
3. Attach the following ActionScript to the outside of the Instance (Not in the timeline) of your Movie Clip:
   

   onClipEvent (enterFrame) {
      yMC = getProperty(_root.MC, _y);
      moveMC = _root.yTargetMC - yMC;
      setProperty(_root.MC, _y, yMC + (moveMC/10));
   }

   
   Note: The top of the Actions Panel says: Actions - Movie Clip

    

   
   The ActionScript is attached to the Movie Clip.

The ActionScript Explained

Line 1:  onClipEvent (enterFrame) {

Perform the event contained in the {} every time the Play Head hits the frame: Usually 12 times per second.

Line 2:  yMC = getProperty(_root.MC, _y);

The first part is a variable names for the equation: yMC (ie: yInstanceName)

Cross Ref: It could be any name see: variable tutorial for more details.

The second part gets the Y position of the Movie Clip: getProperty(_root.MC,
This means that the Y position of the Movie Clip is called: yMC

Note: The Y axis is up and down.

Line 3  moveMC = _root.yTargetMC - yMC;

The first part is a variable name for the equation: moveMC

The second section of line calculates the distance the Movie Clip has to move to get to its new target position. It does not actually move the Movie Clip but only calculates how far it has to move. It does not calculate the entire distance it has to move but does it in small steps. Bear with me on this one...

You have already set the new target position in main timeline: yTargetMC = 100;

The current position starts off where you placed the Movie Clip on Stage.

If you placed the Movie Clip at Y 20 and it has to move to 100 the distance it needs to move in the first step is 100 - 20 = 80. Therefore: moveMC = 80

This means that the first move will be from 20 to 80. There will be additional steps to calculate how far the object will have to move to get to its final position. This incremental movement is what creates the animated effect.

Note: In the line of ActionScript this 80 will get further divided so that object moves slower, otherwise the Movie Clip would arrive too soon and you would not see the movement. The important thing to remember is that this calculation creates a number of steps for the object to move.

As soon as the Movie Clip starts to move this calculation will change. The distance between its current position and where it has to go (the target position) gets less and less.

Finally when the Movie Clip is in the target position 100:
100 - 100 = 0.  So the distance it has to move is 0.

Therefore: moveMC = 0

Line 4 setProperty(_root.MC, _y, yMC + (moveMC/10));

This is the line that does all the work. It is the bit which actually moves the Movie Clip. At first very fast then slower and slower.

The first section instructs the flash player to move the Movie Clip to a new Y position. 

setProperty (_root.MC, _y, ...

The Y axis is vertical so the Movie Clip will move up or down.

The second section of this line tells the Movie Clip where to move to. This is the clever bit.

... yMC + (moveMC /10)

The current Y position of the object + (how many pixels it has to go divided by 10).

Note: The 10 is an arbitrary number but the lower the number the faster the object moves and visa versa (if you use 1 the Movie Clip will arrive immediately).

If I go back to my example above and move the Movie Clip from 20 to 100:

current position + (distance to go divided by 10)

20 + (80/10) = 28

This makes the object move 8 pixels.  From 20 to 28. It is closer to the 100 but not there. Flash then does the calculation again:

28 + (72/10) =  35.2

This makes the Movie Clip move a further 7.2 pixels.  It will then make the calculation again and move the object slightly less than 7.2 pixels etc until it reaches its destination.  This makes the movie move initially very fast and as it gets closer to the destination it slows down or decelerates.

Note: If you want several Movie Clips to move you will need a unique instance name and the code for each one will be:

onClipEvent (enterFrame) {
   yInstanceName = getProperty(_root.InstanceName, _y);
   moveInstanceName = _root.targetInstanceName - yInstanceName;
   setProperty(_root.InstanceName, _y, yInstanceName + (moveInstanceName /10));
}

Step Six: Test the Movie

If everything is correct the menu should now slide in as the movie loads. You may want to check that the stop point and speed are correct.

1. Go to: Control > Test Movie (Ctrl Enter)

Note: You should now see the Movie Clip slide in from the bottom.

2. Close the Test Window:

• To change the speed you need to change the division in the above line (Step 5, line 4). 
  If you make the number 10 higher the speed will be slower.
  If you make the number 10 lower the speed will increase. 
  
  
• To change the location of where the Movie Clip stops you need to change the number in the action script in frame one: yTargetMC =
  If you make the number 100 higher the Movie Clip will slide further down the page.
  If you make the number 100 lower it will slide to a position higher up the page.
  
  Note: If the target number is too high or too low you may find that your Movie Clip either does not move far enough to enter the Stage or move right across the Stage to stop too far down to be visible.
  
  Note: You may use negative numbers: yTargetMC = -100; or positive numbers : yTargetMC = 100;

Step Seven: Placing a Button on Stage

The last thing is to place a button on Stage and set the ActionScript so that the Movie Clip moves when you roll over or click the button.  You will either need to either create a new button and place it on Stage or drag a button out of the common button library.  Either:

1. Create your own Button and place it on Stage
   
   Or: go to Window > Other Panels > Common Libraries > Buttons and drag a button onto the Main Stage.

My Button:




2. Select the new: Button
3. If the Actions Panel is closed, open it: Window > Actions (F9)
4. Type (or copy & paste) the following actions:

   on (rollOver) {
      yTargetMC = 200;
   }

   Note: The target number must be different to the number in frame 1 otherwise the Movie Clip will not move. Change the target number to a number that suits the position that you want the Movie Clip to stop at.

    

   As an alternative make the Movie Clip move on (release) like this:

   on (release) {
      yTargetMC = 200;
   }

5. Create as many other buttons as you want stop positions: Create more Buttons

I created one more button:



6. Add the above code to you new buttons but change the target position. Like this:

   on (release) {
      yTargetMC = -600;
   }
   

Step Eight: Finished 

Your first Movie Clip should now be sliding happily to the position that you want it. You may also wish to add additional Movie Clips so that one button moves more than one object.  There is an example below.  The instance name needs to be different and all references in the script will need to be changed to reflect this. Download the example below to see the additions.

My Example: Download the Flash file  Int 101b

A Final note: X & Y

If you want your movie to move from left to right as opposed to up and down just change all the Y's to X's.  With a little fiddling around you should also be able to move things on diagonals. To do this you will have to have a script for both the X and Y axis.

Have fun!

I hope you have found this useful. If so perhaps you could recommend this site to others and link to webwasp!