If you have ever used Adobe Captivate to create a Hot Spot Quiz Question, then you would know this small pulsing animation very well. It’s function is simply to indicate where on the screen the user has clicked.
For example, let’s say you need to test if learners can correctly identify a particular country, state or territory on a map, a particular control on a software interface, or perhaps the correct body part on an anatomy drawing. The Hot Spot quiz question type is perfect for this requirement. Animations like this one allow the user to indicate an answer to the question so that the answer can be automatically evaluated to a correct or incorrect result.
However, there’s a problem.
Captivate only offers a choice of SWF hotspot animations!
By default, if you publish to HTML5, Adobe Captivate will use an HTML5 animation as the hotspot indicator. But the default HTML5 hotspot is a really ugly low quality animation that only seems to look acceptable on a purely white background. On any other background it’s not going to look professional at all. Back when most Captivate courses were published to SWF you had the choice of more than 40 different SWF hot spot animations. But these are not compatible with HTML5 output.
The screenshot below left shows the Quiz tab section that allows the developer to specify the hot spot animation. If you leave it at the Default Animation, and click the folder icon on the right end of the Hotspot field, a Browse dialog will open. By default this will open to the \Gallery\HotSpots folder in the Captivate install directory. As you can see from the screenshot at right below, all files here are SWF and that means that none of them are usable for HTML5 output.
Now you probably guessed that the Browse dialog that you now have open would allow you to select files in other locations, and you would be correct. There are other hotspot files nearby in the Captivate install directory at this location: Gallery\HotspotShapes\icons However, these are just static PNG images, not animations. It would seem that Adobe has overlooked the fact that hotspot questions need animations that are compatible with HTML5 e-learning.
So, what kind of alternatives are there to SWF hotspot animations? And where can you find them?
Animated GIFs
At this point in time, the easiest solution to this problem is simply to use Animated GIFs. They are relatively easy to find and/or purchase on the internet. And if you happen to have a graphics editor such as Adobe PhotoShop, or an animation tool such as Adobe Animate, then you can even create your own without too much effort.
In fact the red pulsing animation you see at the beginning of this page is actually one I created in Adobe Animate that looks almost identical to the default SWF hotspot animation that ships with Captivate. You can download a ZIP file containing the animated GIF and the Adobe Animate FLA file that was used to create it by clicking the button below.
Once you unpack the ZIP file and extract the GIF, just save it to a folder on your computer hard drive and then use the folder icon in the Quiz tab > Hotspot section to navigate to the GIF and select it for use in your HTML5 project. But note that you will need to do this for all new HTML5 projects.
If you don’t like a red pulsing animation, feel free to edit the source FLA file in Adobe Animate and change the colour or form to something else that suits your project better.
If you have another Adobe Captivate problem you’re grappling with, send us a message via the Contact form button below. Maybe we can help you with it.
