Animation: Bending gradient fills

[boff]

I'm sure you've encountered this sort of animation before - probably in the form of a screensaver :p I think to best demonstrate what i have in mind, check out the (quickly-drawn-photoshop) attachment

The idea would be to animate the fills slowly bending like waves. It's easy enough to do something like this using a shape tween on the timeline (or even programatically like here (http://yugop.com/) - click 01: border, and interact with the screen) - but when you start dealing with gradients, it all goes pear shaped.

Does anyone know of a way to do this sort of thing programatically in AS3.0?

[kkbbcute]

Does the gradient have to bend with the curves of the waves, because if so, I don't think it is feasible.

[boff]

yeah the gradient would go with the curve which is why i too think it's not feasible.. but ill continue searching :)

[kkbbcute]

yeah the gradient would go with the curve which is why i too think it's not feasible.. but ill continue searching :)

Haha, good luck persevering then.:)

[Xegnma]

It can be done but you would have to forgo using any timeline tools and focus on building the effect purely in actionscript. I doubt it would be feasible otherwise. From what I can tell, you'll have to manipulate bitmap data directly to pull this off. So look up the BitmapData class, search a few blogs to see if anyone's come up with something similar and if all else fails take a course in programming advanced computer graphics :).

[pixelwit]

Create a horizontal gradient then slice it vertically every pixel and shift each slice up or down to get the desired curve. Probably should get acquainted with the BitmapData class and its CopyPixels and Draw methods.

-PiXELWiT
http://www.pixelwit.com

[kkbbcute]

Create a horizontal gradient then slice it vertically every pixel and shift each slice up or down to get the desired curve. Probably should get acquainted with the BitmapData class and its CopyPixels and Draw methods.

-PiXELWiT
http://www.pixelwit.com

Won't this result in gradient tearing, where the sides of your 1px thick gradient do not match with the gradients around it?

[boff]

Won't this result in gradient tearing, where the sides of your 1px thick gradient do not match with the gradients around it?

lets find out! hehe
in my head it works great - seems like a good idea to me

ive come across tweensy (http://www.lostinactionscript.com/blog/index.php/2008/08/31/as3-tween-engine-tweensy-preview/) which features "gradient tweening" - though this sounds like tweening the gradient rather than the object. some cool other effects here anyway :P

[kkbbcute]

lets find out! hehe
in my head it works great - seems like a good idea to me

ive come across tweensy (http://www.lostinactionscript.com/blog/index.php/2008/08/31/as3-tween-engine-tweensy-preview/) which features "gradient tweening" - though this sounds like tweening the gradient rather than the object. some cool other effects here anyway :P

0_o, that's a really cool site with nice examples, but what does creating particle effects have to do with your example? Particle effects usually don't exhibit gradient tearing as its not that noticeable.

[cjx3711]

Make the effect in an external software and import it in? Could be easier than slicing up the gradient,

[boff]

yeah at the end of the day developing an animation in after effects might be a lot less painful :P

[pixelwit]

Depending on what you're looking for, you could also draw ~parallel~ curved lines and then blur them until they look like a gradient.

Or you could drag a gradient along a curved path (http://www.pixelwit.com/blog/image-galleries/squeegee/).

-PiXELWiT
http://www.pixelwit.com

[cjx3711]

Pixelwit's right, You could Draw a thick line, add a lot of blur and duplicate it and change the color. Then add a mask to it to mask out unwanted parts

[kkbbcute]

How did you draw a gradient along a path again?

[cjx3711]

How did you draw a gradient along a path again?

Draw a thick vector shape and add a strong blur to it. Make a mask to mask away the other side of the blur and you have a makeshift gradient. To animate it, use shape tweens and you have to animate both the shape and the mask.

[kkbbcute]

As in, using AS.

[rokujolady]

Now, theoretically, something else you could do is to draw a rectangle, use the bezier tools to squiggle it up a bit, and to start at one end, taking an arbitrary distance and grabbing a point along the squiggly line at the top of the rectangle which is that distance from the top left corner. Let's call them a for the start point and b for the point x distance along your squiggly line from a.

Find the slope between those two points and select the pixels below this with the top left corner of your selection being a, the top right corner being b, and the height of the selection being the height of your original rectangle.

Create a gradient in your selection, setting its centre to be between a and b and its angle to be equal to atan slope between a and b. You could with a fairly small x build a squiggly gradient this way, though I am not sure how slow it would be in implementation.
Hope that makes sense.