Progressive
Enhancement
with Flash
Yahoo! Developer Summit
London, 2007

Huh?

A quick detour...
Flickr Web Upload

What is progressive
enhancement?

“making web sites accessible
[...] to people using different
operating systems, web
browsers and devices”

Progressive enhancement
Content &
structure
HTML

Progressive enhancement
Style
CSS
HTML

Progressive enhancement
Behaviour
JavaScript
CSS
HTML

Progressive enhancement
Advanced style
& behaviour
Flash/Flex
JavaScript
CSS
HTML

How does the Flickr upload
page work?

How does Flickr work?
Flickr web
upload page

How does Flickr work?
Flickr web
upload page
Server

How does Flickr work?
CSS
Flickr web
upload page
Server

Flickr without Flash
CSS
Flickr web
upload page
Browser handles file uploading
Server

Flickr with Flash
CSS
Flickr web
upload page JS
Server

Flickr with Flash
CSS
Flickr web
upload page JS
SWF Server
Flash has asynchronous file upload

Flickr with Flash
CSS
Flickr web
upload page JS
JavaScript talks to Flash
SWF Server

Flickr with Flash
CSS
Flickr web
upload page JS
SWF Server
Flash uploads the files

What other functionality
can I steal from Flash?

How about cross-domain
sockets for push content?

Remember Comet?

Remember Comet?
Web page

Remember Comet?
Web page
Server

Remember Comet?
HACK
HACK
HACK
HACK
HACK
HACK HACK
WebHACK
page
HACK
HACK
HACK
HACK
HACK
Server
HACK

Comet, without the hacks
Web page
JS
SWF Server

A quick (ish) example...
Simple IM

But what about when
Flash is visible?

Visible Flash
Web page

Visible Flash
Web page
JS

Visible Flash
Web page
JS
SWF

Visible Flash
Web page
JS
Pull web content from page
SWF

Visible Flash
Web page
JS
Pass content to SWF file
SWF

Turn boring data tables...
A B C
5 9 11
22 31 77
85 23 1

...into pretty interactive graphs
A B C
150.0
112.5
75.0
37.5
2004 0
2005
2006
2007

In conclusion

In conclusion
Use SWFObject to embed Flash content
Upgrade alternate content or functionality with Flash
Steal as many features as you can from Flash - it’s all
free.

Questions?

Resources
SWFObject
http://blog.deconcept.com/swfobject
Slides, examples, etc.
http://dynamicflash.com/talks
Me
swebster@yahoo-inc.com
steve@dynamicflash.com
http://dynamicflash.com