The document provides an overview of the Sheridan Mobile Summit 2011 presentation by Matthew Fabb on developing mobile applications using Adobe AIR and related tools. It covers the features of Adobe Flex and its 4.5 version aimed at mobile development, including support for different devices, DPI handling, and key components for building apps. The presentation also touches on tools like Flash Builder, Dreamweaver, and the integration of HTML5 with mobile platforms.

1. Sheridan Mobile Summit 2011
Developing for Mobile
with Adobe AIR
By Matthew Fabb

2. Who Am I?
Education
Sheridan's System Analyst/Computer Programmer
in 2000
Sheridan's Interactive Mulitmedia in 2002
I am currently a developer
at StickerYou
I was a technical editor on Wrox’s
Professional Flex 3
Authored by:
Joseph Balderson, Andrew Trice, Peter Ent,
Joe Berkovitz, Tom Sugden, Todd Prekaski,
David Hassoun, and Jun Heider.
http://www.mathewfabb.com
contactme@matthewfabb.com
@mattthewfabb

3. Adobe & mobile
Dreamweaver CS5.5
jQuery Mobile integration
Allows you to create Android & iOS apps with PhoneGap
using HTML, JS & CSS
Adobe “Wallaby”
Converts Flash into HTML5 content
Very basic animations, good for banner ads
WebKit only & optimized for iOS
Adobe “Edge” prototype
HTML5 animation tool
Uses jQuery

4. Adobe & Mobile
Digital Publishing Suite
Creates digital magazines for iOS, Android &
PlayBook (possibly for WebOS in the future)
Photoshop Touch SDK
Flash CS5.5
CS5 targeted iOS & now CS5.5 adds Android &
Playbook
Flash Builder 4.5
Includes Flex SDK 4.5 that has components
targeted for mobile

5. Flash & AIR - Reach

6. Xoom, Galaxy Tab, Droid2, iPod Touch, iPad and in the browser.

7. What is Flex?
Flex is an Adobe open source framework to create Flash
applications
MXML, an XML-based mark up language is used to layout
the interface of the application
ActionScript is used with the MXML for interactivity
CSS can be used to style the application
MXML, CSS & ActionScript is compiled into generated
ActionScript which is then compiled into a SWF file

8. Adobe AIR
AIR for desktop
.AIR file for Mac, Linux, PC
AIR for mobile
.IPA file for iOS
.APK file for Android
.BAR file for PlayBook

9. What is Flex?
The Flex compiler is free & open source
Developers can create Flex applications via:
Adobe's Flash Builder
3rd party tools such as FlashDevelop or FDT
Any text editor & the Flex compiler

10. Flex 4.5
Next version of the Flex SDK is 4.5, code named Flex Hero
Additional features were added to regular Flex applications,
but the main focus was mobile

11. Mobile Application
Supports hardware keys
Orientation support
Provides API to save data between application sessions
& interruptions (such as phone calls)
Has 2 methods of dealing with multiple DPIs on different
devices

12. 480x320 800x480 854x480 960x640 1024x600 1024x768
160 DPI 240 DPI 240 DPI 326 DPI 170 DPI 120 DPI

13. Goals of Flex 4.5
Hero's 3 main goals of Flex 4.5
Spark Maturation
Flex 4 Spark components still lag behind MX
components
Likely not to catch up completely in 4.5
Large-Application Development
Better RSLs
You can no use RSLs with monkey patching
More spark componets:
DataGrid, Form, PopUpContainer
Text Layout Framework 2.0 integration
Multi-Screen Development
Mobile

14. What Flex 4.5 Mobile is made up of?
Mobile theme
Mobile Application
View & ViewNavigator
Mobile Application Components
ActionBar
Text Components
List, Scroller and Touch Gestures
Mobile Splash Screen
Mobile View Menu – For Android menu settings hardware button
Functionality to deal with different DPI
Soft keyboard support

15. Flex 4.5 app breakdown
ActionBar can appear above or bellow the view or both
ActionBar is consistent while the View changes from
screen to screen

16. Mobile theme
Set of skins that are quite different from the regular Spark skins
Designed and optimized for mobile devices
For performance reasons all graphics are FXG and interaction is pure
ActionScript
Mobile skins in the preview for the following regular spark components:
Button
CheckBox
RadioButton
TextInput
TextArea
List
Scrollbar
More to come
before final release

17. View & ViewNavigator
The basis of how Flex Hero mobile works
The main area is a stack where views are popped on
and off
Only one view is visible at a time
When leaving a view the UI objects are destroyed, but
data object persists, keeping the memory footprint
small
You can override the destruction of the UI, if it's an
expensive UI to build and destroy (detailed chart with
lots of visible data)
A history is maintained and when the back button is
pressed it cycles through the history
Transitions can be easily added from one screen to
another

18. ActionBar
There's 3 areas of the ActionBar
navigationContent, titleContent and actionContent
All are optional just like the ActionBar itself
TitleContent default has a label displaying the view title
Can be disabled to just have the title of the app or
something else similar
Can be used with view transitions to animated in-sync with
the view

19. Mobile text components
Optimized for mobile
TLF (Text Layout Framework) is not used and discouraged
for mobile
A mobile version of TLF is in the works but is not
ready yet
Flex mobile text components use old school TextField which
has better performance over the new FTE (Flash Text
Engine)

20. Additional components
Mobile List, Scroller
Similar to regular list, but optimized using
MobileItemRenderer & responds to touch events
Splash screen
A graphic or animation to show as your application
starts up and initializes
Mobile View Menu
Not in the latest build, but in the specification and is
a menu that appears when the physical menu
button on Android devices is pressed

21. Dealing with multiple DPIs
Flex Hero has multiple ways displaying content at different
DPIs
In dealing with different DPI's, Flex Hero divides it into 3
sections:
160 dpi
< 200
240 dpi
>= 200
< 280
320 dpi
<= 280

22. Dealing with multiple DPIs
ApplicaitonDPI
Get the app working on one DPI, set that DPI and
have the app scale up or down for other DPIs
MultiDPIBitmapSource
<s:MultiDPIBitmapSource
source160dpi="logo.png"
source240dpi="logo240.png"
source320dpi="logo320.png" />
CSS that deals with multiple DPIs