HTML5 Web Objects slow to load

Report · Dec 06, 2016

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?

Report · Dec 06, 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

Report · Dec 06, 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.

Report · Dec 06, 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

Report · Dec 07, 2016

Did you try to 'show' a hidden oam with a Delay action?

Report · Dec 07, 2016

Hi Lilybiri,

How would I go about doing that, and what would be the benefit. Would it load the oam in the background?

Thanks,

Richard

Report · Dec 07, 2016

It is just an idea. I would keep the audio in the OAM object, but delay its appearance on the slide either with the timeline, or with the command Delay Next actions which is available in CP9. The other objects can be loaded when entering the slide, but the OAM is loaded later.

Report · Dec 07, 2016

How would I specifically target the OAM file on the slide using advanced actions? I can get the slide to pause, but the OAM on the slide continues playing.

Also, if I keep the audio in the OAM file, when its imported into CP9, it automatically plays the audio, even when you're not on the slide. Its hard to do anything in Captivate when all of the audio is playing. I'm not sure if this is a bug or not?! Seems like it is. I don't want to add a pause at the beginning of the Animate CC animation, because then I'd have to un-pause it in Captivate, and don't know how to do that. I expect its hard as the html content is loaded into an iframe.

Report · Dec 06, 2016

Thanks for your reply Steve,

I have already set both the Captivate project settings and my Animate animation to 30 fps. I think my issue is like Ron Ward noted. The browsers are loading the timeline audio slightly before the animations, so I have a slight synchronization issue between the two.

Regards,

Richard

Report · Dec 07, 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.