Let’s say one day you’re working on a project in Adobe Captivate and you need to add an interactive button. Rather than just insert a standard text button or transparent button, you decide to change the Button Type to image button because you want it to match a specific visual design or branding requirement, and because you also want to see the look of the button change states. (With an image button the default Up state is shown when there is no user interaction with the button. The button’s appearance changes to an Over state when the user places their mouse cursor over the button, and a Down state when the button is clicked. Three states.)
However, after searching through the dozens of image buttons displayed under Properties > General Button Type in Captivate, you cannot find any that match the look and feel of your particular requirements. So what can you do?
One solution is to create your own custom image button/s so that they match the required branding, and you can re-use them again and again in any projects that require this particular visual treatment.
But just how do you create custom image buttons, and what are the pitfalls to beware of?
About Captivate button types
Adobe Captivate allows you to choose from four different types of interactive buttons:
Text buttons – A simple grey button object with text label. It has default Up, Over, and Down states but you cannot configure their appearance.
Transparent buttons – So named because you can set the value of Fill Alpha down as low as 0% to make them invisible (like click boxes). These buttons have only a single state and do not change on mouseover or click.
Image buttons – These are actually composed of three separate images, one each for Up, Over, and Down states. The area occupied on screen by the button itself corresponds to its ‘hit area’. Captivate comes with about 30 default image buttons. But there are another 200 or so available in the Gallery if you know where to look.
Smart Shape buttons – When used as a button, a Smart Shape becomes a clickable interactive object with its own hit area. Smart Shape buttons have up, over and down states. The down state (when the button is clicked) simply reduces the dimensions of the button by a few pixels but otherwise does not change its appearance.
The first three types of buttons (text, transparent, and image buttons) can all be inserted either via the Object Toolbar on the left side of the Captivate interface, or via the Insert > Standard Objects > Button menu option.
Smart Shapes can also be inserted via the Object Toolbar or via Insert > Standard Objects > Smart Shape. However, once you have a Smart Shape on your slide, you then need to turn it into an interactive object by selecting the Properties tab > Use as Button option.
So as you can see from the above descriptions, only Text buttons and Image buttons have all three Up, Over, and Down states. As mentioned earler, the Text button type doesn’t provide any configuration options to control the look and feel of these states.
So how does using an image button help you to achieve that special look you need?
Image buttons are made of images. Who knew!
As shown in the first image on this page, when you insert a button onto a Captivate slide and change the Button Type to Image Button, you see a scrolling window that contains about 30 different image buttons to choose from. Each of these buttons is in fact a collection of three separate images. One for each of the different Up, Over and Down states and these images are stored in the Adobe Captivate install directory in the Gallery > Buttons folder.
But these are not in fact the only buttons available in Captivate. There are dozens more, and you can get to them just by clicking the small folder icon in the top right corner of the Properties > General accordion.
This then opens up a dialog that shows you the contents of another folder within the Buttons folder that contains over 200 extra image buttons. However, the difference in this case is that when the dialog opens you can actually see the three different images that comprise the actual button and deliver each of the three states.
As you can see below, each image’s filename follows a specific naming convention that indicates which button it belongs to and which state. So the three images in the green Try Again image button are called tryagain_green_up.png, tryagain_green_over.png and tryagain_green_down.png.
If you trawl through the files in this folder you will note that image buttons can be either GIF, PNG, or BMP format. Technically you can probably also create them using JPG as well, but the advantage of the normal three image types used is that they can have transparency. And for an image button that may need to float over the top of other graphics or colored backgrounds on a slide, transparency is definitely desirable.
Creating your own image buttons
So now that we know how image buttons are constructed of thee separate images for Up, Over, and Down state, and we know the folders where these component images are stored in the Captivate install directory, we have the information we need to create more image buttons.
Let’s look at the steps involved in the following example:
Step 1: Create three state images for each button
Some years ago I found two cute clip art images of a cartoon hand. One showed the hand open and the other shows the same hand pointing. I thought they would look good as Back and Next buttons in my Captivate lessons.
So I used a graphics editor (Adobe Fireworks in this case) to reverse the two images so that they were pointing the other way. Then I created a second version of the Over state image that had a red star effect to act as the Down state image. I converted the images to PNG format so that I could make the backgrounds transparent.
When finished, the Up state, Over state and Down state images for each button looked as below:
Step 2: Name the files
Next I named the files according to the correct button naming convention (button_name_up, button_name_over, button_name_down). So the files were named as follows:
left_pointer_up.png
left_pointer_over.png
left_pointer_down.png
right_pointer_up.png
right_pointer_over.png
right_pointer_down.png
A word of caution: Don’t forget that the scrolling area area where image buttons appear in the Properties > General accordion is not very wide. So make sure you keep the button names as short as possible while still using the approved naming convention of placing the state at the end of the name.
Step 3: Place the files in the Gallery > Buttons folder
The next step is to just copy the button files into either the Gallery > Buttons folder, or the Gallery > Buttons > More folder inside the Adobe Captivate install directory.
The advantage of copying to the Gallery > Buttons folder is that these are the buttons shown in the Properties tab > General accordion when you select an image button on a slide. So if you intend to be using these image buttons a lot, then this would definitely be the preferred location.
Step 4: Relaunch Captivate
This step is very important. Even though you’ve copied your new button images into the Gallery > Buttons folder, Captivate won’t show them in the image button viewing area until the next time it is launched.
Step 5: Insert your new image buttons!
Now you should be able to insert an image button on a slide and choose one of your new buttons as the type.
And that’s all there is to it. Pretty cool eh?
Now that you know how to create your own image buttons, you can let your imagination run wild! Try to be observant when watching websites and computer games to be more aware of potential button combinations. Why not create a button from a cartoon character or even a stick man. How about creating image buttons with three different images of the same person’s face? The possibilities are limited only by your own creativity.
But there is a potential pitfall to avoid. See below…
Why won’t my image buttons update after I edit the graphics?
Sometimes Captivate authors will create their own custom image buttons, add them into a project file to see what they look like, then decide they need to make some changes to the original graphics. But after editing the graphic files in the Gallery > Buttons folder, they cannot get the buttons in their project file to reflect those changes. No matter how many times they delete the old buttons and re-insert again from the Gallery the buttons in the project file still show the original buttons as they looked when first inserted.
So what’s going on here?
The fact is, as soon as you add an image button into a Captivate CPTX or CPTL file, all of the images required for that specific image button are cached inside that same project file. Whenever you insert another image button of the same name in that same project, Captivate checks the project file’s internal cache to see if it already has a copy of those images. But here’s the kicker…it only checks the images according to their filenames. It does not check the create date of the images to see if the ones in the Gallery folder might happen to be a later version than the ones it has cached.
As a result, it will continue to use the internally-cached image buttons instead of the updated ones you might want it to use instead.
Some suggested solutions:
- Always test iterations of your custom image buttons on blank Captivate project files that you can throw away afterward. Don’t use your custom image buttons in actual project files until you’ve completely debugged the look and feel and won’t likely be making any more changes to their appearance.
- If you didn’t follow the suggestion above, and now you’ve already added older versions of the buttons to an actual project, you can rename your edited button images in the Gallery and then import them again. Since the filenames will be different, Captivate will think they’re a totally different button.
- If you happen to have Captivate version 7.0.1 or later, you’ll find a new option has been added to the Properties > General accordion to enable you to Delete Unused Button Images from the project file. It should (in theory) allow you to clean out the junk that builds up in project files where lots of old button images accumulate and bloat the file.
