Get rid of White start screen with Black button (HTML output)

March 28, 2018
Lieve is a civil engineer (ir) and a professional musician. After years of teaching and research (project management/eLearning/instability) she is now a freelancer specializing in advanced Adobe Captivate as trainer and consultant. Her blog is popular with Captivate users worldwide. As an Adobe Community Professional and Adobe Education Leader, she has presented both online and offline. Since 2015 she is moderator on the Adobe forums and was named as Forum Legend (special category) in the Wall of Fame. In 2017 Adobe Captivate users voted for Lieve as a Top Content Experience Strategist.
Legend 68 posts
Followers: 106 people
Consultant and Trainer for Advanced Captivate. Specialized in personalised training for individuals or groups, live and online.
18

Get rid of White start screen with Black button (HTML output)

Lieve is a civil engineer (ir) and a professional musician. After years of teaching and research (project management/eLearning/instability) she is now a freelancer specializing in advanced Adobe Captivate as trainer and consultant. Her blog is popular with Captivate users worldwide. As an Adobe Community Professional and Adobe Education Leader, she has presented both online and offline. Since 2015 she is moderator on the Adobe forums and was named as Forum Legend (special category) in the Wall of Fame. In 2017 Adobe Captivate users voted for Lieve as a Top Content Experience Strategist.
Legend 68 posts
Followers: 106 people
March 28, 2018
 Users of CP2019: it is no longer necessary to use the workaround to turn off the focus rectangle around the play icon on ths start screen. It has been removed, one of the tiny gems in CP2019
Edited on 16th of June to add a tweaking discovered in aother thread to get rid of the rectangle surrounding the original play icon (blue in Chrome, dotted line in Edge).

Intro

This short blog post is meant to help solving an issue that pops up in the forums once in a while: “How to get rid of the white screen and Play button on mobile devices?”. When publishing to HTML the AutoPlay is automatically disabled,  Reason is that some devices and OS (iOS) do not allow Autoplay. For SWF output you had the choice: it was possible to change the default setting which was to have a movie playing automatically after loading. I often disabled that option when embedding SWF’s on my blog (look at older articles), especially when audio was involved because it is not very polite to have audio being pushed to the reader automatically.

Consequence of the AutoPlay being disabled without your control as developer, is the appearance of a big white screen with a small play button right in the middle. The button looks like this (but originally one is smaller, 96×96), black arrow in black circle with transparent background:

Such a button will not always blend well in the design of your project.

Poster image

To get rid of the white screen, you need to create a “poster image”? That is a static image, preferably with the same resolution as your project. For a non-responsive project, published with Rescalable turned on, the poster image will fill up the screen. All embedded HTML movies in my blog were using this type.

Mostly I duplicate a slide from the project to create such a poster image, Duplicate because it may need some editing, especially if you also want to have a better looking Play arrow. I will take a screenshot of that slide while it is playing to save as a PNG (or other image format) and then hide the slide to avoid it to be included in output.

When the image is ready, set up the Preferences, Project, Start and End: turn off AutoPlay and indicate the poster image.

Play Arrow

My personal hack to have a play arrow that is fitting with the design of each project is this workflow:

  • I created a copy of the original image  Cwirogram FilesAdobeAdobe Captivate 2017 x64HTMLassetshtmlimagesPlayI_icon.png and edited to turn it into a full transparent image
  • I renamed the original image and put the empty image in the same path.
  • On the poster image I created an arrow, mostly I use a triangular shape, rotated 90°, using colors from the project Theme Colors palette. You will have seen them in previous blog posts.
  • That Arrow has to be centered horizontally and vertically.

Dimmed or not Dimmed?

The uploaded published HTML project will by default have a dimmed Poster image (Alpha = 70%). It was meant to have the original Play icon stand out from the background. But that black play icon is gone:

A helpful user on the forum posted the solution: Mark Sabrento  Thanks a lot, Mark (screenname sabre123). I tried it out and it works great. You find it in this  thread.

Look for the file CPM.js, which you’ll find in the published folder under assetsjs

Open his file in an editor (I use Brackets, but even simple Notepad is possible). Change 0.7 to 1 in this line to set the opacity(alpha)  to 100%

cp.autoplayImage.style.opacity=0.7

Comments (18)
2018-10-03 16:26:43
2018-10-03 16:26:43

Hi, great tutorial this was very helpful. I hope I can ask a few questions:

I created a 1024×768 (project size) loading screen which has a “button” on the image just for display purposes, created a transparent .png of the same size to replace Play_icon.png – this is the size of the screen meant so that the user can click anywhere to start, and when i resize the button in the css file, the loading screen gets bumped up. Also when i re-zip the contents after editing the code, my LMS isn’t allowing it saying it’s missing  imsmanifest.xml. Any help?

Attachment

Like
2018-09-15 10:24:58
2018-09-15 10:24:58

Hello if it can help people and to complete the Lieve’s post, I had made a video and a blog page about this problematic. It is better to see the video first.

Video: https://elearning.adobe.com/preview/15711/

Blog page: https://elearning.adobe.com/preview/17121/

Around the 12th minute in the video you can see a solution about the way we can remove the rectangle surrounding the play icon or the poster image inserted.

 

Like
(2)
>
Jean michel Jullien
's comment
2018-09-16 17:33:55
2018-09-16 17:33:55
>
Jean michel Jullien
's comment

It is no longer necessary in CP2019, the rectangle is no longer there.

Like
>
Lieve Weymeis
's comment
2018-09-17 17:28:21
2018-09-17 17:28:21
>
Lieve Weymeis
's comment

Hello, my video was about Cp 2017 but you’ve right for the rectangle with Cp 2019.

As I know that a lot people continue using Cp2017 I put the right links which were  wrong in my last post:

Video: https://elearning.adobe.com/2017/09/customize-splash-screen-poster-image-customers-mobile-tablet-learning-solutions/

Blog page: https://elearning.adobe.com/2017/11/make-responsive-splash-screen-poster-image-several-pictures/

 

Like
2018-08-21 16:27:29
2018-08-21 16:27:29

I have perfected this poster image, play button, remove the dimmer, remove the box…for Chrome.  However, IE will not display the poster image!  I don’t write javascript, help!  Is there a workaround like with the css file that does not involve getting into javascript? I need a solution for both audiences, Chrome and IE!

Like
(1)
>
laurens74767062
's comment
2018-08-21 16:56:27
2018-08-21 16:56:27
>
laurens74767062
's comment

Strange, I also use Chrome and the poster image displays for me. Look at this link, in Chrome, from my most recent blog:

Hyperlink for Close Button

 

Like
2018-08-16 04:07:33
2018-08-16 04:07:33

I keep trying to add a comment with my setup but for some reason it doesn’t seem to be going through.

Like
(6)
>
MisterJT3
's comment
2018-08-16 07:32:16
2018-08-16 07:32:16
>
MisterJT3
's comment

You comment, like anything else in this portal, has to be approved and that can take a while. Sorry about that, not due to me at all. As author of that blog post I am not at all responsivle for this approvement. My personal blog doesn’t suffer from this problem.Thanks for extending my workflow with a more permanent solution if you alwats want to use the same workflow. 

Like
>
Lieve Weymeis
's comment
2018-08-16 12:24:27
2018-08-16 12:24:27
>
Lieve Weymeis
's comment

It’s fine I figured there was something like that but usually a site will indicate that your post is awaiting approval. Instead, here it just went straight back to the post giving no indication at all. I know that’s out of yours or anyone but Adobes control. Just kind of new here so wasn’t sure if it was actually working or not.

Like
>
MisterJT3
's comment
2018-08-16 12:28:23
2018-08-16 12:28:23
>
MisterJT3
's comment

Also, the workflow with this setup is still easily modified. The real benefit to this setup is that you only have to configure how you want it one time for your project, rather than every single time you publish it.

Like
>
MisterJT3
's comment
2018-08-16 12:32:25
2018-08-16 12:32:25
>
MisterJT3
's comment

Understand, for some reason the warning about moderation has disappeared, except for authors of a blog post. Warning is not there for comments, nor for answers to a question.

Like
>
MisterJT3
's comment
2018-08-16 12:34:54
2018-08-16 12:34:54
>
MisterJT3
's comment

For you it is ‘easily modified’. The big majority of CP-users doesn’t like to edit JS or other files.  You still will have to create a poster image, correct? If only Adobe would add the functionality to choose a slide as poster image.

Like
>
Lieve Weymeis
's comment
2018-08-16 15:14:47
2018-08-16 15:14:47
>
Lieve Weymeis
's comment

Yes, you must still create a poster image with my method and I agree it would be nice to choose a slide for that purpose.

As for the big majority of users not wanting to edit files, you have to edit files regardless of the method used. So if people have a problem editing files then I guess neither method is really for them.

However, for those that don’t have a problem editing files then I’d choose my setup any day of the week because it’s less work over the course of a project.  You can set it up once or you can opt to create more work for yourself and edit a generated CSS and JS file after each project publish.

Like
2018-08-16 04:04:24
2018-08-16 04:04:24

I think I have a solution that is a bit better in regards to implementation in order to keep you from having to edit files all the time. To start with I’ll mention that I opted for having the Play button completely transparent as mentioned in the main post.  But I also made mine the same size as the Poster image I created.  Regardless, the implementation is the same no matter what appearance you go for.

First, create a custom CSS file that contains any custom settings you want to make to the size/position etc. of the Play button. Make sure to tag every setting you want to override with !important to ensure your settings are chosen above all others that may exist or be inherited from. Then place the file in Adobe Captivate 2017 x64 HTML assets css to ensure it is included every time you publish your project. I’ll post a copy of my CSS if anyone wants to see it.
*:focus{outline:0;}.autoPlayButton{width:1024px !important;height:768px !important;left:0 !important;top:0 !important;}
 

Next, edit the index.html file located 2 levels up in the HTML folder and add a <link> to your custom CSS near the top of the document just before the first <style> element with the text/css information. Again, this ensures that this modification is included every time you publish a project. (Be sure to make a backup copy of your index.html file if you haven’t already in case you need to revert changes and forget what you did down the road.)

 

Finally, create a custom javascript file and insert the following code in the file.  Place the file in the assets\js folder that is up 1 level from the CSS folder and then add a <script> reference to the file to ensure that it too is included in your project publishes.  Alternatively, you could opt to add some javascript directly to the index.html file that was edited earlier. However, with this method, you can expand upon any custom CSS that you want to create and maintain externally.
window.addEventListener(“moduleReadyEvent”, function (evt) {
cp.autoplayImage.style.opacity = 1; //set poster image to 100% opacity
});

Like
(1)
(1)
>
MisterJT3
's comment
2018-09-13 19:36:51
2018-09-13 19:36:51
>
MisterJT3
's comment

Epic solution. Worked perfectly! Many thanks.

Like
2018-07-17 19:32:34
2018-07-17 19:32:34

Where do you find the image files???

Like
(1)
>
laurens74767062
's comment
2018-07-18 07:52:26
2018-07-18 07:52:26
>
laurens74767062
's comment

What do you mean? Which image files do you point at?

Like
2018-03-29 23:59:42
2018-03-29 23:59:42

I have bookmarked this review. It is nice to have best practice work-around when it comes to sound. Thank you for sharing.

Like
Add your comment