Let’s talk about Flex baby !      Michaël Chaize | Developer Evangelist      RIAgora.com | @mchaize©2011 Adobe Systems Inc...
“Lets talk about ex, baby      Lets talk about you and me      Lets talk about all the good things      And the bad things...
Flex/Flash on mobile devices and tablets                            Flash Player: plug-in in mobile browsers              ...
AIR on mobiles and tablets                             AIR: Run your app as a native app                    MACHINARIUM   ...
Flex/Flash on desktop©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
PANIC MODE                                                                            WTF!!!              NOOOO!!!©2011 Ad...
“In the long-term, we believe HTML5 will be the best technology for...”©2011 Adobe Systems Incorporated. All Rights Reserv...
Future of Flex                            1                                               2     3        4      4.5       ...
Flex, an apache project                        Adobe                                                           Customers  ...
Why Apache ?                               Day                                 Felix    PhoneGap                JackRabbit...
Adobe contributions                                               Flex 5                                 FalconJS         ...
Christmas is coming...©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
Xmas gi s©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
Flex, HTML5 & Adobe©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
Adobe Flex 4.6                                                                                 4.6©2011 Adobe Systems Inco...
Hotline at Adobe                                                 FL EX                   FO RE                 BE©2011 Ado...
Hotline at Adobe                                                 FL EX                         ER                      AFT...
We are the RIA community, we’ll always be                                                 Client                          ...
e explosion of devices introduces new challenges                             for application development© 2011 Adobe Syste...
Native Mobile Application Development Model                                                  A costly, inefficient developme...
Introducing a new mobile development paradigm                                     One Tool, One Language, One Codebase    ...
Industrialize user-experiencesOne code base, Lots of screens                                                              ...
Flex 4.6 - architected for mobile apps                        views.ListEmployees               views.DetailsEmployee   vi...
Multiple densities:                                               e problem                                               ...
Can I use dynamic layout to solve this?           320x480 @160dpi                                                      640...
Solution: Automatic scaling for different DPIs    <Application applicationDPI=“160”>    	       <Button width=“160” height=...
Scaling different types of objects                                                                             Lorem       ...
Flex density concepts: Multi-DPI bitmaps<Button click="dealSummaryList.refresh()">    <icon>        <MultiDPIBitmapSource ...
Mobile APIs available by default                                                                                 - Multito...
Adobe AIR 3 and Flex 4.6ANE: No more limitationActionScript Native Extension                                              ...
Deploy your applications in the market placesControl the distribution with AIR 3AIR 3 - Captive runtime                   ...
Flash Builder 4.6      NEW FEATURES                                                                            SplitViewNa...
Flash Builder 4.6              DEMO©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.   33
Some Flex mobile apps                   Politifacts                                              Radio X-track   Narcissus...
e traditional way for Enterprise apps development                                                                  v      ...
D.D.D - Design Driven Development                                                                  v                      ...
Advanced Enterprise mobile applications  Build engaging and innovation  native-like applicationsusing Flex on mobile and t...
Resources for Flex 4.6 ?                                                                  h p://www.Flex.org©2011 Adobe Sy...
Michaël Chaize | Developer Evangelist         RIAgora.com | @mchaize©2011©2010 Adobe Systems Incorporated. All Rights Rese...
Upcoming SlideShare
Loading in...5
×

Flash camp portugal - Let's talk about Flex baby

823

Published on

Slides presented at the Flash Camp Portugal in 2011 about the future of Flex.

Published in: Technology, Business
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
823
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Flash camp portugal - Let's talk about Flex baby

  1. 1. Let’s talk about Flex baby ! Michaël Chaize | Developer Evangelist RIAgora.com | @mchaize©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  2. 2. “Lets talk about ex, baby Lets talk about you and me Lets talk about all the good things And the bad things that may be Lets talk about ex” SALT N PEPA Philosophers - XXth century©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  3. 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. 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. 5. Flex/Flash on desktop©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  6. 6. PANIC MODE WTF!!! NOOOO!!!©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  7. 7. “In the long-term, we believe HTML5 will be the best technology for...”©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  8. 8. Future of Flex 1 2 3 4 4.5 2004 2006 2007 2010 2011 free open AS2 Spark Mobile sdk source really?©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  9. 9. Flex, an apache project Adobe Customers Community©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  10. 10. Why Apache ? Day Felix PhoneGap JackRabbit Sling©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  11. 11. Adobe contributions Flex 5 FalconJS SDK Falcon BlazeDS©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  12. 12. Christmas is coming...©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  13. 13. Xmas gi s©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  14. 14. Flex, HTML5 & Adobe©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  15. 15. Adobe Flex 4.6 4.6©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 15
  16. 16. Hotline at Adobe FL EX FO RE BE©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 16
  17. 17. 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. 17
  18. 18. We are the RIA community, we’ll always be Client MVC User XP Software C.I, Agile©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  19. 19. e explosion of devices introduces new challenges for application development© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  20. 20. 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.
  21. 21. 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.
  22. 22. Industrialize user-experiencesOne code base, Lots of screens 7% 80% 5% Shared code 8%©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 22
  23. 23. 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. 23
  24. 24. 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. 24
  25. 25. 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. in100% constraint-based layouts or padding values, will be wrong.) 100%© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 25
  26. 26. 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. 26
  27. 27. 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. 27
  28. 28. 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. 28
  29. 29. 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. 29
  30. 30. Adobe AIR 3 and Flex 4.6ANE: No more limitationActionScript 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. 30
  31. 31. Deploy your applications in the market placesControl the distribution with AIR 3AIR 3 - Captive runtime ANDROID QNX IOS© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 31
  32. 32. 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. 32
  33. 33. Flash Builder 4.6 DEMO©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 33
  34. 34. Some Flex mobile apps Politifacts Radio X-track Narcissus©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 34
  35. 35. 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. 35
  36. 36. 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. 36
  37. 37. Advanced Enterprise mobile applications Build engaging and innovation native-like applicationsusing Flex on mobile and tablet devices©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 37
  38. 38. Resources for Flex 4.6 ? h p://www.Flex.org©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. 38
  39. 39. Michaël Chaize | Developer Evangelist RIAgora.com | @mchaize©2011©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×