Flash & HTML5 ShowdownPaul Trani, Developer Evangelist, Adobe @paultrani                                                  ...
Designer or Developer?                         @PaulTrani
Paul Trani@paultrani ptrani@adobe.com• 15 years experience• 4 year old at heart                              @PaulTrani
Flash vs HTML5                 @PaulTrani
HTML5THE NEW HOTNESS                  @PaulTrani
HTML5THE NEW HOTNESS                  @PaulTrani
@PaulTrani
@PaulTrani
@PaulTrani
@PaulTrani
{    •   HTML5    •   CSS3    •   JAVASCRIPT    •   JQUERY                     @PaulTrani
{                    •   HTML5                    •   CSS3Web Standards                    •   JAVASCRIPT                 ...
@PaulTrani
HTML5•   New semantic tags•   Audio and video•   Canvas•   Drag-and-drop•   Geolocation•   Local SQL database             ...
HTML5        @PaulTrani
Video        @PaulTrani
Canvas • The <canvas> tag is roughly equivalent to the BitmapData   API in ActionScript 3. • Performance currently inferio...
FlashTHE GROUNDBREAKER                    @PaulTrani
@PaulTrani
@PaulTrani
@PaulTrani
@PaulTrani
@PaulTrani
Video• Live and on-demand streaming• Content protection (DRM)• HTTP video streaming• Alpha channel video over other conten...
Video• Deliver Flash video with an HTML5 fallback• For mobile, simply link to an MP4                                      ...
Adopt        @PaulTrani
Innovate           Adopt                   @PaulTrani
InnovateInspire                     Adopt                             @PaulTrani
InnovateInspire                     Adopt                             @PaulTrani
Innovate                             StandardizeInspire                     Adopt                                      @Pa...
Innovate                             StandardizeInspire                     Adopt                                      @Pa...
FLASH INNOVATION TIMELINE   @PaulTrani
WB Mobile                                                                                                                 ...
Differences• The browser was made for semantic mark-up• Flash locks site content in a layer of abstraction• Abstraction al...
Adobe > Flash                @PaulTrani
Adobe > HTML5                @PaulTrani
Adobe   HTML5   Flash                        @PaulTrani
AdobeEmpowering You                 @PaulTrani
ToolingCreate, Deliver & Monetize on Any Device                                           @PaulTrani
Print Designers = Device Publishers ePub and Apps using theDigital Publishing solution                                    ...
Print Designers = Device Publishers ePub and Apps using theDigital Publishing solution                                    ...
Web DevelopersWeb Content and Apps                                   @PaulTrani
Web DevelopersWeb Content and Apps                                   @PaulTrani
Web Developers              AIR                Additional        (or captive runtime)                                   OS...
@PaulTrani
Adobe fonts via TypeKit HTML5 support in the Open Source Media FrameworkWebKit in CS5 apps                    EDGE Contrib...
What’s Next              @PaulTrani
Project Edge               @PaulTrani
Muse       @PaulTrani
AIR 3.0Captive Runtimes       Native Extensions                                           @PaulTrani
Which side are you on?                         @PaulTrani
There is No Fight         Sorry Guys                      @PaulTrani
Technology Agnostic                      @PaulTrani
We don’t care what technology you choose.          Let us just empower you with the tools.                                ...
Thank You            @PaulTrani
Upcoming SlideShare
Loading in …5
×

Flash and HTML5 Compared

5,521 views

Published on

In this presentation I cover the major features of both HTML5 and Flash while showcasing the best examples of those technologies.

Takeaway: Be technology agnostic and serve up what's best for the project and the client.

Published in: Technology

Flash and HTML5 Compared

  1. Flash & HTML5 ShowdownPaul Trani, Developer Evangelist, Adobe @paultrani @PaulTrani
  2. Designer or Developer? @PaulTrani
  3. Paul Trani@paultrani ptrani@adobe.com• 15 years experience• 4 year old at heart @PaulTrani
  4. Flash vs HTML5 @PaulTrani
  5. HTML5THE NEW HOTNESS @PaulTrani
  6. HTML5THE NEW HOTNESS @PaulTrani
  7. @PaulTrani
  8. @PaulTrani
  9. @PaulTrani
  10. @PaulTrani
  11. { • HTML5 • CSS3 • JAVASCRIPT • JQUERY @PaulTrani
  12. { • HTML5 • CSS3Web Standards • JAVASCRIPT • JQUERY @PaulTrani
  13. @PaulTrani
  14. HTML5• New semantic tags• Audio and video• Canvas• Drag-and-drop• Geolocation• Local SQL database @PaulTrani
  15. HTML5 @PaulTrani
  16. Video @PaulTrani
  17. Canvas • The <canvas> tag is roughly equivalent to the BitmapData API in ActionScript 3. • Performance currently inferior to ActionScript, but close • Canvas tag makes things flexible @PaulTrani
  18. FlashTHE GROUNDBREAKER @PaulTrani
  19. @PaulTrani
  20. @PaulTrani
  21. @PaulTrani
  22. @PaulTrani
  23. @PaulTrani
  24. Video• Live and on-demand streaming• Content protection (DRM)• HTTP video streaming• Alpha channel video over other content• Much easier to build custom players• Huge increase in performance with StageVideo @PaulTrani
  25. Video• Deliver Flash video with an HTML5 fallback• For mobile, simply link to an MP4 @PaulTrani
  26. Adopt @PaulTrani
  27. Innovate Adopt @PaulTrani
  28. InnovateInspire Adopt @PaulTrani
  29. InnovateInspire Adopt @PaulTrani
  30. Innovate StandardizeInspire Adopt @PaulTrani
  31. Innovate StandardizeInspire Adopt @PaulTrani
  32. FLASH INNOVATION TIMELINE @PaulTrani
  33. WB Mobile Hd/H.264 Hardware Acceleration Accessibility Bitmap Data & Effects Binary Sockets Http Video Streami Collision Detection Video Streaming Scale 9 Component Scaling Actionscript 3 Dynamic Sound Generation Masking Dynamic Text HTML Text Formatting Webcam & Microphone Text Anti-aliasing Fullscreen Pixel Bender Content Protection Hyperlinks Movieclip Transparency Swf Loading Xml / Objects / Arrays Compression Wmode Depth Mgmt Transparent Video Text Layout Framework Gradients Symbols Color Effects Browser Communication Scripted Interactivity Runtime Masking Actionscript 2 Filters & Blend Modes Enhanced Drawing API Anti-aliased Vectors Fonts Mp3 Playback Embedded Sound Text-based Sockets Cross-domain Support Multi-core E4xDynamic Streaming SmartphonesVector Graphics & Animation Variables Actionscript 1 Printing Drawing Api Progressive Video Local Caching 3d Effects Peer To Peer 1 2 3 4 5 6 7 8 9 10 10.1 FLASH INNOVATION TIMELINE @PaulTrani
  34. Differences• The browser was made for semantic mark-up• Flash locks site content in a layer of abstraction• Abstraction allows for generalization, ubiquity, and re-use• Specificity allows for customization, perfection, and speed - an experience highly-tailored for each specific medium @PaulTrani
  35. Adobe > Flash @PaulTrani
  36. Adobe > HTML5 @PaulTrani
  37. Adobe HTML5 Flash @PaulTrani
  38. AdobeEmpowering You @PaulTrani
  39. ToolingCreate, Deliver & Monetize on Any Device @PaulTrani
  40. Print Designers = Device Publishers ePub and Apps using theDigital Publishing solution @PaulTrani
  41. Print Designers = Device Publishers ePub and Apps using theDigital Publishing solution @PaulTrani
  42. Web DevelopersWeb Content and Apps @PaulTrani
  43. Web DevelopersWeb Content and Apps @PaulTrani
  44. Web Developers AIR Additional (or captive runtime) OS’s @PaulTrani
  45. @PaulTrani
  46. Adobe fonts via TypeKit HTML5 support in the Open Source Media FrameworkWebKit in CS5 apps EDGE Contributing to WebKit HTML5 slideshows on Photoshop.com HTML5 content in digital Contributing to JQuery Mobile publications support for Firebug, Safari 5, and more to BrowserLab WALLABY HTML5-tagged (non-Flash) video in MUSE DreamweaverHTML5 video publishing to the Scene7 hosted service @PaulTrani
  47. What’s Next @PaulTrani
  48. Project Edge @PaulTrani
  49. Muse @PaulTrani
  50. AIR 3.0Captive Runtimes Native Extensions @PaulTrani
  51. Which side are you on? @PaulTrani
  52. There is No Fight Sorry Guys @PaulTrani
  53. Technology Agnostic @PaulTrani
  54. We don’t care what technology you choose. Let us just empower you with the tools. @PaulTrani
  55. Thank You @PaulTrani

×