How to customize a Splash screen (Poster image) for its customers and mobile / tablet learning solutions
September 5, 2017
How to customize a Splash screen (Poster image) for its customers and mobile / tablet learning solutions
September 5, 2017
I have been working as e-learning project manager and instructional designer for many years in Europe. I hold a master's degree in training engineering and multimedia. Prior to this I worked in the edutainment field for software editors.
Newbie 10 posts
Followers: 22 people

When we develop a WebApp or a mobile application (Android or Apple) we usually develop a screen called “Splash screen” (Poster image) that appears before the loading of the application. This screen identifies the project that is being launched and can display a title, an illustration, a learning objective, a company’s logo or other.

With Captivate a screen with a white background and an arrow is generated by default when we publish a responsive project, so this video shows how to customize this screen in order that users, trainees, customers are able to immediately identify the application they are launching as they can do it when they launch their WebApps or Android / Apple mobile applications.

As teaching aid this video uses a responsive project made with fluid boxes.

You can look at this video by clicking on the link or picture below.

All Comments
Sort by:  Most Recent
Jun 20, 2020
Jun 20, 2020

My updated ‘PosterImage.png’ has an arrow pointing to the start button, like the attached screenshot. I am looking for someone to help me figure out why I’m not seeing my changes after republishing the project to my computer and FTPing the files to my hosting company.

https://lauralanoue.com/eLearning/HTML/OldMacDonald/HTML/

I am confused because when I inspect the element in the browser, it shows that the source file for my poster image is this path that is about 800 lines long or so. This is crazy and I have no idea why that is happening. Is it an issue with my hosting company? Or, is it something that is a bug in the trail version of Captivate?? I intend to purchase a subscription when the trial time runs out if all goes well. Thanks in advance for any ideas as to how to problem solve this.

Attachment

Like
()
(9)
Jun 20, 2020
Jun 20, 2020
>
aural93581897
's comment

Here is a screenshot of the browser in Inspect Element mode. I have no idea what is happening here. Should I try another hosting company?

Attachment

Like
()
Jun 20, 2020
Jun 20, 2020
>
aural93581897
's comment

Another screenshot of the Safari Inspect Element window. If you click the link for the image file, you will see that it is extremely long.

Attachment

Like
()
Jun 20, 2020
Jun 20, 2020
>
aural93581897
's comment

You are a Mac user, I am on Windows. There are quite a lot of issues with Safari, did you check at least once in another browser?

Like
()
Jun 20, 2020
Jun 20, 2020
>
Lieve Weymeis
's comment

Yes. I am seeing the same issue in Google Chrome. I have another screenshot here to show you. It is not updating my audio file for the Llama either. I will try another hosting server later today.

 

Attachment

Like
()
Jun 21, 2020
Jun 21, 2020
>
aural93581897
's comment

Sorry, we live in different timezones.

Personally I never keep the original arrow play button, but include an image of a button IN the poster image, about the same size as the original button, centered vertically and horizontally. To be able to hide the original button, replace it by an png which is empty, only transparent pixels. The button can be found under HTML\Assets\HTMLimages. It is labeled ‘play_icon.png’ I keep the original button as ‘play_icon_old.png’ in case I need to get it back later.

Have no idea why the original play button doesn’t show up. Maybe you could try my workflow, and it is still active somewhere under your poster image. A static cover can normally not prevent the interactivity of a button. It is only a workaround of course?

Like
()
Jun 21, 2020
Jun 21, 2020
>
aural93581897
's comment

Hello Laura, the first remark I have is that this tutorial video I had made was for responsive projects made with fluid boxes intended to be seen on mobile phones whereas it seems that your project is a normal project made for desktop. So if the delivery are PC/MAC desktops you do not need to create a splashcreen. You can also create a first slide as entrance.

However I have checked your link with Edge, Opera mini, Chrome, Mozilla and have had any problem with the loading. The loading time was correct. What I have seen is normal, I have seen the splashscreen you have created with an arrow then your drag & drop exercise (the submit button doens’t work). So if you don’t that the splashcreen be seen, just remove it. For a non responsive project you don’t need it.

At last, according to the settings of the server it can sometimes takes several minutes or hours before seeing the update you have made.

Like
()
Jun 21, 2020
Jun 21, 2020
>
Jean michel Jullien
's comment

Excusez-moi pour une petite correction. AutoPlay is turned off for all screens, not only for mobile since the second version of CP2016 for HTML5 output. This means that to make the experience more pleasant for the user, you will want a poster image as well. Too bad, but the first slide cannot be used as a poster image.

Like
()
Jun 22, 2020
Jun 22, 2020
>
Lieve Weymeis
's comment

For sure we cannot use the first slide as poster image, but when we make a training project for pc format only, we usually use the first slide as presentation with an illustration, a title, or a button, or a text of presentation or something else according to how we want to introduce its project. This way is often used and is possible.

Like
()
Jun 22, 2020
Jun 22, 2020
>
Jean michel Jullien
's comment

You seem not to understand my answer. You told that you don’t need a poster image for a non-responsive project. I corrected that because you DO NEED it if you publish to HTML5, where Autoplay is disabled. Please do not avoid my statement, you talk about something different.

Like
()
Nov 27, 2019
Nov 27, 2019

Just tested one of my published courses, which has a splash screen. Works perfectly. Can you test it on your side:

Play/pause button

 

Like
()
Nov 27, 2019
Nov 27, 2019

My splash screen does not play in Internet Explorer or in Edge browsers. It does show up in Chrome and Firefox. Is there another setting or something I need to do to ensure the splash screen shows up in Explorer and Edge? Any help is greatly appreciated!!!!!!!

Like
()
(5)
Nov 27, 2019
Nov 27, 2019
>
Karen Collins
's comment

Non-responsive project? Did you follow the instructions I posted in the link to my blog post (longer than this video)?

Like
()
Nov 27, 2019
Nov 27, 2019
>
Lieve Weymeis
's comment

Yes, and the splash screen appears in Chrome and Firefox, but not in Internet Explorer and Edge?

Like
()
Nov 28, 2019
Nov 28, 2019
>
Karen Collins
's comment

Hello Karen, I have tested again with IE and Edge and it works on my side. May be have you some options in the settings of your browsers that prevent a normal display.

Like
()
Nov 29, 2019
Nov 29, 2019
>
Jean michel Jullien
's comment

Hi Jean,

Thanks for checking. I will have to have IT check the browsers on our network.

Like
()
Dec 10, 2019
Dec 10, 2019
>
Karen Collins
's comment

FYI, I changed the image to a jpg and it worked in all browsers. I Still do not know why the png did not work in IE or Edge.

Like
()