Button It! - Button States and Bindings

Button States and Bindings

Button states and bindings are, appropriately enough, configured through the Button States and Bindings tab, which is depicted below:

A 'Button State' defines a particular form of a button. It comprises zero or more variations. For example, you might have a state representing the unselected image (containing no variations), and one representing the selected image when the mouse is over the button (perhaps with one variation that inverts the button, to represent it being selected, and another to change its colour, to represent it having the mouse over it).

Default States

By default, a new project is created with four button states:

  • Unselected
  • Unselected Mouse Over
  • Selected
  • Selected Mouse Over

Initially, none of the states contain any variations, so they will all appear the same. If you do not need some of these states, you can remove them to prevent excess clutter on your disk when you save the images. You might also want to add states of your own (such as a 'disabled' version of a button).

You must choose which variations you want to load before defining your bindings; you only get to choose from the set of loaded variations.

Bindings

Bindings provide a mechanism for telling the layout which states correspond to the states it understands (the states it understands are the same as the default set of states, i.e. Unselected, Unselected Mouse Over, Selected and Selected Mouse Over). By default, the bindings are set so that each layout state corresponds to the appropriate button state. You can change these bindings using the drop down list boxes at the right of the Button States and Bindings tab.


Button It! - Button Groups

Button Groups

A button group, as you might have guessed, defines a group of buttons. For example you might have a group of buttons contain the text 'Home', 'About Us', 'Products', 'Contact Us', and 'Further Information'.

Creating and Removing Groups

By default, a project contains a single button group, named 'Default'. This group cannot be removed. You can add additional groups using the 'New Group' button, or remove them using the 'Remove Group' button. No two groups can have the same name, and there must always be a 'Default' group.

Group Properties

Button groups have three properties that apply to the group as a whole.

  • 'Trim Transparent': without this option, many button styles will render a 'smooth' edge, with some semi-transparent pixels at the edges. While this is often desirable, it has the effect of causing a small apparent gap to be seen between two buttons that should be right next to each other (this effect can be seen in the screen shot above). Setting 'Trim Transparent' causes these semi-transparent pixels to be removed, so buttons placed right next to each other have no gap between them.
  • 'Centred': if set, then each button will be perfectly centred in its surrounding area. This is intended to be set particularly for symbols. For text, it is not recommended, as the text for different buttons will no longer align correctly if they are placed horizontally next to each other (due to the differing heights of the letters in the button).
  • 'Same Size': if set, then all of the buttons in the group will be expanded in size to match the widest and highest buttons.

The buttons in each button group can be displayed by selecting the tab corresponding to the group on the 'Basic Style & Settings' tab of the main window.

Adding Buttons To a Group

You can add a button to the currently displayed group by entering the text in the 'New Button' text box and then pressing enter, or clicking the 'Add' button:

You can also use the 'Add Symbol' button in order to add a button containing a symbol (using the Symbol Selector ) rather than text.

Another way to add buttons to a group is to load a button group preset (which will give you the option of replacing the buttons currently in the group, or not).

Deleting Buttons

If you select buttons in the displayed group and press the 'delete' key, those buttons is removed from the set. Alternatively, you can right-click and select the 'delete' option from the menu.

Changing the Properties of Buttons in a Group

You can alter certain properties for each button in a group; right click on the button you wish to change, and select 'properties'. This allows you to change properties such as the filename for the image, the HTML filename corresponding to the button, and the page title for the HTML. You can also change the font for individual buttons if required.

Button Group Presets

If you have a button group that you are likely to use on a regular basis, you can save the group as a 'preset'. To save a group in this manner, type in the name for the button set into the 'Button Group Presets' text box, and press 'Save'. To load a previously saved button set, select it from the 'Button Group Presets' drop-down list, and press 'Load' (the group will be loaded into the currently selected group in your project; if there already buttons in that group, you will be asked if you want to replace them or not).


Button It! - Defining Styles

Defining Styles

To define the basic style of your buttons, you use the style editor. This is accessed via the 'Basic Style & Settings' tab on the main window:

On pressing the edit button for the style, you are presented with the 'Style Editor' dialog, shown here:

Style Classes

The most important thing about a style is it's 'class'. This determines the general 'engine' that will be used for rendering. Different classes will have different different sets of parameters that indicate to the engine precisely how the button should be drawn. Some of these parameters are shared by all of the engines, some are shared between a subset of the engines, and some are unique to a single engine. To choose the button class, you click on the 'Choose Class...' button in the Style Editor. You are then presented with a list of the available classes, and a graphical depiction of a button rendered by each class.

When choosing a class in this manner, you have the option of retaining whatever settings overlap between the old class and the new class. As an example, imagine if you have a style of class 'bevelled' with the colour set to orange, and you choose a new class of 'metallic'. Because 'metallic' also has a colour setting, if you check the 'retain previous settings' box, the new style will also have the colour set to 'orange'. Otherwise, the colour will be set to a default value that is determined by the metallic style (which is blue).

Style Settings

Having chosen the class, the 'Style Editor' is updated to reflect the settings that are available to the class.

The Docking Window Interface

The settings are organised in groups that can be dragged to dock within each other (resulting in a 'tabbed' group, as shown in the figure above). They can also be dragged to 'float' within the style editor. To drag a 'lone' group or a complete tabbed group, click on the title bar of the group and drag it to the desired location; visual clues will be provided to help you determine where it will end up if you drop it in a particular place. To drag a single group within a tabbed group, drag the tab corresponding to the sub-group you want to drag. Right clicking the title bar of a group present a menu which allows you to hide or show groups as required. If you don't like the default layout of the properties, you can also save your preferred layout from this menu. A different layout can be saved for each button class; this will be the layout that will be loaded by default for that class in future.

The default layout for each class generally contains settings related to the 'content' (i.e. the text or symbol within the button) in a docked tabbed group on the right, other aspects of the style in a docked tabbed group on the left, and one last group for the preview image, docked at the top.

Most of the settings themselves should be reasonably self-explanatory. If in doubt, experiment!


Button It! - Introduction

Introduction to Button It!

Button It! is a utility for the creation of graphic buttons for use in any type of GUI, most especially web pages. It allows the swift creation of set of buttons using the same style. A huge variety of styles can be created, and your favourite styles can be saved for use with future projects. A wide variety of built-in styles are also available.

Button It! allows you to create button groups. A button group defines the content required for each button. For example you might have a set of buttons contain the text 'Home', 'About Us', 'Products', 'Contact Us', and 'Further Information'. This defines which buttons will be drawn according to you chosen style.

Variations on the style (such as 'invert button', 'set colour to blue', etc) may be chosen, and different sets of variations can be 'bound' to different buttons states (such as 'mouse over', 'selected', 'normal').

The buttons may then be saved (in a variety of different formats), for inclusion in your GUI or web pages. Button It! can also let you layout your buttons on the background of your choice. It can then produce the HTML and javascript for a page corresponding to each button (complete with image roll-over effects, and appropriate links between the pages).


Button It! - Layout

Layout

If you want, you can use Button It! to create a web page layout (though you can also use it just to genereate the button graphics). To do so, you first need to set up your bindings as required. Then click on the 'Layout' tab.

Adding Buttons

You can add buttons to your layout in two ways:

  • by right-clicking in the layout; a menu appears containing submenus for each button group you have defined. The submenu for a group contains items allowing each button in the group to be added, and two allowing 'all' buttons in the group to be added either horizontally or vertically.
  • by clicking one of the 'button groups' drop-down arrows at the top of the layout tab. This will display a graphic depicting each button in the group. They can be dragged from here to your layout. Alternatively, you can click a button to add it to the layout. It will be added next to the primary selected button in the layout (which is generally the last button to have been dragged or selected), and the new button will become the primary selected button. The 'direction' in which the button will be added next to the primary selected button is determined by the 'orientation' arrow which also appears at the top of the layout.

Moving Buttons

Once added to the layout, buttons can be dragged around as desired. You can select multiple buttons by clicking one, then holding down the CTRL key when clicking subsequent buttons. Under normal operation, button positions 'snap' to guide lines that correspond to buttons that are not being dragged in order to make alignment easier. If you need to stop this 'snapping' behaviour, you can hold down the 'Shift' key whilst dragging.

Button States

There are four button states recognised when performing layout; these can be bound to buttons states via the Button States and Bindings tab. As you might guess, the 'mouse over' states define the button's appearance when the mouse is over the button; the other states are used when the mouse is not over the button. The 'selected' states are used for the button corresponding to page being rendered; all other buttons are considered unselected. For example if you have a 'Home' button, then the 'Home' button is rendered in a selected style on the 'Home' page, and in an unselected style on all other pages.

Previewing and Saving

At anytime while editing your layout you can press 'F12' (or choose 'View->Preview in IE') to preview your current layout in internet explorer. When you decide you want to save the layout as HTML, you select 'File->Save HTML' (or Ctrl-H). One HTML file will be saved per button; each page will act as though the corresponding button is 'selected'.

Deleting Buttons

You can delete buttons by selecting them and pressing the 'delete' key.

Backgrounds

You can choose a background for your layout via the menu item'Layout->Select Background'.

Settings Affecting Layout

There are also a number of settings on the 'Basic Style & Settings' tab that affect the manner in which the HTML and associated files are saved:

Tile background
The background, if you select one, can either be tiled or not, depending on this setting.
Bits per pixel
Indicates how many bits per pixels to use for the images. Note that only PNG and GIF currently support 8 bpp.
HTML format
The HTML generated can be laid out using either a HTML table or layers. Some browsers, particularly IE, do not always do table layout as they should, so generally the use of layers is recommended unless you need compatability with browsers that do not support layers.
Image format
Determines what image format will be used for the images of the buttons.

Image Differences in Layout Mode

It should be noted that images saved as part of layout may differ from images saved via the 'Generate Buttons' button. In particular, no transparent pixels will ever appear; instead, they will take the colour of the background image, if supplied, or white if no background image is supplied.


Button It! - Registration

Registration

The demo version of Button It! is fully functional with the exception of the save function. When images are saved, they are stamped in order to make them unsuitable for most uses. To unlock the save functionality and allow the images to be saved just as they are seen when using the software, you must register the software. For details of the current registration fees & process, please visit our website.


Button It! - Saving Images

Saving Images

Images can be saved in two ways; as part of a layout, or independantly. In order to save as part of a layout, please see Layout. Here, we only talk about saving images independantly from a layout.

Saving the images for inclusion in web pages is quite simple. First, you need to set up any Button States you require. One image will be saved per button for each button state you have defined; if you don't need images for all the default states (e.g. if your design doesn't require different images for selected / unselected buttons), you can remove the states you do not require.

Having set up your button states, you simply click the 'Generate Buttons' button on the 'States and Bindings' tab. You will be prompted for the directory in which you wish to save the button images.


Button It! - Style Presets

Style Presets

There are a number of built-in style presets that you can use, or you can save your own. They work in a similar manner to button set presets.

If you have a style that you are likely to use again in the future, you can save the style as a style 'preset'. To save a style in this manner, type in the name for the style into the 'Style Presets' text box, and press 'Save'. To load a previously saved style, select it from the 'Style Presets' drop-down list, and press 'Load'.

Alternatively, you can select the 'Choose Graphically' button in order to see a button as rendered by each preset, from which you can choose.


Button It! - Support

Support

If you have any difficulties using Button It!, please email us at support@systemagick.co.uk, and we will endeavour to respond to your enquiry as quickly as possible. When emailing us, please try to include as much information as possible, including:

  • The product the problem relates to (i.e. 'Button It!' in this case).
  • The nature of the problem (e.g. crash, error message, bug, feature request etc).
  • The text of any error message that is displayed (and if available, the text displayed under the 'Details...' section).
  • Dotnet runtime framework version (you can find this out by going to Start -> Settings -> Control Panel -> Administrative Tools; there should be an item listed something like 'Microsoft .NET Framework x.x Wizards', where 'x.x' will be the Dotnet runtime framewrok version).
  • Operating system (including service pack level, if possible; you can usually find this by right clicking the 'My Computer' icon, selecting 'Properties', and examining the 'General' tab).
  • Amount of memory installed.
  • Processor type (e.g. Pentium 4, Athlon etc) and speed.
  • Free disk space.
  • Any actions you have taken that you think may have caused the problem to become apparent.
  • Any other information that you think may be relevant.


Button It! - Swapping Presets

Swapping Presets

All presets (style, variation and button groups) are stored as separate files in a directory corresponding to the preset type ('style', 'variation' and 'buttons' correspondingly). These directories are located under the directory in which you have installed Button It!.

Any presets you save will be stored in the corresponding directory. Button It! users can easily swap presets by swapping these files and placing them in the approriate directory (Button It! will automatically pick up any additions or changes to this directory; it does not have to be closed and restarted).

Guidelines for Swapping Presets

There are two things you should take note of when creating presets that you intend to be used by others. First of all, images (for example those used for textures) are not stored in the style or variation presets; instead, a link to the image filename is stored. If the image is located beneath the directory in which Button It! is stored, then the link is treated as relative to this path. Otherwise it is treated as an absolute path. For your presets to work on someone else's computer, you should either just use the texture images supplied with Button It! (which are all located beneath the Button It! directory), or provide the images to that person. They can either place the image in the same location as you have it on your computer, or somewhere else; in the latter case, when the image is not found where expected, they will be prompted to browse for the image, and will be able to point the program to where they have stored it.

The second issue relates to the use of fonts. If you use a font that is not present on someone else's computer, that font will be replaced by some standard font (typically 'Arial'). If possible, styles shared in this manner should use only the most common fonts (the built-in font dialog contains a menu option that allows you to limit the fonts you may choose from to only the fonts that are most commonly found on people's machines). Alternatively, you could supply any font(s) you use with the preset, or point users of the preset to some location they can download the font(s).

Send Us Your Presets!

If you have any kind of preset (styles, button groups, or variations) that you think may be of use to other users, please send them to us, and we will consider them for inclusion as default presets in later releases of Button It!. You can send presets to buttonit-presets@systemagick.co.uk


Button It! - Symbol Selector

Symbol Selector

The Symbol Selector allows you to select a symbol (quel surprise!). It is presented when the 'Add Symbol' button is pressed on the 'Basic Style & Settings' tab of the main window.

The symbol selector presents for selection all symbols that are contained in the configured symbolic fonts. By default, the symbolic fonts that are used by the symbol selector are:

  • Webdings
  • Wingdings
  • Wingdings 2
  • Wingdings 3
  • Symbol

The set of available symbols is determined by the symbolic fonts that are installed on the system. If you have symbolic fonts installed other than the standard ones (such a 'wingdings'), you can configure them to be included in the 'Symbol Picker' dialog by choosing the menu option 'Application->Settings'. Thus, if you have a favourite symbolic font installed that is not in the default set, you can add it here. Furthermore, if you want to design your own symbol for inclusion, you can create it in a font editor (such as 'softy').

All symbols from the configured fonts are displayed in a grid by the symbol selector. The selected symbols are bordered by a red rectangle. You can select a different symbol by clicking on it with the left mouse button. Holding down Ctrl while clicking causes the symbol to be added to the current set of selected symbols. If you hover over a selected symbol, it will be shown in 'real size' (i.e. the size at which the symbol will appear on the button). You can then resize the symbol by clicking within it, and dragging the mouse until the appropriate size is reached.


Button It! - Variations

Variations

Variations describe ways of changing a style by altering certain of its settings. For example, a commonly used variation would be 'Invert', which would set the 'invert' setting of the style to 'true' in order to create a variation on that style. There are several built-in variations that you can use, or you can define your own.

Defining a variation is quite simple. First, you choose the 'Button Variations' tab. Then click 'Add new':

The style editor dialog is displayed (for more information on this dialog, see Defining Styles) with the settings from your current 'base style' for the project (defined via the Basic Style and Settings tab). Change the settings that you wish the variation to represent. For example if you want a variation for 'change colour to red', you simply set the colour in the style editor. When you are done, click okay. You will be prompted for a name for the variation. Enter an appropriate name (such as 'Make red'), and click okay. Your new variation will be added to the drop down list of loaded variations. In addition, this variation becomes the currently selected variation, and the image list at the bottom of the tab is updated to reflect what your current Button Set would look like if the new variation were applied to you current 'base style'.

The 'Redefine' button allows you to redefine the currently selected variation from scratch (i.e. your starting point will be 'no differences from the base style'). The 'Edit Button' allows you to make modifications to the currently selected variations (i.e. your starting point will be whatever the variation was previously defined as).

It should be noted that variations are remembered as changes to the settings of a style. As noted in Defining Styles, different style 'classes' may have different settings. As such some variations may modify settings that are not applicable to all style classes. For example, several of the classes support 'lighting settings', and several don't. If you create a variation that modifies the lighting settings (e.g. perhaps to add an extra light), and try to apply that variation to a style that uses a class that doesn't support lighting settings (such as the 'bevelled' class), the variation will have no visible affect (unless you made other changes in the variation that are supported by the 'bevelled class', of course).

Variations, like styles, can be saved as 'presets'. If you think you may use a variation again in the future, simply click the 'Save button' on the button variations tab:

The variation will be saved with whatever name you gave it. To load a previously saved variation, just select the name from the 'Variation Presets' drop-down list, and click load.