ARSE i am

Tutorial: Image Distortion
I have made this tutorial to attempt to explain an easy way in which images can be manipulated and distorted in Flash. The following technique has a myriad of uses which is briefly illustrated at the end of the tutorial.This tutorial assumes you have a basic understanding of the Flash authoring environment.Following is an example of what we are trying to achieve:

Updated: 021112 - Thanx to -manfish- for the feedback.

I have used 2 main conventions in this tutorial:
Bold Blue = Mavie clip name
Bold Red = Movie clip stage instance name

Click and drag to distort the image.
Download Source

Overview
The effect is quite simple in it's design. When the user clicks the image is duplicated multiple times and is masked by a series of circles that change in size. Each circle is then move relative to the mouse and each other. The following demonstration illustrates how this technique works. If you imagine that the image is rotated slightly around the x-axis you can see how the image is duplicated and the circle masks are moved.

Download Source

Step 1 - Creating the main MC (MovieClip)
In this first step we create an MC that contains the image we wish to distort. We also create the relevant layers and frames required to produce the effect.

Import an image and create a MC. Call it myImg.
Name the stage instance of myImg to be myImg.
Edit in myImg place and convert the image to a new MC called inner.
Name the instance of inner to be inner.
While you are still inside myImg place a stop(); on the first frame. You can use the layer that inner is on or create a new layer for this action.

We now have MC inner nested inside MC myImg on the stage.

Create a new layer inside myImg.
On this new layer create a rectangle (without an outline) that is the same size and position as the image.
Turn the new layer into a mask.

We now have an MC containing the masked image.

Still inside MC extend the image layer so that it is 30 frames long. (note: this length determines the resolution of the ultimate effect. The shorter it is the lower the resolution will be and the grainer the effect will be. By increasing the length we increase the quality of the effect but also increase the amount of CPU required to drive the effect. I find that 14-30 frames to be a suitable length/quality).
Create a keyframe on the second frame of the mask layer, delete the rectangle (unlock your layers if need be) and in it's place create a circle about 150px in diameter and center it.
Create a blank keyframe on frame 30 (or whatever length you chose previously) of the mask layer. On this frame create a circle about 30px in diameter and center it.
Create a shape tween between the 2 newly created key frames.
Go to your main timeline and align myImg to the upper left hand side of the stage. (I am working on recoding to allow the MC to be anywhere on the stage - hopefully this will be resolved soon).

We have now completed the creation of the myImg MC. From the creation process you can see how we have created the series of circles that we will use later on.

Step 2 - Setting up global variables
In this stage we establish a couple of global variables that we will use in later steps.

On frame 1 of the main timeline add the following code:

slices = _root.myImg._totalframes ;
initX = 0;
initY = 0;

Variable slices determines the "resolution" of the effect as discussed previously (this is equal to the number of frames created within MC myImg)
initX and initY are used to hold values of the mouse position (these variables don't actually need to be declare in this example)

Step 3 - Defining the mouseDown and mouseUp
Here we simply setup the onMouseDown and onMouseUp event handlers to run separate functions.

On frame 1 of the main timeline add the following code:

onMouseDown = function() {
build();
}

onMouseUp = function() {
kill();
}

Step 4 - Defining the build function
Whenever the mouse is click the build function is used. Following is a line for line explanation of the function.

On frame 1 of the main timeline add the following code:

function build() {
   _root.initX = _root._xmouse;
   _root.initY = _root._ymouse;
   for(i=2;i<=slices;i++) {
      duplicateMovieClip("myImg",i,i);
      _root[i].gotoAndStop(i);
      _root[i].inner._x = myImg._width/2-_root.initX;
      _root[i].inner._y = myImg._height/2-_root.initY;
      _root[i].onEnterFrame = move;
   }
}

the first line declares function build()

function build() {
}

The next 2 lines store the mouse position (when clicked)

_root.initX = _root._xmouse;
_root.initY = _root._ymouse;

A for loop is used to create the slices. The loop starts at 2 as the MC on the stage is counted as 1

for(i=2;i<=slices;i++) {
}

myImg is duplicated. The new MC is named i - this is done because we are going to use the MC _name as an integer. Going back to the overview sample you will see that the largest slice (bottom) moves the least. By using i (or _name) we can move each item incrementally. i.e. the uppermost pieces move the furthest.

duplicateMovieClip("myImg",i,slices-i);

We now make myImg gotoAndStop frame i. As the loop creates new MC's we are telling the new MC to move one frame more than than the previously created MC - thus we have slices in incremental sizes.

_root[i].gotoAndStop(i);

Set the position of inner to be relative to the position of the mouse click.

_root[i].inner._x = myImg._width/2-_root.initX;
_root[i].inner._y = myImg._height/2-_root.initY;

Make each slice run method move onEnterFrame.

_root[i].onEnterFrame = move;

Step 5 - Defining the kill function
The kill function simply removes the onEnterFrame event handler from each of the slices. This is done to remove any unnecessary processes.

On frame 1 of the main timeline add the following code:

function kill() {
   for(i=2;i<=slices;i++) {
      _root[i].onEnterFrame = null;
   }
}

Step 6 - Defining the move function
The move function occurs onEnterFrame for each of the image slices. The slices are moved relative to the initial mouse click and to each other.

On frame 1 of the main timeline add the following code:

function move() {
this._x = _root.initX+(_root._xmouse-_root.initX)*(this._name)/50;
this._y = _root.initY+(_root._ymouse-_root.initY)*(this._name)/50;
}

Lets look at this step by step. (as the X and Y are calculated in the same way I will only discuss the X position.

this._x =

First we set the position to be equal to the position of the mouse when clicked.

this._x = _root.initX

We now add an amount that is the current mouse position relative to the initial mouse position (i.e. relative to the center of the effect)

this._x = _root.initX+(_root._xmouse-_root.initX)

We now multiply this added amount by the integer value of the name of the slice. Previously we discussed using _name as an integer. As the the initial for loop created the slices it incremented their respective names. We are now using these names to multiply the added distance value. This in effect makes the smaller (upper most) slices move a greater distance while the larger (lower slices) move a relatively smaller distance.

this._x = _root.initX+(_root._xmouse-_root.initX)*(this._name)
this._y = _root.initY+(_root._ymouse-_root.initY)*(this._name)

We now divide the additional distance to reduce the size of the overall effect.

this._x = _root.initX+(_root._xmouse-_root.initX)*(this._name)/50;
this._y = _root.initY+(_root._ymouse-_root.initY)*(this._name)/50;

Step 7: Tutorial complete
Please let me know if this tutorial has any errors, can be improved or is difficult to understand. I am planning on creating a lot more tutorials and your feedback is extremely helpful and allows me to write better tutorials and create increasingly cleaner work.

Please do not distribute this tutorial without the permission of www.arseiam.com