Toxiclab.org

Advanced mask example with action script

13.5.2008, 0:12
Submited in: Flash | Total Views: 33578

Using this detailed lesson I will show you how to drag mask example using the mouse and action script code. This lesson is really easy for create so let's go!




Drag the circle below using the mouse!




Step 1

First of all, find any photo which you like to use for this lesson.



Step 2


Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as the dimensions of photo. Select any color as background color. Set your Flash movie's frame rate to 32 and click ok.

Step 3

Choose file > Import > Import to stage (Shortcut key: Ctrl+R) and import any photo into a flash stage.

Step 4

While the photo is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 5

While the photo is still selected, press F8 key (Convert to Symbol) to convert this photo into a Movie Clip Symbol.



Step 6

While the new made Movie Clip is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip photo. See the picture below.



Step 7

While the circle is still selected, press F8 key (Convert to Symbol) to convert this circle into a Movie Clip Symbol.

Step 8

While the new made Movie Clip is still selected, go again to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip mask. See the picture below.



Step 9

Create a new layer above the layer mask and name it action.

Step 10

Select the first frame of layer action, go to the Properties Panel (Ctrl+F3) below the stage and enter this code:

stop();
photo.setMask(mask);
mask.onPress = function() {
startDrag(this);
}
mask.onRelease = function() {
stopDrag();
}

Test your Movie (Ctrl+Enter).

We're done!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials