Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Next Generation of Flash User Experience

The Next Generation of Flash User Experience

A look at the next generation of design and development in Flash Player 10.1, with a focus on the end user. Given at Flash and the City NYC.

Kevin Suttle

May 08, 2010

More Decks by Kevin Suttle

Other Decks in Design


  1. The next Generation of FLASH USER EXPERIENCE Kevin Suttle Flash

    Platform UX Architect { }
  2. 5 years of large-scale Flash Platform eLearning content Featured author

    for InsideRIA Tech Reviewer for O’Reilly’s Flex 4 Cookbook Submitted close to 150 bugs/features for Flash CS5 “Most likely to break hearts” - My mom Kevin Suttle Flash Platform UX Architect kevinsuttle.com | @kevinSuttle I’m on the internet:
  3. I wasn’t making that Flash thing up.

  4. I spend most of my time in FLASH but I

    also know my way around FLEX. I started out wanting to be a writer. I changed my mind. I got a degree in Electronic Media Communications from the University of Cincinnati. I loved digital art and photo manipulation, but it just kind of sat there. I got into web design, and then met Flash. I taught myself how to program. How I got into Flash:
  5. Flash is at a crucial point within the realm of

    development technologies. All of a sudden there are “sides”.
  6. The Battle for PLATFORM SUPREMACY

  7. I don’t know if you’ve heard: There’s a bit of

    news about an new standard - HTML5 Adobe HEARTS Apple but not the other way ‘round. Apple has their own agenda, and that’s cool. I guess.
  8. Smoke and mirrors It wasn’t about performance It wasn’t about

    plugin-architecture It wasn’t about ubiquity It wasn’t about devices It was about competition Glandul... ia... er... Apple’s JS framework
  9. Sept 2000 - Flash Player 2 had a 95% average

    in USA, CAN, EUR, ASIA, and South America Let’s take a look
  10. Open or closed Flash Player is a standard. It’s been

    at 90+% for years. Whether Steve likes it or not.
  11. The thing is that consumers don’t really care. They just

    want their content, or do they?
  12. Yes, and no. Users want content, but they also want

    a great experience. The iPhone and iPad are perfect examples.
  13. Some users are willing to only play Farmville at home

    and have an iPhone. They shouldn’t have to make a choice.
  14. You’re all developers, right? Think of it as encapsulation. Push

    the button, watch it go.
  15. HTML5? Flash? Obj-C? Doesn’t matter. ...but of course I’m biased.

  16. Why does there even NEED to be a winner? Can’t

    we all just get along?
  17. The tech tabloids don’t help because they’re businesses. They have

    to make money, and the internet is full of opinionated nerds.
  18. Want to know who will win? Well, good. Because I

    was going to tell you anyway.
  19. The platform that wins, is the one that will provide

    the most content through the best experience. You had to see that coming.
  20. We’re Flash developers Let’s make great Flash experiences. Or Flex.

    Whatever you want.
  21. Worst-case scenario We go back to ALL of the massive

    amounts of work we had before Section 331 Open Screen Project FTW PLUS MOBILE.
  22. I work on what I like to think are “translatable

    skills”. Jesse Freeman says that “Flash is dead”. I’m just picking out what I’m wearing to the “funeral”. User Experience Information Architecture Usability Engineering Interaction Design UI Construction
  23. UX, IxD, IA, UI , ETC, HUH What is USER

  24. User experience is the sum of all your users' interactions

    with your company, its services, and its products. “ ” “User Experience As Corporate Imperative” hesketh.com
  25. User Experience The elements of according to Jesse James Garrett

    Visual Design Information Design Interface design | Navigation design Interaction Design | Information Architecture Functional specs | Content requirements User Needs in parallel to Site Objectives
  26. None
  27. The point is UX spans all aspects of design and

    development. Let’s talk about both within Flash.
  28. Pretty screens actually do require thinking. Design CONSIDERATIONS

  29. for any platform. double-edged sword Freedom in design is a

    Please use responsibly.
  30. HTML/CSS - “Standardized” coding practices, very loose control of display

    across browsers Let’s take a look Flash - Complete freedom of design and development, but bad coding or lack of optimization can lead to very poor performance
  31. Design is emotional, subconscious even. Design is Platform Independent Flash,

    HTML, Silverlight? Doesn’t matter.
  32. What is “cute?”

  33. Disney’s Definition of Cute

  34. Good designers play on our emotions, but for good.

  35. Rule of thirds Golden Ratio Designing on a grid http://en.wikipedia.org/wiki/Rule_of_thirds

    http://en.wikipedia.org/wiki/Golden_ratio http://960.gs More keys to emotional design
  36. New APIs, tools and platforms Development APPROACHES

  37. for any platform. double-edged sword Freedom in development is also

  38. It’s only a dot release, right? Enter Flash Player 10.1

  39. So much more Geolocation Gestures and Touch Accelerometer Global Error

    Handling P2P/RMTFP Sensors IME DRM Globalization Printing Sampling My VERY unofficial count: a few hundred new APIs.
  40. Freeing Flash from the restraints of traditional mouse and keyboard

    interaction. Multi-touch Flash was always meant to be multi-touch
  41. Specifies the type of touchscreen supported, if any. flash.system.Capabilities.touchscreenType

  42. misconception about There is a bit of a rollovers on

    touch screens. You can TOTALLY do it.
  43. Dispatched when the user moves a point of contact over

    the InteractiveObject instance on a touch- enabled device (such as moving a fingers from left to right over a display object on a mobile phone or tablet with a touch screen). Some devices might also interpret this contact as a mouseOver event and as a touchOver event. flash.display.InteractiveObject.gesturePan
  44. Dispatched when the user creates a point of contact with

    an InteractiveObject instance, then taps on a touch-enabled device (such as placing several fingers over a display object to open a menu and then taps one finger to select a menu item on a mobile phone or tablet with a touch screen). Some devices might also interpret this contact as a combination of several mouse events, as well. flash.display.InteractiveObject.gesturePressAndTap
  45. flash.display.InteractiveObject.gesturePressAndTap flash.display.InteractiveObject.gestureRotate flash.display.InteractiveObject.gestureSwipe flash.display.InteractiveObject.gestureTwoFingerTap flash.display.InteractiveObject.gestureZoom flash.display.InteractiveObject.touchBegin flash.display.InteractiveObject.touchEnd flash.display.InteractiveObject.touchMove flash.display.InteractiveObject.touchOut flash.display.InteractiveObject.touchOver

    flash.display.InteractiveObject.touchRollOut flash.display.InteractiveObject.touchRollOver flash.display.InteractiveObject.touchTap flash.display.Sprite.startTouchDrag flash.display.Sprite.stopTouchDrag flash.events.GesturePhase flash.events.TouchEvent flash.events.TransformGestureEvent ... and a TON more.
  46. Not just a checkbox any more. Accessibility

  47. has pretty much been a nightmare for a long time.

    Accessibility in Flash ... but it’s getting better.
  48. The ISearchableText interface can be implemented by objects that contain

    text which should be searchable on the web. flash.accessibility.ISearchableText
  49. flash.accessibility.ISimpleTextSelection The ISimpleTextSelection class can be used to add support

    for the MSAA ISimpleTextSelection interface to an AccessibilityImplementation. If an AccessibilityImplementation subclass implements the two getters in this class, a screen reader such as JAWS can determine the text selection range by calling them.
  50. Before, all SWFs ran at the max frame rate, even

    when invisible. Flash Player Throttling
  51. Is the SWF instance in a hidden tab? Is the

    SWF instance scrolled out of view? Two main throttling techniques
  52. MAC - Webkit nightly (standalone .app) Supported Browsers as of

    APRIL 2010 HIDDEN TAB DETECTION WIN - IE7-8, Firefox 3.6 http://blog.kaourantin.net/?p=83
  53. MAC - Safari 4, Webkit nightly (standalone .app), Firefox 3.7

    (standalone beta .app) Supported Browsers as of APRIL 2010 OUT OF VIEW DETECTION WIN - IE7-8 http://blog.kaourantin.net/?p=83
  54. Supported Browsers as of APRIL 2010 Linux folks - Well,

    you’re going to have to wait. It would require a LOT of overhauling within Flash Player and Linux browsers.
  55. The most under-hyped API in Flash. Globalization API

  56. Detects system locale properties to tailor: UNDER-HYPED Text language/orientation (RTL)

    Date/Time Currency formatting/parsing Number formatting/parsing String comparison for sorting or searching for text Upper and lower case conversions
  57. Supported in modern versions of Chrome, IE and Firefox Private

    browsing mode (inside of Flash Player)
  58. Handy tools for unpredictable runtimes. Mobile-specific APIs

  59. Detects if a physical keyboard is attached. If not, a

    virtual native keyboard is displayed. Mobile text input
  60. GPU-based vector renderer that replaces OEM software. Graphics hardware acceleration

    on mobile
  61. Vector graphics Bitmaps 3D effects Filters/Shaders Color transforms Alpha transparency

    Device/embedded text fonts Saffron Type and the cacheAsBitmap property Supports many types of hardware rendering
  62. if video or audio is not paused, stopped, or buffering.

    Disabled screensaver in fullscreen mode Basically, it checks to see if there is volume.
  63. Mobilizing, not minimizing Contextual APPLICATIONS

  64. desktop anymore. It’s not just the ... or even mobile

  65. are changing. Design & development Adaptability is key now.

  66. everything. The data drives Content will always be king.

  67. multiple instances had to be written. Traditionally One for desktop,

    mobile, tablets, TVs, etc.
  68. options for user interfaces Now we have Native, or custom?

    It’s up to you.
  69. to a “write once, deploy everywhere” workflow. We’re getting closer

    ... but it probably will never be that simple.
  70. “write once, deploy to many.” It’s more like - Scott

  71. it’s all about context! Mobilize, not minimize

  72. for using a device or platform that you forgot or

    didn’t want to test for. Don’t punish the user
  73. by taking away or diminishing features Don’t punish the user

    based on end platforms.
  74. that each platform affords. Use the unique advantages

  75. powered by Flash Player 10.1. Enter AIR Mobile The beginning

    of the “full” mobile Flash explosion.
  76. powered in part by a special build of Flash Player

    10.1, to drive the use of Enter litl OS Web book, web-connected TV, multitouch remote developer.litl.com Flash in the living room.
  77. virtually anywhere now. Flash can be used

  78. both designers and developers, to It’s up to you, make

    the best experiences with the Flash Platform.
  79. The END Kevin Suttle Flash Platform UX Architect { }

    KevinSuttle.com @kevinSuttle