Intro

From what I learned on the forums in  2021, many developers are still busy with conversion of legacy courses (SWF output) to HTML5 output. That can be very boring and time consuming.  This blog gives a quick overview of three solutions for a common issue: the HTML Tracker (under Project) will detect all Rollovers and flag them as incompatible. That means for Rollover Slidelet, Rollover Caption, Rollover Image.

In reality non-compativility is only true for Rollover slidelets: those are SWF-based and are useless. However Rollover caption/image can still be used in courses provided they are accessed only from devices with rollover events: desktop, laptop (either with mouse or trackpad).  They will not be functional on mobile devices (tablet, phone) because those 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 Rollover captions. They will not be an exact replacement. Rollovers typically have two 'events':

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

Consequence: the learner has full control over the duration of the image/text screen using movements of mouse or trackpad.  The mouse movement needs to be replaced by a tap event (click). Tap events exist for interactive objects (and hyperlinks). 

To explore the three possible workflows (Success image, Two-state object, Shared action) you can choose between an interactive Captivate course (audio included) or reading a textual summary.

Captivate tutorial

In the tutorial I used some design elements from the Quick Start Project 'Earth'. All interactions are custom. You can watch the embedded version, but I recommend to use this link because it will give you a scalable version. To see the original rollovers, you need to use a laptop or desktop (with mouse or trackpad). Here is the link:

Converting Rollovers for HTML5 output

Embedded version:

Step-by-step workflows

1. Using Success feedback shape

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. Using Two-state object (toggle)

• 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.

If you didn't watch the Captivate tutorial, watch this one-slide project. It  has been taken out of the complete tutorial. 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. 

Conclusion

The tutorial was created with the most recent version (11.5.5.553) of Captivate, but the workflows can be used in Captivate 11, 10 and 9. That is also valid for the shared action. If you never used a shared action, you can find a short course in this blog. Look for 'Who is afraid of Shared Actions?'. 

All Click/Reveal workflows are a possible replacement for rollover text/image. My choice for these particular ones was made based on their timesaving features. With exception for the second workflow, the learner will not have total control over the duration of the reveal information which they have with a rollover. On the positive side, the second and third workflow allow to have multiple texts and images pop up which was not possible with rollover Caption/Image. It was possible with Rollover slidelets, but they died with the demise of the Flash Player.

The workflows suppose that you are able to open the legacy projects in your present version of Captivate, and that you still have access to the raw files (cptx). If that is not the case, have a look at this blog:

Conversion from SWF to HTML5