How do you make a menu navigation like the one on this site:
http://www.mattpearce.co.uk/
Any sample files on that?
Thanks,
aut.
Printable View
How do you make a menu navigation like the one on this site:
http://www.mattpearce.co.uk/
Any sample files on that?
Thanks,
aut.
functionality wise, that is highly similar to the "accordian component" that was released in MX 2004 (i'm fairly certain that was the first instance of that component).
Hi,
Is this any help? It's commented, but let me know if you have any questions. It might not be the most elegant solution - it was made pretty hastily - but let me know if it's close to what you need.
Hope this help.
Right on!Quote:
Originally Posted by dmonkey
Thanks a bunch,
aut.
[EDIT] How would you go about altering the size of the sections? [/EDIT]
sorry to bring up this old thread, but can this be flipped on it's side?
I've tried replacing all the x's with y's, and y's with x's, and swapping all the widths and heights, etc...but no luck...
Any help would be appreicated...
This accordian style menu is the best I've seen around here and on other sites...
cheers
Jeff
*bump! :)
Hi,
I did as you suggested (just changed x to y and vice versa) and its working fine! The only problem was to change the code to create the mask. Here is the altered version.
Unfortunately since I'm using CS3, I can't save to mx2004 format, so I hope you at least have version 8! Just in case you haven't, I'll post the code too.
code:
//***************************//
// Menu System --------------//
//***************************//
/*Set up some variables to control the layout, animation etc.*/
//Layout vars
//separation between sections
var sep:Number = 20;
//Animation vars
//speed
var speed:Number = 10;
/*Set the inital positions of the sections*/
//Move the section viewer to where you want it on the stage
sec_viewer._x = 0;
sec_viewer._y = 0;
//Loop through the individual sections placing them in the correct positions
for (var i:Number = 0; i < 4; i++) {
//target the correct section
var cs:MovieClip = this.sec_viewer["s"+(i+1)];
//Assign a var to the section to tell it which number it is;
cs.id = i;
//Move it into position
cs._y = cs._height / 2;
if (i != 0) {
cs._x = cs._width*1.5 + (i-1)*sep;
} else {
cs._x = cs._width/2;
}
/*Set the onPress behaviour*/
cs.onPress = function() {
openSection(this.id);
}
}
/*Create a mask of the right size*/
var mask:MovieClip = this.createEmptyMovieClip("mask", this.getNextHighestDepth());
mask.beginFill(0, 100);
mask.lineTo(sec_viewer.s1._width+3*sep, 0);
mask.lineTo(sec_viewer.s1._width+3*sep, sec_viewer._height);
mask.lineTo(0, sec_viewer._height);
mask.lineTo(0,0);
mask.endFill();
/*Attach the mask*/
sec_viewer.setMask(mask);
/*The openSection function which controle the animation*/
function openSection(id:Number) {
for (var i:Number = 0; i < 4; i++) {
//target the section
var cs:MovieClip = this.sec_viewer["s"+(i+1)];
//If id <= i; place at the top of the viewer
if (i <= id) {
cs.targetX = cs._width/2 + i * sep;
} else {
cs.targetX = cs._width*1.5 + (i-1)*sep;
}
}
//Set onEnterFrame
this.onEnterFrame = function() {
//We want to count how many sections have reached their target so we can
//cancel the onEnterFrame
var counter = 0;
for (var i:Number = 0; i < 4; i++) {
//target the section
var cs:MovieClip = this.sec_viewer["s"+(i+1)];
//if we aren't at the target y, move towards it with some speed
if (Math.abs(cs._x - cs.targetX) > 1) {
//If there is more than 1 unit to go, then move
cs._x -= (cs._x - cs.targetX)/speed;
} else {
//If we are close enough, then move to the end
//position and increment the counter
cs._x = cs.targetX;
counter++;
}
}
//If all sections are in position, delete the onEnterFrame
if (counter == 4) {
delete this.onEnterFrame;
}
}
}
Hope this helps.
thats great...many thanks!
:)
If I wanted to single out a specific area of the menu to use as a button, rather than one whole section, how would I do that?
I've got some icons which I'm using as 'labels', which are placed on the edge of each section, (in place of where the text is in the above example .fla), all with the instance name 'icon'.
Here's my code for the open section part...
code:
/*Set the onPress behaviour*/
cs.icon.onPress = function() {
openSection(this.id);
}
This however opens up the last section, no matter which icon you click on. I've tried each icon having a different instance name, and tried various other things but not had any luck yet...
any ideas?
hurrrahhhh!
I've sorted it...
As well as my post above, this is what I needed to change...
code:
//Assign a var to the section to tell it which number it is;
cs.icon.id = i;
adding the 'icon' bit in here made it work...
yay! - onwards towards my next problem now!!! ;)