Visual Experiences with flex 4
by Saurabh Narula on Aug 26, 2010
- 2,213 views
"Visual Experiences with Flex 4" presented at Adobe Summit 2010 at Bangalore, India
"Visual Experiences with Flex 4" presented at Adobe Summit 2010 at Bangalore, India
Accessibility
Categories
Tags
Upload Details
Uploaded via SlideShare as Apple Keynote
Usage Rights
© All Rights Reserved
Statistics
- Favorites
- 1
- Downloads
- 31
- Comments
- 0
- Embed Views
- Views on SlideShare
- 1,289
- Total Views
- 2,213
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
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.
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.
several new changes to enable designer freedom
several new changes to enable designer freedom
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.
parts are controlled by the component, declared in skin
parts are controlled by the component, declared in skin
parts are controlled by the component, declared in skin
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()".
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