Fullscreen Flash With Browser Scrollbars

Title Edit: 08.22.07. I don't know what I was thinking, initially titled "...HTML Scrollbars", that doesn't make sense.

Update: 04.23.08. Working with Matthew Ellis , who commented below, I think we resolved the crashing issue with Firefox / Mac by removing ( commenting the code ) the constant updates sent from JavaScript to the SWF, these were mainly used for visual display.  The 'Updated Example' link has been updated to reflect these changes.

A brief introduction as to why this might be needed. At work we do quite a few video "mini-sites" for college recruiting purposes. It's a way to showcase the school to prospective students through the eyes of current students. These sites are primarily video driven, there is usually very little content outside of the videos other than links, possibly little fun facts etc.

Although we highly recommend transcripts of the video through closed captioning or html content for screen readers, this isn't always accepted as it drives up cost, unfortunately, but that is another subject / post entirely.

These sites tend to be full-on Flash sites that can stand alone but are still branded, they live outside of the main campus website and are associated with some form of campaign, mailer or opt-in initiative. As such the design usually calls for a centered, fullpage ( 100% width / 100% height ) Flash movie. The problem that tends to crop up with this approach is if you design for 800 x 600 or 1024 x 768 the site will always get passed to someone's grandmother who's screen resolution is set to 640 x 480 where the Flash movie extends beyond the borders of the browser, but since our Flash movie is set to 100% width and height our browser scrollbars are non-existant.

Now if the designer has the forethought to realize this and designs a flexible layout, you as the developer, can manage, scale and place the content within the "Stage" limits when the browser is resized using Flash's Stage.onResize handler. This isn't always the case. Please note, this all comes from a developers standpoint, where I get approved designs when it's time to start building. I am not always privy to designs before they goto the client for approval. I'm usually working on a project while the next one is getting worked, conceptualized and designed, I may be asked questions from time to time but i'm often given files and told to run with it, make it bouncy and fun.

You can also create scrollbars within Flash that "stick to the edges", this can be cumbersome and slow if you have alot of textual content, I have done this in the past and actually do this with my Portfolio, but it just doesn't feel right.

So as a proof of concept, let's imagine we have a Flash movie that has multiple sections and each section has a different layout and size but must stay centered on screen.

• We need to have Flash call a JavaScript method that sets the movie width and height.
• We need to have a JavaScript method that checks the width and height of the set Flash movie dimensions on browser resize and act accordingly.
• We need to allow scrollbars or overflow in the event the user doesn't have Flash and see's our alternate content, but remove them in the event they have the proper version of Flash.

Again, this is proof of concept, so the "flashcontent" div is hardcoded into the JavaScript file. We will also use External Interface to call JavaScript methods from Flash and receive a notification from JavaScript telling us the size of the browser window when it's resized so we can display it within Flash, but only for testing purposes ( this may be what caused my friends browser crash with Firefox on the MAC ).

When the Flash file loads up, we have an initial handshake between Flash and Javascript, passing the width and height of the container within the Flash movie.

ExternalInterface.call( "initialize", container._width, container._height );

Now anytime we resize our container or change views we need to update our JavaScript file with the new width / height requirements of our Flash movie using, setFlashDimensions:

ExternalInterface.call( "setFlashDimensions", container._width, container._height );

The JavaScript file and CSS will do the rest for us. If the container width or height fall outside the bounds of the browser we make the 'flashcontent' div use pixels, if the Flash movie has enough room to breathe within the browser we set it back to 100%.

I've tested this on
PC:

• IE 6 / 7
• Firefox 2.0.0.6
• Opera 9

MAC:

• Safari
• Firefox

A friend said it crashed Firefox on his Mac but I couldn't replicate.

In this example I am calling "setDimensions" repeatedly as the Flash stage is resizing because IE on PC seems to update the browser and dimensions while dragging the window, Firefox will not until you stop dragging the corner of the browser window.

Also in Firefox if you drag the browser window small enough as to align the Flash movie to the top left then start increasing the window size again, the Flash movie will stick at 0,0 for an instance.

Please note, I have not used this in a production environment, this is mainly a proof of concept. If I ever get around to testing it properly and making it a little easier to implement I will definetely post it here.

Here is a simple working example, click the orange box to change it's dimensions.

Download a working example here: Updated Example.

I use SWFObject exclusively and it seems like Geoff Stearns, creater of SWFObject and Bobby van der Sluis, creator of UFO, have teamed up to create the next generation of Flash detection, SWFFix. What i'd really love to see in SWFFix is a min-height / min-width setting.