Explore the community Forums Lectora Tips and tricks Page Flashing When Navigating

Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #310368 Score: 0
    Profile photo of Peter Jackson
    Peter Jackson
    Member
    beginner
    intermediate
    advanced
    friend finder
    contributor
    junior moderator
    wise owl
    group mod
    entry
    winner
    17 pts
    @pjackson2462

    G’day All,

    I think I have a solution to minimize the flashing to white that we get when navigating to another page in a Lectora title, however, I need a good example to test my idea, therefore, if you find the page flashing annoying and you are happy to share a small title with the community please send me a message and I will provide an upload link.

    With your title I will first prove that I have a solution and then create  Shared Content for all to see so please ensure you are happy to share with all:-)

    HTH

    Regards, Peter

    http://www.LectoraDeveloper.com

    #310377 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
    336 pts
    @ssneg

    All of these samples have flashing, you could use one of those: http://trivantis.com/e-learning-course-samples

    #310397 Score: 0
    Profile photo of Peter Jackson
    Peter Jackson
    Member
    beginner
    intermediate
    advanced
    friend finder
    contributor
    junior moderator
    wise owl
    group mod
    entry
    winner
    17 pts
    @pjackson2462

    G’day Sergey,

    Thanks for you reply, however, I did use “Top 5 Beaches Course” as my first test but I could not see any significant flashing, it was there but most of the community would not see it as a big deal. I do know that this is a big ask but if you know that one of these is really bad then I will use that one.  If not then I will try them all – thanks.

    Regards, Peter

    http://www.LectoraDeveloper.com

    #310407 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
    336 pts
    @ssneg

    Try this. It’s the last year’s LUC app (except I disabled device scaling). Looking forward to see what you have achieved.

    Attachments:
    1. Archive.zip
    #310504 Score: 0
    Profile photo of Peter Jackson
    Peter Jackson
    Member
    beginner
    intermediate
    advanced
    friend finder
    contributor
    junior moderator
    wise owl
    group mod
    entry
    winner
    17 pts
    @pjackson2462

    G’day Sergey,

    You just found the flaw in my solution, the title must have a background image and all pages must be the same size as the background image.

    That said, I used the Let’s Cook and made some changes like removing the intro flash file as it just takes time to load and play, also, I changed the background so it was one image and not made up from multiple bits.  When testing the links below keep in mind that I have not made changes to any of the popups and they maybe larger the the main pages.

    I have placed the published files in two separate folders so there’s no need to clear the cache between the one that flashes and the one that has minimal flashing. Please do try the flashing one first so you can clearly see the flashing, then try the other.

    Let’s Cook with flashing

    Let’s Cook with minimal flashing

    This is achieved by creating a new index.html file that will open the title in an iFrame, the following is the index.html file for the minimal flashing:

    <html>
    <head>
    <title>Lets Cook</title>
    <style>
    div.content {
    layer-background-image: url(images/background_full.jpg);
    background-image:url(images/background_full.jpg);
    background-position:center top;
    background-repeat:no-repeat
    }
    </style>
    </head>
    <body bgcolor=”#ffffff”>
    <div class=”content” align=”center”>
    <iframe width=”1009″ height=”662″ frameborder=”0″ scrolling=”no” src=”intro.html” name=”contentframe”></iframe>
    </div>
    </body>
    </html>

    When I published I set the first page name to intro.html and the index.html is an attachment and is in the extern folder.

    Lastly, I have not tested this with responsive design in Lectora 16, so all of the above maybe moot??

    Please note that no cooks were harmed in these examples 🙂

    Regards, Peter

    http://www.LectoraDeveloper.com

    #310523 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
    119 pts
    @mnotermans5114

    Hi Peter, for me when checking the 2 versions..they actually do look identical. Both have no ( or almost none ) flashing when going to the next page. ( Windows 10 in Firefox )

    What i do notice a lot though are not optimized pngs. What i mean is, they are big in kb, and thus you see the image build. This can be tackled by reducing the filesize of images. For jpegs you have to use your design tools to get an optimal image. Weighing size and quality. For pngs there is a free photoshop plug called SuperPNG ( http://www.fnordware.com/superpng/ ) that greatly reduces sizes of any png maintaining optimal quality. It works great, i reduced pngs from 200kb to 40kb with it loosing no visible quality at all.

    Kind regards,

    Math

    #310524 Score: 0
    Profile photo of Peter Jackson
    Peter Jackson
    Member
    beginner
    intermediate
    advanced
    friend finder
    contributor
    junior moderator
    wise owl
    group mod
    entry
    winner
    17 pts
    @pjackson2462

    G’day Math,

    Thanks for your input, the Let’s Cook title is from http://trivantis.com/e-learning-course-samples and is not mine, I also suspected that the image sizes contribute to the flashing so I did not want to alter them.

    Excellent input – thanks.

    Regards, Peter

    http://www.LectoraDeveloper.com

    #310556 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
    336 pts
    @ssneg

    So do I understand correctly that you wrapped the whole course into an extra frame and added the background image of the course to it?

    #310567 Score: 0
    Profile photo of Peter Jackson
    Peter Jackson
    Member
    beginner
    intermediate
    advanced
    friend finder
    contributor
    junior moderator
    wise owl
    group mod
    entry
    winner
    17 pts
    @pjackson2462

    G’day Sergey,

    Yes, that’s correct, the course is wrapped.  If we select the “Include Title Manager Frame” when publishing we get the same thing (the course is wrapped) and that would be a good place to insert this background image.

    It does not stop the actual flashing, however, instead of seeing blank white nothingness we see the background image in the main page – the wrapper.

    Also, if the background image includes the images of the background objects like menu, back, next, TOC, etc then when we navigate it just looks like all of the current page objects are cleared and the new page objects are shown.

    As I said in my first sentence: “I have a solution to minimize the flashing”, I’m not sure if we could ever eliminate it with the current method of navigation.

    Regards, Peter

    http://www.LectoraDeveloper.com

    #312049 Score: 0
    Profile photo of Ian Ross
    Ian Ross
    Member
    beginner
    intermediate
    Group Member
    curious george
    contributor
    wise owl
    1 pt
    @iross7469

    I am thinking more about this, and with Lectora 16, I do not believe that this solution will work with he Mobile view, due to different backgrounds etc. We were surprised when we developed our first custom app at the flashing, our customer was not happy at all. We are also a Storyline shop and if I look at HTML5 output from Storyline this “flashing” issue does not exist. I do realize that there are a lot of other issues with the HTML5 output from storyline, we rally thought that the new features in lectora 16, with the responsive Web development, would throw lectora as a main tool for our courseware development. This “flashing” is a show stopper for us and I do not think we will continue with anymore development for custom courseware using Lectora, unless specifically requested by a client. Back to Bootstrap for mobile development.

    #312357 Score: 0
    Profile photo of Peter Jackson
    Peter Jackson
    Member
    beginner
    intermediate
    advanced
    friend finder
    contributor
    junior moderator
    wise owl
    group mod
    entry
    winner
    17 pts
    @pjackson2462

    G’day Ian,

    I’m really sorry to hear that you are not going to continue development with Lectora.  I too have a customer that will not accept the flashing issue and whilst this solution does not fix the problem it does reduce it to an acceptable level.  That said, I have not given up on a solution so I would request and with respect ask that you take a look at this post from time to time, say fortnightly as I do have a lot of plates spinning at this time.  I will also have all my customers upgraded to version 16 by mid next month.

    Best regards, Peter

    http://www.LectoraDeveloper.com

    #312358 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    200 pts
    @Klaatu

    Someone that has this flashing issue post a sample. FOUC, or better known as flash of un-styled content, has been around for a long time and there are fixes but we need a solid sample to look into the cause.

    DRS

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

You must be logged in to reply to this topic.