Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

Moving a Mask with your Mouse

Prepared by Theodorb.

A mask will limit the view of the layers associated with it. It allows you to place layers above others which can appear like they are below. It also allows you to cut objects so that only portions of them are visible. You will only see what is masked. 

By adding an Action Script you can control the movement of the MASK with your mouse.

Test it out on the right==>



1. Open a new movie set it to 550 x 400 pixels. Set your stage so you can see all of it.

2. Import the picture you want to apply the mask to.

3. Click Insert / Convert to Symbol. Name the symbol "maskedobject". Set to movie clip. Click ok.

4. Open up your Library. Click Windows / Library (f11). Double click on "maskedobject".   Set the registration to x = 0, y = 0. Close "maskedobject".

5. Click Insert / New Symbol. Name the symbol "maskclip". Set to movie clip. Click ok.

6. Drag "maskedobject" onto the stage. Give it an instance name of "mcmaskpic".

7. Add a new layer to "maskclip".  Select first frame.

8. Select your circle tool and draw a in the top left corner of the frame, so only 1/4 of the circle is in the frame.  Fill the circle red.

9. Right click on the time line for layer 2 near the name. Click Mask on the menu.  

10. Close the "maskclip".

11. SAVE your movie !!!

You should now be looking at your blank stage. Scene 1 Layer 1.

12. Drag the "maskclip" onto the stage.

13. Select the 1/4 circle. Open the Actions Panel

Click + / Movie Clip Control / onclipevent

Click onMouseMove

Click + / Actions / Variable / setvariable

In variable type x

In Target type _root._xmouse

Click exp box to make it an expression

Click + / Actions / Variable / setvariable

In variable type y

In Target type "_root._ymouse"

Click exp box to make it an expression

Click + / Objects / core / this

in the expression box type "._x = x

Click + / Objects / core / this

in the expression box type "._y = y

Click + / Objects / core / this

in the expression box type ".mcmaskpic_x = (0-x)

Click + / Objects / core / this

in the expression box type ".mcmaskpic_y = (0-y)

Click + / Movie Clip Control / updateAfterEvent

 

Your script should look like this

 

onClipEvent (mouseMove) {
x = _root._xmouse;
y = _root._ymouse;
this._x = x;
this._y = y;
this.mcmaskpic._x = (0-x);
this.mcmaskpic._y = (0-y);
updateAfterEvent();
}

 

14. With your select tool select the white part of the screen.

15. Open the Actions Panel. Click + / Movie Control / Stop.

16. Save and Test your movie.

 



"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2026 All Rights Reserved
Privacy and Legal