The document discusses Adobe Flex 4.6 and its capabilities for mobile application development. It outlines how Flex allows developing once for multiple mobile platforms like Android, iOS, and others. It highlights features like automatic scaling of user interface elements for different device densities. The document also discusses Adobe's continued support for Flex through contributions to the Apache Flex project.

1. Adobe Flex 4.6
Michaël Chaize | Developer Evangelist
RIAgora.com | @mchaize
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

2. Agenda
ROADMAP FLEX
LIVE CODE
LINKS
FLEX 4.6
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 2

3. Flex/Flash on mobile devices and tablets
Flash Player: plug-in in mobile browsers
AIR: Run your app as a native app
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

4. AIR on mobiles and tablets
AIR: Run your app as a native app
MACHINARIUM POLITIFACT NARCISSUS
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

5. Flex/Flash on desktop
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

6. Future of Flex
1 2 3 4 4.5
2004 2006 2007 2010 2011
free open
AS2 Spark Mobile
sdk source
???
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

7. Flex, an apache project
Adobe Customers
Community
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

8. Why Apache ?
Day Felix PhoneGap
JackRabbit
Sling
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

9. Adobe contributions
Flex 5 FalconJS
SDK Falcon
BlazeDS
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

10. Xmas gi s
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

11. Flex, HTML5 & Adobe
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

12. Adobe Flex 4.6
4.6
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 12

13. Hotline at Adobe
FL EX
FO RE
BE
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 13

14. Hotline at Adobe
FL EX
ER
AFT
15% 15% 10>1
faster cust. sat. training.
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 14

15. e explosion of devices introduces new challenges
for application development
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

16. Native Mobile Application Development Model
A costly, inefficient development model
Native Native Native Native
App App App App
Additional
OS’s
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

17. Introducing a new mobile development paradigm
One Tool, One Language, One Codebase
Flex Application Common codebase
AIR
Additional
OS’s
Any Platform
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.

18. Industrialize user-experiences
One code base, Lots of screens
7%
80%
5%
Shared
code
8%
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 18

19. Flex 4.6 - architected for mobile apps
views.ListEmployees views.DetailsEmployee views.ListEmployees
view destroyed view created
view destroyed view created
“BACK” bu on
DATA subset DATA
persisted in memory
© 2010 Adobe Systems Incorporated. All Rights Reserved. 19

20. Multiple densities: e problem
150 x 40 pixel bu on
Desktop monitor Galaxy Tab Droid 2 iPhone 4
@100 dpi @160 dpi @240 dpi @320 dpi
= 1.5” x 0.4” = 0.9” x 0.25” = 0.6” x 0.17” = 0.46” x 0.13”
Same pixel count, different physical sizes
(Minimum recommended size: 0.25” x 0.25”)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 20

21. Can I use dynamic layout to solve this?
320x480 @160dpi 640x960 (at same density) 640x960 @320dpi
100% 100%
(Not easily. You can make (Not easily. You can make stuff ll the screen using
stuff ll the screen using percent sizing, but your fonts and icons will still be
percent sizing, but your fonts tiny. And any xed pixel sizes, e.g. in constraint-
and icons will still be tiny. And based layouts or padding values, will be wrong.)
any xed pixel sizes, e.g. in
100%
constraint-based layouts or
padding values, will be
wrong.)
100%
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 21

22. Solution: Automatic scaling for different DPIs
<Application applicationDPI=“160”>
<Button width=“160” height=“40”/>
</Application>
160 dpi 240 dpi 320dpi
Scaled 1.5x Scaled 2x
REMEMBER: To your code, the screen is always 160 dpi, and this bu on is always
160 x 40, regardless of how the application is being scaled.
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 22

23. Scaling different types of objects
Lorem
Ipsum
Dolor
Vectors Text Bitmaps
scale up well scales up well do not scale up well
(scaling down can be bad) (Flash scales font size)
Outlines may blur slightly
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 23

24. Flex density concepts: Multi-DPI bitmaps
<Button click="dealSummaryList.refresh()">
<icon>
<MultiDPIBitmapSource
source160dpi="@Embed('assets/refresh160.png')"
source240dpi="@Embed('assets/refresh240.png')"
source320dpi="@Embed('assets/refresh320.png')"/>
</icon>
</Button>
Design icon for 160 dpi
Make a 1.5x bigger version for 240 dpi
Make a 2x bigger version for 320 dpi
(e.g. 32x32, 48x48, 64x64)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 24

25. Mobile APIs available by default
- Multitouch
- Geolocation
- Cameras
- Microphone
- Accelerometer
- Display a web page
- SQLite local database
- Native extensions
- GPU acceleration
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 25

26. Adobe AIR 3 and Flex 4.6
ANE: No more limitation
ActionScript Native Extension
AS3 bridge
Flex Mobile
project
C, JAVA
ANE SWF
.AIR, .APK, .IPA, .BAR
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 26

27. Deploy your applications in the market places
Control the distribution with AIR 3
AIR 3 - Captive runtime
ANDROID QNX IOS
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 27

28. Flash Builder 4.6
NEW FEATURES
SplitViewNavigator
CallOut, CallOutButton
SpinnerList, DateSpinner
ToggleSwitch
Snapped List
SoftKeyBoard
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 28

29. Flash Builder 4.6
DEMO
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 29

30. Some Flex mobile apps
Politifacts Radio X-track Narcissus
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 30

31. e traditional way for Enterprise apps development
v
What do Express the needs Technical Back-end + UI
Delivery
you need ? in a doc speci cations developments
LOB IT
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 31

32. D.D.D - Design Driven Development
v
Observe, Technical
What problems Find solutions
Observe, solutions to serve Delivery
are you facing ? designing the UI
Observe the UI
What How
to build ?
to build ? Analytics
to scale ?
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 32

33. Advanced Enterprise mobile applications
Build engaging and innovation
native-like applications
using Flex on mobile and tablet devices
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 33

34. How to start coding Flex mobile app ?
h p://www.Flex.org
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 34

35. Michaël Chaize | Developer Evangelist
RIAgora.com | @mchaize
©2011
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.