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

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

Full Version: This is a shortened click by click version of a: Full Length Tutorial

Free Flash Tutorial

In this tutorial you will learn how to make 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.

My Example: Download the Flash file  Int 101a

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

Step One: Setting Up the Document

Important: This click by click is designed for Flash CS3 or F8. For Flash: MX04 / MX / 5. For the full tutorial: CS3 / F8

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)
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
6. When you have finished go back to the: Main Stage

Step Three: Place the Movie Clip on the 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
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
   

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:
6. Type (or copy & paste) the following actions:

yTargetMC = 100;

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));
   }

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)
2. Close the Test Window:

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;
   }

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

This is a quick reference version of a full length tutorial: Full Length Tutorial