RESIZER MENU

[NiñoScript]

I just saw a Post in the actionscript section, asking for how to make a menu:
you can read the thread *here* (http://www.kirupa.com/forum/showthread.php?t=234384)

So i decided to make it work... and here it is :pleased:
ok.. i'm not good at giving long discourses, i know...

RESIZER MENU (http://img.photobucket.com/albums/v720/NekoChanPics/menudecolores.swf)



PD: I posted it in Source/Experiments, couse i want to make it look good and be fully functional for use in real life situations :)

[NiñoScript]

i tried using Tweens (it's my first time not using Zigo or Fuse for these things)

so i changed the following lines:


//mc._width = width; Now is:
var myTween:Tween = new Tween(mc, "_width", mx.transitions.easing.Strong.easeOut, mc._width, width, 1, true);


//mc._x = x; Now is:
var myTween:Tween = new Tween(mc, "_x", mx.transitions.easing.Strong.easeOut, mc._x, x, 1, true);



PRETTIER RESIZER MENU (http://img.photobucket.com/albums/v720/NekoChanPics/menudecolores_bonito.swf)



PD: Any ideas on how to fix the "gaps" between the squares?

[Anogar]

Nice job. :thumb:

[Joppe]

Very nice :thumb:

[prototype]

If you add the tween code:
//mc._width = width; Now is:
var myTween:Tween = new Tween(mc, "_width", mx.transitions.easing.Strong.easeOut, mc._width, width, 1, true);


//mc._x = x; Now is:
var myTween:Tween = new Tween(mc, "_x", mx.transitions.easing.Strong.easeOut, mc._x, x, 1, true);

Make sure to import the tween classes:
// Import Easing functions
import mx.transitions.Tween;
import mx.transitions.easing.*;
//

So it will resemble this:
// Import Easing functions
import mx.transitions.Tween;
import mx.transitions.easing.*;
//
Stage.scaleMode = "noscale";
//
_global.closed_width = 100;
_global.opened_width = 200;
//
MovieClip.prototype.type = MovieClip;
var menu_loop:Function = function (action:Function):Void {
for (var item in menu) {
var mc:MovieClip = menu[item];
if (mc == menu.rollOutHandler or mc.type != MovieClip) {
continue;
}
action(mc);
}
};
//
var set_width:Function = function (mc:MovieClip, width:Number):Void {
mc.width = width;
//target value
var myTween:Tween = new Tween(mc, "_width", mx.transitions.easing.Strong.easeOut, mc._width, width, 1, true);

//real value (overwrite here to resize them the way you want them to resize)
};
var set_pos:Function = function (mc:MovieClip, x:Number):Void {
mc.x = x;
//target value
var myTween:Tween = new Tween(mc, "_x", mx.transitions.easing.Strong.easeOut, mc._x, x, 1, true);
//real value (overwrite here to move them the way you want them to move)
};
//
menu.width = menu._width;
var initial_state:Function = function ():Void {
trace("initial state");
var i:Number = 0;
var ancho:Number = menu.width/menu.length;
menu_loop(function (mc:MovieClip) {
set_width(mc, closed_width);
set_pos(mc, (i++)*ancho);
});
};
menu.length = 0;
menu_loop(function (mc:MovieClip) {
menu.length++;
mc.onRollOver = function() {
set_width(this, opened_width);
var ancho:Number = (menu.width-this.width)/(menu.length-1);
var last_pos:Number = 0;
var opened_item:MovieClip = this;
menu_loop(function (mc:MovieClip) {
if (mc != opened_item) {
set_width(mc, ancho);
}
set_pos(mc, last_pos);
last_pos += mc.width;
});
};
mc.onRollOut = initial_state;
});
//
initial_state();

Cheers!

[BlackShadow]

Is there any way to add Text to those boxes and not have the text stretch with the box? ... Like if the text could always just stay centered in the box as it stretches and moves?

[Beebs]

I like this one. Really kewl.
How about to add dynamic sub menu item within each box.

Look at here : kind of old version dated back April 2003 : http://www.flashmxpro.com/ go to FLA'S section and click on the Navigation mit unterpunkten

Yours, btw, way much eficient and potential to be developed further

Look at here :

[t8ddw]

I threw something similar together for this site... www.boathouse.co.nz (http://www.boathouse.co.nz) (nearly finished)... clients love using this style of animation.

[thats all folks]

t8ddw,

Do you know of a tut that shows how to add content ect like you did?

[wrs_2]

I threw something similar together for this site... www.boathouse.co.nz (http://www.boathouse.co.nz) (nearly finished)... clients love using this style of animation.

nice work t8ddw;
can you upload an example fla?

[digitaldivide]

Wonderfull font: BOATHOUSE. What kind of font is it. I very much like the clarity.

[PerpJD]

I threw something similar together for this site... www.boathouse.co.nz (http://www.boathouse.co.nz) (nearly finished)... clients love using this style of animation.

I really like this look. I'm trying to get this to work, but don't understand how to get the images to reveal without stretching.

Any guidance would be greatly appreciated.

Thanks.

[rollwithit80]

Hey, I found a similar menu system, http://www.answerracing.com, i dont think i can generate a similar system with AS.
Daniel

[rollwithit80]

Hey, I found a similar menu system, http://www.answerracing.com, i dont think i can generate a similar system with AS.
Daniel

i have managed to develop a similar menu but there are still a few issues with it. It runs smoothly going right to left but not as smooth going left to right.

Any help would be much appreciated.

Daniel

[gvozden]

you can check one of my posts in this section too
http://www.kirupa.com/forum/showthread.php?t=223167&highlight=width+menu

there is some post older then this with text on menu items without image

[novetree]

Anyone know how to add interactivity (buttons, etc) within Gvozden's width menu? When i add a button to one of the mc's it seems to be under (depth wise) something that is not allowing the button to be clicked. Thanks.