Lines that flow

Was looking through the fourums and saw this link http://www.body.com.au/ and wondered how they did those lines and made them flow liek that (the fist thing you see, and during transitions)

At first I thought it was just a mask, but then when you see the lines cross over each other there is no way it could have been a mask.

Maybe its an element that follows a path, drawn in some other program??? i saw this same effect in the site of the week a last month
http://www.liquideye-designs.com/

They use a some gradient or radial mask to fade away the edges and then make the final lines so they come in together and disappear together :). Might be a little complicated but I’ll give it a try.

you have to use gradients asks masks…

Just put the lines under a mask. THe mask would be a gradient, then just shape tween the first gradient into another gradient. That way it flows. i am at work so i cant make u an example but someone will probably make u an example if you ask.

well thats what i thought but, what about when the lines cross over,

when they go in a loop for instance the first time you went by u would be able to see the whole loop right!

click on the stocklist link in http://www.body.com.au/ and you will see what i mean.

Thanks so much for the help tho, just that little detail is buggin me

Those loops are customly animated by using paths.

I’m trying right now. I made the lines so far and the mask. Still tryin to get the fade effect. I knew how to do this but forgot - if I find out I might make a tutorial on this.

cool sounds like a plan
thanks so much for the help

Got it!

Here you go:

  1. Make a new canvas and select a nice colored bg color.

  2. First make your lines using the line, pen or pencil tool. I used the pencil tool and smoothened it. Make sure your lines are at least size 1.

  3. Select these lines and go to modify > shape > convert lines to fills. Now these lines are considers fills so they aren’t lines any more :).

  4. Make a new layer and drag this right UNDER the lines/fills layer.

  5. In this layer make a rectangle the color you want the lines to be - I used white - turn off the stroke of the rectangle or delete it. Make sure it’s height is about 50 pixels taller than the lines’ total height.

  6. Select the rectangle, go to modify > shape > soften fill edges. Type in numbers and play around with the settings to soften the edges. I used 50 distance with 50 steps and an inset (or expand).

  7. See how the edges are softened? Now select this whole softened blob and animate it however you want using paths or just simple tweens.

  8. Select the lines layer, right click > mask.

http://21dynamics.com/Flow.swf - View before you download .fla.

Hope this helped :),
Sharif.

WOW Thanks so much…big ups^^ thanks so much

Also you should make a frame with softened edges so the lines fade out instead of just coming to a solid line. Watch The Reefster’s lines as they disappear at the right hand side. Thanks Reefster I know I’ll be using this in the future.

No problem guys :thumb:.

wow, very simple effect, but very powerful impact. those are very very beautiful lines. amazing work considering its something thats always been there.