Before starting, please note that this is a tutorial made for Flash 8 Professional. Some effects, like drop shadow and other blending fx, are not available in previous versions of Flash.
While making this button, you will learn to:
- Make a nice colored gradient effect,
- Create a button label with some modifications,
- Apply a drop shadow effect to the label to give it more depth,
- Create masks so that the button looks more compact,
- Make a rollover state with animation inside it,
- tips and tricks related to Flash design and much, much more.
You can see the final result that you’re going to achieve at the end of this tutorial below. Roll your mouse over the buttons and click on them to see how nice they behave.
Creating the colored gradient body of the button
Before starting to draw, you are just going to increase the speed of your movie, so that the animation that you are going to make later moves more smoothly.
1 Open a new Flash document.
2 Select Modify > Document and in the Frame rate field, enter 30 (see 1 in the figure below). Click OK.
3 Select the Rectangle tool (R). Since you'll be drawing a borderless rectangle, you need to block out the stroke color. To do this, click the pencil icon in the Colors portion of the Tools panel (see 1 below) and then click the block color icon (2). Choose any fill color you like.
4 Draw a rectangle of any size on the stage. Select it with the Selection tool (V).
5 You need to make precise adjustements to the dimensions and position of your rectangle. The best way to do this is in the Properties panel, just below the stage. Go to its bottom left part.
You will see the W, H, X and Y input fields there. The W and H fields serve to change the width and height of your shape. The X and Y define the horizontal and vertical position of the rectangle. All four are pixel values.
Make the rectangle's width 450 pixels and the height 30 pixels. Your rectangle will become a nice elongated bar.
Now, make sure that the X and Y fields (the coordinates of the rectangle on stage) are set to round numbers. This means that the number after the dot must be set to zero. You cannot have, for example, 35.4, but 35.0.
You absolutely must do this if you want your objects (buttons, shapes, movie clips) to be displayed sharply in your final SWF movie. If you don't pay attention to this and leave the coordinates at non-round numbers, your objects will look blurry. This is true for all designs that look nice and sleek like the button you're working on right now.
6 Click anywhere on stage to unselect the rectangle.
7 Open the Color Mixer panel (Window > Color Mixer). Click on the little paint bucket icon (see 1 below) to select the fill color. Next, in the Type menu, select linear (2).
8 You will see the basic black and white linear gradient color strip appear in the lower part of the Color Mixer panel. Move your mouse between the two small black and white square beneath th gradient strip and a plus sign will appear next to your arrow cursor.
9 Click and a third color square will appear. Click 5 more times to add five little squares. Now click on each square (once), starting from the left and enter the hexadecimal color code for it in the field above the gradient stripe.
10 The squares should have the following color codes:
11 Also, move the squares so that they are positioned like in the image above. Do this by clicking and dragging a square to the left or to the right. Just don't drag your mouse down, this will eliminate the square you selected from the gradient strip.
12 Select the Paint Bucket tool (K). Move the cursor over the very top of the rectangle, click and start dragging downwards. You should make a perfectly vertical gradient fill. To do this, you hold Shift while dragging.
Stop when you are just over the lowest point point of the rectangle (its bottom side). Release the mouse and there you have it - a beautiful orange-red gradient fill.
Making a button symbol
13 Choose the Selection tool (V). Click on the gradient rectangle to select it.
14 Press F8 (or select Modify > Convert to Symbol). The Convert to Symbol window will appear.
Select Button as type (see 1 in the image below).
Call it orange bar button (2). Now, you can call it whatever you want, but I suggest that you follow the names I used in this tutorial. This will make your life easier, because there will be many more elements that are going to be a part of this button. And if all of them have meaningful names, you will instantly know which element does what, especially if you are going to duplicate this button, arrange them in the Library etc.
In the Registration point area, click on the middle left little square (3). This will place the ragistration point of the button in the middle of its left side. This isn't exactly that important now, but if you choose to use any ActionScript for controlling the placement or movement of this button in any future project, doing so will make some operations easier later.
Click OK. You have just created a button.
The functionality of a button symbol explained
15 Double-click your button on the stage (with the Selection tool - V) to enter inside it. Take a look above the timeline - there you have the information that nicely tells you that you are inside your button now and not on the main scene anymore.
16 Also, you certainly noticed that the look of the timeline has been altered. Button symbols in Flash have their special kind of timeline.
The Up frame (or state of the button) is present when there isn't any interaction with the button going on. This means that the user's mouse is outside the area of the button. The button just sits there calmly.
The Over state becomes active when a user rolls her mouse over the button. The button can stay the same or it can change its color, shape or even move - all depending how you set it up. In this lesson, you will do exactly that - create an animation that will start to play once a user moves the mouse over the button.
The Down state shows when the user clicks the button. Again, this state can differ from the two previous ones, if you wish to make it so. You will make a change to this state also, later on in the tutorial.
The Hit state is different from all the previous ones: it isn't visible at all. This state, or better, the contents of this frame define the clickable area of the button.
This means if the contents of this area are smaller than the visible button parts displayed in the previous frames, only the area defined in the Hit frame will be clickable. Of course, this area can also be bigger than the visible parts. Look at the following Flash example:
The gray area shows the hit area of each button. Try rolling your mouse over the blue button. You'll see that the hand cursor appears only when you reached the zone defined in the hit area. Also, if you move your mouse close to the green button, the hand cursor will appear before you reached the visible area of the button. That's because the green button's hit area is bigger than its visible parts.
Making the first label for the bar button
17 Call the first layer inside your button gradient background.
18 Right-click on this layer's Hit frame and select Insert Frame from the menu that shows up.
You will notice that the first keyframe (the Up keyframe) has just had its duration prolonged until the end:
This is fine, because the background won't be changed - it will stay the same no matter how the user interacts with the button. Also, this layer will define the clickable area of the button - the gradient rectangle that is visible at all times. There are no hidden parts, this will be a standard, "normal" button which the user can click anywhere on.
19 Lock this layer. Create a new layer above it and call it label 1.
20 Click on the Up frame of this new layer to select it for working.
21 Select the Text tool (T). In the Properties panel, make the following choices (see the corresponding numbers on the image below):
- Select Static as type of text field. The other options serve only for text fields that are going to be manipulated with ActionScript. Since this text won't change, this is the best option.
- Choose a cool font that will fit in nicely with the button's overall design. Arial or some other sans-serif font is quite ok. If you're working on a Mac, you can choose Helvetica.
- Make the font's size 22. This will look good on this long button.
- Choose white as color. This way, the label will clearly be visible against the gradient background of the button. You can also bold the text - click the "B" button next to the color option.
- In the appropriate menu, select Anti-alias for readability. The button's label has to be clearly readable.
- Set the letter spacing to -2. This will make the label look really slick. 😉
- Finally, make sure that the Selectable option is turned off. If this option is turned on, the button's label will be selectable, which looks really ugly when a user passes his mouse over the button. Also, the user might think that this isn't a button at all and the button itself might not work. So it has to stay turned off.
22 Click somewhere over the gradient rectangle area and type Photography. Hit Esc on your keyboard to exit the text editing mode.
You may type anything you want, if you have already decided that this button is going to be a part of a website menu interface and you know all the links/labels. I suggest that you follow the labels I proposed throughout this tutorial - you can change them easily later.
23 You will now position the text field to make it fit nicely with the button background and also to make sure that it renders sharply in your SWF file.
With the text field still selected, go to the Properties panel once more, and enter 23.0 as the value of the X coordinate and -14.0 for Y coordinate.
If you didn't select the same registration point for your button symbol as I when you created it, your label may not be positioned over the button's background. It doesn't matter. Just move the label text over the gradient background.
What is important is that the label should be placed on round coordinates. As I said for the button before, so I say for the button's label now: make sure that it is placed on round coordinates or the text will look blurry and messy. Just punch in the zeros at the end of each coordinate in the Properties panel and everything will be fine.
Adding effects to the button's label
24 Your text field should still be selected. Now comes a nice feature of Flash 8 Professional: the blending effects. Go to the Properties panel and click on the Filters tab (see 1 below).
Next, click on the little blue plus icon (2). A menu will open. Select Drop Shadow from it.
25 Insert the following values for the effect (the numbers on the list are the ones shown in the image below):
- The X and Y blur values should be set to 5.
- Set the Strength to 120%.
- Select Medium for the Quality of the shadow. This is looks just fine, you don't need to set it to high.
- Leave black as color.
- Set the Angle to 60 degrees.
- The Distance should be 4 pixels.
The label looks really cool with the added shadow! The text is nicely outlined and even more readable. Plus, the button has a 3-D feel to it.
But if you look close, the shadow is spilling over into the white area outside the button. And this doesn't look very well. You will correct this with a mask in a moment.
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:
- Type of text field should remain Static.
- 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.
- Put the size of the font to 48. Yes, this is going to be a pretty big label and it will look nice.
- 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.
79 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.
80 Right-click on the frame 35 of the text animation layer and select Insert Keyframe.
81 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:
82 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.
83 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.
84 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? 🙂
Download the zipped source FLA file for the animated plastic bar button.
Download the source with two buttons. You can make a nice menu by duplicating them!
very intersting
its a very useful tutorial. specially for me just begining to learn how to make animated buttons. my probelm is how can i link this to my dreamweaver and put links on each button. thnx
I love your tutorials. Do you ever use a graphics program like Fireworks or Photoshop to create the images (like the button body above) or do do all your work in Flash?
Thanks again for a great site.
I am working in Photoshop. But this button was made entirely in Flash. I use Photoshop gfx for more complex backgrounds, with photos, etc.
Am greateful for this tutorial. But i am wondering how you managed to duplicated the blue bar buttom from the orange one!. How did you make it?
Thank you