ActionScript - 3D Controls

There are 2 basic control styles - flat and 3D. The flat look is fairly straight forward, but getting the 3D style to look like Windows is a bit more complex.

The hardest part is the fact that each version of Windows uses a different 3D style. In the case of Flash, this is even more of a problem because the applications are cross-platform ... and each platform has its own style.

Personally, I like the Windows 98 style used in Delphi 5 and will present that here.

Colors | Determining Colors | 3D Borders | 3D Buttons


In Windows 98, Form controls were light tan (a warm gray), with Windows XP, they are blue ... and have a different shape.

With Windows applications, the fact that colors change from one version to another is not really a big deal because there are specific color codes that allow applications to uses whatever colors are used in Windows. For instance, if a Delphi application selects "clBtnFace", it will get what ever color the user has select for the top of buttons. However, with a "cross platform" application like Flash, those codes are not available.

In the default color scheme, Windows uses #ECE9D8 - a light tan, though on some monitors, it looks gray - for button faces and (in Delphi) the default Form background. Even Adobe Photoshop uses this color for backgrounds.

For gray backgrounds, Flash CS3 uses #EDEDED (in the Tool Palette and the Properties frame) and #E5E5E5 (in the Timeline) - both are nice, but it makes it look like Flash and Photoshop were written by 2 different companies. (In Flash, open a Color Picker window to determine these colors.)

For the controls described below, I will try to stick to the colors used by Delphi 5 with the default Windows color scheme. However, other combinations will also look just as good. The key is to make your applications consistent.

Determining Colors

Unfortunately, the Adobe products I am using do not allow me to directly sample colors used in other applications. As a result, I This procedure did not work when pasting the clipboard into Flash ... Perhaps because Flash did not understand the special Windows color codes.

At any rate, these are the important colors, from lightest to darkest.

If you want consistency, I suggest picking a set of colors - either pure grays, or the warm set above - and making them available as named constants.

I have also created a palette with these and placed it in the Library to simplify using them in interactive design mode.

3D Borders

Borders are used to define areas. In Delphi, the easiest way to see this is to place a Panel on a Form and change the BevelInner and BevelOuter properties. Of the 9 possible combinations, only the following 4 are needed to create a 3D effect. Typically, the borders are 1 pixel wide.

A Recessed Panel

In the case of a recessed panel, the border is dark on the top and left, and light on the bottom and right. The following values are used in Delphi.

For a raised panel, the top and left are light colored, bottom and right are dark.

A Raised Border

To draw a rectangle with a raised border, I used White (#FFFFFF) and the lightest available gray (#CCCCCC). I just drew lines with these colors with the Cap property set to Square (over a background of dark gray (#E5E5E5) on a different layer ... just for contrast). However, since lines do not have names, they must be converted to Movie Clips to make them resizable. (Note: The Cap property must be set to Square to get the corners right.)

Once I did it by hand, It was obvious how to use 2 rectangles.

Actually, either the 8-line version or the 2-rectangle version can be converted into a Movie Clip and resized as necessary.

3D Buttons

3D Buttons are similar to Raised Panels, except that the buttons have 2 changes in brightness from the top to the bottom.

Buttons also simulate a "change in height" when they are "pressed".

Push Buttons

The 3D raised Buttons in Delphi are rendered with 5 shades of a warm gray. The borders are 2 pixels wide, producing a slightly rounded look. From top to bottom

When the button is pressed, the 2 pixel border becomes only 2 colors - clBlack and clBtnShadow. To enhance the "motion", the text is rendered one pixel down and to the right. The dotted line indicates that the button is selected.

ScrollBar Buttons

Because these are *inside* a recessed component, the order of the colors is slightly different.

ScrollBar Buttons are 17 pixels square, 2 pixels on each side create the 3D effect, the button top is 13 pixels square. The graphics below show one Arrow button, the Slider (Thumb), and a part of the channel. One image is zoomed so that the pixels can be seen, the other is actual size. You may also note that the color of the channel is dithered (2 colors - white and gray). This was a common practice on old EGA systems which only had a limited number of colors (typically, 16 or 256).

RadioButton and CheckBox

These use the same colors as the 3D buttons, except that the shadow is on the Top/Left and the highlight is on the Bottom/Right.

Note on the images

I originally created the images for this page using jpeg at high resolution (to reduce the compression artifacts). Later I switched to gif because For instance

Author: Robert Clemenzi -
URL: http:// / user / clemenzi / technical / Languages / ActionScript / Controls / 3D_Controls.html