Cursor-Controlled Spotlight
On the web, you’ll often see ads or games that let you play with the scene by revealing parts of it with a “spotlight” effect, in which the spotlight (or, in some cases, twin circles through binoculars) follows the mouse over a black field.
Ready to try making one yourself? Then start off by creating a scene to be revealed by spotlight. I’ve put together a pretty simple night scene.
…and then I’ve covered it up.
Confused? Don’t be. In order to have the spotlight reveal something, it has to be hidden first—so, on a new layer, I drew a black rectangle that covered my scene, and then some. This is going to move around with the mouse and we don’t want the edges visible, so the rectangle needs to be significantly larger than the scene itself.
Just for reference, I’ve momentarily placed the rectangle behind the scene so that you can see how large it is in relation to the actual visible picture and area of the stage.
Now, with the black rectangle obscuring the scene once more, create the spotlight by cutting out a circular area of the scene. Rather than create an object that somehow physically illuminates through some mathematical operation, or actively erases part of the covering rectangle, it’s easier to just define our spotlight as an absence of obscuring material.
Turn the obscuring rectangle into a symbol; make it a movie clip, if only because we’ll need to assign an instance name to it so that we can refer to it later when scripting. Then, naturally, assign a name to it. My movie clip is called “Spotlight” in the library; my instance name is simply “black”.
Double-click on the movie clip to enter its editing stage. Although we created our spotlight by deleting a portion of the covering rectangle, we need that particular clear area to react to the mouse’s motions—and it’s hard for us to assign scripts to, quite literally, nothing.
On a new layer inside the movie clip’s stage, draw a circle that overlaps the edges of the cutout. The color doesn’t matter, though I’ve made mine white for contrast’s sake. Set the Alpha to 0% to make it wholly transparent.
Then make a symbol of it—button would be preferable, though movie clip is also an option. Turn to Actions Panel after selecting the transparent area.
Type in the following sentences:
on (rollOver, dragOver) {
}
Inside the on command, insert a startDrag command so that when the parameters of the on command are met, the object starts to drag after the mouse cursor to follow it over the stage. Initially there will be no target; only empty quotes (“”). Because we want the entire black area surrounding the spotlight to move when the mouse cursor is over the spotlight, we need to tell Cool Motion to go back up to the root level to find the target, which is the instance of the entire black area (named as _root.black—the pointer to the root level, and then the instance name) and not just the symbol covering the transparent area inside.
on (rollOver, dragOver) {
startDrag (“_root.black”, true) ;
}
See that extra “true” in there? That’s there because I’ve checked off “Lock Mouse to Center”, so that when we mouse over the area in question, the cursor should automatically orient towards the center of the symbol.
All that remains is to tell Cool Motion to stop dragging when the mouse leaves or stops dragging over the defined area.
on (rollOut, dragOut) {
stopDrag( ) ;
}
This lets the user “escape” by just moving the mouse away from the spotlight area. It also keeps the edges of the rectangle from showing, as long as you’ve made it large enough, because the spotlight will be forced to stop at the stage’s edges when the user’s cursor leaves the Flash movie—it can’t drag it any further beyond.
