PRACTICAL DESIGN &
DEVELOPMENT WITH
FLASH ON MOBILE & DEVICES
FITC Mobile 2009, Toronto
Scott Janousek, Hooken Mobile

Agenda
INTRO
FLASH PLATFORM OVERVIEW
PRACTICAL DESIGN & DEVELOPMENT
PROJECT DISCUSSION
OUTRO
Q&A
... we’ve got around 50 minutes for all this.

Poll
How many people are doing ...
Flash?
Symbian?
iPhone?
webOS?
BlackBerry/RIM?
Windows Mobile?
Android?
What do you like to get “jiggy” with?

INTRO

SCOTT JANOUSEK
Founder, Hooken Mobile
Developer, Evangelist, Author, Educator, Gadget Geek
9 years with Flash
4 years with Mobile & Devices
My Platforms: Flash, Symbian, webOS, iPhone, Android
Summary: I’m a gadget & device geek who happens to be a Flash Developer, also.

My First Moble App
Mobile Guide Application
FITC 2005
Symbian S60 devices - Flash Lite 1.1
All good things come from FITC.

Flash Mobile, Then ...
Ah, memories ...

Flash on Devices, Now !
`
I try to be a designer, but really, I’m more of a developer.

Books
Foundation Flash for Mobile Devices
www.flashmobilebook.com
AdvancED Flash on Devices:
Mobile Development with Flash Lite and Flash 10
advancED.flashmobilebook.com
Some resources if you’re interested in learning how to create Flash apps for Mobile & Devices.

FLASH PLATFORM OVERVIEW

Flash is pervasive
of Internet-enabled PC’s in the of Alexa top 100 websites are of all video
world run Flash using Flash on the web
is Flash
87% of Internet connected PCs 200 million AIR
worldwide have installed installs and growing
Flash Player 10
There’s a ton of Flash being used out there. Source: Adobe

Flash on the Desktop
Widgets! Consumer" Business"
Advertising" Tools" Apps"
Social"
Video" Games"
Apps"
Lots of use cases for Flash on the desktop and web ...

Desktop to Device
Web content & applications Standalone Applications
Working with Flash on devices isn’t just “making things smaller”. New experiences are required!

Market Penetration
STRATEGIC ANALYTICS FORECAST
1 billion Flash enabled devices will have
shipped by end of Q1 2009, one year ahead of
Adobe’s 2007 schedule
Close to 40% of all new mobile devices
shipped with Flash in 2008
Source: Strategy Analytics 2008
I’m pretty sure Dr. Evil from Austin Powers would love this slide. www. ashmobileblog.com

Flash on screens
Portables
Desktops Non-Portables Embedded
& Mobile
Flash is versatile across not just desktop, but other device platforms as well. Neat-o!

Flash on SmartPhones
HTC Hero (Android) Sony Ericsson idou Palm Pre (webOS)* Nokia N97 (S60 - Symbian)
These are some very tasty devices which support Flash (in some fashion). * Coming Soon ...

Adobe Digital Home
Adobe wants to bring more Flash experiences into your living room. Sounds good to me.

Open Screen Project
Open Screen Project partners span the entire value chain
Chipset vendors > OEMs > Operators > Brands & Content Providers
Lots of big players in the OSP, and OEMS seem to love Flash, especially.

Open Screen Project
Singular experience, Multiple devices
Enable consumers to engage with rich experiences seamlessly across any device, anywhere.
This is the dream ... the reality is always some fragmentation, and it is challenging to avoid.

PRACTICAL DESIGN &
DEVELOPMENT

Flash Mobile & Devices Basics
.SWF = Flash Content
.FLV = Flash Video
Flash Lite 1.x/2.x/3.x ... and soon, “Flash 10”
Supported Device Platforms = Dozens of OEMS
Lots going on in the Flash World !!!
If you’re into Flash, SWF and FLV are your “friends”.

Flash Lite vs. Flash 10
Flash Lite
Optimized Flash Player for Mobile & Devices (1.x/2.x/3.x)
Flash 10 *
Coming soon to top-tier Mobile and other Devices (eta 2010)
* It’ll probably be Q2-Q3 when Flash 10 is in signi cant #’s to really impact market.

Markets to target ...
U.I. Browser Apps Services
Four “verticals” which make sense for using Flash on Mobile and Devices ...

PRACTICAL DESIGN

Creation Tools
Adobe Photoshop Adobe Illustrator Adobe Fireworks Adobe Flash
Flash, Photoshop, Fireworks are what I use.

Wireframing
If you aren’t doing wireframing in your mobile work ow, start now. Find templates to use!

Prototyping
Not everything has to work, but a Proof of Concept is nice practice to adopt.

UI Components
1st Party 3rd Party
Nokia Flash Lite Feather Framework (FL 2.x)
Sony Ericsson Adobe XD UI Components (FL 1.1/2.x)
Why reinvent the wheel? Search to see if UI components are available for your device platform.

Designing: BEST PRACTICES
Wireframe and/or paper prototype
Design lots of prototypes (“pieces” of app)
Use Adobe Fireworks for compositions
Learn design considerations for your target
Reuse UI components when possible
Check out my main man, Thomas Joos, presentation: Tips & Tricks for Flash Lite Optimization

PRACTICAL DEVELOPMENT

The Flash Platform
Tools to Design & Develop Framework Clients Servers
Adobe Flash Adobe Flash Adobe Flash Adobe Adobe Flash Adobe AIR Adobe Flash BlazeDS
CS4 Professional Catalyst Builder Flex Player Media Server Data Services
Family
Lots of goodies to use.

IDE - Flash CS4
Flash CS4 is best whenever an app calls for heavy animation (e.g. games, screen savers, etc).

IDE -3rd Party
Eclipse and other Open Source IDEs Flash Develop (AS2)
If you hate Flash CS4 and Flash “timelines”, there’s always MTASC with other IDEs.

Which version to use?
ACTIONSCRIPT 1.0 ACTIONSCRIPT 2.0, 3.0 *
Simple Games, VS. Complex Apps,
Screensavers + Wallpapers Web Services Integration,
Custom User Interfaces Data, APIs
* coming soon ...
To AS2, or not AS2, that is the question. Nowadays, you should be “AS2‘ing”.

Flash Lite Community Frameworks
Feather Framework
Shuriken
I’ve used Feather framework on a few projects. Rough around edges, but saves time.

Flash Lite APIs
Native 1st Party 3rd Party
fscommand2() Nokia Series 60 Platform Services Kuneri Lite
Sony Ericsson Project Capuchin SWFPack
Qualcomm BREW Mobile Platform Janus
Flyer
If you want to tap into GPS, accelerometer, bluetooth, camera, etc you must extend Flash Lite.

Develop - BEST PRACTICES
Prototype pieces of app, then version 1.0
Use AS 2.0 Frameworks for larger projects
1st & 3rd Party UI Components for reuse
Use Flash Lite “Extenders” to tap APIs (GPS, etc)
Use Flash CS4 for highly visual apps
Use Eclipse & MTASC work ow for complex apps

PRACTICAL TESTING

Device Central
This product saves me tons of time, which makes my clients happier.

Testing: BEST PRACTICES
Always test on physical targets (when possible)
Adobe Device Central Task Plugins
Automated Test Scripts
Utilize Device Central Panels (memory, cpu, etc)
Utilize testing services ... DeviceAnywhere, RDA
ActionScript trace() is your friend with Flash Lite

PRACTICAL DEPLOYMENT

Packaging
Nokia Devices
.SIS, .NFL, .WGZ
Windows Mobile
.CAB
Others
.SWF, .JAR, & Misc
Flash Lite apps can come packaged, just like Christmas Prezzies.

ADOBE DISTRIBUTABLE
PLAYER
One word: cool.

Distributing
Flash Mobile Content
Check out Mark Doherty’s presentation: Flash Lite Distribution & Open Screen Fund at FITC!
Also, Barclay & Burdick’s: Develop & Distribute for Nokia SmartPhones presentation!

Deploying: BEST PRACTICES
Figure out your business model, rst
Scrutinize the #’s: devices, customers, etc
Pick 1-2 device platforms to attack
Seed free content to drive your pay apps
Target FL 1.1 or FL 2.x for greater # devices

PROJECT
DISCUSSION

Species Explorer
Overview:
Touchscreen App
Flash Lite 3.x application
Platform = Nokia S60 (Symbian)
Targets = 5800 & N97
3-4 weeks project time
Features:
Geolocation (GPS)
Camera Snapshots & Upload
Data Exchange with Drupal
The Nokia 5800 is a pretty sweet device to develop Flash Lite 3.x on.

Species Explorer - Design
Main menu Login Report Browse Details Map
Not a ton of functionality in this app, but a fair amount of API.

Species Explorer -Discussion
Some of the “lessons learned” from this project.

OUTRO

Contact Info
scott@scottjanousek.com
twitter: scottjanousek
scottjanousek@hookenmobile.com
twitter: hookenmobile
Don’t be shy.

Book Giveaway
Free Book for a Correct Answer!
READY?
Prize!

Q&A
Questions ?
Just don’t ask me the Air Speed Velocity of a Laden Swallow ...

iPhone Conference (Boston)
October 17-18 2009
MCLE Conference Center
Boston, Massachusetts
www.voicesthatmatter.com
Looks cool. Boston ain’t that bad. The Big Dig is complete. :)

Looking for a job?
www.mobiledevjobs.org
Tweet and Blog about this, please.

Thanks
Enjoy the rest of`the Conference!
RT @joe OH: Finally, he’s done, when we can grab a beer, now! ;)