Text Masking: Follow Mouse

by kirupa   | filed under Flash and ActionScript

After having answered many emails and message board posts on how to create a mask that follows the mouse AND how to drag a mask, I decided to create a tutorial on how to do both. This tutorial is two pages long (one page per each concept).  Before you start off this tutorial, please make sure you understand how to mask objects and how to make objects follow the mouse. The URLs for those topics are mentioned below:

• Creating Masks
• Making A Movie Clip Follow The Mouse

 The example and the tutorial below will help you to create a mask that follows the mouse:

Move the Mouse Over the Animation

Creating A Follow Mask:

Before we start, please download the partial source below. Don't worry, the partial source will not have the key elements to make it work...you'll do that with the information found below. Click here to download the source.

Here's How:

1. Once you have opened the file "dragfollow_user.fla" that you downloaded from my site, you should see the text and a circle. First, we need to make the draggable object a movie clip. So, the circle will be made into a movie clip. So, click on the circle and press F8. From the window that pops up, choose Movie Clip & enter a name. See image below:

2. You can name the movie clip whatever you wish to. Now that the circle has been converted into a movieclip, it's time to name the movie. Go to the Instance Panel or (Right Click on Circle > Panels > Instance) and type in the name "drag". See image below:

3. It is not necessary to name the movie clip drag, but it is recommended if you are just learning this. You can name it whatever you want as long as you modify the corresponding code that will follow in a few minutes. For this example, I have named the movie clip "drag". Now, here comes the easy part...the actual masking. Right click on Layer "text" and choose Mask. Once you have done that, your timeline should look like the one below:

4. The final step is to add the code that makes the movie clip follow the mouse. You may notice that the circle now is within the text itself. That is the direct result of the mask effect. Ok, now, right click on the only keyframe in the Layer movie and choose Actions. From the Actions menu, click on the "+" and choose Actions: startDrag. In the resulting window, type in the name of the movie clip "drag" and click on "Lock mouse to center". Your code should like like the one below:
    

 startDrag ("drag", true);
 

That is all there is to making a mask follow your mouse. Of course, you may download the final source code for the Follow Mask Click Here

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence slop, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇