Custom image buttons in Captivate

Custom image buttons are a great way of creating a unique look or corporate themed buttons for your captivate projects. Image buttons can contain up to three different button states. States are the different visual appearances of a button which will change depending upon how the button is being interacted with. The three states are:

UP: The up state is visible when the mouse cursor  isn’t over the button
OVER: The over state is visible when the mouse cursor is over the button
DOWN: The down state is visible when the button is clicked on

Images

Many different image file formats can be used to create image buttons, such as jpeg, gif and png. But it is important that you choose one format for your button states. If you try and create a button from mixed file formats it won’t work.

A bit of image processing know-how and a bit of creativity too will allow you to create your own buttons states. Photoshop would be a good choice of image processing software. But if you don’t know Photoshop, there are many different resources that might help you create some. Here are some examples I have found with a quick Google search:

http://dabuttonfactory.com/

http://www.makebutton.com/

To create an image button, we need 3 different images, one for each of the three buttons states: up, over and down.

Here are three that I have created using: http://dabuttonfactory.com/

Names

The naming of the images is crucial. The initial name of your button is up to you. I have chosen the initial name of products. After the initial name we need to indicate what state each image is:

_up is used to indicate the up state

_over is used to indicate the over state

_down is used to indicate the down state

Example of the names given for each state: the state is indicated at the top and the file name for each image is indicated below the buttons.

It is essential that you use the underscore _ and you use lowercase characters for the words: up, over and down, and of course your spelling is correct.

At the end of your name you may or may not see the file type such as .png, .jpg, .gif – that will depend upon your operating system settings. Also ensure that all files are saved in the same location.

Creating the image button

Click on the Insert Button icon in the toolbar

Change the Button Type to Image Button in the General section of the Properties Inspector.

 

Click on the folder icon (indicated in red above) to navigate to where the files are saved. Choose one of the images for the button – you will not be able to select them all. Captivate will automatically search the same location for all the images that will make the different states for the button.

Your image button will now be complete, test the button by pressing F8 and check to make sure all the interactions work. All you have to do next is to give your button a function to control what it does.

So make sure your project is unique and stands out from rest – create some custom image buttons.

 

 

 

 

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.