Adobe Captivate: Custom Buttons Made Easy

When inserting buttons onto a Captivate slide, you can elect to use a Text button (you'll end up with a gray button and you can control the text that appears on the button's face) or an Image button (you can select from several images containing canned text).

The process of inserting a button is simple. Choose Insert > Button, select your button type, select the button action and click OK. Done.

However, since Captivate does not currently offer a "button editor" where you can create buttons on the fly, you might think it's beyond you to create your own buttons. Maybe you think you need to know PhotoShop to create a custom button. Or maybe you think custom buttons are too expensive? Read on...

There are many sites you can find on the Web that allow you to create custom buttons. The site that I use (because it's inexpensive and easy to use) is ButtonGenerator.com. Many of the buttons you create at ButtonGenerator.com are actually free (and you can't beat that).

Using ButtonGenerator.com, I created the following three buttons in about 30 seconds:

I gave the three buttons the following names:

• kevincustom_up.bmp
• kevincustom_over.bmp
• kevincustom_down.bmp

The names are important. Notice that the three buttons are very similar, but contain the words up, over and down. When inserted onto your Captivate slide, the buttons will automatically include a JavaScript rollover behavior--but you won't have to know anything about JavaScript. If the button is not clicked by your users, the "up" version of the button appears on the slide. If the user points to the button with their mouse, the "over" version of the button will appear. If the user clicks the button, the "down" version will appear. Sweet!

I saved all three buttons as bitmaps (ButtonGenerator lets you save as PNG or BMP... I had better luck with BMPs) to the following location: C:\Program Files\Adobe\Adobe Captivate 3\Gallery\Buttons. (Note: The buttons you add to the Buttons folder will not be available for use within Captivate until you exit and restart Captivate.)

After creating the buttons, start Captivate and open a slide. Choose Insert > Button and select Image button as the button Type.

Select your custom button from the button image drop-down menu.

Finally, preview the project to see and test your new button.

---

Got a Captivate production problem that's making you pull your hair out? Email your problem and let others learn solutions from your experience.

---

Want to learn more about Captivate? Click here.

Comments

[blueharmony]

Very cool tip -- I just signed up for an account at the site you recommended.

-Marc

[Erica]

I have successful created and imported my custom buttons as you explained. However, in preview mode, the button does not actually appear. If you hover over the area, the curor changes to the "pointer finger" as if there's a button there and if you click the area, it performs as if the button is there. I just can't get it to show... Help!

[Kevin Siegel]

Erica,

Check the names of the three button images--the names must be exactly as mentioned above.

Kevin

[Carol]

I've got the same problem as Erica. I created one button. However, I didn't name it Kevin--sorry, Kevin. One time it was invisible in Edit mode, the other time (I deleted the original and tried again) it was invisible when the Captivate ran for the user. I want to create a bunch of buttons, each with a link to an internal technical reference manual. The thing I find frustrating (and ridiculous) about the buttons provided with Captivate is that you can't resize them. Our technical reference links are fairly long, and unless I use a .01 font, I can't fit them in the teensy weensy buttons that Captivate provides. Very frustrating, as I'm not a developer and don't know how to use graphics programs to just "create" one magically in PhotoShop or whatever. Suggestions?

[Kevin Siegel]

I'm betting it's the format of the images (PNG vs. JPG vs GIF vs BMP). Try opening the three buttons in an image editing application and saving them as BMPs. You don't have to use a fancy application to Save As. When I double-click an image, it opens in the free MS Viewer which allows me to save images from PNG to BMP.

[ldragon]

Hey thanks! I got the whole naming convention thing, but had stored it in my own folder. Moving it to the right folder and having to restart Captivate would have taken me forever to figure out!

[Jason]

Thank you -- this totally worked in Captivate 4

[Eda Coskuner]

Hi,

thank you for this valuable information. It is easy indeed! Downside, though: you cannot modify the text in the buttons - have to create a new set of 3 buttons for each different text =(

There are several button sets available in Cp4, so we could use those. Is there a way to modify the text inside the buttons? So far, I couldn't find it.

Thanks in advance!
Eda COSKUNER

[Deb]

Thanks!! This is exactly what I was looking for!

[Steve]

A trick I use... create blank buttons (no text)

Then place a text caption box over the top of the button with whatever you wanted the button to say... (important! - make the timing of your button the same as this text caption)

Then without photoshop or any other graphic program... you can create whatever button name you want on the fly...

[Tim]

How about this scenario:

-You create a button,
-You add it to the Captivate Gallery on your computer,
-You add it to your project,
-You decide that you want to make a change to it, so you edit it in your image editor, and save it with the same file name as the original,
-You replace the similarly named button files in your computer's Captivate gallery,
-You go back into your project and delete the old image button from the slide it appears on,
-You Choose Insert > Button and select Image button like before.

Here is where the problem occurs. Why is Captivate still pulling the old button files? And how can I fix this?

When I insert the button into a new project, I get the new button. However, if I attempt to add it to my existing project, I still get the old button - even though I updated the button files in my computer's gallery.

Obviously, my existing project is holding on to the old button files. If I save the new button files with different file names, I am successful adding them to my existing project, but I want to avoid this. I want to keep my button gallery clean.

How can I clear these old button instances out of my existing project? I tried clearing my project's cache, but that didn't work. Where are these files stored locally in my project? They are not in my project's library and I don't know where else to look.

Thanks!
Tim