 |
 |
|
Flash Transitions
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 accessible 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 explanation)
_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 :)
http://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.0 - Table of Contents
Section 1.0 - Table of Contents
Section 1.1 - Overview of process
Section 1.2 - Summary of attachMovie
Section 1.3 - attachMovie for us!
Section 1.4 - Using the for loop to label our buttons/pathing
Section 1.5 - Positioning our buttons
Section 1.6 - CODE!
Section 1.7 - Summary
Section 1.8 - errata
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 manually.
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 discrepancies
Thanks.
Download
the source file here.
|
