Free Flash Tutorials

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

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:

 
ytarget
instancename  = 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.



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!

 

 

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


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