The Button Properties Tab - Button States

Image of Button Properties Layout

The Button States:

All 1 Cool Button Tool buttons have three states:

  • Up State.  How the button looks and behaves when it is in the "up " position.

  • Mouse-Over.  How the button looks and behaves when the cursor is over the button.

  • Down State.  How the button looks and behaves when it is pressed.

If you hold down the Shift key when you click on a button state, 1 Cool Button Tool will copy all the settings from the current state to the new state.  This is handy for copying the settings from one state to another.

Copy change to other states:

This is a very handy control for copying button properties to other button states.  That is, it will copy the last change you made to the two button states you are not currently editing.

Example:
If you wanted to make the font size the same for all three button states, first select your new font size, then click Copy last change to other button states. If you want to copy an existing setting to the other states (without changing it), just click on the property (e.g. the bitmap Name), then click Copy last change to other button states.

Copy change to other buttons:

Another handy control for copying button properties, this button copies the last change you made to other buttons.

If the last change was made to a button state property, such as the mouse-over color, the change is copied only to the mouse-over state of other buttons.  That is, the change is not copied to all states, of all buttons.

Example:
If you wanted to make all buttons behave like radio buttons, first select the Radio Button style, then click Copy last change to other buttons.

More Options:

This button toggles between showing and hiding your selected button's Advanced Properties

Text Alignment:

Specifies how the text is aligned for this button state.  Text can aligned to the left, right, or center, or you can specify the position of the text exactly.

When you choose Set Text Offset (the rightmost option) an extra handle will appear in the Button Editor Window.  Use this handle to drag the text to the desired position.

Font:

Specifies the font and font size for this button state.  Java only supports 9 fonts -- Dialog, SansSerif, Serif, Monospaced, Helvetica, TimesRoman, Courier, DialogInput and ZapfDingbats. The Dialog font is the standard system font, and can look very different on different platforms.

Text Style and Colour:

Specifies the style and colour of the text label for this button state.  1 Cool Button Tool supports the standard styles -- Bold, Italic and Underline -- as well as beveled text, both raised and recessed. Beveled text can look particularly effective on textured backgrounds. Clicking on the Text Color swatch will display the Color Dialog where you can select a color or enter the RGB values of a color.

Text Area:

The text displayed to the user for this button state. You can create multi-line text on buttons by pressing Enter in the text edit box, and entering text on the line(s) below.  You can have as many lines of text as you like.

Note: Text can be different in all three button states.  You can quickly copy text to the other states by clicking in the Text Area box and pressing the Copy last change control.

Sound

Specifies the sound to be played for this button state.  

The rules for when button sounds are played are:.

  • When the cursor enters the button the Mouse Over sound is played.

  • When the button is pressed the Down State sound is played.

  • When the button pops up after being down, the Up State sound is played.

You can either type a sound file name into the edit box, or click on the button to open the File Dialog Box. (Note that the up state sound is not played when the mouse cursor exits the button.)

JAVA applets:
The only sound format supported by Java is Sun Microsystems AU format. However, 1 Cool Button Tool will let you choose a Microsoft WAVE File (.wav) which will be converted to an AU file of the same name.  

FLASH files:
The only sound format supported by 1 Cool Button Tool Flash is MP3. However, 1 Cool Button Tool will let you choose a Microsoft WAVE File (.wav) which will be converted to an MP3 file of the same name. The wav will be converted to a MP3 with the following attributes: 44100 Hz, 48 Kbps, Mono. These setting have been chosen in order to achieve high compression without sacrificing too much sound quality. If you have different needs you will need to convert the wav using a specific wav-mp3 conversion tool.

Sound Playback Modes:

Specifies how the sound is played.  By default, the sound is played to completion, and if a new sound starts before it has finished, the sounds are automatically mixed.

Alternatively, you can select Stop playing sound when button state changes, which truncates the sound when the button state changes, or Loop sound which repeats the sound continuously until the button state changes.

Bitmap and Transparency

Specifies the bitmap to be displayed on the button for this button state.  The only bitmap formats supported by Java are CompuServe GIF, and JPEG.

You can either type a bitmap name into the edit box, or click on the button to open the File Dialog Box.

If the button has a Bevel Style of transparent, the button will have no edges or border so all you see is the bitmap.  If the bitmap is a transparent GIF, the transparency is preserved and the button can be a non-rectangular shape.  Bevel Styles are explained in Advanced Properties
Make Bitmap Transparent:   

If the bitmap is a GIF file, it makes the GIF transparent.
The transparency color chosen is the same as the top-left pixel of the bitmap.

Image Align:

Specifies how the bitmap is aligned for this button state.  The image can aligned to the left, right, or center of the button, or the bitmap can be scaled to fit the button.

If you also choose Set Bitmap Offset (the rightmost option) an extra handle will appear in the Button Editor Window.  Use this handle to drag the image to the desired position inside the button.

Button Style and Colour:

Specifies the Bevel Style of the button for this button state.

A button can have one of six button styles:

  • Transparent Flat Button.  No button shape is drawn at all.  The text label and bitmap are drawn directly onto the background.  Transparent buttons are great for creating non rectangular overlapping buttons from transparent GIF bitmaps.

  • Flat Button.  A flat filled rectangle is drawn in the button color.  Flat buttons can be used for creating buttons that are flat until the mouse moves over them, like the toolbar on Internet Explorer.

  • Raised Transparent Button.  The beveled edges of the button are drawn in the raised position, but the button face is not drawn.   Beveled transparent buttons are great for drawing buttons on textured backgrounds because the texture shows through to the button face.

  • Depressed Transparent Button.  The beveled edges of the button are drawn in the depressed position, but the button face is not drawn.

  • Raised Button.  A solid raised button.

  • Depressed Button.  A solid depressed button.

Specifies the color of the button for this button state.  Clicking on the Border Color swatch will display the Color Dialog where you can select a color or enter the RGB values of a color.

The highlight and shadows will be slightly lighter and darker than this color.  Button color has no effect if the Bevel Style is transparent.

Button States Copy last change to other states Copy last change to other buttons See More Options Button Style Font Style and Size Text Alignment Bitmap Image Alignment