Wrong confirmation ID

Email
Favorite
Favorited ×
Download
Embed
Private Content
Copy and paste this code into your blog or website Copy Customize… Close
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.

Tweet

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

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

View text version

Categories

Technology

Tags

adobe flash flex flex4 adobesummit experience visu

Upload Details

Uploaded via SlideShare as Apple Keynote

Usage Rights

© All Rights Reserved

File a copyright complaint

16 Embeds 924

http://blog.saurabhnarula.com	553
http://sunilanair.wordpress.com	229
http://saurabhnarula.com	74
http://csharksgames.blogspot.com	41
http://feeds.feedburner.com	7
http://csharksgames.blogspot.in	7
http://csharksgames.blogspot.co.uk	2
http://www.blog.saurabhnarula.com	2
http://sanilram.blogspot.com	2
http://csharksgames.blogspot.com.br	1
http://csharksgames.blogspot.pt	1
http://translate.googleusercontent.com	1
http://technology.feedfury.com	1
http://www.slideshare.net	1
https://sunilanair.wordpress.com	1
http://csharksgames.blogspot.it	1

Statistics

Favorites: 1
Downloads: 31
Comments: 0
Embed Views: 924
Views on SlideShare: 1,289
Total Views: 2,213

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

1 Favorite

kmitmca at genesis 5 months ago

Visual Experiences with flex 4 — Presentation Transcript

No transcript available.