In this detailed lesson for Flash 8 professional I will show you how to create one of this nifty, sharp-looking pixel buttons. You will use exclusively the design tools and effects available in Flash 8 professional to create the pixel button. You will learn the following Flash techniques:
- How to use the Rectangle tool to create a rounded button background,
- How to use a pixel font in Flash,
- How to apply a sharp and precisely outlined shadow to the button label,
- How to create a border around the button by using a blending filter and more.
Below is a live Flash example of the pixel buttons that you are going to learn to create in this lesson.
1. Making the button background
1.1 Open a new Flash document.
1.2 Select the Rectangle tool (R). Turn off the outline color (also called the Stroke color) by going to the bottom part of the Tools panel, clicking on the pencil icon and then the No color button (the small white square with a red diagonal line across it, below the stroke and fill colors): 
.
You can choose any color you like for the fill, as you will change it into a gradient later anyway.
1.3 Check if both the Object drawing and Snap to objects options are turned off. If they are not, turn them off — they should look exactly as they appear in the image below.
1.4 Click the Set Corner Radius icon: 
. In the small window that appears, enter 4 as the value that determines the roundness of the corners and click OK.
1.5 Click and start dragging to draw a small, elongated rectangle.
1.6 Click on the rectangle with the Selection tool (V) to select it. Go to the Property inspector and adjust the dimensions of the drawn shape: make the width equal 86 pixels and height 18 pixels.
1.7 Select the Paint Bucket tool (K). Go to the Color Mixer panel, which should be opened by default (if you can't see it, select Window > Color Mixer). Make the following selections to create a nice linear gradient fill (see numbers in the screenshot below):
- Click on the little paint bucket icon to select the fill color.
- In the Type menu, select Linear for the gradient.
- Click once on the small square on the bottom left side of the panel. This is the starting color of your gradient.
- Now go to the color code field and enter the hexadecimal color code #0066CC in it.
- Click once on the small square on the right (the ending color of your gradient). Go back to the color code field and enter #81C0FE for the end color.
Fine! The gradient is ready now. You will fill up the rounded rectangle with it now.
1.8 While the Paint Bucket tool is still selected, press and hold Shift on your keyboard (this will enable you to create a perfectly vertical fill), click near the rectangle's upper edge and drag your mouse down until you reach the shape's lower edge. Release your mouse button, and the rectangle will be filled up.
That would be it for the button's main shape. You will now convert it to a movie clip symbol and then create a nice pixel label on top of it.
2. Creating the pixel label for the button
2.1 Select the rounded rectangle and choose Modify > Convert to Symbol. Call the new symbol pixel button (1), select Movie clip as type of symbol (2) and click OK (3).
You could have selected button as type too, but I think that the Movie clip option is almost always better. Movie clips are definitely more powerful than simple button symbols.
2.2 Using the Selection tool (V), double-click on the newly created pixel button movie clip symbol on the stage to enter inside its timeline.
2.3 Once inside, call the current layer (the only one for the moment) gradient shape. Make a new layer above it and call it label.
2.4 Select the Text tool (T). Choose the following options:
- The text field should be set to Static text.
- Select a nice pixel font. I used the Org v01 from the great OrgDot's free font collection. If you are going to download and install a new font, save your work, because you must restart Flash in order for the font to appear in the list.
- Most pixel fonts are set up to work at font size 8.
- Select white as font color.
- Since you are using a pixel font, you must select the Bitmap text option from the rendering menu.
- Make sure that the Selectable option is disabled (there is no sense in having a selectable piece of text on a button).
2.5 Click anywhere over the rectangular shape with the Text tool and type something — "portfolio" or "links", for example. Press Esc on your keyboard when you're done and you will exit the text field. A blue border will appear around the newly made text.
2.6 While the text field is still selected, go to the Properties panel, and:
- Click the Filters tab.
- Click the plus icon (+) and select the Drop Shadow filter from the list.
- Put both Blur options to 0.
- Set the Strength to 100% and the Quality to Low.
- Use black as shadow color.
- Set the Angle to 45 and the Distance to 1.
Leave the Knockout, Inner shadow and Hide object options unchecked.
And here's the result:
A nice sharp shadow! If you are not satisfied with the position of the label in relation to the button's main shape, just select the text field again and use the arrow keys on your keyboard to move it until you get it right.
3. Creating a border around the button via filter effects
3.1 Click on the Scene 1 link above the layers to exit the movie clip symbol and return to the main timeline.
3.2 The pixel button movie clip should still be selected once you exited its timeline. Go over to the Filters tab again and select these options:
- Choose the Glow filter effect from the list.
- Set both Blur options to 2.
- Set the Strentgh to 300%.
- Set the Quality to Low.
- Choose black as the color for the glow.
Leave the Knockout and Inner glow options disabled.
And finally, here's your completed pixel button:
It looks really cool, doesn't it? And it was so easy to make! See, the filters enable you to create a border around the button without you having to resort to design tools.
The advantage of using this method over simple drawing is that you can just turn the Glow or any other filter off temporarily, just to see the difference, without having to erase anything. To disable a filter momentarily, just click the green check mark next to the filter and it will turn to a red cross, disabling the filter. Click the red cross to turn the filter back on.
If you'd like to know how to duplicate this button to create copies of it with different labels, check any one of the following tutorials:
And to learn how to link your buttons, check out the following tutorials:
I hope that you have enjoyed this lesson! Check out more tutorials on making menus and interfaces in Flash.
Download the source file for the pixel button shown in this lesson
With every single site of yours that I browse, I see that your expertise only grows. I wish I were this experienced in flash. There would be no stopping my empire!
Thank you so much for putting this site up!
P.S. Consider learning all of the Adobe Suite (Cs3) and making sites corresponding to the application (E.g., Dreamweaver Explained) lol If you hadn’t already done so.
You absolutely rule!
Thank You Very Much !!
thanks you sir