Page Flashing When Navigating

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

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

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

www.LectoraDeveloper.com

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:

undefinediframe width="1009" height="662" frameborder="0" scrolling="no" src="intro.html" name="contentframe"undefined

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

www.LectoraDeveloper.com

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

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

www.LectoraDeveloper.com

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

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?

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.

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

www.LectoraDeveloper.com

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