An introduction to Flex "Hero" for mobile devices. Covers new mobile features, optimizations, and some Flash Player 10.2 content.

1. Building Mobile Applications with Flex “Hero”

2. Ryan Stewart
Developer Evangelist, Adobe
ryan@adobe.com
blog.digitalbackcountry.com
@ryanstewart
github.com/ryanstewart
Based in Seattle
Things I Like:
Beer
Mountaineering/Hiking/Backpacking
Geolocation/Mapping stuff

3. People here smarter than I am

4. Agenda
Flash on Mobile Devices
Introduction to Flex Mobile
UI Paradigms with Flex Mobile
Optimizing for Flex Mobile
Bonus! - Features of Flash Player 10.2

5. Mobile Flash Development

6. Flash Player 10.1
In-browser content
Games, video
Deploy as a SWF,
put on the web

7. Flash Player 10.1 Adobe AIR
In-browser content Mobile applications
Games, video Native APIs, extra
functionality
Deploy as a SWF,
put on the web Package to target
individual devices

8. AIR for Devices
.ipa .bar .apk

9. AIR for Device Applications are
“Native”
That means they can be put on app
stores
NOT that the UI components are
native

10. So we can use Flex to build native apps

11. Issues with Flex on
Mobile Devices
Complex Components: DataGrids,
Charts, Tree
Memory Footprint
Desktop UI Screen Patterns

12. http://designingwebinterfaces.com/
designing-web-interfaces-12-
screen-patterns

13. Addressing those issues with
Flex “Hero”

14. Mobile-Optimized Components

15. What does Mobile Optimized
Mean?
Rewrote and optimized UIComponent
Created a mobile theme which supports:
Bigger components
CSS Style for enabling touch (Scrollers)

16. The Mobile Theme
Used automatically when MobileApplication tag is
used
Includes larger, touch-friendly controls
Adds inputMode CSS style for touch

17. interactionMode Style
mouse touch
Fires hover events Creates wider hit area
Use scrollbar Hides scrollbar

18. interactionMode can in theory be used to swap
between devices while keeping the same
codebase.

19. Mobile UI Patterns in Flex “Hero”

20. ViewNavigator
The pattern for screens
on devices
Can define transitions
between views
Uses push/pop stack to
move between views

21. ViewNavigator
The pattern for screens
on devices
Can define transitions
between views
Uses push/pop stack to
move between views

22. TabNavigator
Tab through views
Just set up multiple
ViewNavigators with
the firstView property
Can’t use push/pop

23. ActionBar
navigationContent actionContent
titleContent
Provides easy access to important features
Won’t scroll
Can be defined globally or for each view

24. Optimization Techniques

25. Use as Much ActionScript as
Possible
ItemRenders
Skins*
Custom Components
*In general, a few MXML skins won’t hurt,
especially if you use FXG assets

26. Graphical Assets
In general, the fastest type
will be ActionScript and Bitmaps
MXML is pretty slow:
Don’t use MXML Graphics
Don’t use MXML skins with FXG
Pre-compiled FXG with AS3
is a pretty good solution

27. Use a SplashScreen
Flex takes a bit of time to load
splashScreenImage is set to be fast and first
Provides near-instant user feedback

28. View Events
Perform data actions
AFTER the Transition
The View dispatches a
CREATION_COMPLETE
event before the transition
happens
Listen for the
VIEW_ACTIVATE event,
then perform data
operations

29. View B Added to Display List
View A View B Dispatches FlexEvent.ADD View B
View B Dispatches
FlexEvent.CREATION_COMPLETE
View A Dispatches
FlexEvent.VIEW_DEACTIVATE
Do Transition
View A Dispatches FlexEvent.REMOVE
View B Dispatches
FlexEvent.VIEW_ACTIVATE

30. Flash Player 10.2!

31. http://labs.adobe.com/downloads/
flashplayer10.html

32. New Stuff
StageVideo
NativeCursor
Full Screen Mode for Multiple Monitors
Hardware Acceleration for IE9

33. StageVideo

34. What’s Happening?
StageVideo is being hardware accelerated
Plus, normally Flash content all runs
through the same rendering pipeline
StageVideo puts the video on its own
layer, so it can’t be transformed, but
it performs very well

35. Native Cursors
http://corlan.org/2010/12/02/working-with-
native-custom-cursors-in-flash/

36. flash.display.MouseCursor
Data
Lets you define bitmap sources
as native cursors
Vastly improved performance
over current methods

37. Full Screen Mode for Multiple
Monitors
When something is full screen on
one monitor, you can still work
on the other without taking it out
of fullscreen mode......
The Hulu feature :)

38. Hardware acceleration on IE9
We’ve been working with Microsoft
to make the Flash/IE9 experience top notch
Flash Player 10.2 uses IE9 APIs
for hardware acceleration
Should see great performance with IE9

40. Q&A
Ryan Stewart
Developer Evangelist, Adobe
ryan@adobe.com
blog.digitalbackcountry.com
@ryanstewart
github.com/ryanstewart