Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #306639 Score: 0
    Profile photo of Dynamic Business Services
    Dynamic Business Services
    Member
    beginner
    intermediate
    friend finder
    contributor
    3 pts
    @DavidSyril

    Hi,

    Has anyone been able to stop the white flicker when they upload to an LMS. I’d like to try and pre-load the next page and only show it when all of the assets are loaded. Similar to how Storyline 2 loads. This should stop you seeing all the assets load at different times.

    Thanks

    #306641 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    129 pts
    @mnotermans5114

    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

    #306643 Score: 0
    Profile photo of Dynamic Business Services
    Dynamic Business Services
    Member
    beginner
    intermediate
    friend finder
    contributor
    3 pts
    @DavidSyril

    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

    #306645 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    129 pts
    @mnotermans5114

    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.

     

    Kind regards,

    Math

    #306646 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    129 pts
    @mnotermans5114

    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

    #306647 Score: 0
    Profile photo of Dynamic Business Services
    Dynamic Business Services
    Member
    beginner
    intermediate
    friend finder
    contributor
    3 pts
    @DavidSyril

    Thanks,

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

    #306648 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    339 pts
    @ssneg

    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 🙂

    #306653 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    129 pts
    @mnotermans5114

    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…

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

    Kind regards,
    Math

    #306663 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    117 pts
    @jvalley4735

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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.