Tutorial: Page (1) of 3 - 11/28/05 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook

Aqua Buttons in Flash 8

Maximum effect, minimum hassle By Kevin Schmitt

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

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

Page: 1 2 3 Next Page

Related Keywords:flash, flash 8, flash 8 professional, filters, blends, blend modes

Content-type: text/html  Rss  Add to Google Reader or
Homepage    Add to My AOL  Add to Excite MIX  Subscribe in
NewsGator Online 
Real-Time - what users are saying - Right Now!

Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved