Welcome screen in HTML5

I've experimented with this as a way of viewing HTML5 content on my desktop (much easier), but this is not a solution for a enterprise-wide course for several reasons.  First among them is this would require deploying two courses (desktop and tablet) on the LMS and tracking two separate completions, in addition to student having to select the right course based on their device, and on and on.

There must be a way to defeat the launch page which seems to be triggered by index_lms.html detecting a tablet environment, then branching to index_lms_html5.html with a parameter to invoke this unwanted launch page first.

OK. This is doable. I'm not sure what changes in storylinecompiled.js between publishes but I found something that will automatically jump past the intermediate screen.

After publish, crack open storylinecompiled.js from within your mobile folder (you might be able to save a copy of this to drop into your published folder). Run a search on the contents of this file to find this line. It's all compressed together so you'll want to find this little bit within a sea of JavaScript. 

player.launch.find("a").first().click(player.revealPostInterstitial);player.populateIOSLaunch();

After the part that says "player.populateIOSLaunch();" paste in this bit:

player.revealPostInterstitial(); 

Sidenote: There are lots of places you can place this function call. This was the easiest to point to and it seems to work.

Here's what that does - there's a bit of jQuery code in this bit that calls revealPostInterstitial (builds the Storyline player) when the "Play" button is clicked. I am not sure what the side effects of this are but it should have no effect on anything but iOS HTML5 playback.

See it in action here:
http://www.xpconcept.com/testHTML5/story.html

Link correction (must have been a space in the filename):
http://www.xpconcept.com/testHTML5/story.html

Bah... it did it again.

A little more digging - storyline_compiled.js isn't compiled at publish time. It's resident in a folder in your Storyline install folder:

C:\Program Files (x86)\Articulate\Articulate Storyline\Content\mobile

That's where mine is. If you want to make this change (***see caveat 1 and 2 below***) permanently to this file and have it affect all publishes you can modify this once.

***Caveats***

1) This is at your own risk. Pretty sure Articulate can't support it and you'll want to remember that you did this (make a copy) in case something else pops up. It might cause other problems so be on the lookout

2) Any audio you use on the first slide probably won't work.

Steve,

Judging from your in-depth fix for this issue, I am guessing you've use jQuery mobile for other purposes.  Is that right?

I will test this fix over the weekend, right now I'm on another project.  This fix may work for a single client, but in the long run, I'd rather keep my hands out of jQuery mobile and find some other way to apply the same result.  Perhaps by placing a supplemental JavaScript in the publishing folder.

If I find out anything further, I'll post back here.

And by the way, I have no problem adding slide 1 of the course with no audio to fix this issue.  It's a better presentation to the student than a third "click to launch" page.

This describes a modification of the player output. I think this is probably the easiest way to accomplish it

It seems to me that jQuery mobile, so option-configurable, would have a parameter to control whether the launch screen is generated to avoid code modifications like the one you suggest.   What do you think?

It's a custom / complex framework. The construction of that screen and the player is Articulate specific, not really jQuery Mobile Even if there were a parameter, you'd still need to edit that file or the index file. Easiest just to modify this file. It'll apply to every publish if you modify it in the application folder.

There are better ways to handle this within Storyline.  For example, the first slide of a course could display the opening screen and require a play/pause to continue icon.    This screen is under control of the course author and provides clear context that the course is launched (rather than another launch screen).

This seems more relevant when the larger picture is examined.  The forced launch page that Storyline inserts is the third launch in a sequence on an LMS when viewing a course using Safari on an iPad.

Excellent, Steve. I just tried it out and it works like a champ. Thanks.

Now that Steve has shown how to suppress the iPad launch page, it would be the cat's meow if we could suspend autoplay on the first slide and require the user to click a play icon if the course is running on an iPad.

This worked perfectly Steve. Thankyou! 

Now if I can only take away the black frame I will be happy ! 

I think I read a thread where someone set the black frame to transparent.

I managed it in the CSS.

The player should be chrome-less and plain by default ! ! ! !

Won't you have to edit or replace the CSS every time you publish?  If it is possible to set a transparent frame, it may save you some work.

That is true, if you could point me to the correct setting to do this, that would be great!  It only happens in the html5 version, not the flash version. The css fix is in player.css, line 1832:

.framewrap

{

background:#ccc;

background: #fff;

position:absolute;

border-radius:10px;

/*border:solid 1px #000;*/

}

I have also have to fix a .js issue in storyline_compiled.js to jump past the pointless launch screen.

Why can't these settings be clean, and simple to begin with ? The likely hood that anyone will want to use the default are nil ?

In addition, I nearly did not choose this product because of the above reason. I have super strict branding guidelines that I have to follow.

I found the thread I was thinking of.  I'd be interested to know if this applies or not. 

Has anyone heard an official reply from Articulate Storyline staff apart from this one, which was obviously a quick but inefficient attempt as we have seen it was possible after all?

Looking forward to a new update as the HTML5 is a great weakness of this fantastic piece of software.

SL staff keep up the hard work!

Hi Gonzalo, 

Brian's response remains the official stance at this time. You're welcome to implement the unsupported workarounds listed in this thread, but we haven't formally announced a way to bypass the welcome screen. 

As HTML5 continues to evolve, so will our ability to improve its output, relying less on things like welcome screens.

Please feel share to any ideas you have directly with our development team here. 

Thanks!

This is a follow up to the user seeing a superfluous HTML5 launch page on mobile devices (this does not involve the iPad Mobile Player at all).  This launch page includes a thumbnail.jpg of the first slide of a presentation, plus a default blue play button.The caveat of course, as noted earlier in this thread, is that a published Storyline interaction should not have audio or video at the beginning of the presentation...and my published tutorials do not.

I followed Steve Flowers suggestion of cracking open mobile/storyline_compiled.js, with these instructions:

• After publishing, crack open storylinecompiled.js from within your mobile folder (you might be able to save a copy of this to drop into your published folder). Run a search on the contents of this file to find this line. It's all compressed together so you'll want to find this little bit within a sea of JavaScript. 

• player.launch.find("a").first().click(player.revealPostInterstitial);player.populateIOSLaunch();

• After the part that says "player.populateIOSLaunch();" paste in this bit:

player.revealPostInterstitial(); 

• Sidenote: There are lots of places you can place this function call. This was the easiest to point to and it seems to work. 

• Here's what that does - there's a bit of jQuery code in this bit that calls revealPostInterstitial (builds the Storyline player) when the "Play" button is clicked. I am not sure what the side effects of this are but it should have no effect on anything but iOS HTML5 playback.

Knowing full well that to test such a thing, one needs to clear all caches in the web browsers on mobile devices (iPhones, iPads, etc.)  Otherwise you may never see the desperately desired results.  By the way, the interstitial HTML5 launch page seems to only occur the first time a user launches a Storyline interaction on a mobile device.  Thereafter, in my testing, the user jumps straight to the interaction without the interstitial launch page.  A caching thing?

Be that as it may, Mr. Flowers suggestion worked!  Like others in this thread, I did not want our users to launch, then launch again just to see a Storyline interaction, particularly in my case where there will be dozens an dozens of individual Storyline published interactions as part of the final project.

It took a while to finally find this thread (I searched for "HTML5 launch screen").  But thanks to Mr. Flowers (indeed my Super Hero today), I can deliver a better user experience to my client.

Cheers to all you smart people in Storyline land.  

Paul

Steve, your javascript edit worked perfectly!  Thanks much! This fix worked for me and I am not using the ioslauncher.html nor the lms files. I am working with just the straight up story_html5.html version and displaying on iPad. 

So...... I had a trial version of Storyline before, and the forced opening screen thing in iOS was the biggest reason I did not get a license. I'm producing interactive content for a website, not training, and don't want anyone to have to click through an intro screen to get started. It's just not done, and tools like Tumult Hype and Hippo Animator -- much less powerful, I grant -- do not require this. 

Have people tried the solution marked as "Suggested Answer" from Steve Flowers and found that it works? I have no way of testing myself.

Orson