Flash tutorial on how to slide menus (and other objects) on and off screen. Movie Clip Actions.

Home • Members Tutorials Forum iSnapChat Contact Us 


Flash Tutorials


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

Sliding Menus MX04 MX Flash 5


Free Flash Tutorial Free Flash Tutorial

Step 5    <<   Previous      Intro   1   2   3   4   5   6   7   8     Next   >>      


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

    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:

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) {
InstanceName = getProperty(_root.InstanceName, _y);
InstanceName = _root.targetInstanceName - yInstanceName;
setProperty(_root.InstanceName, _y, yInstanceName + (moveInstanceName /10));


Step 5    <<   Previous      Intro   1   2   3   4   5   6   7   8     Next   >>      

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