Tell me about you

• What type of phone do you have? 517-xxx-xxxx– 1 – Non-Smart Phone– 2 – iPhone / iPod / iPad– 3 – Android– 4 – Blackberry– 5 – Windows Mobile or other

• Have you ever developed a mobile application?517-xxx-xxxx– 1 – Yes– 2 – No

About me

• Work for MSU in the Telecommunication Systems Department.

• Run the Michigan Flex Users Group• Adobe Community Professional

517-xxx-xxxx 517-xxx-xxxx

Mobile Devices

• Mobile and Portable Devices are the wave of the future.– 4.6 BILLION cellular subscriptions worldwide

• 3.5+ Billion are capable of text messaging• 257 Million data plan holders within the USA (over 1

Billion expected worldwide)

– There is significant ‘face time’ with mobile applications – and dollars and interest associated with them.

Competing Forces…

• Unfortunately, up to now the mobile market was very costly and difficult to work with…– Each browser on mobile devices is different. Some

don’t even support basic JavaScript!– Less than 30% of smart phones support ANY aspect

of HTML 5– Many phones don’t even support HTML! Some rely

on an aged system called WAP. – Native applications were always specific to each

platform

Competing Forces…• Additionally, when

working with mobile devices, most people EXPECT there to be an app– They are no longer

searching the web, they are searching for apps.

Mobile Devices

• Fragmentation of the mobile device space for native apps– Android

• Native Android Code, Flash/Flash Lite, JavaScript

– Apple• Native Apple Code, JavaScript, ‘HTML5’

– RIM• Java Applications, Native RIM

– Windows Mobile• Windows CE Compiled Native Apps / Silverlight

Mobile Devices

• Fragmentation of the mobile device space for native apps– Android AIR Compatible Today

• Native Android Code, Flash/Flash Lite, JavaScript

– Apple AIR Compatible Today• Native Apple Code, JavaScript, ‘HTML5’

– RIM AIR Compatible Soon• Java Applications, Native RIM

– Windows Mobile AIR Compatible Soon• Windows CE Compiled Native Apps / Silverlight

The Adobe Integrated Runtime• Adobe has published an application framework

that allows developers to create applications that run across ‘all three screens’– Desktops (Windows / Mac / Linux)– Mobile (Android / iOS / RIM / Windows Mobile)– Televisions (Broadcom / TiVO / Motorola)

• AIR allows you to reuse your code to create apps over multiple platforms **

• The tool are available today. As more devices support AIR, you can quickly compile to them!

The Adobe Integrated Runtime

• The AIR toolsets will never be as powerful as an application targeted specifically for one device.– However, for 90% of the applications out there

today it is an excellent choice.

• For example, PopCap games (the makers of Plants vs. Zombies and Bejeweled) spends nearly one person for a full year porting each of their games from one platform to another…

Writing an app• We will be writing a

quick app that shows one of many workflows you can use to develop Mobile apps based on the AIR framework.

• We will be writing a campus directory app for MSU

A few caveats• We will not dealing with best practices in

optimizing mobile apps for speed.– We will cover some tips and tricks in creating mobile

apps at the end of the presentation• The final application will not be screen-reader

compatible. – There are techniques that can be done during the

programming phase that can enable that.• We will be targeting one screen size, in one

orientation. I will mention during the demo how to target more than one screen size.

Our Demo Workflow…

Adobe Device Central

Adobe Illustrator / Photoshop

Adobe Flash Catalyst

Adobe Flash Builder / Professional

AIR Application on Device

The Adobe Toolset

• Device Central – Allows you to simulate applications (and Flash SWFs) on devices. Also creates templates for new documents to be created

• Flash Catalyst – Allows you to take Photoshop or Illustrator files and make them interactive for prototypes. Prototypes can then be given to a developer to convert to a working application.

The Adobe Toolset

• Flash Builder – The IDE that developers use to code backend of the prototype to make the application function. Developers use ActionScript to make their applications.

DEVICE CENTRAL AND PHOTOSHOPExploring creating an application starting with…

Key Points with Photoshop• Separate each of your

functional components into their own layers & folders

• Be careful with labels and fonts! – Custom fonts look nice,

but they are BIG– Avoid rasterizing

labels/fonts! This will break accessibility!

ADOBE CATALYSTWorking with our existing Photoshop design in…

Key Points with Catalyst

• Convert each item you want to be ‘active’ into that item by clicking on it, then the HUD.

• Convert Scroll Bars first, then work forward from there.

• Run by doing anALT - ENTER

ADOBE FLASH BUILDERMaking your application live with…

Key Points with Flash Builder

• Everything you can do in Flash Builder, you can do in Flash Professional, if you don’t have a coder available…

Key Points with Flash Builder

• Flash Builder 4.0 (available today) can build Android and iOS apps, but you will need to run a few command line to deploy them to the phone.– Flash Builder “Burrito” is available as a beta today

and includes this workflow. – iOS deployment still needs the command-line if you

are not on the Mac OSX.

Tips and Tricks building Mobile apps• Mobile apps can’t make

the user ‘think’ about what to do.

• Simplicity is key when designing apps.– There is not a lot of room

for stuff on the screen.– There is often not much

time to communicate with the user.

Tips and Tricks building Mobile apps• Make your buttons and

other UI elements BIG. People have big fingers and often are not accurate at hitting things.

• Make text BIG. 21 point font is the smallest you should go – the bigger the better!

Tips and Tricks building Mobile apps• Don’t think in terms of

clicks and drags. When people interact with mobile devices they interact with apps different!– Swipe– Pinch and Zoom– Throws– Rotate the device– Shake, twirl, twist, yell

Tips and Tricks building Mobile apps• Also, remember, your

apps may not always be connected to the network!– In fact, it may disconnect

in the middle of a transaction – know how to recover from it!

Tips and Tricks building Mobile apps• Test on EVERY device you

can get your hands on!– Even if you use a

framework like AIR, it may behave slightly differently because of certain features of the phone.

• Get to know some friends that have phones you wish to target ;-)

Resources

• Adobe Flash Builder Burrito –http://labs.adobe.com

• Developing Mobile Applications & Using Adobe Catalyst : http://tv.adobe.com

• HTML 5 Framework for developing mobile apps : http://jquerymobile.com/

• My Blog : http://quetwo.com