Visual Experiences with flex 4
•Download as KEY, PDF•
1 like•1,540 views
"Visual Experiences with Flex 4" presented at Adobe Summit 2010 at Bangalore, India
Recommended
More Related Content
Viewers also liked
Similar to Visual Experiences with flex 4
Similar to Visual Experiences with flex 4 (20)
Recently uploaded
Recently uploaded (20)
Visual Experiences with flex 4
- 1. Visual Experiences with Flex 4 Saurabh Narula h*p://blog.saurabhnarula.com
- 2. Having the nature of or a par2cular instance of producing an image in the personally encountering or mind undergoing something a visual memory look feel of the scene Visual Experience Visual Percep2on
- 5. The presenta?on First Impression
- 6. The presenta?on First Impression Percep?on
- 7. The presenta?on First Impression Percep?on the presenta?on of an applica?on is oCen the first thing that draws the user to the applica?on ...
- 10. color presentation layer Application
- 11. color motion presentation layer Application
- 12. color motion typography presentation layer Application
- 13. color motion typography presentation layer iconography Application
- 14. color motion typography presentation layer iconography Application depth
- 15. color motion typography presentation layer iconography Application depth layering
- 18. Slow Animation!
- 19. Don't Do this! Slow Animation!
- 22. A unique Visual Experience .. Usable and Focused Seamless Interac?on
- 23. A unique Visual Experience .. Usable and Focused Seamless Interac?on Transparency of Technicali?es
- 24. A unique Visual Experience .. Usable and Focused Seamless Interac?on Transparency of Technicali?es Something user will remember
- 25. Why ?
- 28. Why ? Brands Your Applica?on, creates an iden?ty Visual Clues and Connec?ons Users will remember it
- 33. Why ? Brands Your Applica?on, creates an iden?ty Visual Clues and Connec?ons Users will remember it Good User Fluid, more engaging Interac?on Ease of use Experience Increased Usability
- 34. Why ? Brands Your Applica?on, creates an iden?ty Visual Clues and Connec?ons Users will remember it Good User User Fluid, more engaging Interac?on Ease of use Experience Adoption Increased Usability
- 35. Why ? Brands Your Applica?on, creates an iden?ty Visual Clues and Connec?ons Users will remember it Good User User Fluid, more engaging Interac?on Ease of use Experience Adoption Increased Usability ROI
- 40. Flex 4 SDK .. key theme Design in Mind
- 41. When and how to use .. Styling Skinning Effects and Transi?ons Graphics Layouts States
- 42. Styling or Skinning tweak the default customize & draw appearance of the appearance of the component component
- 43. Styling in Flex 4 ? Closer to HTML styling Easy to create custom themes ‐ appearance panel in Flash Builder 4 CSS Namespaces ‐ avoid name collisions CSS Advanced Selectors
- 45. Styling Demo ..
- 46. Skinning Components in Flex 4 New Spark Component Architecture provides a clean separa?on between logic and visual elements of a component Visual informa?on lives outside the component in a skin file Can write skin files completely in MXML other tools like catalyst can generate this file
- 49. Skinning Contract Component Skin
- 50. Skinning Contract Component Skin Assign a skin Defines a host component
- 51. Skinning Contract Component Skin Assign a skin Defines a host component Define Appearance of Skin Iden?fy Skin Parts Parts
- 52. Skinning Contract Component Skin Assign a skin Defines a host component Define Appearance of Skin Iden?fy Skin Parts Parts Define Skin States, their Iden?fy Skin States appearance
- 56. FXG and MXML graphics define the following .. General path element shapes like rectangle, ellipse etc control over coordinate system, transforma?on etc Scalable raster effects ‐ filters etc strait lines, curves, text, raster images/bitmaps Fills, strokes, gradients
- 57. FXG and MXML Graphics Demo ..
- 58. Layouts in Flex 4 Assignable Layouts Custom Layouts Arbitrary 2D transforma?ons Smooth Per Pixel scrolling 3D Support Depth Order Post Layout Transforma?ons
- 59. Custom Layout Demos ..
- 60. Effects in Flex 4 Handling of arbitrary targets and types Not limited to display objects Maintain compa?bility of old effects
- 61. Why should i care ? Anima?on help convey status Draw user a*en?on users tuned in, interested and produc?ve Dynamic, rich and enjoyable experiences Transi?on between applica?ons states, while keeping the users connected with the UI
- 62. Effects Hierarchy Basic Effects
- 63. Animate: one effect to rule them all ! Handles mul?ple property Handles styles/proper?es automa?cally
- 65. Effects Hierarchy Advanced Effects
- 67. Effects Demos ..
- 68. Resources !!
- 69. Adobe Developer Connection - Flex http://www.adobe.com/devnet/flex/
- 70. Adobe Flex 4 SDK at Adobe Open Source http://opensource.adobe.com/wiki/display/flexsdk/Flex+4
- 71. Designing for Flex Series http://www.adobe.com/devnet/flex/articles/fig_pt1.html
- 72. Adobe Experience Design Team Publication https://xd.adobe.com/
- 73. User Interface Resource Centre http://www.uiresourcecenter.com/
- 74. Book: Creating Visual Experiences with Flex 3.0 http://www.cveflex.com/
- 75. Book: The Art of Building great user experiences in Software http://oreilly.com/catalog/9780596154790
- 76. Book: Flex 4 Fun http://booksites.artima.com/flex_4_fun
- 79. Questions ? Thank you !! h*p://blog.saurabhnarula.com h*p://twi*er.com/saurabhnarula
Editor's Notes
- About me - work for a startup blah! blah! About you - flex 3? flex 4? designers? developers? my presentation is more like a showcase for you all to showcase the abilities of flex 4 framework purpose of my presentation today is to enable you build great visual experiences in flex 4
- What is visual - experience
- the presentation of an application is often the first thing that draws the user to the application
- the presentation of an application is often the first thing that draws the user to the application
- the presentation of an application is often the first thing that draws the user to the application
- the presentation of an application is often the first thing that draws the user to the application
- what makes your presentation layer
- what makes your presentation layer
- what makes your presentation layer
- what makes your presentation layer
- what makes your presentation layer
- what makes your presentation layer
- Color is a powerful mechanism that can be used to evoke emotion and reinforce meaning and/or context. It can guide a user by signifying an error, calling attention to an important area within a view or creating associations between elements. Also, color is one of the most important elements of a corporate brand. Utilizing it appropriately can help the application integrate with related marketing materials. Using color “incorrectly” or nontraditionally can rapidly degrade the user experience. illustrates a mixed message being sent to the user by displaying the message “Upload Successful” in red. This could evoke a negative reaction to a positive message since red is usually associated with errors. When considering color, it is important to understand your target audience because colors may have different meaning in different cultures.
- Motion can be used to draw attention, help users visually understand what’s changing during a transition, smooth out interactions, and add aesthetic value. Consider the g e n i e e f f e c t that OS X uses when minimizing windows (see Figure 1 -5): although somewhat superfluous, there’s no question about where the window is going. Using motion in Web applications is very powerful, but can be challenging to use effectively. A particular transition might seem fun at first, but your users may quickly tire of it if they have to wait for it to complete. Simply put, motion for motion’s sake is a oneway ticket to fractured user experience.
- and the more user adopts your application means increased ROI
- and the more user adopts your application means increased ROI
- and the more user adopts your application means increased ROI
- and the more user adopts your application means increased ROI
- and the more user adopts your application means increased ROI
- and the more user adopts your application means increased ROI
- and the more user adopts your application means increased ROI
- support great visual experiences, expressiveness enabled with Flex 4 capabilities several new changes to enable designer freedom
- support great visual experiences, expressiveness enabled with Flex 4 capabilities several new changes to enable designer freedom
- Styling - When you want to customize the appearance of a Flex component, you have two options. One is to tweak the default appearance of the component using styling . Each Flex component has an extensive set of style properties you can set to change its appearance: the roundness of corners, the colors used for fill gradients, the font, color, and size of text, and so on. If you find that you can’t achieve the look that you want purely through styling, or if you just want to draw the appearance rather than tweaking a bunch of knobs, then you can use Adobe design tools to draw graphical skins for your components. Skins allow you to completely customize the appearance of a component.
- Flex 4 makes it easier to completely change the look and feel of an application. The new skinning architecture builds on top of other changes in Flex 4 and provides a clean separation between the logic and visual elements of a component. Because of this, none of the components in Flex 4 contains any information about their visual appearance. All of that information is contained in the skin file, and thanks to FXG and the new states syntax, the new skin files can be completely written in MXML, making them easier to read and write, as well as easier to access with tools.
- Components were hard wired
- Components were hard wired
- states are controlled by the skin, declared in component parts are controlled by the component, declared in skin
- states are controlled by the skin, declared in component parts are controlled by the component, declared in skin
- states are controlled by the skin, declared in component parts are controlled by the component, declared in skin
- If you use MXML graphics, the tags are mapped to their backing ActionScript implementations during compilation. You can reference the MXML graphic elements and have greater control over them in your code. If you use FXG, then you cannot reference instances of objects within the FXG document from the application or other components.
- Assignable layouts—Since the layout logic is separate from the containers, Spark containers can be assigned different Spark layouts, even at run time Custom layouts—Together with the separation of the layout logic from the containers, the new LayoutBase class and the ILayoutElement interface enable developers to quickly and easily create powerful layouts that can be mixed and matched with stock Spark containers. Arbitrary 2D transformations—The stock Spark layouts now support arbitrary 2D transformations. This support is built into the ILayoutElement interface that is implemented by all children of a Spark container. This makes developing custom layouts with 2D transform support effortless Per-pixel scrolling everywhere—The reworked virtualization support in DataGroup allows for smooth per-pixel scrolling in Spark containers. Implementing scrolling support in a custom layout, again, is a breeze. 3D support—The LayoutBase and ILayoutElement interfaces are designed with 3D support in mind. There are already 3D custom layouts examples floating around the web, including CoverFlow, Carousel, and WheelLayout to name a few. Depth order—Developers can specify the depth of each child, either in MXML or from a custom layout. Post-layout transforms—Developers can specify properties like x, y, z, rotation, scale, and more without affecting the layout. Since now all the stock Spark layouts have built-in 2D transform support, this new feature comes quite handy in lots of cases. Consider a hover over effect for example, where moving the mouse over a thumbnail in a horizontal list can scale it up a little or flip it in 3D, without actually pushing the siblings to the right. Consistent coordinate space—All of the size properties width, height,measuredWidth, and measuredHeight are now always consistently pre-transform. This eliminates confusing rules like "measuredWidth is unscaled in measure(), but scaled inupdateDisplayList()".
- effects were about components on the screen
- Application states - keeping users connected with the UI
- Pixel Bender - new shading language, cross platform manipulating pixels in a bitmap image ability to use pixel bender as filters for arbitrary display objects in flash, dropshadow, glow blur write filter using fixel bender compile into binary called pbj file load it into shader filter