flash camp portugal - let's talk about flex baby
DESCRIPTION
Slides presented at the Flash Camp Portugal in 2011 about the future of Flex.TRANSCRIPT
![Page 1: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/1.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Let’s talk about Flex baby !Michaël Chaize | Developer EvangelistRIAgora.com | @mchaize
![Page 2: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/2.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
“Let's talk about !ex, babyLet's talk about you and meLet's talk about all the good thingsAnd the bad things that may beLet's talk about !ex”
SALT 'N' PEPAPhilosophers - XXth century
![Page 3: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/3.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flex/Flash on mobile devices and tablets
Flash Player: plug-in in mobile browsers
AIR: Run your app as a native app
![Page 4: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/4.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
AIR on mobiles and tablets
AIR: Run your app as a native app
MACHINARIUM POLITIFACT NARCISSUS
![Page 5: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/5.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flex/Flash on desktop
![Page 6: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/6.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
PANIC MODE
WTF!!!
NOOOO!!!
![Page 7: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/7.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
“In the long-term, we believe HTML5 will be the best technology for...”
![Page 8: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/8.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Future of Flex
1 2 3 4 4.5
2004 2006 2007 2010 2011
open source
free sdk
AS2 Spark Mobile
really?
![Page 9: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/9.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flex, an apache project
Adobe
Community
Customers
![Page 10: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/10.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Why Apache ?
Day PhoneGapFelix
SlingJackRabbit
![Page 11: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/11.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe contributions
SDK
BlazeDS
Falcon
Flex 5 FalconJS
![Page 12: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/12.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Christmas is coming...
![Page 13: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/13.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Xmas gi"s
![Page 14: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/14.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flex, HTML5 & Adobe
![Page 15: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/15.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe Flex 4.6
15
4.6
![Page 16: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/16.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Hotline at Adobe
16
BEFORE FLEX
![Page 17: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/17.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Hotline at Adobe
17
AFTER FLEX
15%faster
15%cust. sat.
10>1training.
![Page 18: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/18.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
We are the RIA community, we’ll always be
Client MVC
User XP
C.I, Agile
Software
![Page 19: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/19.jpg)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
!e explosion of devices introduces new challenges for application development
![Page 20: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/20.jpg)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Native Mobile Application Development Model
NativeApp
NativeApp
NativeApp
NativeApp
Additional OS’s
A costly, inefficient development model
![Page 21: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/21.jpg)
© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Introducing a new mobile development paradigm
Additional OS’s
AIR
Flex Application
One Tool, One Language, One Codebase
Any Platform
Common codebase
![Page 22: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/22.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Industrialize user-experiences
22
One code base, Lots of screens
80%
8%
5%
7%
Sharedcode
![Page 23: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/23.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. 23
views.ListEmployees views.DetailsEmployee views.ListEmployees
DATA DATA
persisted in memory
subset
view destroyed view created
view destroyed view created
“BACK” bu!on
Flex 4.6 - architected for mobile apps
![Page 24: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/24.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Multiple densities: $e problem
24
150 x 40 pixel bu%on
Desktop monitor@100 dpi
= 1.5” x 0.4”
Galaxy Tab@160 dpi
= 0.9” x 0.25”
Droid 2@240 dpi
= 0.6” x 0.17”
iPhone 4@320 dpi
= 0.46” x 0.13”
Same pixel count, different physical sizes(Minimum recommended size: 0.25” x 0.25”)
![Page 25: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/25.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Can I use dynamic layout to solve this?
25
(Not easily. You can make stuff "ll the screen using percent sizing, but your fonts and icons will still be tiny. And any "xed pixel sizes, e.g. in constraint-based layouts or padding values, will be wrong.)
(Not easily. You can make stuff "ll the screen using percent sizing, but your fonts and icons will still be tiny. And any "xed pixel sizes, e.g. in constraint-based layouts or padding values, will be wrong.)
320x480 @160dpi 640x960 (at same density) 640x960 @320dpi
100%
100%
100%
100%
![Page 26: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/26.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Solution: Automatic scaling for different DPIs
26
<Application applicationDPI=“160”> <Button width=“160” height=“40”/></Application>
REMEMBER: To your code, the screen is always 160 dpi, and this bu%on is always160 x 40, regardless of how the application is being scaled.
160 dpi 240 dpi 320dpi
Scaled 1.5x Scaled 2x
![Page 27: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/27.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Scaling different types of objects
27
Vectorsscale up well
(scaling down can be bad)Outlines may blur slightly
Textscales up well
(Flash scales font size)
Lorem
Ipsum
Dolor
Bitmapsdo not scale up well
![Page 28: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/28.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
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>
28
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)
![Page 29: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/29.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Mobile APIs available by default
29
- Multitouch- Geolocation- Cameras- Microphone- Accelerometer- Display a web page- SQLite local database- Native extensions- GPU acceleration
![Page 30: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/30.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Adobe AIR 3 and Flex 4.6
30
ANE: No more limitation
ActionScript Native Extension
AS3 bridge
C, JAVA
Flex Mobileproject
ANE SWF
.AIR, .APK, .IPA, .BAR
![Page 31: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/31.jpg)
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Deploy your applications in the market places
31
Control the distribution with AIR 3
AIR 3 - Captive runtime
ANDROID QNX IOS
![Page 32: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/32.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flash Builder 4.6
32
NEW FEATURES
S p l i t V i e w N a v i g a t o rC a l l O u t , C a l l O u t B u t t o nS p i n n e r L i s t , D a t e S p i n n e rT o g g l e S w i t c hS n a p p e d L i s tS o f t K e y B o a r d
![Page 33: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/33.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Flash Builder 4.6
33
DEMO
![Page 34: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/34.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Some Flex mobile apps
34
Politifacts Radio X-track Narcissus
![Page 35: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/35.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
$e traditional way for Enterprise apps development
35
v
What do you need ?
Express the needs in a doc
Technical speci!cations
Back-end + UI developments Delivery
LOB IT
![Page 36: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/36.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential. 36
v
What problems are you facing ?
Observe, Observe, Observe
Find solutions designing the UI
Technical solutions to serve
the UIDelivery
D.D.D - Design Driven Development
Whatto build ?
Howto build ?to scale ? Analytics
![Page 37: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/37.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Advanced Enterprise mobile applications
37
Build engaging and innovation
native-like applications
using Flex on mobile and tablet devices
![Page 38: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/38.jpg)
©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Resources for Flex 4.6 ?
38
h"p://www.Flex.org
![Page 39: Flash camp portugal - Let's talk about Flex baby](https://reader033.vdocuments.site/reader033/viewer/2022061212/54944a78b47959514d8b4a82/html5/thumbnails/39.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Michaël Chaize | Developer EvangelistRIAgora.com | @mchaize