Full Screen Toggle in Storyline Player for Flash & HTML5!
Aug 30, 2013
The attached zip file shows two techniques I've discovered for activating full screen from Storyline's player. Unlike other buttons that only work in flash and have to be added to each page, these are easy techniques for toggling your course into full screen mode at any time with most browsers in flash and/or html5! Believe it or not, with one of these techniques almost all Storyline courses can be easily toggled into full screen mode using their current format without having to make any changes or even using the keyboard to activate it. It is a hidden feature in all Storyline courses that have been published up to this point and it can be accessed directly from the player itself. Go ahead and extract the contents of the attached zip file which now includes the published course and original story file. The directions and javascript code are included. You may even study the story file content to understand how it was accomplished. Enjoy!
Update (9-22-14): The hidden toggle technique (clicking on title 5 times) has been removed since Update 5 of Jan. 2014. The JavaScript code referenced in the file seems to now only work with Firefox due to browser updates that killed its functionality. If a fix in the coding can be found, I will post at a later time.
22 Replies
Hi Pete,
I just went through your tutorial. It looks pretty cool, but I couldn't try it out because I can't access the text file with the JavaScript. I get a "file not found" message. And even when I do a manual search for *.txt under the output folder for the project, or visually look in all the folders, there aren't any text files.
Not sure if I did something wrong. Can you provide any more info, or can you upload the text file here?
And tx for sharing!
Rebecca, I've updated my original post to now include a zip file of the published project which also contains the original story file. This should allow you to download the JavaScript .txt file (which I have also attached here for others to see). You can also go to the player settings of the original story file to see the script embedded in the tab properties. Keep in mind, the directions in the files of the original post must be followed exactly in order for the full screen tab to work. Using the script alone without making additional changes to the player settings will not allow this to work correctly. Let me know if you have any problems.
@Rebecca
In Player double click the "VIEW IN FULL SCREEN" entry. You can view the Javascript code from there.
Hope this helps,
Alex
Oops, Pete beat me to it.
Yassou Alexandros! Pos Eisai? It's nice to see a fellow Greek in the Articulate Community! Zito Ellas!
Tx, guys. Yes, Alexandro, I was able to view it fine, but I wasn't able to download it.
Looks like Pete has fixed this. Thanks, Pete! Will try it out at another time. Signing off soon.
Howdy,
Alexandros, apologies for leaving out the s in your name in my previous post. ;(
Pete, just tried it out and it works like a charm. Tx for changing it so the javascript was available for download. Since I'm not a "Javascripter", I figured I'd probably get something wrong if I typed it in myself (I know only enough about that type of stuff to know an errant character can mess the whole thing up).
Do you know if Articulate supports the "secret method?" I thought somewhere in one of these threads a some time back I'd seen a post by the staff that this wasn't anything that was supported and might not be "there" in future versions. But then again, that's my memory...not necessarily reliable!
Thanks again!
Hey, Pete,
Maybe better than shrinking or hiding the web object, if you're not going to use it, is placing it offstage.
Yes, if your stage will be completely exposed on that slide (mine wasn't), then moving the object off stage would be the way to go unless you plan on using it (updated presentation now states this). Regarding the secret method, as I stated in the posted presentation, it's possible (though not yet clear) that this may not be available in future updates. Time will tell but that was one of the reasons I felt motivated to look into alternate ways to toggle into full screen. My hope is that they make the secret method more apparent and user friendly (and hopefully change it to 1 or 2 clicks instead). I was actually the one who created the original post you referenced. Prior to that, no one had mentioned it anywhere which motivated me to find out why it was hidden. I was informed that it was leftover debug code which I wish they would have turned into a useful toggle rather than keeping it quiet.
Thanks for the script and tutorial, Pete!
I was using the .swf version provided by Steve Flowers earlier on, but key strokes wouldn't work anymore after going fullscreen; this javascript version doesn't have that issue.
However...I really would like to have the script kick-in automatically, or by means of a in-slide trigger without the use of the player's top bar.
Automatic triggering of the script wouldn't work at all.
Triggering the script after a key-stroke gave strange results:
anything I could do to rectify this?
We have created a free solution as well... There are a lot of ways to tackle this
https://elearningenhanced.com/products/fullscreen-articulate-storyline
Also @Rutwin, AFAIK It would be almost impossible to force full screen without user action. It would be a security risk.
@onEnterFrame - Is there a way to get those files without giving up all my information and signing up on the site? Right now I'm using a responsive iframe and the native full screen API (with fallback) with a button below the content but would love to have this embedded directly into our Storyline output.
Has anyone ever tried to do this when embedding a video into an LMS? I'm using Moodle right now, and none of the solutions will work for me...
The secret full screen toggle (clicking on player title 5 times) has been removed since update 5 in Jan. 2014. I would highly recommend the solution provided above by James Kingsley of Elearning Enhanced. Works great in HTML and Flash!
Hi James,
I've been using this solution with great success until I tried to use a lightbox while in full screen. It basically expands to a point that's not visible. Have you ever tried to get a lightbox to work while using this full screen javascript?
Thanks!
HI Laura,
This thread is a bit older so I'm not certain that James is still subscribed. You may want to send him a message directly using the "contact me" feature on his profile.
Thanks - I actually contacted him via his site and got a response already!
Awesome! Happy to hear it Laura. :-)
Hi Hasan,
I'm not sure if Pete is still subscribed but you may want to message him using the "contact me" option within his profile.
thanks so much and good work...
Dear fellow E-Learning Heroes,
We are currently looking for a fullscreen mode for imported .mp4-files. Has anyone managed to work around this shortcoming? Embedded videos already have a fullscreen feature built-in, but we'd like to use the feature for all imported .mp4-files.
Sincerely,
The Learning Hub.