$30 off During Our Annual Pro Sale. View Details »

Practical Design & Development with Flash on Mobile & Devices

Practical Design & Development with Flash on Mobile & Devices

Chris Griffith

January 24, 2014
Tweet

More Decks by Chris Griffith

Other Decks in Technology

Transcript

  1. Prac%cal  Design  &  
    Development  with  
    Flash  on  Mobile  &  Devices  
    Chris  Griffith  
    Qualcomm,  Inc.  
    User  Experience  Group  

    View Slide

  2. Prac%cal  Design  &  
    Development  with  
    Flash  on  Mobile  &  Devices  
    Based  on  a  talk  given  by  
    ScoG  Janousek  

    View Slide

  3. Agenda  
    Intro  
    Flash  PlaJorm  Overview  
    Prac%cal  Design  &  Development  
    Project  Discussion  
    Q  &  A  

    View Slide

  4. Poll  
    Flash?  
    iPhone?  
    Android?  
    webOS?  
    BlackBerry/RIM?  
    Other?  
    How  many  people  are  developing  mobile  apps  in?  

    View Slide

  5. Mobile  is  Everywhere  

    View Slide

  6. Intro  

    View Slide

  7. View Slide

  8. My  First  Public  Mobile  Apps  
    Mobile  Guide  Applica%on  Adobe  MAX  2009  –  iPhone  Version  

    View Slide

  9. My  First  Public  Mobile  Apps  
    Mobile  Guide  Applica%on  Adobe  MAX  2009  

    View Slide

  10. Mobile  Guide  Applica%on  Adobe  MAX  2009  –  Flash  Lite  Version  

    View Slide

  11. Flash  PlaDorm  Overview  

    View Slide

  12. Flash  is  pervasive  
    Whether  Steve  likes  it  or  not!  
    Flash  Player  is  installed  on  98%  
    of  Internet-­‐connected  PCs  and  
    more  than  450  million  devices  

    View Slide

  13. Desktop  to  Device  
    Working  with  Flash  on  devices  isn’t  just  making  things  smaller!  

    View Slide

  14. Flash  on  screens  
    Working  with  Flash  on  devices  isn’t  just  making  things  smaller!  

    View Slide

  15. Flash  on  SmartPhones  
    It’s  a  fun  %me  for  mobile  development    
    Google  Nexus  One   HTC  Incredible   Palm  Pre   HTC  EVO  

    View Slide

  16. Open  Screen  Project  
    Hey,  I  work  for  one  of  those  companies!  
    Open  Screen  Project  partners  span  the  en%re  value  chain  

    View Slide

  17. PracGcal  Design  &  
    Development  

    View Slide

  18. Flash  Mobile  &  Devices  101  
    .SWF  =  Flash  Content  
    .FLV  =  Flash  Video  
    Flash  Lite  1.x/2.x/3.x/4.x  
    Flash  10  
    Supported  Device  PlaJorms  =  Dozens  of  OEM  

    View Slide

  19. Flash  Lite  vs.  Flash  10  
    Flash  Lite  
    Op%mized  Flash  Player  for  Mobile  &  Devices  (4.x)  
    Flash  Lite  4.0  supports  Ac%onScript  3,  and  it  is  a  
    browser  plugin  (i.e.  not  standalone  player)  
     
    Flash  Lite  4.0  is  for  slower,  less  powerful  and  memory-­‐
    constraint  devices,  and  Flash  10  is  for  more  powerful  
    devices,  possibly  with  hardware  graphics  accelera%on.  
     
     

    View Slide

  20. Flash  Lite  vs.  Flash  10  
    Flash  Player  10.1*  
    Top-­‐Tier  Mobile  &  Devices  (in  beta  for  Android  OS)  
    *Late  2010  might  be  %meframe  for  release?  

    View Slide

  21. Flash  Lite  vs.  Flash  10  
    FlashPlayer  10.1  Features*  
    Enhanced  Performance  (87%  on  rendering)  
    Reduced  Memory  Comsump%on  (55%  improvement)  
    Mul%touch  &  Gesture  Support  
    Accelerometer  and  Geoloca%on  Support  
    Screen  Orienta%on  Support  
    Mobile  Input  Models  
    H.264  Video  &  Hardware  accelera%on  
    Ac%onScript  3  
    Out  of  Memory  Management  
    Sleep  Mode  
    Op%mized  SWF  Management  
     
    *Late  2010  might  be  %meframe  for  release?  

    View Slide

  22. Flash  Lite  vs.  Flash  10  
    AIR  for  Mobile*  
    Top-­‐Tier  Mobile  &  Devices  (in  beta  for  Android  OS)  
     
    *Late  2010  might  be  %meframe  for  release?  

    View Slide

  23. PracGcal  Design  

    View Slide

  24. CreaGon  Tools  
    Photoshop   Illustrator   Fireworks  
    Flash   Flash  Catalyst   Flash  Builder  

    View Slide

  25. Wireframing  
    Lots  of  great  tools  to  assist,  but  pen  and  paper  work  just  fine  

    View Slide

  26. Prototyping  
    Guess  what  I  think  about  this  part  of  the  process?  

    View Slide

  27. UI  Components  
    Flash  Lite  
    Nokia  
    Sony  Ericsson  
    Feather  Framework  (FL  2.x)  
    Adobe  XD  UI  Components  (FL  1.1/FL  2.x)  
     
     

    View Slide

  28. UI  Components  
    Flash  10  
    Kevin  Hoyt’s  Android  Components  
    Reflex  
    Flex  
     
     

    View Slide

  29. Designing:  Best  PracGces  
    Wireframe  and/or  paper  prototype  
    Design  LOTS  of  prototypes  
    Start  with  vectors  to  handle  varying  screen  resolu%ons  
    Learn  design  considera%ons  for  your  plaJorm  
    Reuse  UI  components  when  possible  

    View Slide

  30. PracGcal  Development  

    View Slide

  31. The  Flash  PlaDorm  
    Flex Flash Media
    Server Family
    Flash
    Platform
    Services
    AIR
    Flash Player
    Flash Builder
    Flash
    Catalyst
    Flash
    Professional
    FLASH PLATFORM
    TOOLS FRAMEWORK CLIENTS
    SERVICES
    SERVERS
    LiveCycle

    View Slide

  32. Develop:  Best  PracGces  
    Prototype  
    Conserving  memory  
    Using  bitmaps  
    Minimizing  CPU  usage  
    OpGmizing  network  interacGons  
    SQL  Database  performance  
    Read:  Op%mizing  Performance  for  the  Adobe  Flash  PlaJorm  

    View Slide

  33. PracGcal  TesGng  

    View Slide

  34. Device  Central  

    View Slide

  35. TesGng:  Best  PracGces  
    Always  test  on  device  (when  possible)  
    Adobe  Device  Central  
    Automated  Test  Scripts  
    UGlize  Device  Central’s  Panel  (memory,  cpu,  etc)  
    UGlize  tesGng  services  (DeviceAnywhere)  
     

    View Slide

  36. PracGcal  Deployment  

    View Slide

  37. Deployment:  Best  PracGces  
    Figure  out  your  business  model  
    Look  at  the  #’s!  (devices,  customers,  etc)  
    Focus  on  key  on  1-­‐2  device  plaDorms  

    View Slide

  38. Project  Discussion  

    View Slide

  39. mobileMAX  
    Overview  
    Flash  Lite  2.x  Applica%on  
    PlaJorm  =  Nokia  S60  (Symbian)  
    Targets  =  N95,  6650  
    3-­‐5  weeks  project  %me  
     
    Features  
    Personal  Schedule  
    unConferences  
    Had  no  idea  what  this  would  lead  to…  

    View Slide

  40. mobileMAX  
    Overview  
    WebKit/iUi  
    PlaJorm  =  iPhone/iPod  
    1  week  project  %me  
     
    Features  
    Personal  Schedule  
    unConferences  
    Had  no  idea  what  this  would  lead  to…  

    View Slide

  41. Conference  SoluGons  
    FlashCamp  was  not  released  

    View Slide

  42. Wrap  Up  

    View Slide

  43. Mobile  is  Everywhere  

    View Slide

  44. Q&A  

    View Slide

  45. Contact  me:  
    • cgriffi[email protected]  
    • TwiGer:  @chrisgriffith  
    • Blog:  hGp://chrisgriffith.wordpress.com/  

    View Slide

  46. Thanks!  

    View Slide

  47. View Slide

  48. Title  

    View Slide