November 2006Mobile Prototyping Workshop Flash Lite 2.0 Dean Eckles Greg Cuellar

November 2006Mobile Prototyping Workshop Flash Lite Development Environment Setup

November 2006Mobile Prototyping Workshop About the Instructor Dean Eckles mobile designer and researcher Designed and built prototypes at Stanford, Yahoo! Prototype Design, and Yahoo! Research Berkeley M.S. student in Symbolic Systems Program B.S. Symbolic Systems, B.A. Philosophy Persuasive Technology Lab ZoneTag -- a context-aware mobile photo sharing application from Yahoo! Research Berkeley Changing mobile location disclosure behaviour using persuasive technology

November 2006Mobile Prototyping Workshop A Survey of Mobile Development Dean Eckles Greg Cuellar

November 2006Mobile Prototyping Workshop Why Mobile Development is Hard Targeting multiple devices –Intra- and inter-device UI consistency –Varying device capabilities –Completely different platforms Limited device capabilities –Traditionally great OOP not always the best route more...

November 2006Mobile Prototyping Workshop Some Mobile Development Options Python J2ME Symbian C++ BREW Flash Lite Windows Mobile WAP/XHTML SMS MMS Palm Linux SVG more...

November 2006Mobile Prototyping Workshop Key Platform Considerations Deployment –Will this prototype be deployed at all? –What devices do our users have? Development time Device access –Using e.g. camera, bluetooth, contacts list? UI –Creating entirely new UI elements?

November 2006Mobile Prototyping Workshop Python for S60 Rapid concept prototyping Pros –Very rapid prototyping –Clean syntax, OOP potential –Built-in UI widgets –Access to device –Extensible with Symbian C++ Cons –Slow to prototype new UI –Can be slow at runtime –Very limited deployment –S60 3rd edition security?

November 2006Mobile Prototyping Workshop Java Micro Edition (J2ME) "Write once run anywhere" -- sometimes Pros –Java goodness –Huge deployment –Built-in widgets and powerful drawing capabilities –JSRs add new APIs (e.g. camera) Cons –Heavy development overhead –Abstract UI or build your own –Finding the "perfect storm" of JSRs

November 2006Mobile Prototyping Workshop Symbian C++ Very powerful, difficult Pros –Access to (almost) everything the phone has to offer –Large development, especially in Europe Cons –Large development and learning overhead –Lots of asynchronous calls –Symbian signing and 3rd edition security

November 2006Mobile Prototyping Workshop BREW Pros –Good install process for users –Owned by Qualcomm, so all issues can be brought up with them Cons –CDMA phones only (Verizon) –Limited development tools –Severe memory limitations ? –Complete Qualcomm control

November 2006Mobile Prototyping Workshop WAP/XHTML Pros –Easy to create (just markup) –No install for users –Huge deployment –Make incremental changes –WAP Push Cons –Very limited UI options –Latency can make each round trip painful –No access to device

November 2006Mobile Prototyping Workshop Flash Lite Engaging interactions, with limits Pros –Very fast prototyping of engaging UI –Browse, install, or mixed model –Make incremental changes –Quickly growing deployment Cons –Limited deployed outside Japan –Little access to device –Memory limits

November 2006Mobile Prototyping Workshop Prototyping vs. Development

November 2006Mobile Prototyping Workshop Flash Lite Abilities on its own What Flash Can Do: HTTP/HTTPS connections Parse XML Play video and sound SMS Some file access What Flash Can't Do: Full file system access Camera access Bluetooth Location info Socket connections Note: Flash can interface with other technologies (such as Symbian C++) to do some things under "Can't"

November 2006Mobile Prototyping Workshop Flash Lite Example Applications Traffic camTraffic cam Flickr search

November 2006Mobile Prototyping Workshop Quick Flash Introduction Timeline –“organizes and controls a document's content over time in layers and frames. Like films, Flash documents divide lengths of time into frames.” Movie clips –“autonomous objects that can respond to events, send messages to other movie clip objects, maintain their state, and manage their child clips.”

November 2006Mobile Prototyping Workshop Quick Flash Introduction, cont. ActionScript –EMCAScript –similar to JavaScript Important Distinctions –Author-time vs. runtime –Timeline vs. external AS files

November 2006Mobile Prototyping Workshop Flash Lite History Flash Lite 1.0, 1.1 –based on Flash 4 –widely deployed only in Japan (imode) –installed on some S60 phones Flash Lite 2.0 –based on Flash 7 –just deployed by Verizon, more coming

November 2006Mobile Prototyping Workshop Let’s Get Started! Example 1 – Text fieldsText fields

November 2006Mobile Prototyping Workshop More examples… 2 Example 2 – Key presses and tweensKey presses and tweens

November 2006Mobile Prototyping Workshop More examples… 3 Example 3 – Screen switchingScreen switching