Flash Explained

Learn Flash easily.

Creating aqua style buttons

October 8th, 2008 | Author: Luka | Category: Design


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.

A rectangle with rounded corners.

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.

The rectangle zoomed in on, after the outline was deleted.

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.

Selecting a background color for the button.

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.

The Color Mixer panel.

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).

Setting the color values 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).

Rotating the gradient by 90 degrees.

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).

Resizing the gradient to match the button's height.

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.

Selecting the Scale option for the Free Transform Tool.

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.

Scaling the shape.

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.

Stretching the shape.

Creating the shine at the top of the button

17 Still inside the button, make a new layer, and call it shine.

Adding a new layer inside the button.

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.

Pasting the shape in the new layer.

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.

Scaling the shape for the aqua button shine.

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.

Moving a part of the shape with the Selection tool.

21 Select a rectangular part of the shape on the left side.

Selecting the part of the shape to be stretched.

22 Stretch the selected part with the Free Transform Tool (Q) until it connects to the shape on the right side.

Stretching the shape.

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.

Adjusting the gradient values in the Color Mixer panel.

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).

The aqua button finished!

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.

The aqua button with text added.

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.

Download the zipped source FLA file for this tutorial.

Be Sociable, Share!

Comments

Submit a comment

  • Mike Oct 19, 2008 at 5:43 pm

    Awesome tutorial! I’m new at Flash and this was one of those fundamental things I needed to learn. Thanks so much!!! Very easy and great results. Thanks again!

  • Luka Oct 20, 2008 at 10:20 am

    You’re welcome Mike!

  • Travis Oct 27, 2008 at 2:23 am

    Fantastic. Easy and clear for beginners. I was just looking for a bit of info on how to use a gradient and I got this fantastic tutorial. Thanks a million!!

  • Luka Oct 27, 2008 at 8:05 am

    Travis: Spread the word!!! πŸ™‚

  • koOk Apr 7, 2009 at 4:13 am

    I have some question about when we duplicate to symbol and edit the text inside new button. It has to change same as the origianal symbol, we have method to classify them.

  • koOk Apr 7, 2009 at 4:26 am

    I have double click to libery panel and change infomation and repeat to duplicate. It’s successfull to changing them. ei ei

  • abdo Jun 5, 2009 at 6:04 am

    thx about this very very nice web side

  • Hammad Jul 31, 2009 at 4:25 am

    awesome tutorials. Thanxxx dude

  • LuCk Oct 13, 2009 at 9:46 am

    Hey, very good tutorial! I had tried a lot to make one before but I had never succeeded. But now look! I’ve prepared my own aqua button…..
    Thanks a lot!

  • kiran Apr 15, 2010 at 6:10 am

    nice one helpful to me.thanks for providing such a great info

  • Yuyu Jun 3, 2010 at 2:43 am

    Wow… what have you done all…! Good it’s amazing … the first time I saw your web site,… I got what iave been looking for so far…
    Thanks for all… May God bless you with great success…

  • anshu Apr 8, 2011 at 4:26 am

    good & thanks for help

  • Lisa Hall Apr 21, 2012 at 8:15 am

    Lisa Hall…

    […]d I’ve really enjoyed reading your articles. You obviously know what you are ce[…]…

You must log in to post a comment.