Flash Explained

Learn Flash easily.

How to make pixel buttons in Flash

October 22nd, 2008 | Author: Luka | Category: Menus & Interfaces


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): The stroke color has been disabled..

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.

The Object drawing and Snap to objects options are disabled.

1.4 Click the Set Corner Radius icon: Setting the corner radius for the rectangle tool.. 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.

Drawing a rounded rectangle in Flash.

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.

Resizing the rectangle by entering numbers inside the Property inspector.

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):

  1. Click on the little paint bucket icon to select the fill color.
  2. In the Type menu, select Linear for the gradient.
  3. Click once on the small square on the bottom left side of the panel. This is the starting color of your gradient.
  4. Now go to the color code field and enter the hexadecimal color code #0066CC in it.
  5. 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.

Creating a linear gradient fill.

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.

Filling the rounded rectangle with the linear gradient fill.

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.

Top of page

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).

Setting the characteristics of a new symbol in Flash.

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.

Adding a new layer inside the pixel button movie clip symbol.

2.4 Select the Text tool (T). Choose the following options:

  1. The text field should be set to Static text.
  2. 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.
  3. Most pixel fonts are set up to work at font size 8.
  4. Select white as font color.
  5. Since you are using a pixel font, you must select the Bitmap text option from the rendering menu.
  6. Make sure that the Selectable option is disabled (there is no sense in having a selectable piece of text on a button).

Selecting the options for the pixel text label.

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.

Creating a static text field in Flash.

2.6 While the text field is still selected, go to the Properties panel, and:

  1. Click the Filters tab.
  2. Click the plus icon (+) and select the Drop Shadow filter from the list.
  3. Put both Blur options to 0.
  4. Set the Strength to 100% and the Quality to Low.
  5. Use black as shadow color.
  6. Set the Angle to 45 and the Distance to 1.

Leave the Knockout, Inner shadow and Hide object options unchecked.

The Drop Shadow filter and its characteristics.

And here’s the result:

The text with the shadow applied.

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.

Top of page

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.

Exiting a symbol and returning to the main timeline in Flash.

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:

  1. Choose the Glow filter effect from the list.
  2. Set both Blur options to 2.
  3. Set the Strentgh to 300%.
  4. Set the Quality to Low.
  5. Choose black as the color for the glow.

Leave the Knockout and Inner glow options disabled.

Characteristics of the Glow filter effect in Flash.

And finally, here’s your completed pixel button:

The pixel button is completed.

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.

Turning the glow effect off temporarily.

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

Be Sociable, Share!

Comments

Submit a comment

  • Lawrence Miller May 15, 2009 at 4:26 am

    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!

  • Mcx Live Nov 19, 2011 at 7:47 am

    Thank You Very Much !!

  • logicaltrade Sep 17, 2013 at 9:11 am

    thanks you sir

Leave a comment