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

Colors

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

Created an appropriate application in Delphi
Captured the screen to the clipboard (Ctrl-PrtSc)
Pasted the clipboard into Photoshop
Configured Photoshop to display the color values in the Info Window

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.

Color	Hex Value `#RRGGBB`	Delphi Constant	Windows Constant	Comment
White	`#FFFFFF`	clWhite clBtnHighlight	COLOR_BTNHIGHLIGHT
	`#F1EFE2`	cl3DLight	COLOR_3DLIGHT	Used in a Scrollbar - next to the dark part of the border
	`#ECE9D8`	clBtnFace	COLOR_BTNFACE	Button Top
	`#D4D0C8`	clScrollBar	COLOR_SCROLLBAR	Not used that often
	`#C0C0C0`	clLtGray clSilver		A true gray - all 3 values are the same
	`#ACA899`	clBtnShadow clGrayText	COLOR_BTNSHADOW COLOR_GRAYTEXT	Light Shadow
Gray	`#808080`	clGray clDkGray		A true gray - all 3 values are the same
	`#716F64`	cl3DDkShadow	COLOR_3DDKSHADOW	Dark Shadow
Black	`#000000`	clBlack clWindowText clBtnText	COLOR_WINDOWTEXT COLOR_BTNTEXT	Text default

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.

Style	Inner Bevel	Outer Bevel	Comment
Raised	None	Raised	The Panel appears to be raised above the form
Sunken	None	Lowered	Creates a region sunken into the form
Sunken border	Raised	Lowered	A chiseled line surrounds the panel
Raised Border	Lowered	Raised	A thin raised line surrounds the panel

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.

clBtnShadow	#ACA899	Top and Left
clBtnFace	#ECE9D8	Form background
White	#FFFFFF	Bottom and Right

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.

Set the Join property to Miter
Set the width to 2
Draw the dark gray rectangle
Set the width to 1
Set the outside color to white and the fill color to none
Draw the top rectangle
- The xy position of both rectangles should be the same
- The top rectangle should be 1 pixel shorter and one pixel narrower than the bottom
Convert the 2 rectangles to a Movie Clip
- Set the registration to the upper left corner
- Check - Enable guides for 9-slice scaling
- Name it ScrollChannel

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

clBtnHighlight	#FFFFFF	White
cl3DLight	#F1EFE2	Slightly lighter than the top
clBtnFace	#ECE9D8	Button Top
clBtnShadow	#ACA899	Light Shadow
cl3DDkShadow	#716F64	Dark Shadow

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