At my day job I’ve been working recently on a project in which I needed to design and code a brand new elearning user interface/content player. It’s turned out great from a design standpoint and now I’m slowly adding features to it as I have time. Today, I got the idea to add a fullscreen toggle button so that the user can make the course player go to fullscreen mode. This is all the rage for viewing flash videos, but I’ve never seen it done for non-video work. My custom user interface/content player was developed completely in Flash – so it’s all vector graphics, text, etc. So scaling does not cause pixelization. The content is all swf too, with an occasional gif/png thrown in, so there is distortion in those images but giving the user the fullscreen feature is well worth that minor blemish.
After implementing the fullscreen feature, I’m thrilled. I’m convinced that every elearning app like this should include it as a feature. And I wondered why I hadn’t seen it used before…so I thought, “Perhaps SCORM/AICC calls can’t be made when it is in fullscreen mode?” While I haven’t taken the time to actually test that theory, I did put together a quick html/swf to test whether the ExternalInterface class is usable when the swf is in fullscreen mode. And it works! Here is the example (warning – it opens in a new window). To test for yourself, first put it in fullscreen by clicking the button (it’s a toggle). Then, click the ‘Call ExternalInterface’ button to call a simple function in the html page named ’showAlert’, which shows an alert box.
So, here’s the code:
In Flash:
/*************************
* External Interface – work in fullscreen mode? YES!
*************************/
function checkInterface(e:MouseEvent):void
{
if (ExternalInterface.available)
{
status_txt.text=”ExternalInterface available!”;
ExternalInterface.call(”showAlert”, “It works!”);
}
else
{
status_txt.text=”ExternalInterface Unavailable!”;
}
}
myButton.addEventListener(MouseEvent.CLICK, checkInterface);
// fullscreen
function goFullScreen():void
{
if (stage.displayState==StageDisplayState.NORMAL)
{
stage.displayState=StageDisplayState.FULL_SCREEN;
}
else
{
stage.displayState=StageDisplayState.NORMAL;
}
}
fullscreenBtn.addEventListener(MouseEvent.CLICK, _handleClick);
function _handleClick(event:MouseEvent):void
{
goFullScreen();
}
——————————–
Function I added to the html page published from Flash (with ‘allowFullscreen’ param set to true):
function showAlert(text)
{
alert(text);
}
So, theoretically, going fullscreen shouldn’t cause any issues with communications with an LMS. As you noticed if you tried the example, calling the showAlert function in the html page forces the swf out of fullscreen mode. I’m assuming (too many assumptions here?) that this won’t happen for behind-the-scenes calls.
Have you tried this? What has your experience with using fullscreen flash for your elearning?
9 Comments
i’ve avoided using full-screen in elearning because of Adobe’s security restrictions:
* The ActionScript that initiates full-screen mode can be called only in response to a mouse click or keypress.
* Users cannot enter text in text input fields while in full-screen mode. All keyboard input and key-related ActionScript is disabled while in full-screen mode, with the exception of the keyboard shortcuts that take the viewer out of full-screen mode.
these two limitations would cause serious issues with our courses, esp. item #2. if these two limitations weren’t around i’d probably use full-screen mode all the time.
philips last blog post..SCORM resources
Hi Philip,
Ah – I knew there had to be a reason not to use it. Fortunately for me, this particular project I added it to consists only of static slides (I have no control over the content at this time – I was tasked with just converting the content to a swf format and wrap in a nice-looking UI). It also has some Captivate swf’s. but they are view-only – no interaction.
The UI I built loads the menu/navigation from an xml file. In that xml is also a path attribute for the path to each topic for the course. So when the student goes to that topic the UI looks to the path and loads a swf specific to that topic.
Out of curiosity, I did a quick test and created a 2 slide Captivate topic. On the first slide I added a text-input field and the second slide just had a ‘it worked’ caption. I then wrapped it as a topic in the course UI and tested in fullscreen, by typing in some text and clicking the ’submit’ button in the captivate, and it worked. I was able to enter text successfully in the input text-field. So, it seems to bypass the fullscreen security restrictions. Perhaps the restriction is only for intra-objects (ie, not loaded/external swf objects)? It could also just be that captivate swf’s, as you know better than anyone, are a completely different animal and perhaps the AVM has no control over them? I don’t know.
mark
Marks last blog post..How to enable Fullscreen Mode for a SWF and Does ExternalInterface Work In It?
The UI I built loads the menu/navigation from an xml file. In that xml is also a path attribute for the path to each topic for the course. So when the student goes to that topic the UI looks to the path and loads a swf specific to that topic.
Thank you admin.
So when the student goes to that topic the UI looks to the path and loads a swf specific to that topic.
actually it does not work any differently that getURL calls unfortunately – still breaks out of fullscreen mode – at least in IE anyway. OF course there is the data stream back to flash which I can appriciate but I was looking fro a method to call JS from Flash Fullscreen without breaking fullscreen mode – any ideas on that?
Wouldn’t the ExternalInterface class work without breaking fullscreen mode?
mark
unfortunately it breaks it in your sample but come to think of it – does it break it if you remove the javascript alert?
That would tell the tale -I have not got far enough in my App to worry about it but thinking ahead for the final roll out.
Would be cool to know though
Thanks
I’m tied up with other stuff right now and haven’t ever had a need for the fullscreen communication so not sure, but the alert would definitely pull it out of fullscreen. I would think without it and with just passing data it wouldn’t pull it out of fullscreen.
mark
This fullscreen mode for a SWF very good for me, thank you.