Flash backgrounds - a 'how to'
I have always looked for ways to add interactivity and movement to pages without losing browser functionality and accessibilty. I have been experimenting recently with using Flash as backgrounds to normal, semantic XHTML pages. This idea isn't new, i havent personally seen it implemented but i have seen topics discussing its usage.
My idea was to use the Flash as a moving background, something subtle that would'nt cause the user problems while accessing the content of a page but instead enhance the design and user experience.
First, download the development files here. If you are already clued up on CSS and XHTMl you should be able use these files without having to read on, but it might be a idea to read on and see my reasoning and leave a comment if you have any suggestions. PS. Please excuse the design and flash example, i put these files together quicky as an example only
Setting Up
The fist step is to set the global styles as such:
html{
height: 100%; }
body {
font-family: Verdana, Arial, sans-serif;
font-size: 76%;
color: #fff;
height: 100%;
background: #000; }
setting the 'height' to '100%' on the 'html' and 'body' tags will allow you to set other elements to stretch '100%' of the browser, thus filling the page.
The next step was to get the layers working between the background and the content. As i said before, i didnt want the background to intrude on the users ability to access the content, which includes screen readers, so the Flash had to be the last element to be included in the markup. This would allow the user to navigate the page normally without encountering the Flash element until the end of the content.
To accomplish this i created two DIV's 'main' and 'background'. The 'main' DIV would act as the container for the content and the 'background' DIV would contain the Flash. I then set the CSS for each as:
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
display: block;
background:url(blank.gif); }
#background {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden; }
You will notice i have used a 'min-height' hack here for the 'main' DIV (more about that here). This is for the dreaded IE6 we all love so much. What it does is stretch the 'main' div so that it totally overlays the 'background' Div. I then set a 1px transparent gif as the background.
What does achieve you might think? Well, i mentioned before that i didnt want to lose the browser functionality of the browser such as 'right clicking'. By setting the background on the 'main' DIV, it allows the user to right click anywhere on the page and still retain the browsers original functionality.
NOTE: the css atribute 'position: fixed' does not work in IE6. I am looking for a solution to this, so leave a comment if you know of a work around
Adding the Flash
To embed the flash in this example, i use SWFOBJECT, as i feel this is the best way to do so. It is a javascript method that allows you to set alternative content for non-flash, past versions of flash and non-javascript users. This is perfect for this example as we can set a background image to appear as alterative content to the flash object.
Open up 'flash_background.html (from the example files you downloaded at the start) in a HTML/text editor. Here you will see the markup that inserts the Flash. You will need to read up on SWFOBJECT to understand all its capabilites such as scalling .etc, but what i have included will work fine for now. The main thing to take in consideration here in the parameter:
OR
so.addParam("wmode", "opaque");
without this set, the layers will not function corectly and the flash will appear on top of the content. Enter opaque and transparent modes will completely hide the Flash movie from screen readers allowing it to access the content in the rest of the document. This is perfect for the usage is suggest here as the flash is for display purposes only.
This is how i set the CSS to style the flash content, nothing major and pretty straight forward:
height: 100%;
width: 100%; }
#flash_alt{
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
background:url(flash_alt.jpg) center center no-repeat; }
For the background image in this example, i just took a screen grab of the Flash and edited it in photoshop, it really depends on how you approach the Flash as to how you supply the alternative content
Conclusion
So thats it, you have a Flash background for your website. This is only an experiment and has not been fully tested, I have tested this in Firefox, IE 6 and 7 and Opera (if anybody would like to test in other browsers that would be great). I will be looking into ways to 'fall back' on browsers that dont support this method, so all suggestions are welcome... please leave a comment.
View a working example this 'Flash Background' tutorial here
Download the example files here
Views: 3291
Too Cool
My god
I love this information
xxxx
Pro
: )
Hmm
Thanks again!
Write Comment
- Please keep the topic of messages relevant to the subject of the article.
- Personal verbal attacks will be deleted.
- Please don't use comments to plug your web site. Such material will be removed.
- Just ensure to *Refresh* your browser for a new security code to be displayed prior to clicking on the 'Send' button.
- Keep in mind that the above process only applies if you simply entered the wrong security code.