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  

2. Prac%cal  Design  &   Development  with   Flash  on  Mobile

    &  Devices   Based  on  a  talk  given  by   ScoG  Janousek  

3. Agenda   Intro   Flash  PlaJorm  Overview   Prac%cal  Design

    &  Development   Project  Discussion   Q  &  A  

4. Poll   Flash?   iPhone?   Android?   webOS?  

   BlackBerry/RIM?   Other?   How  many  people  are  developing  mobile  apps  in?  

5. Mobile  is  Everywhere  

6. Intro  

7. None

8. My  First  Public  Mobile  Apps   Mobile  Guide  Applica%on  Adobe

    MAX  2009  –  iPhone  Version  

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

    MAX  2009  

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

     

11. Flash  PlaDorm  Overview  

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  

13. Desktop  to  Device   Working  with  Flash  on  devices  isn’t

     just  making  things  smaller!  

14. Flash  on  screens   Working  with  Flash  on  devices  isn’t

     just  making  things  smaller!  

15. Flash  on  SmartPhones   It’s  a  fun  %me  for  mobile

     development     Google  Nexus  One   HTC  Incredible   Palm  Pre   HTC  EVO  

16. Open  Screen  Project   Hey,  I  work  for  one  of

     those  companies!   Open  Screen  Project  partners  span  the  en%re  value  chain  

17. PracGcal  Design  &   Development  

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  

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.      

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?  

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?  

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?  

23. PracGcal  Design  

24. CreaGon  Tools   Photoshop   Illustrator   Fireworks   Flash

      Flash  Catalyst   Flash  Builder  

25. Wireframing   Lots  of  great  tools  to  assist,  but  pen

     and  paper  work  just  fine  

26. Prototyping   Guess  what  I  think  about  this  part  of

     the  process?  

27. UI  Components   Flash  Lite   Nokia   Sony  Ericsson

      Feather  Framework  (FL  2.x)   Adobe  XD  UI  Components  (FL  1.1/FL  2.x)      

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

      Reflex   Flex      

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  

30. PracGcal  Development  

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

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  

33. PracGcal  TesGng  

34. Device  Central  

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)    

36. PracGcal  Deployment  

37. Deployment:  Best  PracGces   Figure  out  your  business  model  

    Look  at  the  #’s!  (devices,  customers,  etc)   Focus  on  key  on  1-­‐2  device  plaDorms  

38. Project  Discussion  

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…  

40. mobileMAX   Overview   WebKit/iUi   PlaJorm  =  iPhone/iPod  

    1  week  project  %me     Features   Personal  Schedule   unConferences   Had  no  idea  what  this  would  lead  to…  

41. Conference  SoluGons   FlashCamp  was  not  released  

42. Wrap  Up  

43. Mobile  is  Everywhere  

44. Q&A  

45. Contact  me:   • cgriffith@qualcomm.com   • TwiGer:  @chrisgriffith   • Blog:  hGp://chrisgriffith.wordpress.com/

     

46. Thanks!  

47. None

48. Title