Elastic curved resizement

[scotty]

(If anyone knows a better title -> you're welcome :lol: )

The box is drawn with drawing api and its sides curve while resizing. I had a difficulty retrieving the width and heigth, so there's a transparent box that resizes and outputs the right width and height for the drawing :)

scotty(-:

add a mx file

[daveFelton]

that is TIGHT...not what i expected it to do at all, to be honest! the name doesnt do it justice ;) but then again, i cant really think of a more appropriate name for it...so...yeah...great work!

d

[Photogenius]

How about "resizing bouncy box"?

[lunatic]

is there anything you can't do? :love:

[flashead]

yeah that is very cool!
and don't change the name! haha
"resizement" haha it's great!

-K

[stringy]

looks really good, would make an interesting movie transition.

[Lindquist]

Clever :p:

[GW02]

I really like it, but is it possible to make it more springy and "live"?

[Geeko]

sweet! lurvy~

[scotty]

Thank you all :pleased:

scotty(-:

[Mr.Flash Mx]

Scotty, u really good at Flash. Good Job bro :beer:

[RevoGiant]

dopeness

[jasarius]

Nice.

[[JAMIE]]

i also wanna say that it looks really good. Is there any possibility that a fla for flash MX could be posted.

Thanks

[booler]

']i also wanna say that it looks really good. Is there any possibility that a fla for flash MX could be posted.

Thanks

see the first post they have been there the entire time :rolleyes:

[amitgeorge]

this would have been fantastic if you could also put in content and that would also bounce ....

[e-sarbak]

That is really good
you know that thing...:thumb:

[[JAMIE]]

see the first post they have been there the entire time :rolleyes:

I'm not that big an idiot! Im assuming that the fla posted was for MX2004, as i will not open with MX for me.

[booler]

fair enough, you should be more specific then

n/m you were specific I'll blame it on being up late

[scotty]

[JAMIE] in post #1 I've attached the mx as well :)

scotty(-:

[Joppe]

Is that free of use .. I mean like for websites? :shifty: anyway great effect! :drool:

[[JAMIE]]

thank you. (i really must upgrade tho)

[red_A]

that's AMAZING!!!!

[Magicplant]

Hi there,
What a great effect.
Am I free to adapt and use it in a website?
Thanks
Alan

[scotty]

Off course you are ;)

scotty(-:

[danulf]

that's a really nice effect! A lot of sites have resizing as their "thing", but this is much cooler! :D

[TheCanadian]

Very cool :thumb:.

[scotty]

Thank you guys =)

scotty(-:

[Magicplant]

Great, thanks scotty.
I'll post the link when im done.
Cheers
Alan:thumb2:

[treatkor]

that is super cool :thumb2:
reminds me of this:
http://laco.wz.cz/tween/swf/showswf.php?swf=organicwindow&w=550&h=400
they called it "organic resizing window" but i like "elastic curved resizement" better :)

[Magicplant]

Hi,
here's the promised link.
http://www.fla.alanwallace.co.uk
although it will be changed in the next day or so to http://www.2ucarvaleting.co.uk

Once again, thanks for the use of your effect.
Cheers
Alan

[ActionScriptDev]

This thing is awesome!!!

[B L U E]

Very nice. One question though. I changed the publish settings to Flash layer 8 and AS2.0, and it gave me errors. So I altered the code to fix these errors, but I'm getting this. Here's the code _root.easeOutBack = function(t, b, c, d, s) {
if (s == undefined) {
s = 1.70158;
}
return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b;
};
var scx = Stage.width/2;
var scy = Stage.height/2;
var bBox = this.createEmptyMovieClip("bBox", 9984);
var box = bBox.createEmptyMovieClip("box", 9984);
box.lineStyle(1, 0xCCCCCC, 100);
box.beginFill(0xCCCCCC, 100);
box.moveTo(scx-200, scy-200);
box.lineTo(scx+200, scy-200);
box.lineTo(scx+200, scy+200);
box.lineTo(scx-200, scy+200);
box.lineTo(scx-200, scy-200);
box.endFill();
function drawBox(w, h, c) {
var wi = w/2;
var hi = h/2;
ctw = c*30+wi;
cth = c*30+hi;
box.clear();
box.lineStyle(1, 0xCCCCCC, 0);
colors = [0xEFEFEF,0xCFCFCF];
alphas = [100, 100];
ratios = [0, 0xFF];
matrix = {matrixType:"box", x:100, y:100, w:w, h:h, r:(90/180)*Math.PI};
box.beginGradientFill("linear", colors, alphas, ratios, matrix);
box.moveTo(scx-wi, scy-hi);
box.curveTo(scx, scy-cth, scx+wi, scy-hi);
box.curveTo(scx+ctw, scy, scx+wi, scy+hi);
box.curveTo(scx, scy+cth, scx-wi, scy+hi);
box.curveTo(scx-ctw, scy, scx-wi, scy-hi);
box.endFill();
}
function resizeTo(w, h) {
bw = bg._width;
bh = bg._height;
var time = 0;
var c;
bg.onEnterFrame = function() {
this._width = _root.easeOutBack(time, bw, w-bw, 30);
this._height = _root.easeOutBack(time, bh, h-bh, 30);
c = Math.cos((time*15)*(Math.PI/180)+Math.PI);
drawBox(this._width, this._height, c);
time++;
if (time>30) {
this._width = w;
this._height = h;
drawBox(w, h);
delete this.onEnterFrame;
}
};
}
btn1.onRelease = function() {
resizeTo(700, 200);
};
btn2.onRelease = function() {
resizeTo(300, 500);
};
btn3.onRelease = function() {
resizeTo(400, 400);
};
btn4.onRelease = function() {
resizeTo(200, 200);
};

[jd_wikman]

(If anyone knows a better title -> you're welcome :lol: )

The box is drawn with drawing api and its sides curve while resizing. I had a difficulty retrieving the width and heigth, so there's a transparent box that resizes and outputs the right width and height for the drawing :)

scotty(-:

add a mx file

Wow really cool scotty, thank you for sharing, that is awesome!:elderly:

[ikim]

Hi BlueNar, i don't know if you're still waiting for an answer on the script - flashplayer 8 issue, since it's been a while, but I think I found the problem! The drawBox function needs 3 parameters, but when calling it from inside the resizeTo function, the script only gives 2. You hace to add variable c to the drawBox function call inside resizeTo, like this:


drawBox(w,h,c);

I'm not sure why it worked with only two parameters being passed in Flash Player 6 (maybe someone knows and can explain please?), but this seems to have solved the problem with FP8.

Hope this post helps a little! I find so much great ideas and answers to my AS problems here that I'm really happy when I can contribute a little bit.

ikiM

[dimitri_c]

Laco's one in use…

http://www.thebend.be/can6/ FlashPlayer 8 required…


- Dimitri

[ikim]

In my effort to understand this great script, I added some comments, questions and functions to it. It would be awsome if Scotty or anyone could take a look at it and hopefully answer the questions or just comment. I´m hoping to develope this into a full site for a company that makes stuff out of rubber (that's why i'm so interested in the whole elasticity thing). I'll keep posting as this evolves. Thanks!

Here is the code:

//function easeOutBack/////////////////////////////////////////////////////////////////////
//This, I believe, is a mathematical function to achieve resizing with easing.
//It's called from inside the resizeTo function to resize the transparent bg mc,
//which scotty uses to get the necesary coordinates for the anchor points for
//drawing the curved box sides.
//(I have no idea how the math in this works, I hope Scotty can explain this better!)
MovieClip.prototype.easeOutBack = function(t:Number, b:Number, c:Number, d:Number, s:Number):Number {
if (s == undefined) {
s = 1.70158;
}
return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b;
};
//stage center x and y vars and empty mcs creation//////////////////////////////////////////
var scx:Number = Stage.width/2; //This two variables serve to find the stage center
var scy:Number = Stage.height/2;
var bBox:MovieClip = this.createEmptyMovieClip("bBox", 9984);//Creates a mc which will hold
//the box mc, where all the lines, curves and fills will be drawn, and also my holder mc
//where the external swf files will be loaded.
var box:MovieClip = bBox.createEmptyMovieClip("box", 9984);//Creates the box mc.
var holder:MovieClip = bBox.createEmptyMovieClip("holder", 9983);//Creates the holder mc.
//loading external swfs////////////////////////////////////////////////////////////////
movies = ["one.swf", "two.swf", "three.swf","four.swf"];//An array with the external swf names.
MovieClip.prototype.loadSwf = function(d) { //This function loads the corresponding swf file
this.loadMovie(movies[d]); //when called by the resizeTo function and passed the new
}; //swf_num parameter.
//drawing initial box////////////////////////////////////////////////////////////////
box.lineStyle(2, 0x000000, 100);
box.beginFill(0xFFFFFF, 0);
box.moveTo(scx-200, scy-200);
box.lineTo(scx+200, scy-200);
box.lineTo(scx+200, scy+200);
box.lineTo(scx-200, scy+200);
box.lineTo(scx-200, scy-200);
box.endFill();
//function drawBox////////////////////////////////////////////////////////////////
MovieClip.prototype.drawBox = function(w:Number, h:Number, c:Number) {
var wi:Number = w/2;
var hi:Number = h/2;
var ctw:Number = c*15+wi;
var cth:Number = c*15+hi;
box.clear();
box.lineStyle(2, 0x000000, 100);
colors = [0x000000, 0x000000];
alphas = [0, 0];
ratios = [0, 0xFF];
matrix = {matrixType:"box", x:100, y:100, w:w, h:h, r:(90/180)*Math.PI}; //Hmmnnn...
box.beginGradientFill("linear", colors, alphas, ratios, matrix); //explanation please, Scotty?
box.moveTo(scx-wi, scy-hi);
box.curveTo(scx, scy-cth, scx+wi, scy-hi);
box.curveTo(scx+ctw, scy, scx+wi, scy+hi);
box.curveTo(scx, scy+cth, scx-wi, scy+hi);
box.curveTo(scx-ctw, scy, scx-wi, scy-hi);
box.endFill();
holder._x = (scx-wi+10); //This code positions the holder mc inside the box with an offset
holder._y = (scy-hi+10); //of 10 px. The idea is that the loaded swf files should have
holder._width = w-20; //transparent backgrounds, not color ones like I used on this example.
holder._height = h-20;
};
//function resizeTo////////////////////////////////////////////////////////////////
MovieClip.prototype.resizeTo = function(w, h, swf_num) {
bw = bg._width;
bh = bg._height;
var time = 0;
var c;
holder.loadSwf(swf_num);
bg.onEnterFrame = function() {
this._width = easeOutBack(time, bw, w-bw, 30);
this._height = easeOutBack(time, bh, h-bh, 30);
c = Math.cos((time*15)*(Math.PI/180)+Math.PI);//Another line I don't understand.
drawBox(this._width, this._height, c); //Here is where Scotty uses the transparent bg
//mc dimensions to pass the necesary parameters to the drawBox function.
time++;
if (time>30) {
this._width = w;
this._height = h;
drawBox(w, h, c); //And here is where the 3rd parameter was missing.
delete this.onEnterFrame;
}
};
};
//assign onRelease actions to buttons/////////////////////////////////////////////////////////
btn1.onRelease = function() {
resizeTo(700, 200,0); // I added a 3rd argument to the resizeTo function to call a
}; //specific swf file.
btn2.onRelease = function() {
resizeTo(300, 500,1);
};
btn3.onRelease = function() {
resizeTo(500, 100,2);
};
btn4.onRelease = function() {
resizeTo(200, 200,3);
};
//make bBox dragable////////////////////////////////////////////////////////////////////
//Since the box is inside bBox mc, the whole thing can be dragged around easily.
bBox.onPress = function() {
this.startDrag();
};
bBox.onRelease = function() {
this.stopDrag();
};

[vini]

Here the easing equation of Robert Penner has been used..
Search for easing equation for Robert Penner.

I agree to Treatkor. If you want to name it, "flubber" because i thought the same when I saw it.

[mattjp18]

This is a great effect. I was wondering, I am planning on using it in a portfolio site for myself, do you think someone could explain to me how I can have the external swfs being loaded into the empty mc each play and intro and outro video followed by the elastic resize. thanks

[RichGags]

I tried

sizeListener = new Object();
sizeListener.onResize = function() {
bBox._x = Stage.width/2;
bBox._y= Stage.height/2;
}
Stage.addListener(sizeListener);but it doesnt work.