This is a demo of a way to use the displacementmap-filter to distort a movieclip in a controlled way. In most cases the displacementmap-filter is used together with some kind of random functions to create flag or liquid wave distortions. It also a experiment on how to use a physics engine as a tween engine.

You can drag the physics point but if you do to fast motions the physics grid can be messed up.
press “p” to show the physics points. Wait until new random points are set.
press “d” to show a preview of the displacementbitmap

Every 150th frame new destination points are calculated. The physics points are then moved to the new location and anchors are attached in the corners. Then the physics points are dragged to the old location and released. The result is a motion tween made of physics springs.

The circles are controlled by the physics engine and the distance to the original positions are calculated. The points are then the input for creation of a two quadratic bezier-surfaces, one for x-axis and on for the y-axis. I found the surface page on wikipedia after I made the application, which was good since its a little bit over my head, but the curvepage is good and have nice ani-gifs. A bitmapdata is created from the surfaces and used as the displacement filter. If simpler linear instead of quadratic bezier curves are used a perspective effect can be archived in a simple way.

The original clip is masked away, otherwise it shows up behind the filter during heavy displacement.

The performance is not that great. Its not that strange since its a lot of calculations. The displacement bitmapdata has the dimensions of the bounding box of the physics points. If the box is 200×200 px the displacement calculations and setpixel() in every frame is made 2×200x200 = 80000 times.

I made some small attempts to rescale the window before the calculation to be able to make a smaller displacement filter but I didnt succed.

An alternative way to archive the same effect could be to use the same triangle distortion trick as 3d engines uses. But if you want the same degree of smothness you will need a lot of triangles. Another advantage over the triangletrick is that the mouseevents on the clip still works like clicks and rollovers. That can be archived with the MovieClipMaterial in papervision3D but that’s a little bit trickier.

I’m a little bit confused why transparency and dropshadow filter on a filter works. Its a good thing here but a little bit unexpected.

The source needs some refactoring and documentation maybe. The drawings and calculations have to be separated from the physics part to make it useful. If you can use it and make something cool let me know.

1. dude, on November 27th, 2007 at 19:02:21, said:
   

   why dont you just post the entire package?

2. admin, on November 28th, 2007 at 09:52:15, said:
   

   what are you missing? Its a as3 project. There is no fla if you are looking for that. main.as is the entrypoint of the application. You will need a swf file or image to be displayed. In this example start.swf.

3. Evan, on May 15th, 2008 at 21:29:49, said:
   

   Hi Peter,

   My name is Evan, and I am from Canada. I have tried working through your code to use it for a Mac style OSX “squeeze” transition for an Flash application I am working on.

   The slides in my application are 500×400px so it seems like performance is an issue. Any suggestions? (should I use bitmapdata.lock in the MoveGrid.drawBitmap class maybe?)

   I would like to use your code better than Grant Skinner’s “squeeze” code because I think I can get a nicer and better “squeeze” effect with this code.

   Also, how would I tween the slide with the displacement “squeeze” effect: by using the MoveGrid.moveTo method? or by adjusting corner point or both? It seems the onEnterFrame listener is always on and calling step so there is no start/stop tween functionality here to use.

   Please help wit your wonderful code.

   thanks,

   Evan

4. admin, on May 20th, 2008 at 13:04:33, said:
   

   The performance of the application is an issue. The bitmapdata.lock() might help, I havn’t tried.

   The squeeze effect is possible to do. If you are going to squeeze to the bottom you probably have to first tween the bottom corners and maybe the middle ones. then use moveTo so move everything to the bottom and at the same time tween the top corners.

   A good thing to do before is to split the drawing from the physics, since you don’t need the physics.

   good luck. Please send be a link if you are successful.

Comment on this post below

You can leave a response, or trackback from your own site.