Flash Explained

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.

Download the zipped source FLA file for this tutorial.

Comments

Submit a comment