Rollover effect using masks

In this Flash tutorial you will create a rollover effect using masks. The crosshairs will follow your mouse cursor as you move over the text. Topics involved: startDrag actionscript, masking, drawing a target using radial gradient tool. Source file included.

This content requires Flash Player 9 (or a more recent version). Make sure JavaScript is turned on. You need to upgrade your Flash Player

Note: I am using Flash 8 to create this tutorial, your version of Flash may require different notation. If you get an error with this script then try it without the double-quotes(") around the movieClip name "mouse_target".

4. Create 3 more layers below the "actions" layer and name them as follows from top to bottom: "text mask"; "crosshairs";"text background".

5. Goto the "text mask" layer and turn it into a mask. You can accomplish this by right-clicking on the layer name and chosing the "Mask" option. Notice how this made the "crosshairs" layer move over. This means that whatever you put in the "text mask" layer will only show up if it is covered by the movieClip that will be located in the "crosshairs" layer.

6. Now unlock the "text mask" layer and type in the text that you want to use for this movie. The bigger the text the more you will be able to see this effect.

7. Break-apart the text twice so that all that remains is a bitmap. Accomplish this by right-clicking on the text and choosing "Break Apart" (shortcut key: CTRL+B).

8. Highlight all of the text and copy it, then paste it in place on the "text background" layer so that it is in the exact same spot as the copied text. Do this by right-clicking on the highlighted text and choosing "Copy" (shortcut key: CTRL+C). Then on the "text background" layer right-click on the stage and select "Paste in Place" (shortcut key: CTRL+SHIFT+V).

9. Draw the crosshairs in the "crosshairs" layer and turn it into a movieClip labeled "mouse_target".

I will outline how I drew my crosshairs.

i. Start by drawing a perfect circle with no border. Hold shift will drawing to make a perfect circle. Choose a size that is slightly larger than the height of your text. You can change the overall size later if you want.

ii. Highlight your circle and click on the paint bucket in the color chooser panel. Now choose "Radial" under the "Type" heading. Use the following settings.

iii. For the circle in the middle, I choose the eraser tool and set it to the biggest circle setting, then click it once in the exact middle of you circle.

iv. The crosshairs were make by highlighting a horizontal line in the middle of the circle and pressing delete, do the same for the vertical line.

v. The outer black circle was made outside of the main circle and then moved over top of the existing circle. Make this slightly smaller then the main circle. I used line width 2 and no fill, only outline.

vi. Highlight the whole crosshairs drawing and turn it into a movieClip. Goto Modify>Convert to Symbol... and select "Movie clip". Label this movieClip with the name "mouse_target". Double-click on the movieClip to edit it. Now highlight the entire drawing and move it so that the center of your drawing is on the center of this movie clip (denoted as a small crosshair).

Congratulations you've successfully completed this My Flash Resource tutorial! Run your movie to see the results. Let me know how you did! Tutorial is presented as is, if you have trouble with it, then try and try again... thats how you learn!