Free Flash Tutorials

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

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

101 Intermediate
Flash Compatibility: Flash MX   Click here for Flash: CS3 / F8 / MX04 / 5

Written by: Phil

Length: 1900 words

Assumed Knowledge : Attaching simple actions, creating movie clips and using buttons.

 

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 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 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 into the movie clip.
  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 (you will need to swap all the Y's for X's).

 


Step Three: Give the Instance a name

 
In the Property Inspector give the movie clip an Instance name: MC
The name 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

 

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

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:

yTargetInstanceName = 100;


Step Five: Movie Clip Actions


Attach the following ActionScript to the outside (Not in the timeline) of the Instance of your Movie Clip.
To do this right click on your movie clip and select Actions:

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

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)

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

 

You 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 is 100 - 20 = 80. Therefore: moveMC = 80

 

As soon as the movie clip starts to move this would change. The distance between its current position and where it has to go (the target position) get less and less.


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 make the movie move initially very fast and as it gets closer to the destination it slows down or decelerates.

 

Note: If you want to move your movie clip from left to right change all the Y's for X's.

 

If 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.targetInstanceName - yInstanceName;
   
setProperty(_root.InstanceName, _y, yInstanceName + (moveInstanceName /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.


Step 7: Placing a Button on Stage


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.  Go to Window > Common Libraries > Buttons and drag a button onto the main stage. 



Step 8: Placing an ActionScript into the Button


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.

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.



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!

 

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1


77056 visitors to this page since Jan 04

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.