Flash and the fluid elastic design

or the issues using flash for vector graphics that scale relative to page design as seen by Nick.

The SVG format is currently not an option, simply because support amongst the browser is not there. SVG support currently exists natively in the production version of FF 1.5, otherwise you need the plugin from Adobe. Even if the SVG fanatics get their way and SVG support was bundled with IE7, it will be many years of dealing with legacy versions of IE ( you still support IE5 and IE5.5 ?) and if there is no W2K version of IE7, how long will support for IE6 have to last?

The alternative is for Adobe to bundle support for SVG into the flash plugin. Within a year or so SVG support will be in the great majority of browsers. The only problem is why should Adobe do it, they were the champion of SVG while battling Macromedia and Flash, but now Adobe own Macromedia, Flash and the SWF format, as I see it there is no commercial advantage in promoting SVG for Adobe, for Microsoft it might be a different answer.

So assuming that you want your scaling vector graphics to be displayed in over 90% of all browsers compared to the 20% that support SVG, you will for the time being need to use Flash.

You can use SWFobject or Unobtrusive Flash Objects to get around the Eolas patent issue in IE and providing content for browsers without flash plugin or the required version of the flash plugin. However, there are a number of problems in using Flash for scaling vector graphics:

You can’t use flash as background images, this is not a major problem it requires some rethinking and coding a background layer with flash and overlaying that with content. It is not as clean and as semantically correct as using background images, but it works and is valid X/HTML.

Overlaying content or other flash objects over flash works on a PC. On a Mac the flash plugin has a problem, it does not understand z-index or source code order and as such there is no guarantee what the stacking order will be. Sometimes the background image will appear infront of the foreground text, other times behind. If you are using a Mac scroll down to the bottom of this page, then scroll up and down a few times, you will see the links appear and disappear behind the flash background.

Flashblock plugin for Firefox, because the way this plugin works the alternative content will not be displayed, instead there is a button to press for the flash graphic to display. Which means visitors do not get any information, flash or the alternative, without having to interact with the page. Personally, I would prefer to display the alternative content to visitors using this plugin and this is possible because that is how sIFR handles this plugin, but this requires modifying the the Flashblock plugin and probably SWFobject or Unobtrusive Flash Objects. Though the aim should be to convince users of Flashblock to add you to their whitelist of friendly sites, so they get the full graphical experience.

So unless browser makers get their act together, the only option for vector graphics in web pages for the next few years or longer is flash. Lets hope Adobe can fix the problem with their Mac version of the flash plugin so we can use flash to provide scaling background vector graphics.

2 Responses to “Flash and the fluid elastic design”

  1. Jana Says:

    sounds really interesting, i am having struggles with flash at the moment, i am trying to lay some content over the top of the flash movie but it is proving to be a little tougher than i had expected. I managed to get it working on firefox using iframes. but internet explorer 6 & 7 show it extremely buggy :S have you got any more info on the technic you alude too?

  2. Nick Cowie » Layering flash and html tutorial Says:

    […] Jana asked for tutorial on layering HTML over Flash, so here is how the current footer works, though it will be replaced real soon. […]