Flash and the fluid elastic design

or the issues using flash for vec­tor graph­ics that scale rel­at­ive to page design as seen by Nick.

The SVG format is cur­rently not an option, simply because sup­port amongst the browser is not there. SVG sup­port cur­rently exists nat­ively in the pro­duc­tion ver­sion of FF 1.5, oth­er­wise you need the plu­gin from Adobe. Even if the SVG fan­at­ics get their way and SVG sup­port was bundled with IE7, it will be many years of deal­ing with leg­acy ver­sions of IE ( you still sup­port IE5 and IE5.5 ?) and if there is no W2K ver­sion of IE7, how long will sup­port for IE6 have to last?

The altern­at­ive is for Adobe to bundle sup­port for SVG into the flash plu­gin. Within a year or so SVG sup­port will be in the great major­ity of browsers. The only prob­lem is why should Adobe do it, they were the cham­pion of SVG while bat­tling Mac­ro­media and Flash, but now Adobe own Mac­ro­media, Flash and the SWF format, as I see it there is no com­mer­cial advant­age in pro­mot­ing SVG for Adobe, for Microsoft it might be a dif­fer­ent answer.

So assum­ing that you want your scal­ing vec­tor graph­ics to be dis­played in over 90% of all browsers com­pared to the 20% that sup­port SVG, you will for the time being need to use Flash.

You can use SWFob­ject or Unob­trus­ive Flash Objects to get around the Eolas pat­ent issue in IE and provid­ing con­tent for browsers without flash plu­gin or the required ver­sion of the flash plu­gin. How­ever, there are a num­ber of prob­lems in using Flash for scal­ing vec­tor graphics:

You can’t use flash as back­ground images, this is not a major prob­lem it requires some rethink­ing and cod­ing a back­ground layer with flash and over­lay­ing that with con­tent. It is not as clean and as semantic­ally cor­rect as using back­ground images, but it works and is valid X/HTML.

Over­lay­ing con­tent or other flash objects over flash works on a PC. On a Mac the flash plu­gin has a prob­lem, it does not under­stand z-index or source code order and as such there is no guar­an­tee what the stack­ing order will be. Some­times the back­ground image will appear infront of the fore­ground text, other times behind. If you are using a Mac scroll down to the bot­tom of this page, then scroll up and down a few times, you will see the links appear and dis­ap­pear behind the flash background.

Flashb­lock plu­gin for Fire­fox, because the way this plu­gin works the altern­at­ive con­tent will not be dis­played, instead there is a but­ton to press for the flash graphic to dis­play. Which means vis­it­ors do not get any inform­a­tion, flash or the altern­at­ive, without hav­ing to inter­act with the page. Per­son­ally, I would prefer to dis­play the altern­at­ive con­tent to vis­it­ors using this plu­gin and this is pos­sible because that is how sIFR handles this plu­gin, but this requires modi­fy­ing the the Flashb­lock plu­gin and prob­ably SWFob­ject or Unob­trus­ive Flash Objects. Though the aim should be to con­vince users of Flashb­lock to add you to their whitel­ist of friendly sites, so they get the full graph­ical experience.

So unless browser makers get their act together, the only option for vec­tor graph­ics in web pages for the next few years or longer is flash. Lets hope Adobe can fix the prob­lem with their Mac ver­sion of the flash plu­gin so we can use flash to provide scal­ing back­ground vec­tor graphics.

2 Responses to “Flash and the fluid elastic design”

  1. Jana Says:

    sounds really inter­est­ing, i am hav­ing struggles with flash at the moment, i am try­ing to lay some con­tent over the top of the flash movie but it is prov­ing to be a little tougher than i had expec­ted. I man­aged to get it work­ing on fire­fox using iframes. but inter­net explorer 6 & 7 show it extremely buggy :S have you got any more info on the tech­nic you alude too?

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

    […] Jana asked for tutorial on lay­er­ing HTML over Flash, so here is how the cur­rent footer works, though it will be replaced real soon. […]

Google