November 2006 Mobile Prototyping Workshop

Mobile Prototyping Workshop

Flash Lite 2.0

Dean Eckles

Greg Cuellar

November 2006 Mobile Prototyping Workshop

Flash Lite Development Environment Setup

• http://mobpro.pbwiki.com/Install

November 2006 Mobile Prototyping Workshop

About the Instructor

Dean Ecklesmobile 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 2006 Mobile Prototyping Workshop

A Survey of Mobile Development

Dean Eckles

Greg Cuellar

November 2006 Mobile 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 2006 Mobile Prototyping Workshop

Some Mobile Development Options

• Python• J2ME• Symbian C++• BREW• Flash Lite• Windows

Mobile

• WAP/XHTML• SMS• MMS• Palm• Linux• SVG• more...

November 2006 Mobile 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 2006 Mobile Prototyping Workshop

Python for S60Rapid 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 2006 Mobile 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 2006 Mobile 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 2006 Mobile 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 2006 Mobile 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 2006 Mobile Prototyping Workshop

Flash LiteEngaging 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 2006 Mobile Prototyping Workshop

Prototypingvs.

Development

November 2006 Mobile Prototyping Workshop

Flash Lite Abilitieson 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 2006 Mobile Prototyping Workshop

Flash Lite Example Applications

• Traffic cam • Flickr search

November 2006 Mobile 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 2006 Mobile Prototyping Workshop

Quick Flash Introduction, cont.

• ActionScript– EMCAScript– similar to JavaScript

• Important Distinctions– Author-time vs. runtime– Timeline vs. external AS files

November 2006 Mobile 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 2006 Mobile Prototyping Workshop

Let’s Get Started!

• Example 1 – Text fields

November 2006 Mobile Prototyping Workshop

More examples… 2

• Example 2 – Key presses and tweens

November 2006 Mobile Prototyping Workshop

More examples… 3

• Example 3 – Screen switching