Simple Flash Blog

I use very often mask in my flash work. In this tutorial I’ll show to you how to add dynamicaly a mask to a movie clip and hot to make this mask able to be dragged using ActionScript. This example works for ActionScript 2.0, it doesn’t works at all for ActionScript 3.0. I promise I’ll write the tutorial about how to make flash mask draggable with ActionScript 3.0.

STEPS TO FOLLOW:

1. First create a new flash document and save it on your computer as flashdragmask.fla. Go then to the Properties panel or to Modify >> Document (Ctrl+J) and set dimensions to 300×200 px and put any colour you wish as background.

2. Insert two new layers and rename the layers from top to bottom: actions, mask, bg.

3. Go to the the first frame of the bg layer and insert a picture you want with 300×200 px dimensions: File>>Import>>Import to Stage (Ctrl+R), select the picture from your computer and press the Open button.

4. Now you have to convert the picture you just imported in a movieclip. Select the picture on the Stage, assure yourself it is align to center both horizontal and vertical (use Align panel for this), and then go to Modify >> Convert to Symbol (F8). In the Combert to Symbol window that appears choose MovieClip as Type, top-left for Registation point and give it the name pictureMC.
While the movieclip is still selected go to the Properties panel and give it an instance name of picture_mc.

5. Now go to the first frame of the mask layer. Using the Rectangle Tool (R) draw a square (hold Shift key to draw a square) with no stroke about 80×80 pixels. Then convert it to a MovieClip ( Modify>>Convert to Symbol or F8) with the name maskMC. Also give it an instance name of mask_mc in the Properties Inspector.

6. All you have to do further is to go in the first frame of the actions layer, open the Actions panel (F9) and insert the following ActionSript code:

picture_mc.setMask(mask_mc);mask_mc.onPress = function(){
startDrag(this, false, 0,0, 220, 120)
}mask_mc.onRelease = mask_mc.onReleaseOutside = function(){
this.stopDrag()
}

That’s all. Test your movie (Ctrl+Enter) and see the result.

This entry was posted on Thursday, March 20th, 2008 at 2:29 pm and is filed under ActionScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.