iPhone course playback and sizing

Hello Thomas,

You may want to take a look at this article for ways to determine the optimal size for mobile devices.

Hi Thomas,

Thanks for reaching out here, and although I can't speak to the custom height/width coding you've set up I did want to share that there is a great article here in terms of your story size and what mobile devices you'll be using.  Also, Storyline doesn't have a true "full screen" option, but I know that other users in the community have created something similar so hopefully they're able to share here. 

Emily, Ashley - thank you both very much for Your replies.

I should perhaps point out that

1. the courses have already been produced
2. they are to run on an arbitrary set of devices

Thus - what we are looking to do is to scale contents so it utilizes the full height of the device screen.

From a technical point of view I know that it is perfectly possible to scale Storyline contents to fit the screen. Inspecting the DOM reveals the following stylesheet snippet (generated as far as i can tell):

<style media="only screen and (max-device-width: 480px) and (orientation:landscape)">
 .framewrap {
 -webkit-transform-origin: top left;
 -webkit-transform: translate3d(0px, 0px, 0px) scale(0.30710172744721687);
 width: 1042px;
 height: 696px;
 top: 52px!important;
 left: 0px!important;
 .interstitial {
 height: 320px;
 width: 320px;
 }
 }
 div.launch_interstitial>a {
 width: 160px;
 height: 160px;
 margin-left: -80px;
 margin-top: -80px;
</style>

If I change the scale to something like 0.458 and the top to 0 i practically get the desired result. Contents are scaled to take up the full height (and width actually) of the iPhone 4 I am testing on. With the solution we're looking for it's perfectly ok that there's white space left and right of contents. We would just like to ensure that contents take up as much screen real estate as possible.

So - what I am looking for is a consistent way of ensuring that content always gets scaled to the full height of the window - either by configuration or by amending the published course.

Thanks again for your reply and any further assistance You might be able to provide.

Best regards,

Thomas

Hi Thomas,

This is definitely outside of my wheelhouse, so I'll defer to the community in terms of how they've been able to set up something similar! 

Hi again - thanks again for Your response.

Though my current solution is not yet as complete as I'd like and somewhat bound to our iPad LMS I thought I'd share my experiences:

My initial go was to use a CSS scale transform on the .framewrap DIV to get the ideal size since this is in essence what the storyline player does. The user.js file seemed to be loaded and executed after everything else so this seemed like an ideal entry point.

When doing so however I found that it was impossible to interact with the course. It was simply stuck at the resume modal box. If I fiddled the DOM live to resize to the original scale factor it would work again. I haven't had time to look into the storyline player to reason why this is the case. Trying the same thing on the BODY tag left the same result.

Instead I resolve to a apply scale transform on the iframe that our LMS uses to serve the Storyline course that effectively reverses the scale transform applied by the course. I do this by

$('.framewrap')[0].getBoundingClientRect();

Since I know the width and height of my iframe in our LMS i can create a scale factor to effectively reverse the downsize performed by the Storyline Course.

Further - and knowing that Storyline is not supported on Android devices - I've notice that contents on the Samsung Galaxy Tab SM-T805 is positioned half way out of the screen horizontally. I've found this to be fixable along the lines of

$('.framewrap')[0].style.setProperty('left',getHorizontalOffset() + 'px','important');

Where getHorizontalOffset() calculates a value that centers content horizontally on the device.

Now the above does not constitute an ideal solution to the problems we are facing: that we cannot seem to publish Storyline content to scale properly across devices (iPhones, iPads, Android Tablet and Phones). Given that at the time of writing I haven't found any (better) alternatives this is what I need to go with for now.

It also shows I think that it indeed is possible to have the content scale so it takes up the desired screen real estate (in our case most often the full height of the parent container).

My humble encouragement - and with respect for the priorities, constraints and everything else you may be facing - is for this to improve onwards.

Best regards,

Thomas