There are times when a training module covers a real item that exists in the world and needs to show the parts of the item to the user. This might be for product information for a sales person or technical information for an installer or other user of a product that would benefit from seeing the item. There are exciting opportunities to simulate the item in AR or VR applications or even using a 3D video tour, but for those times when that level of technology is not available, there are some creative ways to work with traditional photos taken from different perspectives, and using state changes triggered by advanced actions to allow the user to turn the item to see relevant details.  

This sample material comes from a course I worked on for new bank tellers who had to learn about handling currency and coins. As you can see from the screen shot below, the page was set up with the face portrait of each common coin displayed.

The directive text in blue italic indicates that the user should select an icon to zoom in or rotate each coin. Even though the icons aren’t labeled, it should be clear to the learner that the magnifying glass is for zooming in and the curved arrow by the cube is for rotation. If that isn’t readily apparent, the learner can click things and see the results, learning by exploration. The text below the coins changes depending on which coin’s icon has been selected. 

For each coin, we captured a view of the face side of the coin and of the edge of the coin, focused on allowing a visual of whether the edge was smooth or reeded. We used Photoshop to isolate the images and to export both large and small versions. Using a small version of the image rather than resizing a larger image after it is already in Captivate helps to keep the file size manageable.

Captivate’s Advanced Actions do allow for lots of programming control over what happens on your slide and when it happens, but they can be complex to set up. For example, for this slide, I had to set up a number of actions. Here is an overview of what happens on this slide:

  • On Enter, there is an Advanced Action to initialize the slide. Actions were set up to:
    • Change the state of each image to Normal (in case the slide had previously been visited).
    • Set variables that the icons triggered to the appropriate state (0 or 1).
    • Hide the text that appears below the coins.
  • Clicking a magnifying glass icon triggers a zoom Advanced Action for that coin. The If/Else structure of Captivates Advanced Actions allows this to work as a toggle switch, where the zoom variable switches from 0 to 1 or from 1 to 0. The following also takes place:
    • The state of the coin’s image would change from to Zoom if the variable started at 0, or Normal if the variable started at 1.
    • The other coin images were all set to Normal (this helped to manage onscreen real estate and prevent overlapping images).
  • Likewise, clicking a rotate icon would trigger a rotate Advanced Action. This was like the zoom Advanced Action, but it would also show the small or large edge image state depending on the variables already set by the zoom action.

The image below shows the Advanced Actions for the zoom on the penny (only the “If” section shows here as the “Else” section is collapsed).

 

When doing a rapid development project in Captivate, I’m honestly more likely to use a template to get the right kind of interaction, but for this client, a custom-built interaction was the preferred solution. If you look through the rest of the sample project, you’ll notice that there are also custom versions of an interactive graphic and a click and reveal button interaction. Throughout, the style, color theme, and background are consistent. Click the thumbnail below to launch the sample in a new tab:

More Projects