WinStudio

Creating Sprite Images for Toolbar Buttons

When creating a toolbar component, one option for the display of the toolbar icon is to use a "sprite image" which allows the icon to change its appearance—say, its color—whenever the mouse pointer is over the icon. This is a good visual cue to let users know that they are in the active area for the button.

Specifications for the sprite image

The sprite image must meet very these specifications:

• The dimensions of the image must be exactly 25 pixels wide by 50 pixels high.
• The image must be formatted as .png with a transparent background.
• The image must consist of two glyphs, one for the default state and one for the hover state:
• The dimensions for each glyph cannot exceed 16 pixels by 16 pixels.
• The glyph for the default state must begin 2 pixels from the left side and 1 pixel from the top.
• The glyph for the hover state must begin 2 pixels from the left side and 26 pixels from the top.
• The file for the image must contain "mgsprite" in the name; for example: mytbbutton_mgsprite.png

  This naming convention lets WinStudio know that it is a sprite image for the button and should be handled accordingly.

• The image file can be:
• Stored in the Mongoose file system. We recommend placing it in the same directory as the winstudio.exe file.
• Imported into the application database using the Edit (menu) > Images dialog box.

Implementing the sprite image

To implement the sprite image on a toolbar button:

1. Prepare the sprite image according to the specifications in the previous section.
2. Place the sprite image file in an appropriate location on the application server, according to the specifications in the previous section.
3. In Design Mode, select the toolbar button component in the Component property sheet.
4. In the Bitmap File Name property (Appearance property group), specify your sprite image file, using:
• The ellipses (...) button to reference the image file in the Mongoose file system
• The drop-down list, if you imported the image file
5. Save your work, close the form, refresh the metadata cache (Ctrl + U), and reopen the form.
6. Verify that the image changes when you move the mouse pointer over the icon.

Related Topics

About ToolbarButton Components