Replace disabled image buttons with dummy images

Scenario: You've provided visual feedback on disabled interactive objects in Adobe Captivate using superimposed highlight boxes, but your client has now decided he wants to use image buttons instead, and has requested that they show a disabled state in addition to the usual down, up and over states. To further emphasize the fact that an object is no longer clickable, the client wants the hand cursor to change to an arrow cursor when the button is disabled.

How can you give this client everything he asks for?

Techniques required to achieve this interaction

You can keep your client happy and meet his requirements by manipulating a copy of the button image so that it looks disabled, and then using advanced actions to Hide the original interactive object and Show this doctored image version when it’s disabled. Hiding the image button entirely also changes the hand cursor into an arrow (just as disabling it does) because there is no longer an interactive object at that location on the slide.


Step-by-step

  1. Insert a button into your Adobe Captivate slide. (By default Captivate will insert either a text button or a transparent button depending on the Cp version.)
  2. Select the new button and in the Properties tab > General accordion change the Button Type to Image Button.
  3. Scroll the list of buttons provided. If none are suitable, you can click the folder icon to the right of the Button Type drop-down field to navigate to the Gallery > Buttons > More folder of the Captivate install directory and see even more buttons.

    If you look through the images in this folder you will notice that each image button is actually made up of three images; one for down state, another for up state, and a third for the mouse over state. For this example I’ve selected three round image buttons (larger versions of the ones shown above) and inserted them into my slide.
  4. Take a copy of one of the button images and open it in a graphics editor. I’ve used a copy of the down state image for each of my buttons because it already looks a bit disabled.
  5. Edit the image so that it looks like a disabled version of the normal button. I find this can easily be achieved by reducing the colour saturation of the image so that it turns grey. For example, in Adobe Fireworks you can easily adjust Saturation via a slider control. Most other graphics editors have similar features. 

    Alternatively, if you prefer not to resort to using a graphics editor, you can also use the Image Edit features inside Adobe Captivate itself to modify a copy of one of the image button graphics.

    For example, in the screenshot below, I’ve taken a copy of the down image PNG file from one of the image buttons in the Gallery, inserted it into a Captivate project, and changed it's appearance by selecting the Gray Scale option and reducing Alpha to 50%.  The resulting image looks like a disabled version of the button.
  6. Insert these modified images onto the same slide as the original image buttons.  (If need be, you can further fine tune the appearance using Captivate’s built-in Image Edit adjustments.  The great thing about such changes is that they are only applied to the image, and don't permanently change the image file itself.)
  7. Edit the item Names of all buttons and related images so that they will be easy to match up when creating the advanced actions in later steps. For example, I’ve named my image button ImageButton_1 and the equivalent disabled image as ImageButton_1_Replace.
  8. Select all disabled images and in Properties tab deselect Visible in Output so that they will be initially hidden at run-time.
  9. Position the disabled image versions in exactly the same X and Y coordinate position as their image button equivalents, but on layers lower down in the timeline order. This should mean that you can now only see the image buttons on slide and not the disabled images.
  10. Go to Project > Advanced Actions to open the dialog (or use Shift + F9) and create a new standard action.
  11. Give the action a suitable name and set the actions as follows:
    - Hide one of the image buttons.
    - Show the relevant ‘disabled’ image of that same button.
  12. Add any other actions that might be required for that button (e.g. navigation actions, etc).
  13. Click the Save As Action button at the bottom of the dialog.
  14. Click the Duplicate Action icon () in the top corner of the Advanced Actions dialog.
  15. Rename the new duplicate action and edit the action lines to Hide one of the other buttons and Show its relevant disabled image.
  16. Repeat the previous steps to create similar standard actions required for other buttons that will at some point be disabled.
  17. When all required standard actions have been created and saved, click the Close button to exit the Advanced Actions dialog.
  18. Select each of the buttons and set their On Success actions to execute the relevant standard action that will hide them and show their disabled state image.
  19. When all actions have been assigned, save changes to the project and publish to test the functionality. You should see each image button appear greyed out after being clicked and the mouse cursor should be an arrow, not a hand, when placed over any disabled button.

Your image buttons will now change to a greyed out appearance to more vividly communicate their disabled state after being clicked.  If you want to re-enable the buttons again at a later time, all you need to do is create another similar advanced action that hides the disabled state images and shows the image button again.
 


If you liked this topic, you'll also like these...

 

IF YOU LIKE WHAT YOU'VE READ ABOVE, THERE'S PLENTY MORE!

Join more than 2500 other Adobe Captivate users just like yourself and receive regular troubleshooting tips, illustrated tutorials, technical information, and creative solutions to real-world e-learning development issues. (See an example here.) Click the button below to join our community.  It's completely FREE!