Intro

From several questions in 2021, it looks like many developers are still busy with conversion of legacy courses (SWF output) to HTML5 output. That may be a boring work.  It may be useful to give short instructions for the most common problems. This blog gives a quick overview of a common issue: HTML Tracker (under Project) will detect all Rollovers and flag them as incompatible: Rollover Slidelet, Rollover Caption, Rollover Image.

In reality that is only fully true for Rollover slidelets: they are SWF-based and cannot be used anymore. However Rollover caption/image can still be used in courses which will be accessed only from devices having the rollover events: desktop, laptop.  They will never be visible on mobile devices (tablet, phone) because those devices do not have rollover events. You don’t have a click event, but a tap event.

This article will give you 3 possible workflows to replace rollover images or captions. They will not be an exact replacement. Rollovers typically have two steps:

• Roll over event: triggers the appearance of the image/ text.
• Roll out event: triggers the disappearance of the image/text

This means that the learner has full control over the duration of the image/text being on the screen by movement of their mouse (or on their trackpad).  The mouse movement will have to be replaced by a tap event (click). Tap events exist for interactive objects (and hyperlinks). The sequence of the three solutions is from simple to more complicated.

Soon I plan to publish a Captivate interactive tutorial about the same topic. You’ll find one slide as illustration in the third workflow below.

1. Success feedback shape

An interactive object (button, click box, shape button) has the possibility for a Success and a Failure message. The Success message appears automatically when the object is clicked or tapped for a fixed duration. Default duration is 3 seconds. In recent versions those messages by default use Shapes, not captions  (see Preferences, Defaults).

Rollover Caption replacement (step-by-step)

1. If possible, convert the object used to be ‘rolled over’ to a button. In version 11.5 that is possible for all images. Since version 6 that is possible for shapes and a shape can be used as text container and can be filled with an image.
   If this is not possible, put a click box (or a shape with Alpha and Stroke set to 0) over the object. This may also be necessary if you want multiple rollover objects in one text container.
2. In the Properties panel activate the ‘Success’ message on the Actions tab.
3. Edit the text in the Success message on the stage to the text you want to appear.
4. (optional) Go to the Timing Properties, and edit the duration if you estimate 3 seconds not to be sufficient.

Rollover Image replacement (step-by-step)

1. Identical as for the Caption replacement
2. Ditto
3. Import the image to the Library. It needs to be a bitmap image, SVG is not possible.
4. Check the size of the image
5. Select the Success message on the stage. Delete the default text and use the Options tab (Properties panel to resize the shape to the exact size of the image.
6. In the Properties panel for the message, Style tab, switch Fill to ‘Image’ and select the image to fill the shape.
7. (optional) Edit timing if necessary in the Timing Properties.

Advantage: very simple solution since you use existing design with feedback messages.  The workflow to have a shape size fitting for the image can take some time but for text, no problem. This solution works for all versions supporting HTML5 output.

Drawback: problem with this very simple solution is that the learner has no control over the duration of the text/image which appears when they tap the rollover object.  You can add audio to the Success shape if wanted (options), it will play when the shape appears.

2. Multistate object (toggle)

This solution has been described in detail in this post.  Same workflow can be used to replace Rollover text and image. It is even possible to have both text and (multiple) image(s), and audio. In short:

• Convert the text container or image to a button. For images that is only possible if you are on version 11.5.
• Take out the InBuilt rollover and down states
• Create a custom state where you add the items you want to show when tapping the button
• Add the command ‘Go to Next State’ to the button. That will convert it into a toggle button: first click will show the items (as rollover event does), next click will hide them again because you return to the Normal state (as a Rollout event would do) since you have only two states.

Advantage: learner has control over the duration of the appearance, same as for the old Rollover items. You can add as many items as wanted in the second state: image, text, audio, even video.

Drawback: you need to instruct the learner about the toggle functionality. It may take bit more time than the first solution.

3. Shared action with flexible duration

Both previous workflows have some drawbacks, although they seem rather simple. Do not be afraid of this third workflow, because it may even be the quickest solution to replace rollover captions/images.  Once you have a functional shared action, adding it to replace rollovers in any project is a breeze.  Especially when you work in a team, you don’t need to be an expert in actions to apply a shared action.

To illustrate the workflow, have a look at this one-slide project. You will see three buttons to reveal popups. The popup will disappear automatically after a certain duration (like in Workflow 1). That duration is stored in  a user variable v_duration. In the example you’ll see the default duration, but you can increase or decrease that duration with two small buttons.

You may have seen that an Entrance effect was applied, something what is impossible with the two other workflows.

The duration in the variable for the popup can be set:

• by the developer (default duration or by using an On Enter action for the slide);
• default duration by developer, but ability for the learner to change (as in the example)
• ask the learner the preferred duration using a Text Entry Box or a Scrolling Text Interaction.

Using Shared Action (step-by-step)

1. Convert the rollover area to a button to be tapped/clicked. If that is not possible use a click box.
2. Insert the content you want to pop up when the button is clicked. If you need more than one item, group them (CTRL-G).
3. Make the group invisible in output (eye icon in Properties panel).
4. Assign the shared action ‘ShowItems’ to the Success event of the button. You can download the one I used from this link:
   ShowItems
5. The parameter is the name of the group you want to show.
6. Set the value of the variable: either you use the definition of the variable (Project, Variables) or you can use the On Enter event of the slide with an Assign command.
7. (Optional): If you want to replicate the setup of the example file, add two extra buttons with respectively the commands:
   Decrement v_duration by 1
   Increment v_duration by 1

Advantage: learner has some control over the duration of the appearance depending on the setup. You can group as many items of all nature: images, texts, video, audio…. You can add effects, and even sequencing the appearance with the Delay command.

Drawback: complete control of the duration is not possible.

Look out for the Captivate tutorial illustrating and explaining the workflows in an illustrated way.