| The UIS2 Tutorial - Buttons | ||||||||||||
|
There are 2 types of buttons that you need to support in Windows; those in the frame (e.g. Maximize, Close etc), and the buttons used within applications including radio buttons and check buttons. While we were dealing with the frame of the window in the [Personality] section I alluded to the fact we would come back to the buttons of the frame so here we are. In fact, ‘buttons’ is a bit of a misnomer as all graphics in the frame with ‘actions’ attributed to them are referred to as ‘buttons’. The way these ‘buttons’ are defined is that some commands are placed within the [Personality] section, and then each button has a section of it’s own like [Button0]. We will start by looking at the commands that need placing within the [Personality] section. ButtonCount=7 Here you specify the number buttons in the frame, each of which has its own section; in this case from [Button0] to [Button6]. RightClickAction=4 Previously it was mentioned how WindowBlinds can add functionality beyond standard Windows functionality. You can specify here a command that can be performed when the user right clicks on the title bar. The list of options is as follows: ·
0 = Close window RollupSize=33 When you specify that any of the buttons has ‘rollup’ functionality you must specify the size to which the window resizes. This is the height in pixels that the window will be after being rolled up. TripleImages=1 This command is used to specify whether in your buttons use a source graphic that contains images just for the active window (0), or whether images are included for inactive windows as well (1). MouseOver=1 This determines that the images used for buttons also contain an image that is shown when the mouse cursor is over the button. You will study the structure of the source graphics for buttons in the later sections. We will now actually go through the buttons and examine the code. Action Buttons Each button requires a section [ButtonX] where X is the number of the button. Below is the code for 4 buttons which have a similar structure. After the code we will go through each common line to examine its purpose [Button1] [Button2] [Button3] [Button5] [Button6] That is the code, now for the breakdown: Align=1 This specifies an alignment for your button and is the first sign that WindowBlinds is much more flexible that normal windows. The value you give this parameter is taken from the list below. ·
0 = relative to top
left of window XCoord=22
YCoord=6 This is the complimentary parameter to XCoord and offsets vertically relative to the position set by Align. Action=0 This is the one you’ve been waiting for, defining what the button actually does. The value of this parameter is selected from the list below. This button has a value of 0 indicating that it performs the ‘Close window’ function. ·
-6 = Do nothing. Just
show an image. Passes mouse messages to the titlebar. ButtonImage=Aquarium\exit.bmp This is the source image for the button. The image again contains all of the required states in a single image. The first 3 are for the normal window, and the last optional 3 are for the inactive windows.
Visibility=0 This command determines under which circumstances a button is visible. The code can be chosen from those in the list below. If you require, you can use up to 10 codes at once by separating them with AND, for example 5 AND 9 AND 24. ·
0 = Always show button InSound=Aquarium\close.wav WindowBlinds allows you to allocate sound effects to actions. The InSound parameter allows you to specify a sound file that will be played which the button is clicked. In fact the InSound file plays when the mouse button is pressed in, and you can optionally specify an additional OutSound parameter to play a sound when the mouse button is released. All you need to do is specify a WAV file path relative to the WindowBlinds directory. In order to use sounds in WindowBlinds you need to add an additional line to the [Personality] section of the skin. The line is SoundEnabled=1. System & Plugin Buttons Buttons don’t have to contain graphics and perform traditional maximize / minimize type functions. There are two buttons in this skin which do other things. The first is likely to be a button that you want in most skins that you create, as it displays the program icon which Windows normally displays in the top left corner. All you need to specify are it’s location via the Align, XCoord and YCoord parameters. The final parameter is the Action parameter which we also examined earlier, using the value of 11 which the list above defines as ‘System Icon (default icon as shown in normal window)’. [Button4] Earlier, while discussing the animated frame I indicated that the animation would not work at that stage. The reason was the lack of the plugin that allows animation. The way to implement the plugin is via a button. Below is the code for the button containing the animation plugin ([Button0]). [Button0] The first 4 parameters will now be familiar to you. The Width and Height parameters are optional parameters that indicate the width and height of the button (surprisingly!) and are set to 0 just to ensure the button is not visible. The final parameter specifies the plugin to be used, but entering a file path relative to the WindowBlinds directory. The anim.dll file is the plugin that enables the animation on the window frame. Other plugins exist for such things as a clock and scrolling text. MDI Buttons It’s already been shown that WindowBlinds can skin the background of MDI windows, but these windows have their own buttons and WindowBlinds can skin those too. As you can see the code is very simple, all you have to do is specify the image to be used and whether the image contains images for the Mouse Over state. The states are as follows:
[MdiControls] Other Button Stuff OK, so that covers the buttons in the frame, but there are other buttons that you need to deal with. This code gets its own section in the UIS file – the [Buttons] section. Here we will go through this section line by line. [Buttons] Here you specify your source graphic for check buttons within your skin. Again the graphic contains multiple states. The image structure is made up as follows:
RadioButton=Aquarium\radio.bmp Here you specify your source graphic for radio buttons within your skin. Again the graphic contains multiple states. The image structure is made up as follows:
Bitmap=Aquarium\button.bmp This is where you specify the graphic to be used for command buttons in Windows. This doesn’t skin the Taskbar buttons which these are dealt with elsewhere, but all the buttons within application. The image structure is made up as follows: 1.
Normal The actual image has twice as many states because the MouseOver parameter has a value of 1 which means that states 6 to 10 replicate states 1 to 5 when the mouse cursor is over the button. MouseOver=1 WindowBlinds can use a different image when the mouse cursor is over a button. As stated above this skin uses this and therefore this parameter has a value of 1. TopHeight=5 These 4 parameters allow you, as you have done previously, to exclude the perimeters of the image from being stretched when a button is sized. Trans=1 As per previous examples, you can specify the Trans parameter to specify whether ‘magic pink’ is used to define areas of transparency in the image. A value of ‘1’ shows that it is used. Alpha=254 In addition to the ‘magic pink’ which is activated by the above statement, you can define the degree to which the button is transparent, and the window is visible through it. This is done via the Alpha parameter, which can range from 0 to 254. Where the value is 0, the [MENUITEM] image is totally transparent and the [MENUBACKGROUND] image is totally visible. At the other extreme as in this case the opposite applies. Animated Buttons Again, WindowBlinds is not content with standard Windows functionality and so you can use animation on your button. You specify the number of frames in the graphic, the gap between frames of the animation, and then which frames are animated in different circumstances. FrameCount=10 This parameter allows you to specify how many frames are in the source image. AnimTimerRate=250 This specifies the time in milliseconds between frames in the animation used. MouseEnterStartFrame=4 This is the first frame that is displayed when the mouse cursor enters the button area. The MouseOver animation will then start. The frame count starts at 0 so this is actually the fifth image. MouseLeaveMode=1 This defines how WindowBlinds should deal with the animation when the mouse moves away from the button. You have two options: 0.
Stop animating immediately MouseOverStartFrame=5 This is the first frame that is used in the animation when the mouse moves over the button. The frame count starts at 0 so this is actually the sixth image. MouseOverStopFrame=9 This is the last frame that is used in the animation when the mouse moves over the button. The frame count starts at 0 so this is actually the tenth image. NormalFont=0 Text is typically displayed on command buttons, and WindowBlinds allows you to specify a different font style depending on the button state. These commands specify the fonts and the font code relating to this is expanded later. Now you should know everything that you need to create your own buttons.
|
