Wavy Effect

I thought I'd resurrect the wavy effect that is going on at www.eccentris.com made by First Born. The site itself is not new. I'm sure many Flash enthusiasts have moved on from it since the days it was born. But it is indeed one of my favorite effects and I have not seen anyone else in the Flash community go into depth to explain it or anyone else incorporating it into their projects. So I decided to take a stab at recreating it:



I used the Fuse kit for animation and the BitmapData() class to generate the images. I must say that this can be done in different ways because during the time the site was built there was no Fuse or Flash 8. But the approach is the same - duplicating and masking the image repeatedly and using "easeOutElastic" for easing. The tools I used simply reduces the amount of code I had to write.

Download the .FLA.

Duplicating dynamically loaded content using the BitmapData() class

The Flash documentation on duplicateMovieClip() states that "if you used MovieClip.loadMovie() or the MovieClipLoader class to load a movie clip, the contents of the SWF file are not duplicated. This means that you cannot save bandwidth by loading a JPEG, GIF, PNG, or SWF file and then duplicating the movie clip."

With the availability of the BitmapData() class that comes bundled with Flash 8, we can "duplicate" the content by attaching its data to an empty movie clip. For example, if you use the MovieClipLoader() class to load your dynamic content, you would want to duplicate your movie clip when it's loaded:

mclListener.onLoadInit = function(target) {
     var mc_copy = target._parent.createEmptyMovieClip("mc_copy", 34532);
     var bd = new flash.display.BitmapData(target._width, target._height);
     bd.draw(target);
     mc_copy.attachBitmap(bd, target._parent.getNextHighestDepth());
}

Inside the code block, the first line creates an empty movie clip to which we will use to hold the duplicated image.

var mc_copy = target._parent.createEmptyMovieClip("mc_copy", 34532);

The second line then creates a new BitmapData object that will store the properties of the image to be duplicated.

var bd = new flash.display.BitmapData(target._width, target._height);

The third line draws, or stores your original image to the BitmapData object.

bd.draw(target);

Finally, simply attach the BitmapData object to your mc_copy. Your empty movie clip now contains a duplicated image of your dynamically loaded content.

mc_copy.attachBitmap(bd, target._parent.getNextHighestDepth());

Download a simple example here.