26. With the text field still selected, hit F8 to convert it to a symbol. Make sure to select Movie clip as type and not button. Call it orange label 1 and click OK.

27. Double-click on this newly created movie clip to enter inside it. Above the layers, you can see that you are working inside it right now. As it says clearly, you are inside the orange label 1 movie clip which is itself inside the orange bar button.

28. Call the first layer (and the only one, at the moment) inside this movie clip text.

29. Lock the current layer. Make a new layer and call it mask.

30. Click on the mask layer’s first frame to select it.

31. Select the Rectangle tool (R). Make sure that the outline color for the rectangle is blocked (see the beginning of this tutorial for an explanation on how to do this). Draw a rectangle of any size. Go to the Properties panel, and enter 200 pixels for width and 30 pixels for height.

The height should be exactly 30 pixels so that the rectangle overlaps the background gradient bar perfectly. The width of 200 should be just enough so that this shape can cover all of the label beneath it.

32. Place the rectangle so that it overlaps the gradient color background perfectly. Also, check that it is positioned on round coordinates, like you did before for the button and the text field.

Before continuing, please note the following: maybe your rectangle does not look sharp, but blurred instead – although you placed it on round coordinates. Now why this may be so?

Well, I noticed that when you convert something to a movie clip or a button symbol, Flash somehow moves it a little bit. This new objects gets displaced by a fraction of a pixel and not being on round X and Y coordinates any more, it looks bad. Sigh. I don’t know why Flash does this, but irritating it sure is.

33. So, if this is the case with your movie clip too, go back to the button by clicking on the orange bar button link above the stage once.

34. Select the orange label 1 movie clip by clicking on it once on the stage.

35. In the Properties panel, fix the coordinates (X and Y) so that they are round numbers again.

36. Go back to the orange label 1 movie clip by double-clicking on it. Your mask should now perfectly be placed above the gradient bar, like you can see in step 32 above.

37. Select the rectangle by clicking on it once with the Selection tool (V).

Press the up arrow key on your keyboard just once to move the rectangle upwards exactly by 1 pixel. Below you can see how does the rectangle look before and after being moved by 1 pixel.

You just did this because you are going to make the label move one pixel down when the user click the button, to make it look as it was physically clicked – like a real button. And if you didn’t move the rectangle, the shadow would appear below the button, which looks lame. But the shadow will not appear, because right now you are going to turn this rectangle into a mask.

38. Lock this layer. Right-click on it and select the mask option from the menu that appears. You will immediately see from the little green icons that the mask layer has become a mask for the text layer beneath it.

39. Test your movie (Control > Test Movie). As you can see, the shadow of the label doesn’t spill over the button, because it is visible only beneath the rectangle mask you made. Nice!

40. Close the test window. Click on the orange bar button found on top of the layers to return to the button.

Before moving on, I want to explain you why you had to make this orange label 1 movie clip.

Imagine that you placed the label directly inside the button, along with the mask. If you (or your client) decided later that the button would look better if the label was placed on the very beginning of the button, or more to the right, you would have to move the label and the mask to accomplish this. It is a lot more practical to have them both inside a movie clip. Then, if you want to change its placement, you just move the movie clip with everything inside it.

Also, masks placed directly inside a button symbol are problematic. They don’t function sometimes, although everything seems to be correct. In movie clips, masks create no problems.

Creating the clicking effect

41. Right-click on the Down keyframe of the label 1 layer and select Insert Keyframe. Your button’s timeline should now look like this:

Since the button label (Photography) won’t change when a user rolls her mouse over the button, the Over state remains the same as the Up state. The little white rectangle inside the Over state indicates that the Up state lasts throughout both the Up and Over states.

But in the Down state, you want a change to happen when a user clicks the button, so that’s why you had just inserted a keyframe there. Keyframes are used in Flash timeline when a change must occur.

42. You are currently working in the Down state of the button. Click the orange label 1 movie clip on stage to select it (this is the movie clip with the Photography text inside it).

43. By clicking the right arrow and down arrow keys once you will move the orange label 1 movie clip exactly 1 pixel down and to the right. This will create the effect of the button being pressed when a user clicks it.

The following image shows the difference in the positioning of the button’s label in the Up and Over states and the Down state:

You can try this now by testing your movie – press Ctrl+Enter. Click your button and you’ll see how nicely it shows that it has been clicked.

Close the testing movie and return to Flash’s working environment.

44. One last thing and you’re finished with this part of the button: Right-click on the Hit state of the label 1 layer and select Remove Frames. The timeline of the label 1 layer will now look like this:

Removing the Hit frame of the label 1 layer rids your movie of unnecessary information. Why leave anything in the Hit state of the current layer if this state was already defined in the gradient background layer? As I said earlier, it is best to define the Hit area of a button in one layer only.

Creating the second button label

45. Lock this layer. Create a new one above all the existing ones and call it label 2. Click on its Up frame to select it for working.

46. Select the Text tool (T). In the Properties panel, choose the following options:

1. Type of text field should remain Static.
2. I used Arial again as type of font – if you can find some other font that looks well in combination with the first button label, by all means do so.
3. Put the size of the font to 48. Yes, this is going to be a pretty big label and it will look nice.
4. All other options should remain the same: letter spacing set to -2, Anti-alias for readability selected, the font should be bolded.

47. Click on the stage and type Galleries. You can type anything you wont, I just liked some other info here than repeating the first button label’s text. Hit Esc to exit the text editing mode.

Using the arrow keys on your keyboard, move the text field so that it is positioned on the bar button’s right edge.

As you can see, the text is spilling over the button. I wanted to make this on purpose, for the nice effect and animation that you’ll do later, to make the button even more three dimensional and realistic. Place the text field so that its upper and lower borders go over the gradient background’s edges. Also, the text field’s right side should go over the gradient background edge a little bit too.

48. Again, make sure that the text field is positioned on round coordinates. Check the X and Y coordinates in the Properties panel – they should end with a zero.

49. With the text field selected, go to the Color Mixer panel and enter #FCD98B as its color. Also, put its Alpha (transparency) property to 33%.

Your second label should now look like the one shown in the image below:

50. Your second label (the text field) should still be selected. Press F8 (or select Modify > Convert to Symbol). Select Movie clip as type, call it orange label 2 and click OK.

You converted the text field into a movie clip, because you need to mask it, like you did for the first one. If you’re lucky, the new movie clip should be placed on round coordinates. Make sure that this is so.

51. Double-click the newly created orange label 2 movie clip on the stage to enter inside it. As always, Flash nicely shows you that you are working inside the movie clip now, which is inside your button.

52. Click on text field with the Selection tool (V) once to select it. You will most probably notice that it isn’t placed on round coordinates. Aaargh! I know, it’s annoying, but that’s life. Type in zero at the end of X and Y coordinates in the Properties panel and there you go, it’s fine again.

53. Call the current layer text and lock it. Make a new layer above it and call it mask.

54. By using the Rectangle tool (R), draw a borderless rectangle on the stage, with some fill color that contrasts well with the existing elements.

55. Select the rectangle with the Selection tool (V).

56. Following the same exact procedure you did before, make the rectangle’s height equal that of the button’s gradient bar: 30 pixels. Its width should be just big enough to cover all of the label beneath it – I made it 200 pixels. Place the rectangle so that it is perfectly aligned with the gradient bar’s right, upper and lower edges. And, make sure that it is positioned on round coordinates.

57. Lock this (mask) layer. Right-click on it and select Mask from the menu. There! The masking is activated now.

58. Click the orange bar button link to return to the button symbol.

59. You are inside the button now – on its label 2 layer. In this layer, right-click on the Hit frame and select Remove Frames. As with the label 1 layer below it, this label’s Hit state is unneeded here.

60. Right-click on the Over frame of this same layer and select Insert Keyframe. Repeat this action for the next frame: Insert a keyframe in the Down state, too.

Each of the three button states (Up, Over and Down) need their own keyframes because of the rollover effect. When a user will place his mouse over the button, an animation will start playing. But if she pulls the mouse out of the button’s area or clicks the button, the animation will stop. So the Over state will be different from the Up and Down ones.

Animating the second button label

61. Click on the Over state’s keyframe to select it.

62. Select the orange label 2 movie clip in this (Over) frame by clicking on it once on the stage.

63. Press F8 to convert it to a new movie clip. Call it orange label 2 animation. Yes, you just converted an existing movie clip into a new movie clip. You’ll see in a moment why.

64. Double-click the newly made movie clip on the stage to enter inside it.

Inside, you will find the orange label 2 movie clip. Don’t let this confuse you. You converted the orange label 2 movie clip into the orange label 2 animation movie clip. So once you enter inside the orange label 2 animation movie clip it is perfectly normal to find the orange label 2 movie clip sitting there.

65. Click on the orange label 2 movie clip once with the Selection tool (V) to select it. If ever in doubt where you currently are, just look above the layers to see. Also, now that you selected the orange label 2 movie clip, its name appears in the Properties panel.

66. Select Modify > Break Apart. You have just decomposed the movie clip into its basic elements. Don’t worry, this movie clip is still present in the Up and Down frames of this layer and in the Library too. You just breaked it apart in this (Over) frame only.

67. Click once on an empty part of the stage to deselect everything.

68. Click on the rectangle shape (not on the text field!) to select it.

69. Select Edit > Cut (or press Ctrl+X) to cut the rectangle.

70. Lock the current layer and call it text animation. Make a new layer above it and call it mask.

71. Select Edit > Paste in Place (or press Ctrl+Shift+V). The rectangle will now be pasted in the mask layer in the same exact spot it was occupying in the previous layer.

If, after cutting the rectangle shape with the Cut command you accidentaly pressed Ctrl+C to copy something, you may not paste the shape at all. When you cut something, your computer places that bit of information on its clipboard. The same thing happens when you copy something. So, when you use the paste command (or paste in place) the last thing from your computer’s clipboard gets retrieved. That’s why you must not copy anything after cutting, if you wish to preserve that object for pasting it after.

72. Lock the mask layer. Right-click on it and select Mask from the menu that appears. Fine. the mask is now activated. It will be even more important here, because it will serve to hide the parts of the second label’s animation that must not be visible.

73. Hide the mask layer by clicking on the small dot, to the right of the layer’s name and below the eye icon. Unlock the text animation layer.

74. Click on the text field (the one which says Galleries) in this layer once to select it.

75. Press Ctrl+C to copy it.

76. Press Ctrl+Shift+V to paste it in place, in this same layer, right over the original text field.

77. Now don’t click anywhere, but just press the up arrow key on your keyboard to move this new copy of the text upwards. Move it upwards by 76 pixels. You can easily check if this is so by looking at the Properties panel.

In my case, the first text field (the one placed exactly over the gradient color bar) has its Y coordinate set to -27.0. So the one above it has its Y value set to -73.0. You don’t even have to adjust this value manually – just move the text with your arrow keys and watch the value change, until you have arrived at the right position.

78. Select both text fields: click once on either one of them, hold Shift and click on the remaining one.

80. Press F8 to convert these two text fields into a single Movie clip. Call it orange label 2 double and click OK. You will now animate the new movie clip.

81. Right-click on the frame 35 of the text animation layer and select Insert Keyframe.

82. Select the movie clip on the stage (orange label 2 double) and move it downwards with the down arrow key by 44 pixels. In my case, on first keyframe (frame 1), the movie clip has its Y coordinate set to -73.0. On the second keyframe (frame 35) Y is -29.0.

The point is that on the second keyframe the movie clip has to be positioned so that the upper text field is just a pixel above the position the lower text field was occupying in the first keyframe – the animation must be smooth! To see what I mean, just look at the image below:

83. Right-click anywhere on the gray area between the two keyframes and select Create Motion Tween. An uninterrupted arrow on magenta background will appear in the text animation layer, indicating that you have made a successful motion tween animation.

84. Right-click on frame 35 of the mask layer and select Insert Frame.

This is necessary to make because the mask must cover the animation during its whole duration. Also, you inserted a frame and not a keyframe, since there are no changes supposed to take place inside the mask layer. A frame is used when you just wish to extend the duration of a keyframe, without any modifications.

85. Click on the Scene 1 link to return to the main scene.

Save your movie. Test it (Control > Test Movie). That’s it! The button is complete! Try moving your mouse over it, clicking it. Doesn’t it look cool and pro? 🙂

You can download the source file for the button you learned to make with this lesson and also the example with two buttons with different colors, shown at the beginning of this tutorial.