 |
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.
|
|
- 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).
- 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:
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!
 |
page 4 of
4 |
|
|
|
