Home
Subscribe
KSDD.com
Aqua Buttons in Flash 8
Maximum effect, minimum hassle
Ah, yes...the venerable Aqua buttons Apple unleashed on the world lo those many years ago. Sure, they may seem a little turn-of-the-century these days, but you still see them littered about like so much confetti. And since the basic Aqua button was heretofore unattainable in Flash without the use of some creative Photoshopping, I can't think of a better model to use for a tutorial on how you can implement Flash 8's new filters and blends to create clean, scalable interface widgets like our old friend the Aqua button.
Anatomy of the Aqua button
There certainly has never been a shortage of methods floating about for creating Aqua buttons, but the really simple version I sussed out in Photoshop for a project a year or two back is finally reproducible with Flash 8's new toys. (As an aside, please don't think I'm trying to claim I'm the only one to have figured out this particular method—I'm sure there are plenty of folks who do, or did, their Aqua buttons the way I'm about to describe, but none of the techniques I had seen to that point quite did the trick.) Anyway, look at the following (fig. 1):
Figure 1 is a live Flash movie, so g'head and click on the button a few times. Notice how the button remains crisp even as it gets scaled up to 300% of its original size? That's because all the elements of the button are achieved with basic vector objects plus a dash of Flash's new effects and blends, so it's all drawn on the fly.
This method of creating Aqua buttons involves only three basic layers: a base color layer, an upper highlight, and a lower highlight. It's simple because those three layers are all based on the same shape; in this case, the ubiquitous OS X-style "pill" button. Let's fire up Flash 8 and put everything together.
The construction process
Once you have Flash 8 up and running, create a new Flash Document (Command+N/Mac or Control+N/Win), and then select Insert:New Symbol... from the menu bar. In the resulting Create New Symbol dialog box, name the symbol base_mc and select Movie Clip as the symbol type (fig. 2).
Figure 2
Now, select the circle tool in the Tools palette (fig. 3, #1), and set the stroke to no stroke (fig. 3, #2) and the fill color to black (fig. 3, #3). Finally, make sure that the Object Drawing mode is off (fig. 3, #4), since we actually want the shapes we'll be drawing to merge into a single object.
Figure 3
Next, draw a circle on the stage. Once the circle exists, choose the Selection Tool from the Tools panel (just hit the V key), and then single-click on the circle you just drew to select it. Next, use the Info palette (Command+I/Mac or Control+I/Win will open it if it's not already) to resize the circle to 25x25 pixels and 40 pixels left of center (make sure the symbol position grid is set to center, as shown in Figure 4).
Figure 4
Now that you have the first circle placed, single-click the circle to select it (if it's not already) and hit Command+D/Mac or Control+D/Win to duplicate it. This time, use the Info palette to set the x and y coordinates of the duplicate circle to +40 and 0, respectively. Once you're done with that, you should be left with what you see in Figure 5:
Figure 5
Time to draw a rectangle. Select the rectangle tool in the Tools palette, and make the color, stroke, and Object Drawing settings identical to Figure 3. Since the Object Drawing mode is off, you'll need to draw out your rectangle well clear of the existing circles so you won't be taking chunks out of either one. Once the rectangle is drawn, head once again to the Info palette and enter the following parameters (fig. 6):
Figure 6
With all that done, we're left with the final shape for the button (fig. 7):
Figure 7
Once you're finished basking in the glory that is the pill button for a few hours (and what an awesome sight it is), head over to the Library (Command+L/Mac or Control+L/Win if it's not already open). Control-click/Mac or Right-click/Win on base_mc and select Duplicate, which will create a copy of the button we'll use for the highlights. Double-click on the copy's title (not the icon) to enter rename mode, and rename the copy highlight_mc. Next, double-click on highlight_mc's icon to edit it. At the moment, highlight_mc is identical to base_mc, but we're about to change all that. Click once on the button to select it, head to the Color Mixer panel (Shift+F9 if it's not already open), click on the fill button, and change the fill type to Linear. Next, click on the left gradient chip and set it to pure white with 100% alpha. Do the same for the right gradient chip, but set the alpha to 0%. Figure 8 highlights the settings you need to have for your gradient (the right chip's setting is shown):
Figure 8
The only problem at the moment is that while we have the correct gradient (full white to transparent white), it's facing the wrong direction (I've put mine temporarily against a black background, so you can actually see what's going on in Figure 9):
Figure 9
Since we need the transparent part of the gradient to be on the bottom part of the button, we're going to need to use the Gradient Transform tool. To activate it, just hit the F key, and then click on our button to apply the Gradient Transform handles to the button. Rotate the gradient so the solid part is on top, and then scale the handles vertically so the gradient is slightly less than the overall vertical size of the button. Figure 10 shows what this should look like:
Figure 10
That's it for the pieces, so since we got 'em, we might as well put them together. We need to make a new Movie Clip, so let's do this from the Library. Go ahead an click on the little-teeny-tiny Create New Symbol button at the bottom of the Library (
), and in the resulting dialog box name the new clip button_mc. Make sure the Movie Clip type is selected, and then click OK. Now that you have a pristine new clip, head on up to the Timeline, where we need to do some layer finagling. Rename Layer 1 to base, then create two more layers (Insert:Timeline:Layer) and name them upper and lower, as shown in Figure 11:
Figure 11
Now, click on frame 1 of the base layer, and drag an instance of the base_mc clip from the Library to the Stage. Head to the Properties panel (Command+F3/Mac or Control+F3/Win), and set both the x and y coordinates to 0. Next, enable Tint in the Color options, setting it to an RGB value of 153, 0, 0 (fig. 12). This will give our base clip a darkish red color, but by all means, feel free to go hog wild and (gasp!) change the color here if you like.
Figure 12
Time to add the highlights, which will magically give our button the lickable Aqua-ey goodness that was so appealing five years ago. In the Timeline, click on frame 1 of the upper layer to select it, then drag an instance of highlight_mc from the Library to the Stage. Let's again turn to the Properties panel for all of our transformation needs. Since the highlights of an Aqua button are little more than the base shape scrunched down a bit, all we need to do is resize the instance and we'll be good to go. Click on the padlock icon to the left of the w/h/x/y fields to disable the resize constraint, and set the width of the upper highlight to 100 and the height to 15. Keep the x coordinate at 0, but set y to -4.0. Finally, select Alpha from the Color options and enter a value of 70%. Allow me to now offer Figure 13 as definitive illustration of everything I just said:
Figure 13
We're getting close with this, but let's soften the edges up a bit. Time for one of them fancy new filters Flash 8 so thoughtfully provides; in this case, we're going to use a blur. If it's not already active, bring up the Filters panel (Window:Properties:Filters, or click on the Filters tab if it's docked to the same row as the Properties panel), click the little + menu to add a filter, and select Blur. Give Blur X a value of 3, which by default (meaning the padlock icon is in the locked position) will apply the same value to Blur Y. Set the quality to high (so if and when we resize this button the blur will remain crisp), and then our upper layer should be set (fig. 14).
Figure 14
Adding a blur here is a subtle effect, but one that's important to the overall look.
Almost there! Now, let's simply duplicate the instance of the upper layer for use in the lower layer. With the instance of highlight_mc still selected in the upper layer, copy it (Command+C/Mac or Control+C/Win), then click on frame 1 of the lower layer and use the Paste in Place command (Command+Shift+V/Mac or Control+Shift+V/Win). This will put a copy of the highlight in the exact same place on the lower layer as it was in the upper layer. All that's left it to flip it and move it. The former is accomplished by selecting the Modify:Transform:Flip Vertical command from the menu bar, and the latter is done by changing the y coordinate from -4.0 to 4.0 in either the Info or Properties panel. All that leaves us with what you see in Figure 15:
Figure 15
That's OK, but not quite right. What we need for the lower highlight is something that blends in with the base color a little better. Did I just mention the word blends? How fortuitous, because it just so happens Flash 8 has Blend Modes built right in. They're located under the Color options in the Properties panel, and just for kicks, let's try the Overlay mode. While we're at it, let's bump up the opacity from 70% to 85% (fig. 16):
Figure 16
And there you have it: an Aqua button in only three simple layers. Simple for Photoshop, maybe, but not for Flash up until now. If you're so inclined, feel free to add to it as I have—a text label and drop shadow are nice touches. In the case of the drop shadow, you'll have to duplicate the base layer, remove the tint, and apply the Drop Shadow filter with the Hide Object option selected (fig. 17) to make a dedicated shadow layer, since the tint we applied to the base object would also affect the shadow if we applied it to that layer.
Figure 17
So, once again, allow me to present Figure 1 to illustrate our end product:
As the French say, wall-ah. Clean, scalable, and (perhaps most importantly) lightweight Aqua buttons done entirely in Flash. While you certainly are free to argue just how relevant such buttons are to today's designs, you really can't dispute the fact that Flash 8 opens up a whole new world of design possibilities. So while the Aqua button may no longer float the proverbial boat, creating one solely in Flash represents the tip of the equally proverbial iceberg in terms of the cool new tricks Flash 8 can perform.
Got Feedback? to send an email. I'll do my best to answer. Really.
