I’ve written before about how Flash is pretty much dead, and HTML5 is where it’s at.
But it’s a challenge in Adobe Captivate to figure out what features work in HTML5 and which don’t. Sure, Captivate has an HTML5 tracker, which is very helpful – unless you’ve already built out your entire project and come to discover that none of your interactives are working.
One of the problems with Captivate is that it has a variety of project types (unlike Storyline, which just has one!). Most Captivate project types may be published in Flash (SWF) or HTML5 or both. But if some features only work in Flash, your HTML5 users will be out of luck.
And it’s not obvious to your learners what the problem is at all! I would bet most regular computer users know something about Flash going away, especially since Apple wouldn’t allow Flash in any of its products. But HTML5 isn’t exactly a catchy name for the technology that has replaced it. A user’s browser automatically redirects to either Flash or HTML5 depending on its plugins and settings, so it’s invisible to the user which format they’re using.
Your users will just know that things don’t seem to be working as they should!
I regularly argue for HTML5-centric development. I don’t publish at all in Flash anymore. I assume that no one has Flash enabled, but I know that HTML5 will work across the board, including for mobile devices.
Oddly, some of Captivate’s Rollover features will work in HTML5 output, even though Captivate says that they won’t (again: see HTML5 tracker!).
For kicks, I produced a Captivate blank project that has a variety of rollover/hover-to-reveal features. I published the project only in HTML5. My goal was to discover which features that claim to be Flash-only work in HTML5, and to discover potential workarounds.
Try out my HTML5 Rollover project for yourself!
I discovered that Rollover Captions will still work in HTML5! But I certainly don’t trust them. Rollover Slidelets will not work at all.
However, I found that Smart Shapes are an excellent workaround for facilitating rollover-type effects/hover-to-reveals in Captivate.
Side note: None of Captivate’s “Learning Interactions” will work in HTML5. They are all Flash-based. To ensure that you only create features compatible with HTML5, use Captivate’s Responsive project format. All Flash-only features are disabled in the Responsive format to ensure that the output is HTML5-friendly.
How to Create an HTML5-Friendly Rollover/Hover-to-Reveal
- Create a new smart shape
- Select “use as button” in the Properties pane
- Disable any associated action (the actions are what happens when the user clicks on it, and you don’t need them to click since you just want them to hover)
- States for that shape should now be enabled. Go into State View and create a Rollover state that does what you want. You can add text captions and media to the Rollover state, so that they only appear when the user is rolling over/hovering!
That’s it!
Remember to publish in HTML5, though this would work in Flash also. Ideally, only use Responsive projects in the first place to ensure that your output is HTML5-centric!