Ever wanted to make those shiny, nice looking aqua buttons? Yes, but in
Flash? You can make them in Photoshop or Fireworks. But creating them directly
in Flash makes your file size a lot smaller (the SWF file below this text has
only 2 KB!), enables you to change the color of a button more easily, to
transform other aspects of the button (create a Mac-style type of tab, for
example), without going back to a paint or similar program to adjust it and
export it anew for Flash. So, let's get down to work!
1. Open a new document. With the Rectangle tool
(R), draw a rectangle on stage the size of your button and
while still holding the mouse down, press the down arrow key on your keyboard.
You will get rounded corners for your rectangle. Hold the down arrow key until
the corners transform into semi-circles - that is, until they reach the maximum
possible roundness.
2. Delete the outline by double-cliclking on it and pressing
DELETE.
3. Zoom in on your rectangle before proceeding, so that you
can have better control over the finer points of design.
4. Select the rectangle and choose Modify >
Convert to Symbol (or press F8). Select Button as
type, call it aqua button and press OK.
5. Double-click on your newly created button on the stage to
enter inside it, so that you can proceed to edit it.
6. Call the first layer (remember, you are inside the
buttons timeline now) background.
7. Select the drawing (the rectangle with rounded
corners).
8. Open the Color Mixer panel if it isn't open yet
(Window > Color Mixer). In the Hex value field enter the
following color code: #1A2953.
9. Lock this layer and create a new one and call it
gradient.
10. Right-click on the background layer's Up
keyframe (the first one, with the drawing) and select Copy Frames. Right-click
on the gradient layer's Up keyframe and select Paste Frames.
You should now have the exactly same drawing on both layers.
Creating the gradient fill
11. Still in the
gradient layer, select the drawing and apply a gradient fill to it. To
do so, select Linear as Type in the Color Mixer panel. Then double-click on the
small square on the left side and enter the color code #1A2953, after that
double-click the small color square on the right side of the gradient bar and
enter the color code #95D5DF (the trick is to select a very dark and a very
light color for the gradient).
12. Select the Gradient Transform Tool (F)
from the Tools panel. Rotate the gradient by 90 degrees clockwise, by holding
the SHIFT key while rotating (rotate by placing your cursor
over the circular arrow marking, clicking and dragging).
13. Make the size of the gradient equal the height of the
button by clicking and dragging the small arrow icon inside a rectangle (see
image below).
14. Select the Free Transform Tool (Q), In
the Options part of the Tools panel, turn off the Snap to Objects option and
turn on the Scale option.
15. Click and drag on one of the corners of your gradient
shape while holding the ALT key to symetrically scale the shape
- you want to make it a little smaller than the original size.
16. Turn off the Scale option. Click and drag on either the
right middle or left middle handle, while holding the ALT key,
to stretch the shape so that you can have about the same amount of space around
it.
Creating the shine at the top of the button
17. Still inside the button, make a new layer, and call it
shine.
18. Select the shape from the gradient layer, copy
it (CTRL+C), lock the gradient layer, and paste
(CTRL+V) the shape in the shine layer.
Select a solid color for the pasted shape so that you can better see it.
19. Using the Free Transform Tool (Q)
again, scale the shape so that its height is a little bit smaller then half the
height of your button.
20. Select the Selction Tool (V) and select
(that's three times the word select, don't get mesmerized :) the right part of
the shape and move it to the right with the right arrow key or by dragging
horizontally while holding the SHIFT key.
21. Select a rectangular part of the shape on the left
side.
22. Stretch the selected part with the Free Transform Tool
(Q) until it connects to the shape on the right side.
Cool! The shape for the button's shining is in place. Now, why did you need
to do all that, you my ask, instead of simply transforming the shape from the
lower layer using the Free Transform Tool? Well, try. But I assure you, you
won't get the semi-circular shape at both ends like you have now. You will get a
deformed, too stretched shape, which doesn't look nice with the button as a
whole.
There are always many ways to do something in Flash. You can use the Free
Transform Tool along with its options to try to get the result you want. Play
with it, experiment, and you'll see what is possible and what isn't. I just
chose the above method as easier for this tutorial.
23. Let's make the shine look like it is supposed to. Select
the whole shape you just made. Goto the color mixer panel and choose Linear as
type of fill.
Follow the same procedure as in step
11 of this tutorial, just put in these values: pure white (#FFFFFF) for the
first color, and pure white, but with Alpha set to 1 or 2% for the second one.
Then move the little color squares a little bit inside so that both colors don't
start mixing immediately.
24. Using the Gradient Transform Tool (F)
rotate the gradient by 90 degrees clockwise and adjust its height, as explained
in the steps 12 and 13 of this tutorial.
Unselect the shape by clicking anywhere outside it and your result should
look like the one below (I put the zoom back to 100% to see the real-world
size).
Yoo-hoooo! That's it! The cool aqua button is here!
Now, if you want to add text to it, just make a layer named text
between the layers gradient and shine and put the text you
want in it. Experiment with different text colors to see which one makes for a
better effect.
How to make the buttons in different colors? You have to duplicate them,
there's no other way around.
You could choose to go to the main scene (by double-clicking outside the
button), and select the Tint option in the Color menu in the Properties panel
below the scene, to try to change the button's color. But everything will be
coloured, including the shine. And there goes your aqua look bye-bye.
Also, if you want to change the text for the link, you must duplicate the
button, there's simply no other method to do it (OK, maybe there is, but this is
definitely the easiest and the fastest one).
So, open the library (Window > Library), right-click on
your button name in it and choose Duplicate. Give it a new name and click
OK.
Then, go inside the new button and manually change the color values for all
the background and gradient shapes.
The source FLA file for the button shown in this lesson is available for
download below.
