Captivate 5: How to make a button really transparent

December 2, 2010

Here’s the situation: I had some Captivate projects that I’d converted from Captivate 3 to Captivate 5. Some of these had transparent buttons over the top of text in a text caption box to give the illusion of a clickable link when you hovered over them in the published movie.

I wanted to try making them proper text buttons, with transparency, in Captivate 5 because the default button text looks much better in Captivate 5 than it did in Captivate 3. So I tried that, only to find that I couldn’t get the text on the button to align on the left (text is only centered if it wraps because it’s longer than the button width). So, back to making these text buttons into transparent buttons.

However, when I changed the button from a Text Button back to a Transparent Button, it wasn’t transparent at all — it had a gray background and a green border and totally obscured the text in the caption box.

For a non-Photoshop person like me, getting rid of the gray fill and the green border wasn’t super intuitive, which is why I’m writing this post about it — I may as well share my knowledge and help someone else who gets a bit lost trying to do the same thing.

OK, here goes…

Here are the properties for the transparent Text Button:

I clicked the drop-down arrow and selected Transparent Button (which is a different beast from a Text Button with transparency applied):

As soon as I selected Transparent Button, the properties changed to show a Fill color of gray and a Stroke (border) color of bright green. Arrggh!

To change the Fill color, I double-clicked on the gray color swatch and got a panel of color selections. The critical thing on this panel is the Alpha value. 100% means fully opaque (i.e. no transparency). To get full transparency, click on the 100 and change the Alpha value to 0. Press the Enter key after changing it to make it stick and to close the color panel.

Now go to the value to the right of the Width slider and change the 1 to 0. This removes the green Stroke (border) from the now-transparent button.

You now have a truly transparent button!

If you want to make this the default style for all future Transparent Buttons you insert, click the save icon near the top of the Properties panel:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: