beg, borrow or steal: the art of flashing without flashing

Beg, Borrow or StealThe 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 teamCatalyst for this talk - standards vs. Flash.

I am an idiot

http://flickr.com/photos/thevoicewithin/

I am misleading

This session should have been...

HTML5Features you want desperately

and can use TODAY!

Based on Ian Hickson’s Google presentation

So what’s wrong with HTML5?

http://flickr.com/photos/hassman/

Lots of nice features

Video and audio supportPush-technology (Web Sockets)Many other great features

Not ready until 2022

2022 date taken from WHATWG roadmapSome HTML5 features supported in bleeding-edge nightly build browsersStill 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 thisall work?

How does this work?

HTML

HTML lives in browser-landLimited in functionality by the browser’s capabilities

How does this work?

SWF HTML

SWF playing in Flash Player has access to advanced featuresHow can we get the two to communicate?

How does this work?

JavaScript

SWF HTML

JavaScript is can interact with HTML/DOM

How does this work?

Text

JavaScript

SWF HTML

We need to find something to communicate between JS and SWF

How does this work?

Text

ExternalInterface

classJavaScript

SWF HTML

The ExternalInterface class provides a Flash-to-JS bridgeAvailable since Flash Player 8

How does this work?

ExternalInterface

classJavaScript

SWF

InvisibleFlash

HTML

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> elementYouTube etc. have been using Flash for video for yearsUse out-of-the-box solution like JW FLV Media Player

Audio playback

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

Multiple file upload

Part of Web Forms, but missing in HTML5 specFlash-based solutions include SWFUpload and YUI UploaderFlash 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 thisUsed on the current Flickr Web Upload page

Cross-frame communication

HTML5 introduces window.postMessage method and ‘message’ eventFlash allows LocalConnection objects to communicateUsing LocalConnections in conjunction with ExternalInterface allows HTML5-like functionality NOWShow ’05 Cross Frame Comms’ example and code

Offline storage

HTML5 introduces localStorage object and methodsDifferent to cookies - not sent to/from the serverFlash has has Local Shared Object for client-side data storage, so it’s easy to build emulation layerShow ’06 Offline Storage’ example and code

Socket-based communication

Client side, comet is a mess of browser hacks - a virtual house of cardsHTML5 introduces Web Sockets for bidirectional communicationFlash has both XML and raw (byte-based) socket supportShow ’07 Sockets’ example and code

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