Tuesday, 23 June 2009

Dynamic mask in Actionscript 3

This is an update tutorial from the previous draggable dynamic mask tutorial in Actionscript 2.0. In this Flash tutorial you will learn how to create a dynamic draggable mask in Actionscript 3.0. This allows you to drag a masked object on the stage using the mouse, to reveal the layer below.

In AS2 the “setMask()” method was used to create the object mask, but now in AS3 the mask property is used, which looks like “myObject.mask = myMask”. The “myObject” is the object which gets masked, and the “myMask” is the actual mask itself.

Dynamic mask in Actionscript 3

Step 1

Open an Actionscript 3.0 file.
Import the image you wish to use as your masked background by selecting File > Import > Import to Stage. I have used a free stock image of a golfer, but you can use whatever image you wish.
Set the stage size to the same size as your image.




Step 2

Select your image and convert it into a symbol by pressing F8. Give your image an appropriate name, check movie clip and click ok. Then select your movie clip and give it the instance name: maskedbg_mc.


Step 3

On the timeline insert a new layer called “Mask”. Then on the stage create your object for the mask. I have created a simple circle shape using the oval tool, but you can create whatever kind of shape you wish. The colour of the shape does not matter, as you will not be able to see the mask colour.




Step 4

Select your shape and convert it into a symbol by pressing F8. Give your shape an appropriate name, check movie clip and click ok. Then select your shaped movie clip and give it the instance name: mask_mc.




Step 5

On the timeline insert a new layer called “Action”. Right click on the 1st frame and select Actions and then enter the following code:

//1.
maskedbg_mc.mask = mask_mc;

//2.
maskedbg_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragMask);
maskedbg_mc.addEventListener(MouseEvent.MOUSE_UP, noMask);

//3.
function dragMask(event:MouseEvent):void {
mask_mc.startDrag();
}

function noMask(event:MouseEvent):void {
mask_mc.stopDrag();
}

Code:
1. This sets the background image as the masked object and the shape as the mask.
2. This is two event listeners with the mouse down and up events with the dragMask and noMask parameters.
3. This is two functions which basically drags and drops the mask_mc (shape) using the stopDrag() and startDrag() methods.


**Alternative step 5

You can also use the mouse to control mask object like in the dynamic mask tutorial in AS2. The code below sets the mask to the mouse controls, so you can control the mask using the mouse.

Mouse.hide();
stage.addEventListener(Event.ENTER_FRAME, eventHandler);
maskedbg_mc.addEventListener(MouseEvent.MOUSE_MOVE, eventHandler);

function eventHandler(event:Event):void {
mask_mc.x = mouseX;
mask_mc.y = mouseY;
}


Step 6

Test your dynamic mask Ctrl + Enter. Now use your mouse to click and drag and mask.



You should now have a dynamic mask in Actionscript 3.0. You can download the source files here.

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP