Flash Tutorial: Animating a button using a mask effect

Level: This is a beginner lesson, but I will assume that the reader is familiar with the basic use of the Flash software including stage, timeline, drawing tools, property window, etc..

Version: I will be using Flash CS3 and AS2 (although tut is compatible with earlier versions of Flash) and instructions are for the Mac. Windows users would use the PC counterparts for specific instructions on Flash Menu/Shortcut instuctions.

Description: In this tutorial, I will explain how to give a button animation on rollover by creating a button as a movie clip symbol and using a mask effect.

Demo:

Let’s get started!

Select “File > New” (command-“N”) and select Flash File (ActionScript 2.0) to open a new Flash document file. Save the file, and give it the appropriate name. I will call this “btnWIthMask_tut1.fla”. Feel free to change the document dimensions to whatever you like (“Modify > Document or “command-J”), but for the purpose of this tutorial, I will use 250×100 pixels.

The first thing we will need to do is draw a simple shape for our button. Select the rectangle tool, set your fill color to the black and white linear gradient and a stroke of none. In the property window (Window > Properties > Properties or command-F3), set the corners to slightly rounded, I chose a 5 pixel rounded corner. Draw out a rectangle approximately 100×20 pixels. Tip: You can use the up or down arrows on your keyboard when dragging out your rectangle shape to increase or decrease the roundness of your corners. You should have a rectangle similar to Fig. 1.

Select the rectangle, and convert to a movie clip symbol (Modify > Convert to Symbol or F8). Remember, we are creating a movie clip button, so be sure to select the “movie clip” radial. Give your symbol an appropriate name, I called mine “mc_btn1″. Double click on your rectangle to bring you into the symbol editing mode. Select your rectangle and let’s adjust the gradient and on our button with the “Gradient Transform” tool. Tip: the Gradient Transform tool is grouped with the Free Transform tool in the tools pallette. With the Gradient tool selected, click on your rectangle and in the color pallete, set your gradient scale to be 100% black on one end and 100% dark grey (#666666) on the other. With the rectangle still selected, rotate your linear gradient to be vertical (Tip: Hold shift when rotating to snap to 45º angles), with the 100% black on the top and the grey on the bottom. Also, shrink the gradient tool so that it is the height of your rectangle. Fig. 2 shows what your rectangle should look like with the gradient tool selected.

Let’s add a little additional styling to our button by going to our tool palette and choosing the Selection Tool (V), selecting our entire rectangle, choose “Edit > Copy” (cmd-C), add a new layer and choose “Edit > Paste in Place” (shift-cmd-V) to paste a new rectangle on top of our original. Now, select the new rectangle, rotate it 180º and cut the height in half (about 10 pixels). Tip: You can adjust the height of your rectangle using the Info pallette (“Window > Info” or cmd-I) and inputting the “H” field. Lastly, move the smaller rectangle so it aligns with the top of your original. You should now have a shape that looks similar to Fig. 3. This will be the base of our button.

For our animation, we will just do a simple “highlight” effect when the user rolls over the button. Before we start doing the animation, let’s set up our timeline. Let’s start by labeling our rectangle layers… the bottom one we can label “lower button”, the top one “upper button”. Now, add 4 new layers above these. The top one should be labeled “actions”, the second layer “labels”, the third one “mask” and the 4th “highlight”. Extend the keyframes for all layers to frame 30 by selecting Frame 30 on all layers and choosing “Insert > Timeline > Frame” (F5). On the “labels” layer, insert a new key frame (“Insert > Timeline > Keyframe” or F6) at frame 10 and 21. Select frame 1 of your labels layer, and in the Properties panel (“Window > Property > Properties” or cmd-F3), give your frame a label of “off”. Next label frame 10 “over” and frame 21 “down”. Finally, on the “actions” layer, let’s add a new keyframe at frame 20 and on our last frame. On frame 1 of our actions layer, add the following code to our Actions panel (“Window > Actions” or alt-F9):

stop();

Do the same thing on frame 20 and the last frame of our “actions” layer. All this code does is stop our movie clip from playing on these particular frames, since for our end result we want the users mouse to control our timeline. Your symbol timeline should now look similar to Fig. 4.

Now that our timeline is set, let’s build our animation. Let’s lock all our layers, except the one labeled “highlight”. On our “highlight” layer, insert a new keyframe at frame 10. Select our rectangle tool, with a fill of linear gradient and a stroke of none. Draw a rectangle on the stage with a height of about 40 and a width of about 20. With our new rectangle still selected, use the gradient transform tool and set the gradient as left side 0% white, center 30% white and right side 0% white. (Fig. 5). Choose “Modify > Convert to Symbol” (F8) and make your new rectangle into a “graphic” and give it an appropriate name. With your rectangle symbol selected, rotate your rectangle and move it just off the top left corner of your button. Finally scale your rectangle to about 50%. When your rectangle is selected with the transform tool, it should look similar to Fig. 6.

Next, add a new keyframe to frame 20 of our highlight layer. On frame 20, move your rectangle to the bottom right corner of your button (Fig. 7). Click on your timeline anywhere between frame 10 and 20, choose “Insert > Timeline > Create Motion Tween”. Finally, add a new keyframe at frame 15, select our rectangle symbol (it should be about 1/2 way across your button), and scale it to about 200%. This will now be our button animation. What about the “mask” layer we made? Well, I’ll get to that shortly, but let’s make our menu and set our ActionScript so you can see why we will need a “mask” layer.

Return to the main timeline (Scene 1). Let’s add 2 new layers and label the top layer “actions”, the second layer “text” and the bottom layer “buttons” (with our “mc_btn1″ symbol on the “buttons” layer). Next, add 2 more instances of our “mc_btn1″ symbol to our “buttons” layer, and postion all 3 button symbols so they are left aligned and stacked (Fig. 8). Click on the top button, and in our Properties panel, give it an instance name of “btn_home”. Give the second button an instance name of “btn_about” and the bottom button and instance name of “btn_contact”.

On the “text” layer, draw a text box over the top button and type the word “Home”. On the second button, draw a text box and type the word “About”, and on the bottom button, draw a box and type the word “Contact” (Fig. 9).

Our buttons are now ready to have the ActionScript added for the mouse events. There are multiple ways of adding this script, and I have written a previous tutorial about creating buttons with movieclips where the actions are applied directly to the button. For this tutorial, I’ll show you another way, which is by adding the actions to the “actions” layer of our main timeline. Either way is suitable and there are advantages to both, so what I suggest is you experiment with both ways and decide for yourself what you like better.

—- ads by google —-

On frame 1 of the “actions” layer of our main timeline, add the following code to the Action panel:

btn_home.onRollOver = function() {
_root.btn_home.gotoAndPlay(“over”);
}
btn_home.onPress = function() {
_root.btn_home.gotoAndPlay(“down”);
}
btn_home.onRollOut = function() {
_root.btn_home.gotoAndStop(“off”);
}
btn_home.onRelease = function() {
_root.btn_home.gotoAndStop(“off”);
}

btn_about.onRollOver = function() {
_root.btn_about.gotoAndPlay(“over”);
}
btn_about.onPress = function() {
_root.btn_about.gotoAndPlay(“down”);
}
btn_about.onRollOut = function() {
_root.btn_about.gotoAndStop(“off”);
}
btn_about.onRelease = function() {
_root.btn_about.gotoAndStop(“off”);
}

btn_contact.onRollOver = function() {
_root.btn_contact.gotoAndPlay(“over”);
}
btn_contact.onPress = function() {
_root.btn_contact.gotoAndPlay(“down”);
}
btn_contact.onRollOut = function() {
_root.btn_contact.gotoAndStop(“off”);
}
btn_contact.onRelease = function() {
_root.btn_contact.gotoAndStop(“off”);

UPDATE: I’ve been finding several readers having trouble with doing a straight copy/paste of this code from the Web. I believe the issue lies in the quotation marks (”). When copying from the Web, it sometimes uses “smartquotes”. If you are getting an error on test regarding the quote marks, first step is to be sure you are using regular quotes (type them in instead of copy/paste from the Web site). If you are still having problems, feel free to drop me a comment and I will try my best to help resolve your issues. – Mike

Let me try to explain the code:

What we are doing is setting up some functions to control the timeline of each button. For instance:

btn_home.onRollOver = function() {

is saying “whenever the users mouse rolls over the “btn_home”, perform the actions between the curly brackets”.

_root.btn_home.gotoAndPlay(“over”);
}

This is saying “play our “btn_home” timeline starting at the frame labeled “over””

Hopefully from that explanation, you can figure out that the rest of the code is setting up the different actions (play or stop) for the different mouse events (onRollOver, onPress, onRelease and onRollOut) for the different buttons (btn_home, btn_contact and btn_about).

When you test your movie, you should have something that looks similar to this:

Looks pretty good, except one problem… when we rollover the second and third buttons, we see our animation spill over onto the buttons above. What do we do now? Well, remember that “mask” layer we created in our button movieclip? That’s how!

I’ve written a previous tutorial on working with masks in Flash that gets a little more in-depth about creating masks, so I will only go through it quickly here, but you should get the jist of it. Of course I suggest you check out my working with masks tutorial if you would like more information.

Returning back to our .fla file, double click on any of our button symbols to bring us into the symbol editing mode. On our “lower button” layer, select the rectangle and choose “Edit > Copy” (cmd-C). Click on frame 1 of our “mask” layer and choose “Edit > Paste in Place” (shift-cmd-V) to place our rectangle on the stage. Again on our “mask” layer, double click on the icon next to the layer name to bring up our Layer Properties window. In our Layer Properties, click on the “Mask” radial button. Now on our “highlight” layer, open the Layer Properties window and select the “Masked” radial. (Again, for further explanation on working with masks, please refer to this tutorial).

That’s it! Our menu is done. Now when you test your movie, you should see the highlight animation on only the button your mouse rolls over.

I hope you enjoyed this tutorial and as always, comments are welcome. Thanks for reading!

Source Files (Flash 8): Flash Tutorial: Button with Mask Animation

Be Sociable, Share!

• 
•