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

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

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

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

Mobile  is  Everywhere   

Intro   

No content

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

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

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

Flash  PlaDorm  Overview   

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   

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

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

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

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

PracGcal  Design  &   Development   

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   

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.       

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?   

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?   

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

PracGcal  Design   

CreaGon  Tools   Photoshop   Illustrator   Fireworks   Flash   Flash  Catalyst   Flash  Builder   

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

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

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

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

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   

PracGcal  Development   

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 

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   

PracGcal  TesGng   

Device  Central   

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)     

PracGcal  Deployment   

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

Project  Discussion   

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…   

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

Conference  SoluGons   FlashCamp  was  not  released   

Wrap  Up   

Mobile  is  Everywhere   

Q&A   

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

Thanks!   

No content

Title