Simple Animated Bit- and SpeedButtons

Problem/Question/Abstract:

How do I create buttons with animated bitmaps?

Answer:

One thing that's not well-known (or maybe more accurately, not too obvious) is that the glyphs used for bit buttons are actually multi-framed bitmaps arranged horizontally from left to right. The rule is that you can have up to four frames in the bitmap, with each frame representing a particular button state. What you normally see is the first frame of the bitmap displayed on the button; this glyph represents the "up" state of the button. The other frames represent other states. Here's their layout:



Figure 1 - The arrangement of a multi-framed bitmap�����������������������

Table 1 describes what each bitmap frame represents:

Frame
Button State
Description
1
Up
This frame appears when the button is unselect. If no other frames exist in the bitmap, Delphi uses this image for all other images.
2
Disabled
This frame is typically a dimmed bitmap indicating that the button is disabled and can't be selected.
3
Down
This frame appears when a button is clicked. Frame 1 then reappears when the user releases the mouse button.
4
?
I have absolutely no idea what this particular frame is used for, and the online help doesn't offer any explanations whatsoever.


Table 1 - Description of multi-image bitmap frames and when they're used

So what's the point to all this? Armed with the information I just provided, you can create simple, two-frame animations that will show a different picture based upon the up or down state of a button. Here's sample:

  (enlarged view)

The bitmap above shows a bitmap that I use for a product that I created that runs on a CD. Frame one (the leftmost bitmap) is displayed with the button is in its up position. Frame two displayes when the button is disabled, and frame three displays when the button is pressed. Notice in frame three how the logo and CD have "moved" down and to the right, and the shadow disappears. The net effect achieved here is that the logo appears to move down as the button is pressed.

So how do you construct the bitmaps? I've found that the image editor works just great. Just create a new bitmap by selecting File|New|Bitmap from the main menu. When the image properties dialog box appears on the screen, set the dimensions like so:

Give the image a height value first (Borland's standard buttons are 16-pixels high - I like mine to be more than that)
Then, set the width as 3X the height. So for instance, if you set a height of 16 pixels, your corresponding width would be 48 pixels. Pretty simple

Then all you have to do is use your imagination to create your bitmaps. Have fun!