PICTURE WARP EFFECT  

 

SAMPLE APPLICATION

 

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).
 

(C) F. Permadi

<<INDEX>>
 

permadi@permadi.com