Sorry about this abstract sounding title – just the best way to put it ;)

For those of us who love Flash – it is important to understand how to implement any flash content without alienating those who cannot see it due to browser plugins, security or network settings. The times of flash being something people either love or hate should be over and we can look forward to using flash elements to visually enhance our sites while ensuring consistent design and style throughout.

Flash elements can be a great enhancement to any site but you should carefully plan their integration into your page. Due to the nature of this content and its reliance on the flash player plugin you will need to consider what fallback you can put in place should the flash content be blocked or fail to play. When you look at the resources, tutorials and articles online – you can find various opinions and approaches to this, see a few examples below:

• Flash Embedding Cage Match by Bobby van der Sluis [A List Apart]
• Embed Flash or Die Trying by Perishable Press
• Developing Flash websites using progressive enhancement by Bobby van der Sluis [Adobe Development Centre]
• Unobtrusive Flash Objects (UFO) v3.20 by Bobby van der Sluis [bobbyvandersluis.com]

You will find that you will inevitably end up looking at Bobby van der Sluis UFO script and realise its potential. Using this approach to enhance your websites will allow your site to include flash elements while displaying static visuals in case there is a problem with this type of interactive content. His approach is to place static content on the page – which then gets replaced by the flash files if the browser uses Javascript and is found to have the required flash player plugin.

The best instructions you will obviously find on the original site where you can also read up on many more technical details – go to bobbyvandersluis.com/ufo . Here, I will only go through the required steps one by one to sum up how this setup works.

1. considering your layout plan – create the flash content in the required dimensions and save for web in 2 formats:
   1. .SWF = the flash element, published for web
      (remember to optimise your graphics and any other elements for your file to be a light in file size as possible)
   2. .JPG / .GIF / .PNG = the element as static image
      choose an appropriate frame in your flash movie to export the visual and keep in mind its display within your page’s layout. You might need to create and edit a new graphic for this; for vectors you will be able to swap between Flash and Illustrator quite easily.
      (again, it will be important to optimise the final image file for the web)
2. set up place holder element (containing static content)
   To present your new visual – set up a new DIV with an unique ID and place the static image inside, see below:

   
   <div id="header_anim">
       <img src="images/banner.jpg" alt="header image showing clouds"
       width="760" height="120" />
   </div>
   

   make sure to test your setup at this point and preview the place holder content in your browser before the next steps will replace it with flash.

3. download the UFO file from bobbyvandersluis.com/ufo (take a close look at all sample files included) and place the js script file into an appropriate directory within your site’s root folder
   => link to this file within the header tag of your HTML document:

    <script type="text/javascript" src="js/ufo.js"> </script>

4. with the main javascript file linked – you will need to set up an additional bit of javascript (one for each element) within the header tag to load the flash content (FO = flash object).
   Note: even though IE6 does not support transparency with flash generally this script does enable transparent flash files :)

    
   <script type="text/javascript">
   var FO = { movie:"flash/banner_anim.swf", width:"760", height:"120",
              majorversion:"6", build:"40",wmode:"transparent",
              bgcolor:"transparent" };
   </script>

5. the final javascript now will create the flash object and place the content into the place holder DIV – for each element, call the UFO.create function as shown here in bold:

   <script type="text/javascript">
   var FO = { movie:"flash/banner_anim.swf", width:"760", height:"120",
              majorversion:"6", build:"40", wmode:"transparent",
              bgcolor:"transparent" };
   UFO.create(FO, "header_anim");
   </script>

Once you have completed the steps above – you can test your setup. Open the page in a browser such as Firefox and check whether your flash movie is displayed as expected. To view the placeholder content – disable Javascript and refresh the page. If everything is working as planned – you should now see your static content displayed in place of the flash file.

happy flashin’ ;)