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 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 (menu) > Images dialog box.
After creating the sprite image, you must then implement it for the toolbar button.