Skip to main content
N
neatsweller
Inspiring
May 21, 2018
Answered

Publishing in HTML5 - delays & rollover slidelets

  • May 21, 2018
  • 1 reply
  • 879 views

I am currently testing a couple of our existing captivate courses publishing in HTML5 instead of SWF. I have come across a couple of issues and just looking for advice on how best to handle. Our courses are all software simulations with a learning section (guiding them on where to click) and assessments (no guidance but essentially the same). We use clickboxes and text entry boxes to move to the next slide. All of our slides are divided into 2 parts: Instructions with clickbox/teb with pause. After the pause, the action is demonstrated, usually just the mouse clicking in the desired location + a highlight box.

My problems so far are:

- between each slide, we have a blank slide (0.1 seconds in length). This slide does 2 things: 1. moves the mouse just out of the way to top left. 2. advanced action on entry jumps to next slide. This is so that the mouse is not showing for the next slide - for the first half when we are giving an instruction.

In SWF output, this works seamlessly. You don't notice there is a jump between slides. In the HTML5 output, there is a noticeable flicker between slides. it doesn't show up as an issue on the HTML5 tracker. It's also evident on very small projects - 5 slides and very large ones.

- rollover images are working, but rollover slidelets are not. We rely quite a bit on the rollover slidelet functionality where a hover over a hotspot can invoke an action - like jumping to the next slide. This doesn't work with rollover images. Are there any HTML5 elements that could replicate this functionality,

Lastly, the software we are simulating requires a mouse, so our training is not going anywhere near a touchscreen device anytime soon. My understanding is that we need to move to HTML5, as SWF is not going to be supported in the future. But I really don't need any of the touchscreen functionality in HTML5. Is the latest advice still to switch?

Thanks so much!

Anita

    This topic has been closed for replies.
    Correct answer RodWard

    Your 'flicker' is due to the fact that HTML5 content doesn't preload in the same way SWF does.  The content for each slide gets loaded when you reach that slide, hence the slide delay in loading the slide which you are seeing as a flicker.  I've found you can often reduce this significantly by making sure each of the slides share the same Master Slide backgrounds if possible.

    As far as rollover objects are concerned, you need to remember that any SWF objects will not be compatible with HTML5 output.  So rollover slidelets are out of the question.

    Rollover Captions and Rollover Image objects can be used, but ONLY for users that will be viewing the content as HTML5 on desktop systems using mouse navigation.  If you have learners that will be viewing your content via touchscreen devices, then you need to redesign your courses to eliminate rollover actions as these do not apply for mobile devices.

    If your learners will be on desktops with mouse-driven navigation and you want to use rollover events to trigger actions but you don't have advanced JavaScript programming skills...then...check out the CpExtra HTML5 widget:

    http://www.infosemantics.com.au/adobe-captivate-widgets/cpextra/help/command-variables/events-and-actions

    It allows you to add and remove event listeners for rollover events without needing to use programming code.

    1 reply

    RodWard
    Community Expert
    RodWardCommunity ExpertCorrect answer
    Community Expert
    May 21, 2018

    Your 'flicker' is due to the fact that HTML5 content doesn't preload in the same way SWF does.  The content for each slide gets loaded when you reach that slide, hence the slide delay in loading the slide which you are seeing as a flicker.  I've found you can often reduce this significantly by making sure each of the slides share the same Master Slide backgrounds if possible.

    As far as rollover objects are concerned, you need to remember that any SWF objects will not be compatible with HTML5 output.  So rollover slidelets are out of the question.

    Rollover Captions and Rollover Image objects can be used, but ONLY for users that will be viewing the content as HTML5 on desktop systems using mouse navigation.  If you have learners that will be viewing your content via touchscreen devices, then you need to redesign your courses to eliminate rollover actions as these do not apply for mobile devices.

    If your learners will be on desktops with mouse-driven navigation and you want to use rollover events to trigger actions but you don't have advanced JavaScript programming skills...then...check out the CpExtra HTML5 widget:

    http://www.infosemantics.com.au/adobe-captivate-widgets/cpextra/help/command-variables/events-and-actions

    It allows you to add and remove event listeners for rollover events without needing to use programming code.

    Lilybiri
    Lilybiri
    Legend
    May 21, 2018

    Not sure this could help, but since it often ignored wanted to add this small tip to the complete answer by Rod: a shape can also be used as rollover shape. It doesn't have the features of a rollover slidelet, but you can fill with an image and use as a text container, thus combining the featres of rollover caption and rollover image.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices