Sliding Tabs using Functions and MX Tweens in Flash

Sliding Tabs using Functions and MX Tweens in Flash


In this tutorial I will discuss how to Create sliding tabs in flash without the need for manually entering tweens for each one.

Example:

This might be a pretty long tutorial but once you have the basic coding in you can pretty much add all you want and adjust them very easily.

Okay, lets create a flash document. We'll set the width to 400 and the height to 150 in this example. Change the frame rate to around 30 if you like, for smoother scrolling.

Now we have our document, we need some tabs to scroll! Draw a solid rectangle onto the stage, with no stroke for this example, change its width to 100 and it's height to 150. Select your rectangle and convert it to a Movie Clip (f8 if you are using Windows) naming it tab1 or something similar and making the registration top left (make sure you change the registration from the centre!) Position this at X:0 Y:-120 so that most of the tab is off the stage. Make a few of these and position them next to eachother. Give each tab an instance name of tab1, tab2, etc.

Now we have the basic tabs, it's time to make them move! Create a new layer named Actions. Always keep your actions and objects seperate.

The method I am going to show to make the tab move is the new mx.transitions.Tween command.

Lets create the function which will move our tabs - in this command there I'll use the Bounce.easeOut method - because I feel this works very well with tabs.


Function MoveTab(whichtab, pos) {
var type = mx.transitions.easing.Bounce.easeOut
var start = _root.whichtab._y
var end = pos
var time = 15
tabmove = new mx.transitions.Tween(whichtab, "_y", type, start, end, time, false);
}


This is the function which will move all our tabs. You'll notice we call two variables into this function: whichtab and pos. These will tell us which tab to move and where to. Changin the time variable will change how long it takes to slide, in this case the number is in frames, so this animation will take 15 frames.

Put that section of code into the actions panel on the actions layer.

Now that's sorted lets go about applying that to the tabs.


tab1.onRollOver = function() {
MoveTab(this,0);
}


this will make it Roll out. Now lets make it Roll back in when you roll off it.


tab1.onRollOut = function() {
MoveTab(this,-120);
}


You see here we call that function we created earlier with the variables of whichtab and pos (you remember them?) being this and a number respectivly. the this command will tell the function that it will use this tab, and the number will give the Y position of where the tab should move to.

Now simple duplicate the RollOver and RollOut codes for how many tabs you have (in this case 4) switching the tab1.onRollOver instance name to suit, ie: to tab2.onRollOver.

Test your movie and you should see a beautiful Sliding tab effect. Of course you can experiment with this and decorate the tabs and size them as you want.

In order to make these tabs do something you must use the ActionScript


tab1.onRelease = function() {
whatever you want here ie: getUrl("http://www.google.com")
}


That is a basic summary of how to make Sliding tabs using mainly actionscript. For a more detailed and advanced tutorial there is a tutorial on http://www.actionscript.org/ or click here



Submit Comment

Comments

  1. httytrytryt on July 04, 2012
    etertert

  2. Rafael on September 23, 2011
    Im a bit of a newbie so pardon the silly question but..
    where should I insert

    tab1.onRollOver = function() {
    MoveTab(this,0);
    }
    tab1.onRollOut = function() {
    MoveTab(this,-120);
    }

    on the actions panel of one of the layers? the actions panel of one of the frames? the actions panels of the tab itself?

    thank you,

  3. Matt on May 27, 2011
    No sorry, it's 2.0 - needs an update actually :)

  4. Jimbo Slice on May 27, 2011
    Is this Actionscript 3.0?

  5. Dave on September 16, 2010
    always in your function, "_root" seems to invalidate transitions, it is preferable to let it down :
    var start = whichtab._y;

    I think that will be more clean to import mx.transitions and put a ";" at the end of each lines (but that runs without by the way).

    So here is the optimized code :
    ---------------------------------------------------------------------
    import mx.transitions.Tween;
    import mx.transitions.easing.*;

    function MoveTab(whichtab, pos) {
    var type = mx.transitions.easing.Bounce.easeOut;
    var start = whichtab._y;
    var end = pos;
    var time = 15;
    tabmove = new mx.transitions.Tween(whichtab, "_y", type, start, end, time, false);
    }

  6. Dave on September 16, 2010
    a little syntax error : function with a f and not a F :
    function MoveTab(whichtab, pos) {