Flash and Flex in an HTML5 / App Store worldTuesday, October 4, 11
RJ Owen                           Experience Planner                           EffectiveUI                           @rjow...
© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
© 2011 EffectiveUI, Inc.                           .flickr.com/photos/mobilestreetlife/4179063482/Tuesday, October 4, 11
© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
Where is Flash going?© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
Where has Flash been?         Where has Flex been?© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
Macromedia Flex 1-1.5 (2004, 2005)          • Server-side technology          • Rich component set for Flash          • MX...
Macromedia Flex 1-1.5 (2004, 2005)          • Server-side technology          • Rich component set for Flash          • MX...
Adobe Flex 2 (2006)        • AS3        • Eclipsed-based Flex Builder        • Client-side compiling        • Free compile...
Adobe Flex 3-3.5 (2008, 2009)        • Open Source        • Integration with CS product line        • AIR        • Profili...
Adobe Flex 4 (2010)        • “Design in Mind”        • Spark        • Catalyst Integration        • FlexUnit integration  ...
Adobe Flex 4.5 (2011)        • Multi-Screen (Mobile!)        • Builder enhancements to support          enterprise, templa...
1       1.5   2      3           3.5     4       4.5         Enterprise                                 Developers        ...
Flex’s current trajectory: reverse-         engineering the business plan         Provide the tools required for          ...
Flex’s current trajectory: reverse-         engineering the business plan         Provide the tools required for        En...
2                                          11         Vector        Animation          Multimedia                         ...
1997 - 1999           Flash for animations on the web!     2000 - 2008           Flash for interactive sites & multi-media...
So that Adobe can sell......         Creative Suite           part of $2Billion creative solutions            revenue 2010...
Where will this take Flex and the Flash         Platform in a post-HTML5 / post-         Native App world?© 2011 Effective...
I put this question to the Quora         community:         “What are the best reasons to learn Flash in an HTML5         ...
That’s a great start. Here’s what I think.         Flash is and will continue to be valuable         for....© 2011 Effecti...
1. Enterprise© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
Enterprise Requirements         Client-Server integration         OO languages         Developer toolsets         Mature l...
Java :: Enterprise Back-End                           Flex :: Enterprise Front-End© 2011 EffectiveUI, Inc.Tuesday, October...
© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
2. Multi-Screen Development© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
Same content, multiple screens         iOS, BlackBerry, Android, WP7, and counting....© 2011 EffectiveUI, Inc.Tuesday, Oct...
Approaches to multi-screen:         Web-only         Multiple native applications           (avoid multi-screen ubiquity a...
Multi-screen application development                           represents the best business case for Flex.                ...
3. Community© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
SpringAS                  Signals         Flight Swiz                      asmock          FlexLib Mate                   ...
4. Video & AudioTuesday, October 4, 11
Ogg Theora   H.264   WebM            IE9/IE10                             Manual Install            Firefox            Chr...
Ogg Theora   H.264   WebM   BROWSER  IE9            Firefox                                                 Manual Install...
Flash   FMS 4.5            IE9/IE10            IE10 tablet            Firefox            Chrome            Safari         ...
HTML5 video lacks the ability to “secure the         content, handle reporting for our advertisers,         to...ensure pr...
“HTML5 Video doesn’t have a viable                           DRM solution at this point.”                                 ...
You have to choose two encoding techs -                           Flash will be one.                           Flash is st...
5. Games© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
Flash is a vector engine built for animation.         and has a rich history in gaming.© 2011 EffectiveUI, Inc.Tuesday, Oc...
HTML5 games are okay, getting better         Canvas tag makes things flexible         Promising platforms like ImpactJS   ...
Why move from HTML5 to Flash?         Browser support is spotty at best         Performance isn’t up to par         There ...
“Is html5 the future? I sure hope so!                           Unfortunately, it isn’t the present.”                     ...
© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
Flash faces increasing competition from                           other platforms in the gaming world.                    ...
6. Translating Interaction© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
(Don Norman’s) Experience Design        Vocabulary           Visibility           Affordances           Feedback          ...
VISIBILITY     Perceiving interactive elements     AFFORDANCES     Understanding interactive elements     FEEDBACK     Kno...
VISIBILITY              COMPONENT SET     Perceiving interactive elements     AFFORDANCES             COMPONENT SET     Un...
HTML mark-up is SEMANTIC         MXML mark-up is VISUAL          Semantic mark-up is good for applying           multiple ...
Places Flash is and will be weaker         than HTML5© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
Accessibility© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
Search Engine Optimization© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
Web-sites© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
The browser was made for semantic         mark-up.         Flash locks site content in a layer of         abstraction.    ...
Places Flash is and will be weaker         than Native*         *probably.© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
Performance© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
Size© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
Consistency© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
© 2011 EffectiveUI, Inc.   colinharman.com/portfolio/how-would-you-like-your-graphic-design/Tuesday, October 4, 11
Software is about balance                           Consistency Performance Abstraction                           Ubiquity...
FEATURES                SPEED                                  AIR                                 MOBILE   NATIVE        ...
Flash is:         Enterprise tools (but platform?)         Multiple-platforms as installed apps for          desktop or mo...
Native apps are:         Best experience possible on any given device© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
HTML5 / CSS3 / JS is:         The language of the web© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
Take aways:         Flex has a strong future.         It looks different than its past.         HTML has a strong future. ...
There’s one final case for Flash I         left out......© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
7. Pushing Boundaries© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
Thanks!                Fill out your surveys to win                                books.                                C...
This slide intentionally left blank.© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
Upcoming SlideShare
Loading in...5
×

Flash and Flex in an HTML5 / App Store World

1,283

Published on

EffectiveUI’s RJ Owen presented “Flash and Flex in an HTML5 and App Store World” at Adobe MAX, October 2011. This is an overview of where Adobe Flash and Flex have been, and predictions for how Adobe Flash and Flex will be used in the future for design and development.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,283
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Flash and Flex in an HTML5 / App Store World

  1. 1. Flash and Flex in an HTML5 / App Store worldTuesday, October 4, 11
  2. 2. RJ Owen Experience Planner EffectiveUI @rjowen Tweeting this session? rj.owen@effectiveui.com Use the hashtag: #effectiveui© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  3. 3. © 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  4. 4. © 2011 EffectiveUI, Inc. .flickr.com/photos/mobilestreetlife/4179063482/Tuesday, October 4, 11
  5. 5. © 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  6. 6. Where is Flash going?© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  7. 7. Where has Flash been? Where has Flex been?© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  8. 8. Macromedia Flex 1-1.5 (2004, 2005) • Server-side technology • Rich component set for Flash • MXML / AS compiled to SWF on the server using a J2EE server • $15,000 per CPU (wikipedia) ??? • Flex Data Services required Product Goal: Get Flash into Business© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  9. 9. Macromedia Flex 1-1.5 (2004, 2005) • Server-side technology • Rich component set for Flash • MXML / AS compiled to SWF on the server using a J2EE server • $15,000 per CPU (wikipedia) • Flex Data Services required Product Goal: Get Flash into Business© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  10. 10. Adobe Flex 2 (2006) • AS3 • Eclipsed-based Flex Builder • Client-side compiling • Free compiler • Charting • Flex Data Services 2 Product Goal: Get Flash to Developers Increase adoption in businesses© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  11. 11. Adobe Flex 3-3.5 (2008, 2009) • Open Source • Integration with CS product line • AIR • Profiling and refactoring in Builder Product Goal: Increase Adoption, Community Make Flex Builder a “real” product© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  12. 12. Adobe Flex 4 (2010) • “Design in Mind” • Spark • Catalyst Integration • FlexUnit integration • Improved profiler • Network monitor • TLF Product Goal: Improve UX Improve Enterprise tooling© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  13. 13. Adobe Flex 4.5 (2011) • Multi-Screen (Mobile!) • Builder enhancements to support enterprise, templating, etc. • More Spark • Spoon.as Product Goal: Mobile app development Improve Enterprise development© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  14. 14. 1 1.5 2 3 3.5 4 4.5 Enterprise Developers AIR Design Mobile© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  15. 15. Flex’s current trajectory: reverse- engineering the business plan Provide the tools required for enterprise-level workflows Marketed to Developers To solve a wide array of problems With good results© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  16. 16. Flex’s current trajectory: reverse- engineering the business plan Provide the tools required for Enterprise enterprise-level workflows Marketed to Developers Developers To solve a wide array of problems Ubiquity With good results Design© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  17. 17. 2 11 Vector Animation Multimedia Apps Multi-touch Mobile 3D© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  18. 18. 1997 - 1999 Flash for animations on the web! 2000 - 2008 Flash for interactive sites & multi-media on lots of things, but mostly the web! 2008-2010 Flash-based RIA applications for desktop and web, plus everything from before 2010 Flash-based mobile apps and everything from before 2011 and Flash-based 3D games, native beyond devices, and not everything from before.© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  19. 19. So that Adobe can sell...... Creative Suite part of $2Billion creative solutions revenue 2010, 54% of total revenue (#1 source) LiveCycle part of $355M in Digital Enterprise Solutions revenue 2010, 9% of total revenue (#3 source)source: adobe.com/aboutadobe/invrelations/financialdocs.html© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  20. 20. Where will this take Flex and the Flash Platform in a post-HTML5 / post- Native App world?© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  21. 21. I put this question to the Quora community: “What are the best reasons to learn Flash in an HTML5 web and native app world?” Answers: Consistent Experience (browser issues) Get to market quicker Single technology to focus on Faster ROI Core OOP education and more.© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  22. 22. That’s a great start. Here’s what I think. Flash is and will continue to be valuable for....© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  23. 23. 1. Enterprise© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  24. 24. Enterprise Requirements Client-Server integration OO languages Developer toolsets Mature languages Code generation Best-practices Bigger logos© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  25. 25. Java :: Enterprise Back-End Flex :: Enterprise Front-End© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  26. 26. © 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  27. 27. 2. Multi-Screen Development© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  28. 28. Same content, multiple screens iOS, BlackBerry, Android, WP7, and counting....© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  29. 29. Approaches to multi-screen: Web-only Multiple native applications (avoid multi-screen ubiquity altogether) HTML5 app cache PhoneGap Sencha Titanium AIR mobile© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  30. 30. Multi-screen application development represents the best business case for Flex. Flex is an easy technology for multi-screen application development. AIR is the future of the Flash platform for consumer applications.© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  31. 31. 3. Community© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  32. 32. SpringAS Signals Flight Swiz asmock FlexLib Mate as3corelib Jest Parsley as3crypto Ribbit PureMVC as3awss3lib TweenLite Robotlegs Away3D Tweener tinyTLF PaperVision3D Merapi Spoon.as FCSS WOW 3D hamcrest-as3 Degrafa as3youtubelib SwiftSuspenders Reflex as3syndicationlib FlexUnit Stealth FZip© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  33. 33. 4. Video & AudioTuesday, October 4, 11
  34. 34. Ogg Theora H.264 WebM IE9/IE10 Manual Install Firefox Chrome Safari Mobile Safari Opera© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  35. 35. Ogg Theora H.264 WebM BROWSER IE9 Firefox Manual InstallINCOMPATIBILITY Chrome Safari Mobile Safari Opera FAIL© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  36. 36. Flash FMS 4.5 IE9/IE10 IE10 tablet Firefox Chrome Safari Mobile Safari Opera© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  37. 37. HTML5 video lacks the ability to “secure the content, handle reporting for our advertisers, to...ensure premium visual quality, communicate back with the server to determine how long to buffer and what bit-rate to stream, and dozens of other things that aren’t necessarily visible to the end user.” - Hulu gizmodo.com/#!5538264/hulu-says-html5-isnt-ready-yet© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  38. 38. “HTML5 Video doesn’t have a viable DRM solution at this point.” - Netflix gigaom.com/video/netflix-no-plans-for-html5-video/© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  39. 39. You have to choose two encoding techs - Flash will be one. Flash is still the only viable choice for delivering protected and controlled video and audio content on the web. Multimedia streaming and DRM are Flash’s strongest hold and future on the web.© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  40. 40. 5. Games© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  41. 41. Flash is a vector engine built for animation. and has a rich history in gaming.© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  42. 42. HTML5 games are okay, getting better Canvas tag makes things flexible Promising platforms like ImpactJS starting to appear© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  43. 43. Why move from HTML5 to Flash? Browser support is spotty at best Performance isn’t up to par There is no FGL for html5 games Source: blog.tametick.com/2011/01/why-im-moving-from-html5-to-flash.html© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  44. 44. “Is html5 the future? I sure hope so! Unfortunately, it isn’t the present.” - TameTick.com blog.tametick.com/2011/01/why-im-moving-from-html5-to-flash.html© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  45. 45. © 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  46. 46. © 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  47. 47. Flash faces increasing competition from other platforms in the gaming world. AIR is a powerful platform for distributing games to multiple platforms Flash has a deep history in the gaming community© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  48. 48. 6. Translating Interaction© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  49. 49. (Don Norman’s) Experience Design Vocabulary Visibility Affordances Feedback Mapping Constraint Consistency© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  50. 50. VISIBILITY Perceiving interactive elements AFFORDANCES Understanding interactive elements FEEDBACK Knowing how your actions impact the system MAPPING How well the interface reflects your understanding of the system CONSTRAINTS Preventing errors in the system CONSISTENCY Objects that appear the same function the same© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  51. 51. VISIBILITY COMPONENT SET Perceiving interactive elements AFFORDANCES COMPONENT SET Understanding interactive elements FEEDBACK EVENT MODEL Knowing how your actions impact the system MAPPING CUSTOM CONTROLS & LAYOUTS How well the interface reflects your understanding of the system CONSTRAINTS VALIDATION & ERROR HANDLING Preventing errors in the system CONSISTENCY CLASS-BASED VISUAL ARCHITECTURE Objects that appear the same function the same© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  52. 52. HTML mark-up is SEMANTIC MXML mark-up is VISUAL Semantic mark-up is good for applying multiple views to a single data- structure and require external visual descriptors (CSS.) Visual mark-up is good for defining an explicit visual representation of an external data object, semantic or otherwise.© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  53. 53. Places Flash is and will be weaker than HTML5© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  54. 54. Accessibility© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  55. 55. Search Engine Optimization© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  56. 56. Web-sites© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  57. 57. 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.© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  58. 58. Places Flash is and will be weaker than Native* *probably.© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  59. 59. Performance© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  60. 60. Size© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  61. 61. Consistency© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  62. 62. © 2011 EffectiveUI, Inc. colinharman.com/portfolio/how-would-you-like-your-graphic-design/Tuesday, October 4, 11
  63. 63. Software is about balance Consistency Performance Abstraction Ubiquity Memory Specificity© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  64. 64. FEATURES SPEED AIR MOBILE NATIVE FLASH PLAYER HTML5 UBIQUITY SIZE© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  65. 65. Flash is: Enterprise tools (but platform?) Multiple-platforms as installed apps for desktop or mobile Multimedia with DRM© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  66. 66. Native apps are: Best experience possible on any given device© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  67. 67. HTML5 / CSS3 / JS is: The language of the web© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  68. 68. Take aways: Flex has a strong future. It looks different than its past. HTML has a strong future. It looks different than its past and Flash’s past. Native apps have a strong future. Mobile + App stores are highly disruptive.© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  69. 69. There’s one final case for Flash I left out......© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  70. 70. 7. Pushing Boundaries© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  71. 71. © 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  72. 72. © 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  73. 73. Thanks! Fill out your surveys to win books. Come by the EffectiveUI booth. Other great sessions: Tues 1:00pm: From Pixar to Ramayana: The Art of RJ Owen Graphic Storytelling with Sanjay Patel EffectiveUI Tues 2:30pm: HTML5 Semantic Web Tues 4:00pm: Flash Platform Roadmap @rjowen rj.owen@effectiveui.com Weds 8:00am: Practical Mobile Development with Flex and Adobe AIR© 2011 EffectiveUI, Inc.Tuesday, October 4, 11
  74. 74. This slide intentionally left blank.© 2011 EffectiveUI, Inc.Tuesday, October 4, 11

×