ADOBE CAPTIVATE 2019: An Alternative to Rollover Captions and Rollover Images

I have always loved using rollover captions and rollover images in my Adobe Captivate projects. The problem is that while I love them, HTML5 does not. In the images below, you can see a rollover caption in action (in the first image, there's no rollover caption; in the second image the hidden caption, which is attached to the image, appears when the learner rolls their mouse over the image of the number 2).

While they offer an awesome level of interactivity to your eLearning, rollover captions and rollover images are not HTML5 compliant. (They will not work correctly on mobile devices.) Sadly, if you run the HTML5 tracker (Project > HTML5 Tracker), the rollover captions will be flagged as Unsupported.

The good news is that you can still use rollover captions in your projects... you just can't use rollover captions. I know, I know... it's confusing, right? You can get the same functionality of rollover captions by deploying shapes as buttons and then using Inbuilt States. (This sounds complicated but it's super easy.)   To begin, I inserted a shape onto the slide (I used a rectangle shape).

I set the properties of the shape (on the Properties inspector) to a Fill of 0% Opacity and 0 Stroke.

Then I positioned the now transparent shape over the image I wanted learners to roll over.

My goal is to use a state in place of a rollover caption. To use states effectively, I need the shape to be treated as an interactive object. That's easy enough to take care of via the Properties inspector > Use as Button.

I didn't want the button/shape to actually do anything except allow for the state to kick in so I set its Action to No Action.

And now... the State!   With the shape selected, I accessed State View.

I selected RollOver, which is an Inbuilt State (meaning it's a State that exists in all projects by default).

I inserted a Text Caption onto the RollOver State and then exited State View.

The net result is the same as using a rollover caption: the caption appears only when learners roll over the transparent shape. However, when I open the HTML5 Tracker there are no longer errors about unsupported objects.

***   Looking for Captivate training? Check out our live, online (instructor-led) Adobe Captivate classes.

Comments

[Tina Gibson]

Thank you! I like this much better than the hint with a button method I've been using!