HTML5 Swiffy with a Swf Fallback

Question

I have a .swf-to-Swiffy HTML5 banner and would like to create a .swf fallback for IE. What is the proper way to do this? I currently have the Swiffy inside an iframe (yikes).

Answer 1

There is a blog post here that may help http://www.malphursinteractive.com/flash-to-html5-fallback/

Essentially the idea is to use CSS conditionals to load the relevant javascript depending on the browser e.g.

    <!--[if !IE]> -->
        <script type="text/javascript" src="javascripts/swiffy.js"></script> 
        <script type="text/javascript" src="javascripts/animation.js"></script>
    <!-- <![endif]-->

    <!--[if IE]>
        <script type="text/javascript" src="javascripts/swfobject.js"></script>
        <script type="text/javascript">
            swfobject.embedSWF("images/animation.swf", "swiffycontainer", "300", "390", "9.0.115");
        </script>
    <![endif]-->

The 'swiffy.js' is the Google Swiffy library, the 'animation.js' contains the specific animation javascript created by exporting Flash to Swiffy. These are loaded for NON IE browsers.

The 'swfobject.js' is loaded and embed code is run for IE browsers to display a Flash fallback.

You then have a div in your page to hold the animation and target it with the 'swfobject.embedSWF' code.

<div id="swiffycontainer"></div>

You can also provide a Non flash fallback with CSS e.g.

#swiffycontainer{
 width: 300px;
 height: 390px;
 background: url('../images/animation.gif') no-repeat no-repeat;
 background-position: center center;

}

Hope that helps.