Free Flash Tutorials	Home • Members • Tutorials • Forum • iSnapChat • Contact Us

Flash 5 - Moving an Object on Roll Over using ActionScripts

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

Written by: Phil

There a two reasons why you would use action scripts to move an object.  The first is that action scripts are smaller than animations and the second is that you can move the object from anywhere to any 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 then go from A to B to C.  With this action script 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 - Flash 5

In this example I have used four positions for the movie clip:

1. The start position: This is off stage to the top.

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.

There is a symbol on the stage which is a Movie Clip and has the name top.  Top moves when the play head enters the frame and when you rollover the buttons.  You could also set the movement on a click.

 
The movie clip has one frame only and 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.  To do this you need to go to Insert > New Symbol, Select Movie Clip and an appropriate symbol name.  Then you must draw or type or place other symbols into the movie clip.

 
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.  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.  If you want the movie clip to roll in from one side place the clip just to the left or right of the main stage.

 

Step Three: Give the Instance a name

 
Give the Instance of the movie clip a name.  To do this highlight the movie clip on stage and open the Instance panel (Windows > Panels > Instance) and give the Instance a name.  In this case the name is top.  The name is specific to the instance on stage and does not relate to the name of the symbol in the Library.

 

Step Four: Place an action in Frame One

Crete a layer for your actions and pace the following action in frame one (or other frame if your movie clip is not it frame one).

 
ytargettop  = 100;

 
Replace the word 'top' with the instance name of your symbol:

 
ytargetinstancename  = 100;

 
The number will determine where the movie clip will stop when the frame is loaded. You may want to come back and place different number once you have tested the movie clip.  The higher the number the lower the movie clip will roll and visa versa.

 

Step Five: Create a Controller Clip

You now need to create a controller clip.  This is where you set the action for the movement.  The controller clip continually plays to check if the movie clip needs to be moved and where it needs to go.  My clip is visible but normally a controller clip only contains actions and is thus invisible.  You need to create a new movie clip symbol and place the following actionscript in frame one:

yoftop = getProperty(_root.top, _y);
ygototop = /:ytargettop-yoftop;
setProperty (_root.top, _y, yoftop+(ygototop/8));

You need to replace the word 'top' with the instance name of your move clip

yofinstancename = getProperty(_root.instancename, _y);
ygotoinstancename = /:ytargetinstancename-yofinstancename;
setProperty (_root.instancename, _y, yofinstancename+(ygotoinstancename/8));

Line 1

yofinstancename = getProperty(_root.instancename, _y);

The first part names the equation: yofinstancename

It could be any name.

The second part gets the y position of the movie clip.  

This means that the y position of the movie clip is called Y of instance name.

Line 2

ygotoinstancename = /:ytargetinstancename-yofinstancename;

The first part names the equation: goto

Again it could be any name

The second section of line two subtracts the target position of the object (that you set in the Main Stage and or the button: ytargetinstancename  = 100;) from the current y position of the movie clip (yofinstancename in line one).  This give its actual position from the start position.  

If you want to move the movie clip to y position 300 and it is currently located at 100: 300 - 100 = 200.  The movie clip will need to move 200 pixels.

(If the object is in the target position 100 - 100 = 0.  So it will not move.)

Line 3:  The decelerator

setProperty (_root.instancename, _y, yofinstancename+(ygotoinstancename/8));

This is the bit that moves the object, at first very fast then slower and slower.

The first section instructs the flash player to move the object to a new y position. 

setProperty (_root.instancename, _y, ...

The Y axis is vertical so the movie clip will move up or down.

The second section of this line tells the object how fast to move. This is the clever bit.

... yofinstancename+(ygotoinstancename/8));

the y position of the object + (how many pixels it has to go divided by 8) 

The 8 is an arbitrary number but the lower the number the faster the object moves and visa versa.

If I go back to my example above and move the object to 300 from 100:

100 + (200/8) = 125

This makes the object move 25 pixels.  It is closer to the 300 but not there. The controller clip continually play therefore once it has moved to its new position from 100 to 125 the calculation is done again:

125 + (175/8) =  146.8

This makes the movie clip move a further 21.8 pixels or in reality 22 pixels.  It will then make the calculation again and move the object slightly less than 22 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. If you did not have this the move clip move directly to its destination and the effect of sliding in would be lost.

Step 6: Getting the controller to replay

The controller needs to continually check to see the position of your movie clip.

1. Right click on frame 2 of the controllers time line and select: Actions
2. Select: > Actions > Movie Control > gotoAndPlay
   This places the following actionscript in frame 2:
   
   gotoAndPlay(1);
   
   This makes the time line of the controller continually loop.

Step 7: 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 three). 
  If you make the number 8 higher the speed will be slower.
  If you make the number 8 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: targettop  = 100; (step 4).
  If you make the number 100 higher the movie clip will slide further onto 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: ytargettop  = -100; or positive numbers: ytargettop  = 100;

Step 8: 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.  Make sure you are in the main stage and not still in the controller clip (Click the Scene 1 tab to go back to the main stage).

Step 9: Placing an ActionScript into the Button

Select the button and open the ActionScript panel. Insert the following line:

on (rollOver) {
ytargettop = 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 the ActionScript on the main stage in frame 1 otherwise the movie will no move.

As an alternative make the movie clip move on click:

on (release) {
ytargettop = 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 - Flash 5

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!

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