Text Masking:
Follow MouseAfter
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:
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:
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:
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:
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:
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
Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!
When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.
Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.
This is a companion discussion topic for the original entry at https://www.kirupa.com/developer/flash5/textmask.htm
