PDA

View Full Version : Organic animation help



bong3
April 8th, 2009, 09:52 PM
If any of you remember Organic Template Demo on Flashden back in the day (the old swf is attached here), I have a question about the kind of animation that's in it.

When the preloader animates in, and then the Home page background/box animates in as well... these shapes come in a very cool, organic and bouncy type of way. Is this kind of animation simply a shape tween done very smoothly, or can you do this kind of animation with AS3 and a tweening engine?

I'm trying to see how I can build a basic animation like that.. from a single line, bouncing all the way up to a square/rectangle. Any example tutorials out there showing this ? Smooth and elastic like that.

Thanks

theCodeBot
April 10th, 2009, 11:39 AM
This is pretty interesting.
I am working on seeing if I can't get a working AS3 version up, as I want to have the effect too :)

I'm guessing the original coder tweened the corners, one after another, and every time it moved a point, tweened curveTo control points between each, and redrew the shape. I'll have a working test hopefully by the end of the day.

xchrisx
April 10th, 2009, 11:52 AM
You can achieve the bounciness using a custom Easing parameter in a tween engine like Greensock (http://blog.greensock.com/tweenmaxas3/). Try Bounce or Elastic.

cshaheen
April 10th, 2009, 12:25 PM
My take on it is that the box is drawn using 4 corner points, and 4 control points, using curveTo. To achieve the box using curve to, you make sure the control points are directly inline with the corners. Then, when you animate between box sizes, you move the corners and control points at different times, with some bounce tween. You can move the control points first, to make it bubble out, or you can move the corner points first, making it bow inward.

lope
April 10th, 2009, 12:49 PM
I'll have a working test hopefully by the end of the day.

please do and share it with us noobsters :P

theCodeBot
April 10th, 2009, 02:20 PM
What I'm working on right now actually DOES store the 4 points and control points between them, tweening them with formulas that I'm still working out 0.o I'll be using TweenLite's elastic tween for the control points.

bong3
April 12th, 2009, 05:46 PM
Yes, if you can get an AS3 version that mimics the animation, please do share. I'm a very intermediate/beginner using Tweenlite, but that is what I use also. I've never used any kind of "curveTo" method before though, I'll have to look into that.
Also, the other day, I did play around with a simple shape tween, and I can see how a little effort can get you that same kind of animation. Wonder if that'd ultimately be a preferred method to do this stuff versus code. Who knows.

lope
April 20th, 2009, 11:00 AM
bump! :D
where's the animation? :P