Convert Bitmapped Waves to Silverlight Animated Waves

I wanted to see how a person could take a bitmap (the bitmap is of a fake lake I created from a mountain picture. ) and animate it. In order to animate the waves of my lake, I had to create vector based paths that would echo the shapes of the waves. So - this is just a post about how I fumbled around to get my bitmap waves converted into vector waves - and here's the result: Water effect using animated paths in Silverlight I Hope you have your browser window big, because the image is 1024 X 800.

Here are the steps I took all in their raw fumbling glory.

In Paint.NET, You can download the original PDN file here

• I hid all the layers except Layer #4 which is the darkened transparent overlay that was sliced up for waves.
• I saved that image - 'justdarkenedwaves.png'
• Whoops, have to switch to PhotoShop.....Import the file, justdarkenedwaves.png into photoshop and save it as a .psd file. for the step after next.
• I opened the finalized .jpg I created as the last step of my previous post in Illustrator, that's the file I called 'flatironswithlake.jpg'
• I placed the .psd file I created above into layer #2 inside of Illustrator. It needed to be squished down to into the water area, it wasn't the same proportion as the .jpg in layer 1.
• I selected Illustrator's auto trace tool, and started clicking on the 'waves' until they were all traced.
• I selected just the new paths, and cut them out of the picture (keeping them on my clipboard)
• I deleted the waves (bitmap) that I just traced.!
• I pasted the paths of the traced waves back into a layer by themselves and positioned these vector images over the water in the layer below.

I was able to take this over into Expression Design now by simply selecting all and copying them, then pasting into a new document in Design. This is the intermediate step in getting the paths into Blend. So the last piece is to Select all in Expression Design and Copy Xaml. Then take my clipboard full of Xaml over to a new Silverlight project in Blend and paste them in.

Animating the waves was done in two stages. My Paths I just imported were 165 count all in a group called Layer1. In stage one, I created a new animation for pieces of the paths, picking and choosing which ones. Each animation was maximized for effect, and all I did was change the opacity a bit. Move it back and forth gently a few pixels here and there.

the second animation was done on a copy of Layer1, which took all 165 paths in a bunch and made another group. This group I stretched out to be twice as wide as my image. Over the course of 60 seconds, I drag that across the screen. This gives the effect of gently flowing water. Opacity is kept under 50.

I learned a lot. Next time (today) I'm making a windmill prototype, I'll put it up if I manage to get done!