elastic menu tutorial?

[wintercat]

I'm looking for a tutorial to create an "Elastic Menu" in AS3, something similar FlashBox's "ElasticMenu" which is available to purchase through Flash Components - http://www.flashcomponents.net/component/elastic_flash_menu.html (but using image thumbnails, and on a transparent background).

I'd really like to learn how to create the effect myself, but have been unable to find a tutorial. If anyone knows of a good tutorial - either for this type of effect, or for understanding the principles behind it, please let me know!

Thanks!

[peacock]

i've been wanting to know that too. anyone?

[OMG]

Here, I coded something similar:
(that was a good practice for my as2->as3 transition >_<; )
(big ty to grndmasterflash for helping me solve some problems)

(imageshack wont allow me to upload .swfs anymore so I found a random google site)

http://www.swfcabin.com/open/1251235671

my source code (as you can see I'm still a bit AS2-ish):



//the data, feel free to add new elements in the same format
var barInfo:Array=[["title1",0x00CBFF],["title2",0xFFFF99],["title3",0xCC3366]];
//initial position for the bar
var initPt:Point=new Point(50,50);
//the box on which the mouse is currently
var whichOne:int=-1;
//how long can the box stretch
var stretchLimit:int=150;
//the initial width for a box
var initWidth:int=60;
//distance between the left border of the logo and that of its box
var logoBoxDist:int=10;
for (var i:int=0; i<barInfo.length; i++) {
//attach Box
var box:Box=new Box();
//LogoSet mc is made of 3 frames: each one has its logo (shape)
var logo:LogoSet=new LogoSet();
//the description textfield for the corresponding logo, using the data in the array
var _title=new TextField();

box.width=initWidth;
box.x=initPt.x+i*box.width+box.width/2;
box.y=initPt.y;
box.descripton=barInfo[i][0];
box.boxNum=i;
//the color for the box, using the data in the array
var colorTransform:ColorTransform=box.transform.colorT ransform;
colorTransform.color=barInfo[i][1];
box.transform.colorTransform=colorTransform;
logo.x=box.x-box.width/2+logo.width/2+logoBoxDist;
logo.y=box.y;
logo.gotoAndStop(i+1);
updateLogoPos(box,logo,_title);

_title.y=box.y;
box.addEventListener(MouseEvent.MOUSE_OVER, mIn);
box.addEventListener(MouseEvent.MOUSE_OUT, mOut);
box.addEventListener(Event.ENTER_FRAME,stretch);
stage.addChild(box);
box.name=String("box_"+i);
stage.addChild(logo);
logo.name=String("logo_"+i);

stage.addChild(_title)
_title.name=String("_title_"+i)
}
function mIn(e:MouseEvent):void {
whichOne=e.target.boxNum;
}
function mOut(e:MouseEvent):void {
whichOne=-1;
}
function stretch(e:Event):void {
var the_box:Box=e.target as Box;
var attachedLogo:LogoSet=stage.getChildByName("logo_"+the_box.boxNum) as LogoSet;
var attachedTitle:TextField=stage.getChildByName("_title_"+the_box.boxNum) as TextField
if (whichOne==the_box.boxNum) {
attachedTitle.text=barInfo[the_box.boxNum][0];
if (the_box.width<stretchLimit) {
the_box.width+=20;
}
} else {
if (the_box.width-20>initWidth) {
the_box.width-=20;
} else {
the_box.width=initWidth;
attachedTitle.text=""
}
}
if (the_box.boxNum>0) {
var previousBox:Box=stage.getChildByName("box_"+(the_box.boxNum-1))as Box;
the_box.x=previousBox.x+previousBox.width/2+the_box.width/2;
updateLogoPos(the_box,attachedLogo,attachedTitle);
} else if (the_box.boxNum==0) {
the_box.x=initPt.x+the_box.width/2;
updateLogoPos(the_box,attachedLogo,attachedTitle);
}
}
function updateLogoPos(box:Box,logo:LogoSet,boxTitle:TextFi eld):void {
logo.x=box.x-box.width/2+logo.width/2+logoBoxDist;
boxTitle.x=logo.x+50;
}

[OMG]

basically what I did is, after naming some vars, put a mouse over/out event on each box that's created. Track on which box the mouse is, then the EnterFrame calculate the new width for each box and the new x position. The last lines look complex but it's just to update the new coordinates for the logos, the textfields and the boxes

if anyone sees anything I could change to make the code better, please point it out

[wintercat]

Thanks so much for posting your code & explanation! I'll have a go at applying it to my menu tonight.

In the meantime I also managed to find a tutorial on creating a Horizontal Accordion using JQuery - it doesn't use Flash but provides a similar effect. If anyone is interested, the JQuery tute is at http://designreviver.com/tutorials/jquery-examples-horizontal-accordion/