Flash tutorial on how to animate menus and other objects on and off screen.

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

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


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

 

Sliding Menus MX04 MX Flash 5

 

Free Flash Tutorial Free Flash Tutorial

 

 

Intro

 

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: General Tab
  3. Select Flash Document: Flash File (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: Background Color #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 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:
  7. 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: Red Close Cross


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.
  2. My Button:


  3. Select the new: Button
  4. If the Actions Panel is closed, open it: Window > Actions (F9)
  5. 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;
    }

  6. Create as many other buttons as you want stop positions: Create more Buttons
  7. I created one more button:

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


21106 visitors to this page since 6 June 07 •

Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.