Featured Flash FLA 11401 Flash Movies | 5 New Flash Movies Added What's New | Top 100 Featured FLA »  Author: Nick Kouvaris »  Title: Znax »  Description: Znax is a board game. Click 4 tiles of the same color and form squares as big as you can. You will erase all the tiles inside the square and collect points. Get maximum score if you make a square with game edges. »  More by: Nick Kouvaris Random FLAs | Add Flash Movie Featured Flash Site 4941 Flash Sites | 1 New Flash Links What's New | Top 100 Flash Site Featured Site »  Author Agence WOP Digital Agency »  Title: Electricdrum »  Description: French WOP Agency, 3D websites, Flash (Papervision, Away 3D), event or institutional projects. The agency operates on all digital projects: consulting, design, graphic design, development, online communication. The WOP agency follows you on the implementation of original, creative and optimized digital projects. Random Links | Add your own Flash Related Links

1481 Tutorials 7 New Tutorials Added! What's New | Top100 » How To Make A Simple Animation Using Christmas Clips » Simple Step by step flash game tutorial Spot the diffrence » How To Make A Moving Text Slide » Create Flash Banner With Text Float Effect » How To Make Zoo Photos Slideshow » How To Make A Dolphin Photos Slideshow » How To Make A Fathers Day Slideshow » How To Make A Transparent Background of Your Flash File » Create Flash Banner With Text Disco Light Effect Today we will introduce you a Text Disco Light eff » Unknown Tag: Title10 Random Tutorial | Add Site

Tutorials Home What's New Top Rated Submit myTutes Random!

Tutorials » Actionscripting/Expert

Dynamic masking using the drawing API
Author: Patrick Mineault | Website: http://dakar.netqcca.com |

Movie 1: Draggable mask

Those of you that were around in the "good old days" of Flash 5 remember what a pain it was to create a draggable mask. For some reason the mask was unavailable for scripting and so the container movie clip and the maskee had to be moved simultaneously in a splendidly awkward workaround. Gone is this nightmare in MX. Let's start out by creating a new movie. Draw something on stage (anything, as long as it has colors). Now convert to movie clip using F8. We'll call this clip the maskee.

Select the movie clip and attach this script to it (not to the frame, the movie clip!):

onClipEvent(load)
{
  _root.createEmptyMovieClip('square',0);

 function drawSquare()
	 {
	   x = _root._xmouse;
    y = _root._ymouse;
    with(_root.square)
	   {
	     clear();
      moveTo(x-50,y-50);
	     beginFill(0x000088)
	     lineTo(x+50,y-50);
	     lineTo(x+50,y+50);
	     lineTo(x-50,y+50);
	     endFill();
	   }
  }
	 this.setMask (_root.square) 
}
onClipEvent(mouseMove)
{
	 drawSquare();
	 updateAfterEvent();
}

Test the movie (Ctrl+Enter): you now have a draggable mask! How does it work? Well, as with the first example an empty movie clip is created and assigned as the mask of the target movie clip. The trick here is that the mouseMove clip event is used to trigger the drawing of a square around the mouse. The mouseMove event is triggered every time the mouse is moved. When this is done the drawSquare function is called. Using the coordinates of the mouse it draws a square with the top left corner at (-50, -50) and (50,50) relative to the mouse cursor, hence drawing a square 100 pixels wide that follows the mouse.

Question: why bother using the drawing API every time the mouse is moved? Wouldn't it be better to draw the square once and then change the _x and _y of the mask when the cursor is moved, or even, gasp!, using startDrag()?

Answer: The advantage of using the method outlined above should become apparent with this simple modification: comment out the clear(); line. Test the movie. There you have it folks: a scratch and win game!

What just happened? By commenting out the clear(); line, the previously drawn squares are never erased. Therefore every time the mouse is moved a square is added to the clip, effectively creating a bigger and bigger mask. By adding a condition that checks for mouse down and using a smaller and different shape you could easily transform this into a "real" scratch and win game.

» Forums
	More help? Search our boards for quick answers!

Please rate this tutorial, 10 is the top rating, you can also click the comments link to read/write a review.

10 9 8 7 6 5 4 3 2 1