Adding a Button

Opus allows you to add Button objects to a page. Buttons are useful when you want a user to navigate around a publication. However, buttons are often best used in a publication when they make it more interactive. For example, a user clicking on a button to show more information or select their quiz answer.

Note:
Any of the objects you place on a page in your publication can be used to work like a button by adding triggers and actions to them – see Working with Actions for more information. However, buttons have a couple of unique properties that are described below.

To add a Button object to a page:

  1. Select the Button tool image\Icon_Object_Button.jpg from the Tools toolbar.

  2. Click and drag the cursor over the page to create a box in which the button will be placed – the object’s Actions dialog will automatically open with a Left Mouse Click trigger already added to it. Use the Actions dialog to make something happen on a page.

  3. You can change the style of the button using the Button tab in the object’s Properties dialog.

Note:
When the object is initially created it has the appearance of a button, which many users are familiar with. However, you can turn off the button appearance and use the Image or Background tabs in the object’s Properties dialog to create a Button object that matches the rest of your publication.

Radio Buttons and Checkboxes

A flyout menu is available from the Button tool allowing you to choose from a selection of designs for radio buttons and checkboxes.

Button Text and Object States

You can insert a caption for a button simply by typing it onto the face of the button. When you select a button, click on it again and the flashing I-beam cursor will appear to allow you to type the caption.

You can also change the colour, style or even the content of a caption according to the different states of the button such as when the mouse moves over the button or when the button is pressed. To do this you need to select the relevant object state (Mouse Over, Button Down etc) from the icons in the panel on the left of the Properties dialog. The Button States

The tabs of the property dialog will change to reflect those features which can be modified for the chosen state. This includes a Modify Text tab which allows you to update the formatting, colour and content of the text. Note that there is no need to set all the properties for the text, only the ones you want to change. Modifying Button Captions

Vista-style Buttons and Other Non-Standard Buttons

Opus now includes the option to use Windows Settings for button style. This means you can use the genuine Vista style buttons and take account of any theme the user has installed. However, please note that this will not work with rotated or skewed buttons as this is not supported by standard Windows buttons.

Designers may also note that this can mean the look and feel of their publication can vary depending on the Windows version and/or Windows theme being used by the customer.

Using Borders for Non-standard Buttons

Opus also provides an easy way to create circular buttons, bars, arrows and Vista-style buttons by using specially- created borders. These borders can be used on any object to create the appearance of a button but they also work particularly well with the new Modern Style buttons though we recommend you set the border and hot colours to match those of the surface as they will no longer match the shape of the button.

To use these borders simply select the relevant object state and then go to the border tab of the Properties dialog and chose the border you require. In most cases these are provided in Up and Down versions such as Arrow Left Up and Arrow Left Down.

 

Helpful things to consider:

  1. As stated above, buttons do not have to look like buttons. You can change the appearance in many ways: either by changing the surface colour of the button; using a background colour; using an image; or even making the button invisible! All of these can be done in the Button object’s Properties dialog.

  2. There are two distinct advantages that the Button object has over other objects on a page when it comes to button behaviour. There are three types of buttons that you can create, these are: Push buttons, Radio buttons, and Checkbox buttons. Each of these three types of button behaves in a different way, as described in points 3 to 5 below. Only Button objects can be set to any of the three types.

  3. Push buttons – the most common behaviour for a button is as a Push button. Push buttons behave as follows:

(i) when the user is not pressing the button it is in its Normal state,

(ii) when the mouse is pressed on the button, the button goes down (i.e. the Button Down state) and stays down until the mouse button is released,

(iii) when the mouse is released, the button returns to its Normal state.

Most of the buttons in your publication will work like this e.g. to go to the next page; show an object on a page; start a video player and so on.

Any other Opus object can be made to act as a Push button by simply adding an action and trigger to the object.

  1. Radio buttons – these buttons are grouped together and only one button in the group can ever be selected at a time (i.e. it is in the Button Down state while all other buttons are in the Normal state). When you select one Radio button the current button that is in the Button Down state is returned to the Normal state and the selected button is now in the Button Down state. Radio buttons are often used when you want to provide a user with a choice but they are only allowed to select one option. For example, a simple multiple-choice question with four buttons of which the user can only select one answer. Please see the Understanding Radio Buttons topic for important additional information.

  2. Checkbox buttons – these buttons are push on / push off buttons. If the button is currently in the Normal state and you click on it, it will be set to the Button Down state and will remain in that state until the next time you click the button. In other words, it toggles between a Normal and Button Down state every time you click the button. This type of button behaviour is useful when you want to provide the user with a series of options of which they can select as many as they like. For example, you may want to provide a user with a list of products they want to view in a slideshow, the user can simply click the buttons they want.

  3. Only the Button object can create Push, Radio and Checkbox buttons. By default, a new Button object is always created as a Push button (the most commonly used option) but the Buttons tab in the object’s Properties dialog allows you to select the button type you require – see Button Tab for more information.

The Buttons tab also provides extra options that you can set when you choose a Checkbox or Radio button style. Therefore, when you want the user to make one choice from many or more than one, use the Button object to create a Radio or Checkbox button. When creating checkboxes and radio buttons you can make the buttons look like custom checkboxes by using the specially-designed borders from the Checkboxes category and there are a series of additional graphics provided in the Component Graphics subdirectory of your installation.

Checkboxes and Radio Buttons do not have actions attached in quite the same way as normal buttons because they are designed for users to change their mind so actions don’t necessarily get triggered immediately.

Opus includes a special Button Up or Button Down trigger so you can respond to the state of the button. Any actions attached to these triggers will happen as soon as the state of the button changes – much like a push button would. There is also an If Button Down trigger on the Programming tab which allows you to trigger actions at a later time depending on the state of the button. This is often used when the radio buttons/checkboxes let users pick a number of options and then press another button to confirm their choices.

Alternaitvely you can link the status of the buttons to a variable and then test the variable (using the If statement from the Programming tab, for example) to decide what you should do. Note also that the status of these buttons are indicated as true or false – the status Is true if the button is down and false if it is up. Therefore you can test the button directly without a variable by using a line of script similar to:

if (CheckBox1 == true)

{

list of actions if CheckBox1 is down

}

 

Graphical Buttons

There are two ways to include graphical buttons in your publication.

  1. You can add triggers and action to an Image object and set different appearances or even different images to the Normal, Mouse Over and Mouse Pressed appearances.

  2. You can add an image to the Button object by selecting the image on the Image tab of the Button properties. The image can be added to a button with or without the Colour settings on the Button tab. If the Colour setting is on you will get the appearance of an image on a standard button. If it is off you will simply get the graphic (similar to the result in option 1). You can use vector format graphics such as ILV as well as bitmpa graphics.

Adding Images to Buttons

Images added to buttons can be set to appear in different ways and different positions according to the align Image setting on the Button tab.

Full

This will cause the image to fill the button. Use the options on the Image tab to preserve the aspect ratio of the image or to centre the image.

Left/Right/Top/Bottom

These options will centre the button in a small area towards the left, right, top or bottom edge. The spacing setting will set the padding between the edge if the button and the image. This is ideal for creating image-based checkboxes and radio buttons.

Image Settings

The settings on the Image tab will also impact how the image appears on the button so sclae to fit and preserve aspect ratio in particular may be required.

Related Topics:

The Button tab on Properties dialog

Understanding Radio Buttons