How did scribd implement their 'fullscreen' mode?

Question

The scribd fullscreen mode is pretty neat (example: http://www.scribd.com/doc/13161906/Java-Lab-Manual-With-Java-Installation-Guide?classic%5Fui=1). The advantage (for RIAs specifically) is that it doesn't (almost) completely disable the keyboard the way the 'default' fullscreen mode in Flash Player does. Seems to also work when embedded.

How did they do it?

Answer 1

How did scribd implement their ‘fullscreen’ mode?

Not very well if you ask me. Their interface is shockingly broken here on Ubuntu... That's quite strange as 99.9% of other Flash apps work completely.

Boots XP virtualbox image

Well it looks like they've just altered the div that the flash sits in with some JavaScript and resized the applet to fit. Plus another JavaScript event hook to detect when the screen is resized.

Nothing technically clever, but it's good they've done it.

Answer 2

That example is not using full screen at all. What they consider "full screen" is simply maximizing the flash window to take up the entire browser area. The browser's toolbars and status bar and chrome are still visible, as well as anything outside the browser.

It's a nice effect for a Flash/Flex widget embedded in an HTML page, but it's not the same as full screen.

Implementation is mostly on the JavaScript/DOM side and only minimally within Flash/Flex. When the user clicks "Full Screen", use ExternalInterface to call out to a JavaScript function. This JS function then needs to reposition and resize the Flash element so that it is at (0,0) and takes up the entire screen. If the HTML is longer than a page, then you also need to hide that to make the browser's scrollbar go away, like the scribd example does. Another button inside the Flex/Flash app provides a close or related button to reverse the process.

As a Flex developer, I object to using the term "Full Screen" for this. Full Screen is a common function of many Flash/Flex apps, particularly video players. It's confusing to users to use the term to mean something different. "Maximize" would be more appropriate than "Full Screen".

Answer 3

Actually Sam, they make a flash fullscreen available, but the 'full_screen_type' option has to be set to 'flash' on the document object:

var scribd_doc = scribd.Document.getDoc(doc_id, access_key);

scribd_doc.addParam('full_screen_type', 'flash');

By default, 'full_screen_type' is actually set to render with javascript, which results in a browser-window-only full-screen feature.

A couple of heads-ups for anyone using sbribd.js:

• The javascript fullscreen version seems broken in some ways, and
• As of November 2009 there were some undeclared javascript variables in the scribd.js library that will break in Explorer.