Sliding Menus

This is the technique used to roll my menus on and off stage on the webwasp home page!

The aim of the tutorial is to learn how to create a menu or other object that slides on and off stage.

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 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.

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.

Y ou could have as many objects sliding in and out as you wish. These sliding objects may contain any flash object such as a graphic, a button, an input text frame, an animation or anything else. The only condition is that the object must be embedded in a movie clip symbol. So if you make a button, that button must be placed inside a movie clip then placed on the stage.

Step One: Create a Movie Clip

Create a movie clip.

1. Go to Insert > New Symbol
   Behavior: Movie Clip
   Name: My Movie Clip or any other suitable name.
   
2. Then you must draw or type or place other symbols such as buttons into the movie clip.

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

3. When you have finished go back to the main stage. To do this click on the Scene 1 tab:

Step Two: Place the Movie Clip on the stage

Take the movie clip out of the Library (Window > Library ) and place it on 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 ( i n the Action Script that follows you will need to swap all the Y 's for X 's).

Step Three: Give the Instance a name

1. 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. Create a layer for your actions and place the following action in frame 1 (or other frame if your movie clip is not it frame one).

   yTargetMC = 100;

The ActionScript is attached to the Timeline.

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.

Note: If you did not use MC as an instance name replace the word MC with the instance name that you used:

yTarget InstanceName = 100;

Step Five: Movie Clip Actions

1. Attach the following ActionScript to the outside (Not in the timeline) of the Instance of your Movie Clip:
   
   

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

The ActionScript is attached to the Movie Clip - See the Label at the top Actions Panel.

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)

The second part gets the y position of the movie clip: getProperty(_root.MC, _y);
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

Again it could be any name.

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 ) { y InstanceName = getProperty ( _root . InstanceName , _y ); move InstanceName = _root .target InstanceName - y InstanceName ; setProperty ( _root . InstanceName , _y , y InstanceName + (move InstanceName /10)); }

Step 6: 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.

• 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 = 100; (Step 4).
  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 7: Placing a Button on Stage

1. The last stage 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 need to either create a new button and place it on stage or drag a button out of the common button library. Either make your own button or go to Window > Other Panels > Common Libraries > Buttons and drag a button onto the main stage.
   
2. Select the button and open the ActionScript panel. Insert the following code:
   
   

   on ( rollOver ) { yTargetMC = 50; }

Change the target number to a number that suits the position that you want the movie clip to stop at.

Note: The target number must be different to the number in frame 1 otherwise the movie will not move.

Note: As an alternative make the movie clip move on click:

on ( release ) { yTargetMC = 50; }

Finished

Your first movie clip should now be sliding happily to the position that you want it. You may wish to add additional buttons each of these should have the same ActionScript as Step 7 but a different target destination number. Then you may move your movie clips on and off stage.

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.

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!