Building an Aqua Interface Button
When Apple introduced its new OSX the news groups and other forums were suddenly inundated with users wondering how they can create those cool, pulsing, blue Aqua Buttons. A number of tutorials have been posted on the web and contained in books such as Linda Rathgeber's "Playing With Fire".
Here is an Aqua button. If you examine the image you will see it is composed of a series of discrete shapes. The basic shape resembles a capsule. The top of the button contains a reflection and the bottom holds a glow. There is also a faint drop shadow under the text and another under the button, itself.
To build the button will require some basic shapes. The first is the button itself. The second is the area that holds the reflection and the third is the text. We will be building these shapes in Freehand and exporting them to FireworksMX. The button will be built in FireworksMX and then placed into FlashMX where it will given the ability to "pulse" when the user rolls over the button. Though the shapes could just as easily be done in FireworksMX, Freehand offers a degree of control over the shapes and the text that is better than that offered by FireworksMX.
Preparing the button in Freehand
1. Open a new Freehand document. Change the view from "Preview" to "Keyline" and set the magnification to 200%. By switching to keyline view you can concentrate on the shapes and not be distracted by strokes or fills that may be added. Select View>Page Rulers > Show to open the vertical and horizontal rulers.
2. This step will prepare the page for the precision drawing and placement of the shapes. Drag a horizontal ruler to about the mid point of your screen. Set the "0,0" point to the guide you just placed. Drag a Horizontal guide to the 20-pixel mark and drag another to the 40-pixel mark. Drag a vertical guide onto the page and set the "0,0" point to the intersection point of the top horizontal guide and your vertical guide. Place vertical guides at the 12, 20, 62, 104, 112 and 120 marks of the Vertical ruler. Finally select View>Guides> Snap to Guides.
3. Add a new layer named "Button". Select the Circle tool. Place the cursor at the intersection point of the centre horizontal guide and the one at the 24-pixel mark. Press and hold down your Option/Alt- Shift keys and click drag a circle from the point outward to the left -most vertical marker. That key combination draws a perfect circle from the centre point of the circle outwards. Click on the circle, press your Option/Alt -Shift keys and click-drag a copy of your circle to the right edge of the drawing area.
4. Select the rectangle tool. Place the cursor at the point where the vertical guide at the 20-pixel mark intersects the top most horizontal guide. Drag down to the point where the vertical guide at the 112 - pixel mark intersects the bottom horizontal guide. Choose Edit>Select> All - Command-A (Mac) or Control-A (PC) - and select Modify>Combine>Union. The three shapes merge into one. Select this new shape and ensure you have no extra control points. If you do select the Sub-selection tool - the Hollow Arrow- click on the extra point and press the Delete key. Fill the shape with White and, if a stroke is present, set the stroke to None. Copy the shape and deselect.
5. Add a new Layer named "Reflect". Paste the shape on the clip board into this new layer and drag it over the original shape. With the Reflect object still selected, select the scale tool and by clicking on the points at the top and the side, click-drag until the object fits between the Vertical guides at the 10 and 112 pixel marks and the height of the object is about 12 to 16 pixels. Deselect.
6. Add a new Layer named "New Riders". Select the Text Tool, click on the page and enter the words "New Riders". Select the text and open the Text Panel- Control-T (PC) or Command-T (Mac). The text on the Apple button is a variation of Lucida. If you don't have the font, use a fine sans serif such as Arial, Futura or a Bauhaus. Don't use a bold version of the font or set the weight to bold. It will be far to "heavy" for the button. Set the point size to 18 points. The letters were a bit too spread out for our liking. We tracked the lower case letters in at a setting of -5% . The "Ne" letter pair was kerned to a value of -7% and the "Ri" pair was kerned to a value of -5%. Change to the Selection tool and move the words onto the button. Deselect. Add a new layer named "Macromedia". Select the text tool and enter, format, track and kern the word "Macromedia" and deselect. Your page should now resemble that shown in Figure 17.7. Save the image and quit Freehand.
The shapes and the lettering have been created in Freehand and are ready for export to FireworksMX.
Note: The shapes could have been filled with their respective colors in Freehand. The problem is the Web Safe Palette that ships with Freehand does not allow for the creation of custom Hexadecimal colors. Thus it makes sense to create the images in Freehand and export them to FireworksMX for final assembly.
Assembling the button in FireworksMX
The old adage, "Use The Right Tool For The Job", applies here. FireworksMX is a web application and, as such, the image can be prepared and optimized for export to the web through FlashMX.Along with the use of Layers, opacity and a variety of Effects and filters, FireworksMX will export the necessary 32-bit .png image that will permit transparency in FlashMX.
1. Open a new FireworksMX document. When the new document dialogue box opens, set the width to 200 pixels, the height to 150 pixels, the resolution to 100 and set the background color to white. Click OK. Select File> Import and navigate to the folder containing the Freehand button. Double click the file in the Import dialogue box. The next dialogue box to open is the Vector Options. Ensure that Antialias Paths and Text are selected and Crisp from the Text Options pop down. This will ensure the text remains distinct when it is imported. Click OK. Roll the cursor to the upper left hand corner of the canvas and click once. The images will appear on the stage and in your Layers menu. Select the Button shape on the canvas and fill it with 0000CC. Next drag the reflection into place over the button. If it isn't open, open the Library panel and create two copies of the button layer. Be sure to give each layer a distinct name such as "Button 1", "Button 2" and so on. Turn off the visibility of the Layers except for the Reflection Layer.
Tip: If you don't feel like naming the button layers, let the software do the work. Drag a copy of the Button Layer onto the New Layer Icon - it looks like a File Folder - at the bottom of the Layers Panel. A new Layer named, "Button 1" will appear. Repeat this step one more time and you have your three named copies.
2. The reflection of the button tends to fade off as it moves towards the centre of the button. Here's how you create this effect. Zoom in on the object on the stage using the magnifying glass. Open the Reflect layer and drag the image strip under the layer folder on top of the "New Bitmap" icon at the bottom of the panel. This will create a copy of the original image directly over the original. (The "New Bitmap" icon is directly to the left of the Trash icon.) Select the new image and fill it with a linear gradient that goes from white down to black by selecting the Paint Bucket tool and moving the resulting handles so the square one is at the top of the image and the round one is at the bottom. Select both images and select Modify>Mask> Group As Mask. Turn on the visibility of the "Button" and ""New Riders" Layers.The reflection will fade from white to transparent as it moves towards the centre of the button. To create the illusion of the text "curving" with the button, drag the "New Riders" Layer under the reflect layer and the slide the text "under" the mask. To see the final effect, double click the Magnifying Glass to return to 100% view.
3. There is also a "glow" inside the button. Here's how to create that. Select the "Button 2" Layer to select the object and to turn on its visibility. With the object selected, select Modify>Transform>Numeric Transform> Scale. When the dialogue box opens deselect both the Scale attributes and Constrain proportions buttons. Set the Horizontal scale to 90% and the vertical scale to 40%. Click OK and set the fill color on the Property Inspector to CCFFFF. Deselect. Select the shape in the "Button 1" Layer. Set its horizontal scale to 95% and its Vertical scale to 60% and its color to 330099. Select both of the objects and group them. Apply an 8-pixel Gaussian blur to the object from the Effects in the Property Inspector. Select Effects>Brightness and Contrast and set Brightness slider to 40 and the Contrast slider to 25. To bring some of the underlying image in the "Button" layer through the glow set the opacity of the grouped objects in the glow to 90%.
4. To finish the image, a drop shadow will have to be added to the words. Select the "New Riders" Layer and select the words. Click the Effects button on the Property Inspect and select Effects>Shadow and Glow> Drop Shadow. Set the Offset to 6 pixels, the opacity to 50% the softness to 7 and the angle to 270. The button is ready for placement in FlashMX and should resemble the one shown in the image below.
5. To prepare the button for export to FlashMX the image will need to be carefully prepared for FlashMX. Due to the fact FlashMX can accept images with Alpha channels you don't have to worry about the loss of detail that normally results from converting an image to a Transparent GIF. Still the image is a bitmap and bitmaps can slow down playback in FlashMX. Select the Crop tool and crop out the extra area of the canvas.Click once on the canvas and set its color in the Property Inspector to None. This makes the Canvas Transparent. Select File > Export Special and select PNG 32 as the Format. This will export the Transparency to FlashMX. Click Export. Name the file and navigate to folder where the file is to be saved. Make sure "Save As >Images Only" is selected and click OK. Quit FireworksMX. If you are prompted by Fireworks to save the file, do so.
The button is complete and your Layers should resemble those shown.
Creating the Pulsating Button in FlashMX.
Getting the button to pulse is a three step process. First the button is imported into FlashMX as a graphic Symbol. That symbol is then added to Movie Clip where the pulse happens and, finally, the movie clip is added to a Button Symbol. Adding the Clip to the button symbol enables you to do a couple of things. The first is to have the button pulse when the cursor rolls over it and the second is to allow it to go to the New Riders Web Site.
1. Open a new FlashMX document and select Insert>New Symbol. Name the symbol and give it a graphic behavior. When the Symbol opens, import your FireworksMX button into the Symbol and align it to the centre of the stage.
2. Select Insert> New Symbol. This will be the Movie Clip that does the pulsing. When the dialogue box opens name the Symbol- eg. ButtonMC- and select Movie Clip as its behavior. When the Symbol opens, drag a copy of the graphic button onto the stage and align it to the centre of the stage. The intention is to have the button pulsate rather rapidly. Add key frames at frames 5 and 10 of the timeline. Move the playback head to frame 5 and select the button on the stage, not the timeline, and select Color>Brightness on the Property Inspector. Move the brightness slider down to a value of about -30. Click once between the first and fifth frames and select Insert> Create Motion Tween. Do the same thing between the keyframes in frames 5 and 10. If you press your Enter/Return key you should see the image pulse. To ensure it pulses, add a new layer and name it "Actions". Add a keyframe at frame 10 of the Actions Layer. Add a "gotoAndPlay" action to the key frame with Frame 1 as the frame to go to. Your Movie Clip's timeline should resemble the one shown below. To test this effect, click the Scene I button and drag a copy of the Button Movie Clip on to the stage. Select Control> Test Movie. When you have finished watch the button pulse, close the Test window.
The "pulsing" effect is done in a Movie Clip. The instance at frame 5 is darkened and Motion Tweens are added between the key frames. You can only darken the button if you are working with an Instance of the Button Symbol.
The button is placed into a Movie Clip and the pulsation added.
3. Create a new button symbol. Drag an instance of the Button graphic symbol on to the stage and align the Instance to the centre of the stage. Add key frames in the Over, Down and Hit frames. Click on the button in the Over frame and press the Delete key to remove it. Drag an instance of the Button movie clip on to the stage and align it to the centre of the stage. Select the button on the stage in the Down frame and reduced its brightness to -40 in the Property Inspector. Click on the scene one button. Delete the movie clip that is on the stage and replace it with the new button symbol. Test the movie- the button pulsates when the cursor is over it and turns dark when pressed- and close the Test window.
4. Select the Instance on the stage and add a "getURL" action to the Instance. The URL you will enter is "http://www.newriders.com." This time let's have the New Riders page open in a new window in the Browser. Select Window> _blank from the choices presented. Close the Actionscript Editor. Save the movie and select File>Publish. Quit Flash and open the button's HTML page in your browser. Test the button. If you click it, the New Riders page will open as shown in Figure 17.10.
Clicking the button in a browser opens the New Riders site in a new browser window.