Pre-loading next page

Hi,

One difference between Storyline and Lectora is the way slides or pages are shown. SL2 uses its own flash-based player, and thus can work the way you describe. Lectora uses pure html and each page is its own html page and thus needs to load.

Offcourse there are solutions for the hard cut between pages. One is using a jQuery transition to fade out the existing html and then show the next page. But that wont get you the nice fading transition you want.. it only fades out and then in again.

An few ideas i do have for quite some time, but didnt have time to experiment with are these:

Idea1:

Setup a layered awt. with a external html's showing the next and previous page.

Ensure the current page is on top.

Load the next page into the external html object.

When loading is done you can show it anyway you want

Idea2:

Make a one page project of it.

Set your current page to a position in view...

Around it are divs and elements making up the next pages.

On a next page, the complete content moves/animates into view.

Both ideas i didnot work out in Lectora, mainly because it is not easy to maintain for bigger projects or to teamup with others in these setups, and i do teamup a lot ;-)

For small overseeable projects however, both solutions can work fine.

Kind regards,

Math

Hi David,

Dont have any working examples of it im afraid.

SL2 still uses flash, also when it is HTML5 only... it uses its own player in all situations... and that is flash based.

If you publish HTML5 only it still uses the Articulate player.

As Lectora allready publishes each page as its own html, you can load any of these pages into a external html object

and then display them. If projects and time allows, i make a quick sample.

undefined

Kind regards,

Math

Hi David,

Made a sample of one of the approaches i mentioned earlier... not 100% happy with it, because this way the publishing process really slows down... and this is only a small sample... but well use it for inspiration... you at least can get really smooth page transitions this way...

http://community.trivantis.com/shared-content/page-transitions-and-preloading/

Kind regards,

Math

Thanks for your swift response Math,

When SL2 solely uses the HTML 5 output of courses the loading is smooth. It waits until the next page is loaded before moving on to it. This would be the ideal solution.

Do you have any working examples of these ideas you are able to share? Or would you kindly go into further detail. I'm uncertain how you would load the next page using the external html object? And also setting your page to a position in view.

Could there be a way to pre-load the next page in Lectora and delay the movement to the next page until the next page has loaded. Or is there any plugins that you know of that could be useful?

Many thanks

David

Hi David,

This is a nice solution, allthough if you look closely it still is the standard fadeOut/fadeIn solution i mentioned first. But when keeping that in mind in your initial design you can achieve nice results with this solution.

http://miguel-perez.github.io/smoothState.js/index.html

Regards,

Math

A zero-development workaround would be to copy the largest images from the next page to the current page, so that they are loaded while the learner reads the current page. When he goes to the next page, the assets will load much faster since they already have been downloaded.

But it'd be a good idea to add a "preload page assets" feature to ObjLayerActionGoTo function so that when a learner clicks a link, Lectora spins a spinner for a second or two but then the next page is loaded instantly. I think I tried to build something like this a while ago but cannot remember if it worked :)

Thanks,

I'll have a go at implementing this into one of our test courses.

Thanks @mnotermans5114 for your willingness to create and share examples!