Full screen flash that works on IE 6 and 7

On www.julianopie.com I wanted full screen flash to get that fully immersive flash experience. This is fairly simple to achieve with SWFObject, but there are a few IE gotchas.

Depending on how you want to do it there are a few CSS options. What I wanted to do was get the flash object to take over the whole browser and remove any other div, I also wanted to remove the scrollbars. Any scaling and scrolling I would do within the flash.

If you're going to go fullscreen with your flash you also need to decide how you'll handle scaling - Flash needs to be set to 100% in the object tag to go full screen, but like me you may want to stop the flash scaling infinitely up and down as you drag the browser window bigger and smaller. In as3 you can look at the stage height and width and adjust a display object on the stage accordingly. I'll talk about that another time.

To make the flash go full screen, you need to set the height and width to 100% in the SWFObject tag - or the html (depending on how you're doing it). I recommend using SWFObject as it allows you to do some clever stuff to let google, or non-flash browsers see your real content with Drupal.

If you're using SWFObject you will have a tag that gets replaced with the flash. This will have an ID, and it might look like this:

This div will get replaced with the tag that contains your flash. To make your flash go full screen you will need to make sure that every parent div to this replaced div is also set to height: 100% in your CSS. In my case I also set overflow: hidden for the body tag to remove the scroll bars. With SWFObject you can set CSS with javascript that only gets activated if flash is enabled. That way non-flash users will still get scrollbars. You can do this by putting this javascript in the header of your page.tpl.php file:

<?php /* Needed to avoid Flash of Unstyled Content in IE */ ?>

This checks your flash version with SWFObject and adds CSS accordingly. In the example above I've hidden certain things, and set other things to 100%. The body tag also gets its margin, padding and background changed, and sets the overflow:hidden property to remove the scrollbars.

The IE gotcha
I used to have my swf-replace div next to my content div, and set everything to display:none if Flash was enabled, but I found that Internet Explorer 6 and 7 ignored some of the dynamically set CSS and all hell broke loose (typically). A high percentage of the users for this site used these browsers so this wasn't good enough.

What worked well for me was wrapping everything within the page-inner div tag with my swf-replace div. I'm using zen, so your theme may be different. What i'm doing though is putting almost everything between the body tags in the swf-replace div - so if flash is enabled everything else gets hidden by SWFObject. You page.tpl.php file will look something like this:

That solves various IE problems and makes the Flash display fullscreen. It also means that anyone without Flash will see your normal html Drupal content.



Hey there! Do you use Twitter? I'd like to follow you if that would be ok. I'm absolutely enjoying your blog and look forward to new updates.

Add new comment