Water: Its harder than I think.

[Darkfuzz]

When coming up with a new layout for my website, http://cyberfroggy.com (http://cyberfroggy.com/), I decided [to go along with the whole frog thing] I'd go for a more themed look. I came up with this:http://cyberfroggy.com/flash/mainscreen.gif [the black area would be grass]. When I opened up flash for the first time for this project, I decided I would work on the water animation first. It was a good idea, becasue it was the hardest.

The following is my long and bumpy road to figuring out how to make a decent water animation. If you would find this flash noob's failed and fairly rediculous attempts at creating water amusing, feel free to read about them. Otherwise, you can just cut to the chase, and scroll down to the big bold heading for my final project.

My first attempt at water: Particles. I figured that maybe I could use some for loops and make tons of particles move around, with a kind of springy effect keeping them all together. Uh...No.

That being too hard, I figured I should stick with ther basics. Aided with Photoshop, I created some clouds of varying darknessesesess, and changed their alphas and layered them and made 'em move around. The overall effect was this:http://cyberfroggy.com/flash/cfv4-1.swf , which happends to be not much.

So, then I got the crazy idea of taking out the dark or light parts of the clouds, creating around 3 or 4 different layers of different shades, and then move THEM around. http://cyberfroggy.com/flash/cfv4-3.swf . No va. My bro said it looked like moving camouflage. Heh.

Ok. I was getting kinda out of ideas at this point, so please forgive me for my stupidity... but next I thought to myself....How about I stick with the Camo, make GIANT circles out of it, place the centers of the circles a ways above the stage, and spin them around. [wt...?]
http://cyberfroggy.com/flash/cfv4-5.swf (http://cyberfroggy.com/flash/cfv4-5.swf) . CPU=http://www.kirupa.com/forum/images/smilies/huh.gif

FINALLY, when hopelessly looking at my mainscreen.gif trying to think of how I could create water, I got this brilliant idea. Using the EXACT same methods and filters [Clouds, then Ocean Ripple] as I used to make my concept pic of CF.com, I made around 10 pictures of water, and lined them up in the timeline at 30fps, with 2 frames each. http://cyberfroggy.com/cfv4-6.html [since there is no loading sequence, the water may take a bit to get going]

And THAT, ladies and gentleman, is the best overhead-view water effect I could come up with. Overall, It was a very humbling experience. Please feel free to download the .fla's, just follow the links above, only type .fla instead of .swf. Also, if you know an even better water effect [which I wouldn't doubt], please feel free to share. Seriously.

[thenHm]

nice effect!.

[ContinuumXLS]

I know voets has a nice underwater effect (look at his footer)

Oh, and by the way, it was laggy on my comp...nice though...

[Darkfuzz]

thanks. I've seen voet's water effect, [its great] but thats like a looking-through-the-water-while-your-under-it effect. I'm looking for an overhead view of it...Anyone ever played Super Mario 64 DS? The file selection screen has a REALLY nice water effect, but I think that would be impossible in flash...

[nobody]

Yeah man that water on mario ds really impresses me, I like staring at it :P
As far as your water effect goes, that's great that you put so much effort into it, it's nice to see dedication like that. I'd maybe slow down the animation a bit and possibly make the ripples seem less high. That could be accomplished by placing a blue square over the water in flash and lowering the alpha to something like 10-20 or so. I'm just talking out of my arse here though, that looks nice, good job! :beam:

[GW02]

The BEST water effect is Half-Life2.

[Mik3]

The BEST water effect is Half-Life2.
Not only is it just water, but you can see every mud particle in the water and the transparency changes depending on how you look at it and what the lighting/mud content is of the water. It's freaking crazy.

[Krilnon]

The BEST water effect is Half-Life2.
Unless you aren't allowed to get the game so you have to play it on your friend's old computer, then it's not so hot.

[Vexir]

Poor poor krilnon.


ANyway, its a good effect but its not new... the method has been around for a while, and there is a far better implementation of it, go to thinkdesigns.com, they really made it work while not making it processor intensive :)

[Darkfuzz]

Thanks, ill check that out :pleased:



______
"ther is no spoone" - the matricks [LoL]

[Krilnon]

I think you mean http://www.think-designs.com , unless you were talking about that search engine site....

The effect there is pretty cool, but the looping is easy to spot.

[icio]

I think you mean http://www.think-designs.com , unless you were talking about that search engine site....

The effect there is pretty cool, but the looping is easy to spot.


after effects me thinkies :)

[GreenLantern]

Nice water effect. Although I think it's a bit "jumpy". Water is smooth and flowing, that is boiling. Slow it down a bit and maybe transition from frame to frame instead of just moving.

Overall a nice effect though, I could see where that could come in handy.

[Macro-design]

http://www.think-designs.com - after effects? There aren't an awful lot of frames in the animation, an it take a while to download, it could just as easy have been made in photoshop. 50/50 I would say.

[GreenLantern]

http://www.think-designs.com - after effects? There aren't an awful lot of frames in the animation, an it take a while to download, it could just as easy have been made in photoshop. 50/50 I would say.
Looks like a photoshop job to me, and not a very good one if I do say so myself.

[Macro-design]

Yeahr, and after looking in their tutorial section too, I'm also pretty sure it's photoshop

[nabskater]

well it looks like some hard work payed off that looks pretty nice