Date post: | 18-Dec-2014 |
Category: |
Technology |
Upload: | spjwebster |
View: | 2,500 times |
Download: | 0 times |
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