September 5, 2017
How to customize a Splash screen (Poster image) for its customers and mobile / tablet learning solutions
Comments
(25)
September 5, 2017
How to customize a Splash screen (Poster image) for its customers and mobile / tablet learning solutions
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: 20 people
(25)

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.

25 Comments
2020-06-20 15:06:10
2020-06-20 15:06:10

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)
>
aural93581897
's comment
2020-06-20 15:10:25
2020-06-20 15:10:25
>
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
>
aural93581897
's comment
2020-06-20 15:13:37
2020-06-20 15:13:37
>
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
>
aural93581897
's comment
2020-06-20 15:24:05
2020-06-20 15:24:05
>
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
>
Lieve Weymeis
's comment
2020-06-20 15:47:37
2020-06-20 15:47:37
>
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
>
aural93581897
's comment
2020-06-21 07:56:24
2020-06-21 07:56:24
>
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
>
aural93581897
's comment
2020-06-21 12:01:12
2020-06-21 12:01:12
>
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
>
Jean michel Jullien
's comment
2020-06-21 20:23:28
2020-06-21 20:23:28
>
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
>
Lieve Weymeis
's comment
2020-06-22 17:38:28
2020-06-22 17:38:28
>
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
>
Jean michel Jullien
's comment
2020-06-22 19:27:44
2020-06-22 19:27:44
>
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
2019-11-27 19:45:57
2019-11-27 19:45:57

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
2019-11-27 17:52:21
2019-11-27 17:52:21

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)
>
Karen Collins
's comment
2019-11-27 18:08:36
2019-11-27 18:08:36
>
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
>
Lieve Weymeis
's comment
2019-11-27 19:20:07
2019-11-27 19:20:07
>
Lieve Weymeis
's comment

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

Like
>
Karen Collins
's comment
2019-11-28 12:32:19
2019-11-28 12:32:19
>
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
>
Jean michel Jullien
's comment
2019-11-29 13:27:26
2019-11-29 13:27:26
>
Jean michel Jullien
's comment

Hi Jean,

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

Like
>
Karen Collins
's comment
2019-12-10 17:04:02
2019-12-10 17:04:02
>
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
2018-10-03 16:45:03
2018-10-03 16:45:03

hi great tutorial! when i change my width/height of the play_icon in the css, my entire loading screen image is bumped up the bigger i make my clickable area. im trying to make the entire screen (1024×768) clickable.

Like
2018-09-17 07:32:27
2018-09-17 07:32:27

A reference to the original posts/threads  published about this problem, with multiple solutions added would have been a nice supplement to your tutorial. Here is one link which I updated recently because the blue focus rectangle around the play icon has been removed in CP2019.

https://elearning.adobe.com/2018/03/get-rid-white-start-screen-black-button-html-output/

Like
(1)
>
Lieve Weymeis
's comment
2018-09-17 17:46:24
2018-09-17 17:46:24
>
Lieve Weymeis
's comment

Hello Lieve, as written at the top of the page I have published this video at the beginning of September 2017 and it would have been difficult to make a reference to your page written more than 6 months later. You had also let comments  on my Youtube channel about this video one year ago. It is a good idea to make an update for Cp 2019 here, for you and for all users as well.

Like
2018-03-30 00:47:35
2018-03-30 00:47:35

Wow, what a neat way to learn how to add a splash screen. I had no idea! Thank you so much for sharing. Great work.

Like
2018-02-14 22:39:44
2018-02-14 22:39:44

This is an excellent tutorial. Thank you so much. Getting rid of the mobile arrow will make it look much better. Is there anyway to have the Splash screen come up for a few seconds and then continue to run the Captivate Project without the user having to click. So I guess what I’m asking is there a way through maybe JavaScript to generate a click?

Like
(1)
>
slewis6337
's comment
2018-02-23 20:11:05
2018-02-23 20:11:05
>
slewis6337
's comment

Hi thank you for your appreciation.
Displaying the Splash screen for a few seconds and getting the project automatically without clicking is not possible from Captivate. To me the solution is the one you mention with Javascript but I don’t have deep knowledge of Javascript and unfortunately I am not able to give you a solution.
I hope a person reading this will give us the relevant js file to modify with the code. it would be cool.

Like
2018-01-14 14:18:12
2018-01-14 14:18:12

You can also read in the Showcase section this step by step process that shows how to make a splash screen with several pictures (and not only one) in order to get a different picture according to the used device. That makes it a splash screen really responsive:

https://elearning.adobe.com/2017/11/make-a-responsive-splash-screen-with-several-pictures/

Like
2017-09-07 16:58:52
2017-09-07 16:58:52

I already commented on the video in YouTube. Thanks for posting this!

Like
Add Comment