This tutorial explains a quick and easy way to transition through different aspects of your site. Transition refers to transitioning content out before transitioning content in. The tutorial covers how to dynamically attach your navigation or how to hard code it.

All of the tutorial material below is placed in frame 1 on the main timeline of your movie.

On frame 1:

This function below (made globally accessable by the "_global" before it) decides what the user pressed in the navigation. As you can see, it takes one argument, which, if you go into the navigation movieclip, you can see that the name of whatever button that got pressed, gets passed into this function. For instance, if they press button1_mc, the script on all of the buttons looks like:

this.onRelease = function(){
navigate(this._name);
}

The this._name automatically sends the name of whatever button got pressed. Because each button is merely an instance of the "nav button mc" from the library, I'm able to give each button an instance name. And with this navigate function, I'm able to easily determine which button got pressed.

So if they pressed button1_mc: (continued in the function explaination)

_global.navigate = function(x) {
//x would equal "button1_mc"
//this global variable lets us limit the user from pressing the same 
//button that they're located at.
_global.pressed = x;
//If where they pressed is where they are already, it won't do 
//anything.  the "already" variable is undefined
//on the first run, so it always passes.
if (pressed != already) {
//assign our already variable after the first run.
_global.already = pressed;
//convert the value of x to a string, and assign it to 'name'
name = String(x);
//find the 6th character of this string.  "button1_mc"  
//or  "button2_mc"  it will be 1,2,3 or 4.
which = name.charAt(6);
//Tell our content that they wanted section 1,2,3 or 4.  Set 
//the content_mc.section variable
//equal to a string concactination of "section" and 1,2,3 or 
//4.  it needs to be a string since in the
//content_mc we're telling it to go to a frame label which 
//needs to be a string.  see the content_mc
//for more details.
content_mc.section = String("section"+which);
//tell the content to play.  come back to this logic after 
//you've explored the content_mc clip.
content_mc.play();
}
};

The only problem with this approach is that they can press more than one button in the time it takes you to transition everything in or out. To get around this, I've made my buttons on my site disappear :)

www.dravenslair.net

Another way would be to store what they pressed in an array, and if there are elements in the array, redo your animations until the array is empty, each time, removing the section that they pressed.

Another method is to just disable the buttons. it's a little more tricky for movieclip buttons, but it can be done

///////////////////////////////////////////////////////////////////////
//  ATTACHING THE NAVIGATION DYNAMICALLY version 1.00  12.10.2002   //
/////////////////////////////////////////////////////////////////////

Section 1.1 - Overview of process

The following code will dynamically attach the navigation buttons to the nav_mc. This is done using "attachMovie". In order to attach any movie, it needs to have a linkage name. Open your library, right click on the "nav button mc" symbol and select "linkage". Notice that "export for actionscript" is checked, as well as "export in first frame". This gives us the ability to place this symbol exactly as we would when we drag it out of the library, except we can do it with code.

Section 1.2 - Summary of attachMovie

The syntax for attach movie is as follows (in plain english):

MovieClip.attachMovie("linkage name (from library)","new instance name of 
object attached","depth");

For us that means that we will attach the buttons to our nav_mc. This means that when ever we want to reference the attached buttons, we must first reference our nav_mc. This is because like I said before, attach movie is exactly like dragging a symbol out from our library, except it's dynamically. In the nav_mc on the guide layer, I just dragged them out. And in order to reference them I had to say "_root.nav_mc.buttonx_mc". This is the same for when we use it in code:

Section 1.3 - attachMovie for us!

//   nav_mc.attachMovie("navbutton","button"+(i+1)+"_mc",i);

• nav_mc = the navigation movie clip
• navbutton = the linkage name that i've given our navigation button movie clips (section 1.1)
• "button"+(i+1)+"_mc" = the instance name of our attached buttons.

  I want to be able to use my old code to navigate, so I give them the same instance names that i gave them if I just dragged them on and gave them a name through the properties panel. Remember that our navigate function looks for the name of the object that called it to decide where to navigate. So they sill need to be "button1_mc", "button2_mc" etc. "button"+(i+1)+"_mc" will achieve that (because i = 0, so we need to add one ;)

• i = z-depth of the attached objects.

Section 1.4 - Using the for loop to label our buttons/pathing

I still need to give the buttons labels (section 1 etc.) which is done on the second line of the for loop. The buttonx_mc.title_txt.text still applies just the same as if you dragged it out of the library (yet again). So all we have to do is reference the right path:

• nav_mc["button"+(i+1)+"_mc"].title_txt.text = "Section "+(i+1);
• nav_mc["button"+(i+1)+"_mc"] = the path to the button. notice it lies on the nav_mc timeline
• title_txt.text = the dynamic text field in our navigation button
• "Section +"(i+1) = Section 1, Section 2 etc... (i+1) because we started at 0.

Section 1.5 - Positioning our buttons

I've hard coded the x values for where we will place our navigation buttons in an array appropriately named "x_nav_positions". I've cheated and just written down the positions so i could hard code them :). Some simple math would allow you to position them dynamically and evenly if you wanted. In the case of our code:

//   nav_mc["button+(i+1)+"_mc"]._x = x_nav_positions[i];
//   nav_mc["button+(i+1)+"_mc"]._y = 1.1;

• nav_mc["button+(i+1)+"_mc"]._x = the path to the _x property for each button in our for loop
• x_nav_positions[i] = the hard coded values of the x values for our buttons. Notice that the coordinates are relative to the timeline of the nav_mc (just like if we dragged them into the timeline of the timeline of nav_mc... see the pattern here? :)
• nav_mc["button+(i+1)+"_mc"]._y = the path to the _y property of all of our buttons
• 1.1 = the _y position for all of your buttons. Again, I've cheated and just hard coded this because I know where they are supposed to be :)

Section 1.6 - CODE!

x_nav_positions = [39.1, 166.1, 293.9, 421.4];
for(i=0;i<4;i++){
nav_mc.attachMovie("navbutton","button"+(i+1)+"_mc",i);
nav_mc["button"+(i+1)+"_mc"].title_txt.text = "Section "+(i+1);
nav_mc["button"+(i+1)+"_mc"]._x = x_nav_positions[i];
nav_mc["button"+(i+1)+"_mc"]._y = 1.1;
}

Section 1.7 - Summary

So, if you open the nav_mc movieclip, you'll see that the navigation buttons are on on a guide level (meaning it won't publish). Also, notice that the code is commented out. So as you can see, because the buttons function dynamically by calling generic functions and sending in the instance name, all we need to do is attach the buttons to the right path and it works just the same as dragging it from the library maually.

One thing to keep in mind is that these symbols export on the first frame of the movie, and will screw up preloaders. As long as the things you are exporting are relatively small, it shouldn't affect it, but what happens is the size of these symbols is included in the .swf, but it doesn't register if you say _root.getBytesTotal(); .... it's kind of a pain...

So here's a quick overview of what we did:

• gave our button a linkage name (symbol id) in the library
• wrote a for loop to attach the navigation button TO the nav_mc movieclip
• used the loop to dynamically set the title and positions

Section 1.8 - errata

At time of publication (11:24 AM 12.10.2002 GMT 07:00:000) there are no known bugs of discrepencies

Thanks.

You can reach Bret by email.

Download the source file here.