Skip to main content
R
richardc90538533
Participating Frequently
December 6, 2016
Question

HTML5 Web Objects slow to load

  • December 6, 2016
  • 2 replies
  • 1624 views

I have a Captivate 9 course with about 50 slides. Some are quizzes and drag and drops, the rest have animations created in Animate CC. The animations from Animate have been output as html and js files, and the images compressed using the tinypng website. These have then been packaged up and then imported/placed on Captivate slides as a HTML5 web objects. The voice over audio has been imported directly into Captivate, and added to the slides timeline.

My issue is with the loading time of the web objects when I view the training. Each time I move from one slide to the next I experience a background flash before the content has loaded. I can't see that the preloader makes much difference to this, whatever percentage I choose. The web objects and audio also frequently go out of sync.

Does anyone have any tips to limit the background flash on web objects?

    This topic has been closed for replies.

    2 replies

    eLearning Guy
    eLearning Guy
    Inspiring
    December 8, 2016

    I've done lots of event video objects, HTML5 embeds, and also Edge Animate projects (not Animate CC though) and I haven't noticed a flash but I think that's likely because I always use a SmartShape as a background for whatever I'm loading. For example, if loading an external video, I would have a dark (usually black) rectangle the size of my video. I then place the web object over top of that, sized to match. This way when the user goes to that slide, they will see the background and not a blank space. The content usually loads within a second of the slide loading. Of course that part of it is out of your hands, for the most part, as it depends on variables such as the server hosting the embedded content, internet bandwidth, etc.

    One thought - perhaps do like YouTube, etc. do and have a static image of your Animate project that is on the slide, and then the web object over top of that. Similar visual "trick" to what I do with the videos.

    S
    StevePixel
    Inspiring
    December 6, 2016

    Hi Richard,

    Sounds like you have couple of things going on. You are creating animations in Animate and then importing them and trying to match the audio in Captivate. if this is correct I suspect the audio is out of sync because of frame rates, what was your animation frame rate set to in Animate?

    In terms of loading, how long are the animation and how big are the files?

    Cheers

    Steve

    RodWard
    Community Expert
    RodWardCommunity Expert
    Community Expert
    December 7, 2016

    If the audio has been added to the slide timeline then it will start playing as soon as the slide is loaded but if the animation hasn't finished downloading by that same point then there's obviously going to be a synchronisation issue between the two.  You might be better off having the audio in the animation rather than having it added to the slide timeline.  That way the audio and the animation should be ready to go together.

    R
    richardc90538533Author
    Participating Frequently
    December 7, 2016

    Hi Ron,

    Thanks for your reply.

    Yes, I think that's probably the issue. How would I package it all together though? Exporting from Animate CC creates either an aom file, or the same set of html, js, image and sounds files, that you then have to zip up in order to import into Captivate as a web object. Looking at the published Captivate project files, Captivate un-packages the oam or zip content on each slide. So wouldn't that still give me the same synchronization issue?

    Also, I'm having a hard time testing a packaged oam or zip file, because if you import an oam or zip file with sound into Captivate, Captivate automatically plays the sound. Which is pretty annoying. If you add a pause at the beginning the Animate file, you then have to have a way to un-pause it in Captivate, and I just want the animation to start without anyone clicking anything. This was one of the reasons that I separated out the animations, importing them in from Animate, and putting the audio directly on the Captivate timeline.

    Are there any other things I could do or try?

    Regards,

    Richard

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