Please wait until you see a picture
below this text; then
click and drag any spot within the picture to "warp"
it.
INTRODUCTION
This is a cool image manipulation effect, and there
are several variations of this kind on the web. It seems
complicated, but compared to image manipulation techniques in
general, it's actually relatively simple.
It's true that the scripting will take considerable skill.
Fortunately, this document won't include the scripting, because there
is just to much detail to be covered. But the concept will be
fully explained; and the implementation is left as an exercise
(yeah..).
THE
CONCEPT
The main idea is to divide and scale.
Let us examine the picture of my nice-dog above
and below. The picture actually consists of 9
smaller pieces (3 rows by 3 columns). The pieces are
dragable (try draging the middle piece - on the above Flash
movie).
The position of the middle
piece determines the size of all the pieces surrounding it. Again,
drag around the middle piece to see how that works.
So, in a nutshell, the effect can be accomplished with
these steps:
Divide a picture into pieces.
The piece can all have the same size (but not
necessarily so). For example, this picture is
divided into 9 pieces.
Make each piece an individual entity. There
are several ways to do this in Flash:
a) use mask (slower
performance - but the picture can be kept intact); b)
cut the picture up manually (faster performance, but
it will be difficult if you wish to change picture).
This can be done by breaking-apart the picture.
Create a mechanism to allow user to drag the piece (use DragMovieClip
with mouse-over or mouse click methods, for example).
Be able to scale the width and height of the
surrounding blocks. This must be done by
ActionScripting, and it requires some math. It's
not difficult, although doing it in Flash can be
trying one's patience.
For the simple case of 3 by 3
blocks, if user drags the block at the center upward and to the right,
then the configuration will be something like this.
Try this simple picture to better conceptualize the
points. Click and drag one of the piece and see what
happens.
Hopefully, at this point, you understand what is going on.
As you can see, there is no complicated image processing. It's just
dividing and scaling. The scripting does require
some basic math, but it's nothing fancy (no crazy complicated math
formula). In Flash 4, an intermediate/advanced scripting
skill is necessary, mainly because of the crude ActionScripting
interface (be prepared to have TellTarget nightmares). In Flash 5, the
task will be considerably easier.
SUGGESTIONS
As a starter, create a simple configuration.
For example: rows only.
Make the middle piece dragable. Then write the
code to scale the bottom and top pieces when the middle
piece is dragged.
This method is not limited to 3 by 3 matrix. How about 4 by 4 or 5 by 5 matrix.
This method can be applied to any programming
language (Java, C).