Turn an Image into a Button





Update: If you are using 11.5.0476 or later, you can use a bitmap image (or a SVG) directly as button, without having to insert it as fill in a shape. It can have InBuilt states, but you cannot save the object style, which is a drawback. You'll find more info in this recent post:

Intro

This will be a short tip to explain how you can quickly turn an image into a shape button. I had to explain this already multiple times and wonder why this easy work flow seems to remain a secret to many users. 

Step by Step

  1. Check the size of the image, width and height if the image has the correct size, or the width/height ratio if you want to have a smaller button than the image. You can do this in Captivate as well: insert the image on a slide, and check the size in the Transform accordion.
     Examples: image is 100px wide and 80 px high, you want a button with a width of 75px, the height will have to be 60px.
  2. Insert a smart shape with the wanted size/shape (triangle of 75 x 60 for this example); use the Transform accordion again; and check the option 'Use as button' 
  3. Edit the stroke as wanted - in the image I turned off the stroke (width = 0) but to avoid possible artifacts, choose also color of the background for the stroke. Click then on the Fill button.
  4. Default fill of shapes is a gradient (second choice), first choice is a solid color, but it is the third button that you'll have to click (Image).
  5. Some default textures are available, but you want a custom image, click on the Browser icon, and point to the image in the Library (because you have inserted that image before, it will be available in the library). In the Edit image dialog you can keep the default settings, click on OK.
  6. Your button is ready, you can time it, activate the pause option if wanted. Like all shape buttons it will have two states: not pressed, and pressed. Watch the fill: you'll see a thumbnail version of your image.

Conclusion

I prefer largely this work flow over creating image buttons, where you need to make three images, use names that end on _up, _down, _over. Of course, you only have two states for these shape buttons.

13 responses
Yes it is an easier option. I have also used PowerPoint to create a bespoke image and used this flow to activate it as a button. Its also useful for question slides which are normally so restricted this option of shape buttons can come in really handy. Thank you for another useful post
Shape buttons are my favourite new feature, they are so powerful and not very well known at all. Thanks for comment.
Thanks for the helpful post Lieve!
In my experience the image can get pixelated when you use it in a smartshape. It will only look ok when the image is originally the same size as the smartshape. So I always resize my picture first (outside captivate) and then add it to the smartshape as background. Only way to keep the quality ok.
Downscaling is mostly OK, can even be better. But upscaling is always a bad choice.
I am not sure why this is your preferred workflow. Typically, when I am creating a button, it is a combination of shapes, graphics and text. I then place click box over it and I am done. I guess I can use Joann'e suggestion of creating the bespoke button in PPT and saving it as an image. But what I am not clear on is why I would do this? I don't see this method as being any more or less straightforward than the other method. Can you illuminate me please?
Why use several objects when you can have the same functionality in one object, shape button? It not only saves on file size, but managing the timeline is a lot easier. Moreover, contrary to your click boxes, the user will have a real button, with a rollover/up/down state which you can configure in Captivate itself, no need for a graphical application like for image buttons. But the most important reason is that a shape button can be used on master slides, on question slides, on score slides, and also timed for the rest of the project if you need control like show/hide. That is impossible with click boxes and with normal boxes. Not enough reasons?
Thanks, I appreciate the explanation. I get why you would want to do this sometimes.
Please keep to your old routines, don't bother to read something on my blog. I will never use your work flows anymore since shape buttons appeared, that are vector based, that you can save and hopefully in a near future we will be able to import SVG's. If you cannot see any advantage in using shape buttons, that is up to you, but you are missing a lot.
I am troubled by your reply. Ouch! Did you misread what I wrote? I thanked you and said I got it!
Thanks Lieve. Your explanation was quite helpful (as always). However, what I could not understand is why Adobe can't allow an image to be used as a button directly from the Properties inspector the way they allow shapes.
2 visitors upvoted this post.