DRAGABLE MASK

 

EXAMPLE APPLICATION

 

Please wait until the picture loads.
Move the mouse over the picture, the mask will follow the mouse.


  

 

THE FAKE MASK

 
  This is a simple effect.  I'm not sure what kind of application can benefit from it, but what the ....  This effect doesn't actually use mask; it simply overlay a transparent image on top of the real image.
  
 
 

BASIC STEP BY STEP

 
 
  • Create a new movie, set size to 200x200 pixels just for the sake of this example.
  • Import an image, position it so that all the images are visible.  If it's too small, stretch it to fill the whole movie canvas.
  • Make another layer above the image layer, name it Mask Layer.  
  • Draw a large black rectangle, size it 600x600 pixels.  (This size is 3 times the size of the movie canvas - the reason for using this size will be explained later.)
  • Use object property to position the rectangle so that its center point is exactly at the center of the canvas.  (You can use object property to set position to x=100, y=100 , don't use center point.)
  • On top of the rectangle, draw a circle.  The center point of the circle must be in the middle of the canvas.  Fill the circle with a gradient color which converges to transparent.  Below, I use black color which converges to transparent white (Alpha=0%).  
  • Select the rectangle and the circle (click on the layer), and convert to symbol.  Name the symbol "CoverSym," set Behavior to Movie Clip.
  • One the main scene (Scene 1), name the instance of the "CoverSym" symbol "Cover." 
  • On the first frame of the main scene (Scene 1) timeline, put the following action:  
    Start Drag ("/Cover", lockcenter) 
  • Test the movie. 

What is going on:

  • When the movie starts, the "StartDrag" command causes "Cover" object to be dragged.   This object simply draws over anything below it.  However, since the circle is transparent, whatever is below the circle will show through.  
  • lockcenter is used so that the circle will always be centered on the cursor position.
  • The size of the cover is set to 3 times the size of the movie.  This is so that the circle will always cover the picture, no matter where the circle is positioned within the canvas.  (If you know the exact size of the "circle," then this can be set to: 2 x movie size + circle radius.)
  • If the movie runs fine, then one should understand the basic idea.  To create variations such as shown in the example above, add tweens, and use semi- transparent colors.
 

(C) F. Permadi

<<BACK>>