October 10, 2020
Image buttons? Do not use them…
Comments
(2)
October 10, 2020
Image buttons? Do not use them…
Lieve is a civil engineer (ir) and a professional musician. After years of teaching and research (project management/eLearning/instability) she is now a freelancer specializing in advanced Adobe Captivate as trainer and consultant. Her blog is popular with Captivate users worldwide. As an Adobe Community Expert and Adobe Education Leader, she has presented both online and offline. Since 2015 she is moderator on the Adobe forums and was named as Forum Legend (special category) in the Wall of Fame. In 2017 Adobe Captivate users voted for Lieve as a Top Content Experience Strategist.
Legend 245 posts
Followers: 409 people
(2)

Intro

A short post, due to seeing regularly questions about Image buttons like this thread which appeared today:

Change the default Quiz buttons

The developer wanted to replace the default Quiz buttons by Image buttons. The problem was that he couldn’t find how to edit the Rollover and Down states for that type of button. Although I already have written a (too) long article comparing the 6 types of buttons in 11.5, I want to focus here why I never recommend to use the (old) Image buttons.

Although this article is about using Image buttons on quiz slides, I didn’t mention it in the title because it has no sense anymore to use that old type of buttons for two main reasons:

  • Its cumbersome creation workflow + the inability to edit the style even slightly in Captivate
  • You cannot add labels in Captivate, they need to be IN the images

Quiz slide buttons

On quiz and score slides it is impossible to use the newer type of buttons (shape button, SVG as button, bitmap image as button) as Quiz buttons, although you can add them as custom buttons if needed (what is not possible with the old type of buttons).

Those ‘old’ button types are Text button, Transparent button and Image button. In the Themes packaged with Captivate the default Quiz button type is mostly ‘Transparent button’ and you’ll see that it is indeed the most flexible of the three available types for Quiz buttons.

Probable reason to want an image button, is perhaps its ‘name’. It looks like that is the only button to allow images, which is not correct.

For content slides, you have (in 11.5) three alternatives: shape buttons (as described below), bitmap images used as buttons, SVGs used as buttons.

Workflow to create Image button with states

Let us start by having a look at the available Quiz buttons of the Image type. If you switch the button type for a quiz button to Image button, you get a dropdown list showing Normal states of several buttons. In this screenshot a Submit button has been chosen.

Those buttons do have the three InBuilt states: Normal, Rollover and Down. You can see them if you open the Object State panel.

However you cannot directly edit the ‘image’ in the states. You can only choose another image from the dropdown list. But that will rarely be what you want, since that list is showing different styles of the Normal state.

Such an image button is associated with THREE image files. Look for the folder LibraryButtons under the Captivate installation folder. You see that the Green submit button has three files, all bitmap. In this case they are PNG, but you’ll also find bmp and jpeg files.

If you want to create a custom Image button, you will need to create three bitmap image files in a graphics application like Photoshop. They need to have exactly the same size, and the names need to end on ‘_up‘ (Normal state), ‘_over‘ (Rollover state) and ‘_down‘ (down state).

It is not necessary to save those images in the Buttons folder, but they need to be in the same folder (can be a project folder). As you have seen with the Gallery buttons, you only need to point to the Normal state, and Captivate will automatically associate the over and down images to the states.

Cumbersome, don’t you agree? Moreover there is no way to add a label in Captivate, you need to create those three images for each button in the Quiz: Submit, Clear, Skip, Back and maybe the Review navigation buttons if you want a custom style for all of them.

Alternative for custom image button

You cannot use the Shape button, but the Transparent button has all the styling features of a shape button, with the exception of the shape form itself. This means that you can Fill the Transparent button with an image.

Have a look at this screenshot, label can be inserted in Captivate:

In this example I inserted an image from the Assets panel. For the best result however, you create an image in exactly the size you want for the button. The complete workflow is explained in this older post, created for filling a shape. It is exactly the same for a Transparent button.

Turn an Image into a Button

2 Comments
2023-07-31 08:45:16
2023-07-31 08:45:16

I am not sure you are pointing to the same type of button as the type described in this blog post? A complete overview of the 6 button types available since version 11.5 can be found in another blog post:

https://blog.lilybiri.com/overvew-6-button-types

The one treated here is the ‘old’ image button, in the same category as the Transparent and Text button. Quiz slides and Score slide have embedded buttons with added functionality, and those buttons need to be from the ‘old’ type. The Continue button on the score slide is such an embedded object, it is the most important object on that slide and you can only replace it by an image button of the ‘old’ type. I wonder what your colleague tried.

My suspicion is that you are talking about an image used as a button. Since version 11.5 both an image and a SVG can be used directly as button. It suffices to activate the option ‘Use as Button’ in their properties panel and you’ll see the Actions tab appear automatically.

 

Like
2023-07-28 21:15:53
2023-07-28 21:15:53

An old ID used an image button for “Continue” after someone has completed a quiz.  This button is intended to perform almost like an exit button, so the can leave the quiz and proceed to the next lesson.  Currently nothing happens when this button is clicked.  I don’t see “Actions” for an image button, and I also do not see the image in the library when I click on the button and “find in library.”  How can I make this button perform the action, or what type of button should I create so I can have the button allow them to exit the lesson/quiz.  Thank you!!

Like
Add Comment