Expandable Boxes - HELP!!!

[JoeyClams]

Anybody got the skinny on how the expandable elastic boxes were made on in2media.com?? (click on top nav)

Is it AS or tweening? I did the elasticity tutorial at bit-101 and also tried the following functions but that didn't get the desired results...

On Frame:
MovieClip.prototype.elasticScale = function(targt, accel, friction) {
this.speed += (targt - this._xscale) * accel;
this.speed *= friction;
this._xscale = this._yscale += this.speed;
}
MovieClip.prototype.elasticMove = function(targt, accel, friction) {
this.speed += (targt - this._x) * accel;
this.speed *= friction;
this._x += this.speed;
}

On Clip:
/*onClipEvent (enterFrame) {
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
this.elasticScale(2500, .9, .6)
} else {
this.elasticScale(10, .6, .5)
}
}

... then I figured it was frameXframe animation (like on ninedots.com (click on 'Nike')) but it's still not quite right.....

any idea'ers???

[JLM]

Both tweening and AS I would guess.

Do you mean the boxes that zoom from small to large then the edges bow and bend a bit then the content loads in. My guess is that simple beveled cornered boxes are tweened to size then the shaded box is drawn with the api using curves for the sides and an enterframe elastic equation to define the position of the curveTo point. Then when the movement has died out a movieclip of a shaded box with a white bottom right edge is used and content loaded in. The corners on the api drawn box may use a mask to smooth the corners, well probably little white bevel corner movieclips are used rather than an actual mask.

[JoeyClams]

yeah, those are the boxes - hmmm, good explanation, didn't think about that. I'll try a mock up to see if I can get it close....Thx JLM

[JoeyClams]

Dude, just viewed source on in2media.com and in the <OBJECT> tag the codebase is "codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"....so it's saved as Flash 5, so that means they're not using the drawing API I take it???

On studying it more, I'm thinking maybe there's no AS going on at all- my most current theory is:

1. motion tween a white rectangle from small to full size
2. as soon as it reaches full size, end that clip and immediately start a new clip containing the rectangle at full size w/ it's edges bowed out
3. motion tween the edges from bowed out to bowed in
4. motion tween the edges from bowed in back to bowed out
5. motion tween the edges from bowed out to straight
6. mask in the gray gradient from the bottom
7. add the white border along the sides

I"ll try to mock somthing up...

[JoeyClams]

ok, check it out...

[JLM]

did not look at your zip yet, but I did think it might be a little heavy having four sides of a gradient square get redrawn so fast and still keep the gradient still, but I think the whole thing could be created either way all with API, or all with keyframes and tweens, just that you propably need to think about details a lot since they could make a difference in speed and looks so lots of trickery might be employed. There were some clues in the way the site felt that suggested it was not all code, especially the fact that it took so long for me to download at home!