Liquify Image Effect
       by bAkedSOda@in2mind : 9 September 2004
 
Applying motion is easy.
The masks and images we duplicated in part 3 are arranged in size like the animation below:
 
 
 
In motion, the masks at the top follow the mouse very closely, while the ones at the bottom follow more slowly.

Let's make a function to do the moving.

A basic scripted motion tween
Here's a cool little tweening function for you. It's pretty well-known, easy-to-use, and we can use it to make our masks move:
 

my_movieClip.onEnterFrame = function(){
   this._x += (destinationX - this._x) / 10;
}

 

'destinationX' is where you want 'my_movieClip' to go, and the number '10 at the end is how fast it'll get there. A higher number creates more eeeeasing...and a slower movement, a low number makes it move fast.
 
  1. Add this to the bottom of the script:
//make waves
makeWaves = function (masks_arr:Array) {
for (var i = masks_arr.length; i>0; i--) {
masks_arr[i]._x += (this._xmouse-masks_arr[i]._x)/maxImages*i;
masks_arr[i]._y += (this._ymouse-masks_arr[i]._y)/maxImages*i;
}
};

 

'makeWaves()' loops through every item in the 'masks_arr' array we pass to it and tells each one of them to adjust their _x and _y location according to where the mouse is. It uses the basic scripted tween explained above.
The key to the speed of each mask's movement lies in the number at the end (15*i): a lower number is a faster movement, so the mask will move faster if it's at the beginning of the array (i.e. higher in depth and smaller in size).
 
  1. One more method to add:
///the func to call /////////
liquefyImage = function(theImage:MovieClip){
 
var arrHolder:Object = dupeAndPlace(theImage);
theRubberizer.onEnterFrame = function(){
makeWaves(arrHolder.masks_arr);
}
}
//

takes an argument 'theImage', passes it into the dupeAndPlace function, and stores the result in its own 'arrHolder' variable. Then it tells 'theRubberizer' mc we created to call makeWaves ever frame.
 
*Try passing 'arrHolder.pics_arr' when calling makeWaves() here, it'll look a bit odd because of this image's size, but when used in other ways, it can be made to look pretty cool.

You are finished! You can download the source files here:

 Download Source

There's no friendlier or more brilliant group of peeps I've ever met online than the ones in kirupa forums. If you ever have any questions, post them in there.


Cheers!

bAkedSOda aka phincycle
www.in2mind.com

 


page 4 of 4

 

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.