First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: KJ

In this tutorial we?re going to make a ?drag mask? effect. We all know (who are advanced in flash) that masks CANNOT be dragged. So, in order to create the illusion of dragging a mask, we will create ONE movie clip and write some very simple script.

1. Create a new movie. Frame rate, dimensions and background color don?t matter, but to make it simple, make the background color black.

2. In Layer 1 of Scene 1, import an image, picture, graphic, etc. Place it in Frame 1.

3. Make a new Layer (2) and place it on top of Layer 1.

4. In Frame 1 of Layer 2, create a Movie Clip and called it dragMask. (Names don?t matter)

5. We are now editing the dragMask movie clip.

6. In Frame 1, Layer 1, create a rectangle (no border, ONLY fill), same color as your background color ? in this case black. Make it large, for example 1000x400. Align it to the center of the movie clip.
In the same Frame and Layer make a circle ? 159x159 and align it to the center. Make it black. Then give the circle a radial gradient and try to make it similar to pic 1., in order to make it go smoothly from black to transparent. The final product should look like rectangle with a circle in the middle. The important here is to place both objects in the same Layer and Frame.

7. Go back to Scene 1. Pic 2 is showing the proper look of the main timeline on Scene 1. It is optional to give the movie clip an instance name. Now you should see the final product. The image in Layer 1 is visible through the circle we made in the movie clip. Now we have to add the script.

8. Right click on the movie clip and choose ?Actions?. Give the following script:

onClipEvent (load) {
	startDrag ("", true);

Activate ?lock mouse to center? and if you wish to limit the mask to a certain coordinates, then activate ?constrain to rectangle? and give the numbers that best fit your needs.

9. Now hit Ctrl+Enter to test your movie. We created a dual effect. It looks like a flashlight and it?s actually masking the image without even having a mask. Very important is to make the rectangle in the movie clip as large as possible so when you start the drag motion in the main Scene, the rectangle should cover the entire image.

If you don?t get to do something or you have questions about flash, please feel free to email me. I?ll help you if I can. Thank you for reading this tutorial.


» Level Basic

Added: 2002-09-27
Rating: 5 Votes: 33
» Author
Ask me what you want to know!!!
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.