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.
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!
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
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