Our Blog

10.05.10 @ 15:29

No flash for you? Graceful degradation in anti-flash devices (iP*d...)

SUBMITTED BY gavri

In the last couple of years we used to integrate a lot of interactive flash content on our sites.
Flash gives to the end user a lot of interactive web richness that is nearly impossible to reproduce on other current tools we have today.
The emerge of html5 is very exciting and we can't wait for this protocol to gain more power - but with all that said in the current state it is still hard to give cool solutions to our clients that require a lot of logic or UI that is beyond the current capabilities of Jquery UI.

To integrate flash/flex content we use the highly recommended swftools module. It gives us the ability to add flash content using the "Drupal way" - simply by calling the swf() function.

With our goal to extend our capabilities to the mobile industry, we wanted to make sure we can offer a nice user experience for devices that don't support flash. This is easily achievable using a built-in feature in swftools, that allows to replace the flash content with supported html markup (like image or html5 canvas).

here is how we do that:

<?php
$flash_replacement
= '<img src="image-replacement"/>'; //here you insert the replacement markup
$file = 'http://...'; // insert here the path of the swf
$args = array(
             
'params' => array('width' => '100%', 'height' => '100%'),
             
'othervars' => array(
               
'html_alt' => $flash_replacement,
              ),
            );
print
swf($file, $args);
?>

As you can see this is pretty straight forward - you just need to add a value to the 'html_alt' key inside the 'othervars' array and that's about it.
You can insert any markup you like (even a theme function).

Check out our home page flash banner as an example.

3 Comments so far

"but with all that said in

"but with all that said in the current state it is still hard to give cool solutions to our clients that require a lot of logic or UI that is beyond the current capabilities of Jquery UI."

Perhaps you and I are working on different kinds of things, but in the last 3 years and certainly in the last year I haven't been presented with a project where Flash was even in the running. I think JavaScript is the more accessible, easier to maintain, faster performing, faster to develop option. Sure there may be some really fancy animations that Flash is better than HTML 4/XHTML 1.1 but for those I push for a gracefully degrading HTML 5 version rather than sell my soul with Flash.

dalin (not verified) 1 year ago
Hi Dalin, We're actually

Hi Dalin,
We're actually trying to present tools for situations in which the customer or the design required a flash component and trying to show the default way to give an alternative.
I'd love to see examples of how to do stuff like the http://www.leadel.net frontpage in jquery-ui - it might indeed let us change the way we do stuff.

lior 1 year ago
billy idol

Many thanks for the article. I will have a link back to this information from our fresh blog. Thanks again.

Guest 1 year ago

Post a Comment

The content of this field is kept private and will not be shown publicly.
  • Use one of the forms name.module, name.theme, name.translation, name.installprofile or name.project, in order to link to http://drupal.org/project/name. Note that a link will be generated even if a project does not exist.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <b> <a> <p> <br> <em> <strong> <cite> <blockquote> <table> <tr> <td> <th> <tbody> <ul> <ol> <li> <dl> <dt> <dd><img> <div> <h2> <h3> <h4> <code>
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Image links with 'rel="lightbox"' in the <a> tag will appear in a Lightbox when clicked on.

More information about formatting options


Or