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.
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.
At any rate, these are the important colors, from lightest to darkest.
|Delphi Constant ||Windows Constant ||Comment
|#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
|A true gray - all 3 values are the same
|A true gray - all 3 values are the same
||#716F64 ||cl3DDkShadow ||COLOR_3DDKSHADOW ||Dark Shadow
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.
|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|
A Recessed Panel
|clBtnShadow||#ACA899||Top and Left|
|White||#FFFFFF||Bottom and Right|
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.
Buttons also simulate a "change in height" when they are "pressed".
|cl3DLight||#F1EFE2||Slightly lighter than the top|
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 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
Note on the images