Practical Design & Development with Flash on Mobile & Devices

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:  
    • cgriffith@qualcomm.com  
    • TwiGer:  @chrisgriffith  
    • Blog:  hGp://chrisgriffith.wordpress.com/  
    

    View Slide

46. Thanks!  
    

    View Slide

47. View Slide

48. Title  
    

    View Slide