While you can create a
text mask that can follow your mouse, it is
time to allow the mask to be "drug" around by you dragging!
This isn't a cumulative tutorial, and the partial source
code is provided below. There will be a section explaining
what I have done, so you can understand and implement this
in your own movies.
The example and the tutorial
below will help you to create a mask that can be dragged by
using the mouse:
Click on
the colored area and drag. Click again to release.
Creating A Drag 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 "drag.fla" that you downloaded from my site, you
should see the text and a circle. I'll explain how to
create the draggable movie, then I'll explain how it
works. Click on the "button" in layer button. Right click
on that and choose "Actions". See image below:
Once you have
done that, it is time to add the actual code in. Click on
the "+" then go to Actions > startDrag. In the target
area, type in "drag" (that is the name of the movie clip).
And make sure you check the box for "Lock mouse to
center". Now, highlight the section of code that says "on
(release)". In the event subsection, uncheck "Release" and
check "Press". Your code should look like that of the
following:
Now that you have setup the drag clip, we need to set
up a way in which the movie won't drag. Conveniently,
Flash 5 has an action called stopDrag. So, highlight the
last line of code " the } " and go to "+" then Actions >
stopDrag. Your code should know look like the image below:
Now, all you have to do is preview the
movie. I usually preview the movie in HTML. Go to File >
Publish Preview > HTML. Below you'll find how the movie
works.
Explanation:
Below you'll learn as to why the
movie works the way it does. It is really important that you
have the "Instance" panel visible. If you don't have it, go
to Window > Panels > Instance. Now, when you click on the
movie, you should see a button. That is what the Instance
window shows. See image below:
So, as you can tell by
now....the button is transparent. To see that, simply right
click on the button and choose "Edit In Place". Here is why
the button is a button and it is transparent.
Because
the button is transparent, you are able to see the movie
below. Had I not done a full "Alpha", the button's color
would have blocked you and me from seeing the cool mask
drag.
The button
takes up the whole screen because I want the drag to work
throughout the movie. I don't want have to move the mask
back to the small area to un-drag it.
Unlike the
previous page, mouse actions only occur on Buttons. For
the drag to work, you need to add the mouseEvent actions.
They will only work in buttons.
That's that about buttons.
Now, if you lock the layer for buttons, and unlock the other
layers that are masked, you should see the whole movie now.
Click on the blue gradient "circle". In the instance window,
you'll see that the object is a movie clip, and that it has
a name "drag". That is why in the code above, we referred to
the "Target" as drag. You can change that name to something
like "clip", and change it manually in the button code to
reflect that. The movie will still work. That is a direct
result of Tell Target. See below for some links related to
these topics.
If you have questions, need some assistance on this topic, or just want to
chat - please drop by our friendly forums
and post your question. There are a lot of knowledgeable and witty people who
would be happy to help you out. Plus, we have a
large collection of smileys
you can use
Share
Did you enjoy reading this and found it useful? If so, please share it with
your friends:
If you didn't like it, I always like to hear how I can do better next time.
Please feel free to contact me directly at kirupa[at]kirupa.com.
Text Masking:
Drag Mask
