Beg, Borrow or Steal
The Art of Flashing without Flashing

Who am I?

I am a blogger
http://dynamicflash.com

I am an author

I am a Yahoo!
http://flickr.com/photos/niallkennedy/
Senior Front-End Engineer on the Front-End Architecture team
Catalyst for this talk - standards vs. Flash.

I am an idiot
http://flickr.com/photos/thevoicewithin/

I am misleading

This session should
have been...

HTML5
Features you want desperately
and can use TODAY!
Based on Ian Hickson’s Google presentation

So what’s wrong
with HTML5?

Lots of nice features
http://flickr.com/photos/hassman/
Video and audio support
Push-technology (Web Sockets)
Many other great features

Not ready until 2022
2022 date taken from WHATWG roadmap
Some HTML5 features supported in bleeding-edge nightly build browsers
Still won’t be suitable for general use for a good few years

But you don’t have
to wait that long

You can borrow features
from the Flash Player

How does this
all work?

How does this work?
HTML
HTML lives in browser-land
Limited in functionality by the browser’s capabilities

How does this work?
SWF HTML
SWF playing in Flash Player has access to advanced features
How can we get the two to communicate?

How does this work?
SWF HTML
JavaScript
JavaScript is can interact with HTML/DOM

How does this work?
Text
SWF HTML
JavaScript
We need to find something to communicate between JS and SWF

How does this work?
Text
SWF HTML
alInt erface
Extern
class
JavaScript
The ExternalInterface class provides a Flash-to-JS bridge
Available since Flash Player 8

How does this work?
Invis
ible
Flash
SWF HTML
alInt erface
Extern
class
JavaScript
Now the Flash content doesn’t even have to be visible on the page.
Show ’01 ExternalInterface’ demo

Great, so what can
we do with it?

Video playback
In HTML5 this is implemented by the <video> element
YouTube etc. have been using Flash for video for years
Use out-of-the-box solution like JW FLV Media Player

Audio playback
In HTML5 this is implemented by the <audio> element
Latest WebKit nightly also has Audio JS class for pure JS audio
Scott Schiller’s SoundManager library uses Flash to play JS-controlled audio

Multiple file upload
Part of Web Forms, but missing in HTML5 spec
Flash-based solutions include SWFUpload and YUI Uploader
Flash Player 10 introduces clickjacking security restriction that means file browse dialog can
only be invoked by a click on the Flash movie itself (not through ExternalInterface)
YUI Uploader allows creation of transparent overlay on links to get around this
Used on the current Flickr Web Upload page

Cross-frame
communication
HTML5 introduces window.postMessage method and ‘message’ event
Flash allows LocalConnection objects to communicate
Using LocalConnections in conjunction with ExternalInterface allows HTML5-like functionality
NOW
Show ’05 Cross Frame Comms’ example and code

Offline storage
HTML5 introduces localStorage object and methods
Different to cookies - not sent to/from the server
Flash has has Local Shared Object for client-side data storage, so it’s easy to build emulation
layer
Show ’06 Offline Storage’ example and code

Socket-based
communication
Client side, comet is a mess of browser hacks - a virtual house of cards
HTML5 introduces Web Sockets for bidirectional communication
Flash has both XML and raw (byte-based) socket support
Show ’07 Sockets’ example and code

Thank you!
http://dynamicflash.com/my-talks#head08