Written by: gunko2
Difficulty Level: intermediate
Requirements: Flash MX or higher....
Assumed Knowledge: functions, for loops, vars, hitTest....
Download FLA Hello and welcome to my tutorial! if u didn't understand what this is about by the title here is an example of what u r going to accomplish at the end of the tutorial.
 
  1. Ok let's get started - let's create the track. draw a sqaure on the stage, once you've done that select it
    and press F8 and turn it into a movieclip give it the name "mcForm" make sure the registration point is in the middle:




    once you've done that select it and give it the instance name of "mcForm".



    Now call the layer "Track". ok that's it we are almost done with the drawing.


  2. Now let's create the menus.... Create another layer and call it "Menus". Put the layer under the layer "Track". In that layer u can draw what ever u like! Just draw two other forms which will be the menus turn each and one of them to a movieclip call it what ever u like and give them an instance name of "mc1" and "mc2".... And that's it! We are done with the drawing.... now let's begin with the ActionScript....


  3. Create another layer and call it "Actions", select the first frame in that layer and open the actions panel (F9).... and now let's begin.... let's set some basic variables (actually only one):

    mSpeed = 7; //this will control the speed - the higher the number the slower it goes....


    after we are done with that let's get started with the real AS (i will explain the code later):

    MovieClip.prototype.mMove = function() {
            if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
                    mXTarget = this._x;
                    mYTarget = this._y;
                    mWTarget = this._width;
                    mHTarget = this._height;
                    mGo = true;
            }
            mcForm._x += (mXTarget-mcForm._x)/mSpeed;
            mcForm._y += (mYTarget-mcForm._y)/mSpeed;
            mcForm._width += (mWTarget-mcForm._width)/mSpeed;
            mcForm._height += (mHTarget-mcForm._height)/mSpeed;
    };


    So what we have basiclly done here is we created a function that checks if u are rolling over a menu and if u r we set a var to true so we can add an if statment later to check if it's true.... the other vars are just so u don't have to specifie the path to the menu every time....
    Now the other part - what it is actually doing is if for example u roll over a menu then it will slide directly to it other wise (without this part) it will just get stuck in the middle of the motion if u roll out of the menu....
    Let's continue....


  4. Ok now let's create the movement of the track - it the same frame, in the same layer (frame 1 layer "Actions"):

    MovieClip.prototype.aMove = function() {
            if (mGo == true) {
                    this._x += (mXTarget-this._x)/mSpeed;
                    this._y += (mYTarget-this._y)/mSpeed;
                    this._width += (mWTarget-this._width)/mSpeed;
                    this._height += (mHTarget-this._height)/mSpeed;
                    mGo = false;
            }
    };


    Ok so what we have done here is basiclly checked if "mGo" is true as we defined it in the first function, and if it is true then execute the following code.
    Now let's talk about the executed code.... i will explain only one thing because it's the same in all of them....
    let's take for example:

    this._x += (mXTarget-this._x)/mSpeed;


    So what we have here is basiclly a calculation of the distance between the track and the roll overd menu.
    Let me explain better.
    For exmaple your x position of the track is say 100 (this._x) and the x poistion of the roll overed menu is 200 (mXTarget and mSpeed = 7 as we defined it in the begining....)
    So now let's calculate!
    this._x=100+(200-100)/7 wich equales 114 so now the track's x position is 114 and now replace the 100 to 114 and the number will again grow....
    U get the picture.... same goes for the y position, width and height.... Ok now you are probably asking:"what about the mGo = false?".... well if i wouldn't of written that then mGo would of been true all the time and
    it would of been messed up! So don't forget to write it.


  5. Ok we are alomost done!
    The only thing we have left to do is to apply the code to the track and the menus....
    So in the same frame in the same layer (frame 1 layer "Actions"):

    for (nNum=1; nNum<=50; nNum++) {
            _root["mc"+nNum].onEnterFrame = function() {
                    this.mMove();
            };
    }
    _root.mcForm.onEnterFrame = function() {
            this.aMove();
    };


    So what have we done here? We have applyed the mMove function to the menus inside a loop.... why? because this wasy u can add up to 50 menus without having to write the code for each menu u create. The second thing we have done is to apply the movement of the track to the track....
    that's it you are done! So the final code should look something like this:

    mSpeed = 7;
    MovieClip.prototype.mMove = function() {
            if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
                    mXTarget = this._x;
                    mYTarget = this._y;
                    mWTarget = this._width;
                    mHTarget = this._height;
                    mGo = true;
            }
            mcForm._x += (mXTarget-mcForm._x)/mSpeed;
            mcForm._y += (mYTarget-mcForm._y)/mSpeed;
            mcForm._width += (mWTarget-mcForm._width)/mSpeed;
            mcForm._height += (mHTarget-mcForm._height)/mSpeed;
    };
    MovieClip.prototype.aMove = function() {
            if (mGo == true) {
                    this._x += (mXTarget-this._x)/mSpeed;
                    this._y += (mYTarget-this._y)/mSpeed;
                    this._width += (mWTarget-this._width)/mSpeed;
                    this._height += (mHTarget-this._height)/mSpeed;
                    mGo = false;
            }
    };
    for (nNum=1; nNum<=50; nNum++) {
            _root["mc"+nNum].onEnterFrame = function() {
                    this.mMove();
            };
    }
    _root.mcForm.onEnterFrame = function() {
            this.aMove();
    };


    U can change the number 50 to 300 and u can add 300 menus....
    All u have to do to add another menu is to just draw it, convert it to a movieclip and give an opropriete instance name: mc1, mc2, mc3,....
    Make sure u don't repeat the same number.... And don't forget to put the registration point in the middle..... And of course if u have any questions, comments, suggestions etc etc. You can e-mail me at :
    asg_org@coolmail.co.il