Posts in Category "Flex User Experience"

Designers Wanted.

Adobe Consulting Worldwide (AC) is looking for top notch Experience Designers, Architects and Design Leads to design next-generation, rich client applications for strategic third-party engagements.

designerswanted01.jpg

Here is a list of the current openings:
* Design Lead – New York
* Experience Architects – New York
* Experience Designers – New York
* Sr. Experience Architects – San Francisco
* Experience Designers – San Francisco
* Experience Designers – Italy, Germany, UK, and France

Your resume and portfolio must demonstrate a broad depth of experience on projects related to application and user-interface development. You need to be part interaction designer, part information architect, part business analyst, part mentor, part evangelist and all about user experience.

Think you have the skills? Contact our recruiter Julia Margherita (juliam@adobe.com)

Flex Style Explorer Update: Advanced Color Spaces and Add Swatches

With much thanks to Matt MacLean for his contribution of code to the Advanced Color Picker, the Flex Style Explorer just got a little more useful. Two new features have been added that should make your life a little easier.

First, the advanced color picker is even more advanced, with color spaces for Hue, Saturation, and Brightness, as well as R, G, and B color spaces. Additionally added was support for text entry for all those values, as well as the web hex value. Thanks very much for your contribution Matt.

Also, I’ve added support for adding swatches to the basic color pickers from the advanced color picker. In advanced color picker, select “add swatch”, and that color swatch will appear in all color pickers throughout the application, as shown below.

new_color_picker.png

As always, the source code is included, so if anyone out there has the initiative, and more importantly, the time to contribute your own ideas and code to the Style Explorer to help make it an even more useful application, send your code my way and we’ll consider integrating it. (Kuler integration perhaps?)

CLICK HERE TO EXPERIENCE THE APPLICATION (and remember, view source to download)

The Flex Style Explorer is a Proud Papa

Two and half years ago, Macromedia Consulting took a chance on the new kid – the greenest among a bunch of very experience senior developers, architects, and designers – and hired him to help design applications to be built with this new technology called “Flex”.

He immediately tried out his first tutorial, Flex Basics Part 1 by Robert Crooks, and created his first “flex app”. He started messing with styling a bit, but after getting sick of changing a style, and waiting to recompile on his (really slow, used) PC, he decided to data-bind the corner radius of the Panel to a slider to update it in the Flex App itself. With the a lot of help, guidance, and code-contribution from others, that little experiment eventually evolved into the Flex Style Explorer.

The Style Explorer has come a long way since then, through maybe 4 or 5 *official* version including betas. It’s been great to see the community involvement around the Flex Style Explorer, many of you contributing suggestions, and even code to it, and people are continuing to contribute code and ideas and you’ll see more functionality in the not too distance future.

What’s been especially heartwarming is the see how many have taken the Style Explorer and extended it, made it better, or and made new tools with it. You may have already seen these come across the wire, but I want to collect them in one place, and say “thanks” and “great job” to their creators.

Flex Styles Creator
Derek Wischusen: Flexonrails.net
Derek did some great work adding server-side css-file creation functionality to the Style Explorer. Derek contributed code to the Adobe Consulting Style Explorer in the form of “Export All CSS” functionality, but if you’re looking to create a new CSS file, rather than just copy-and-paste the CSS, check the Flex 2: Styles Creator out.

Flex Filter Explorer
Joe Johnston: Merhl.com
Joe modifies the Flex Style Explorer to create a Filter Explorer. Alter Flex filter properties and generate the appropriate MXML code to create the filter. Awesome!

Flex 2.0 Primitive Explorer
Jason Hawryluk: Flexibleexperiments.wordpress.com
Jason starts with the Style Explorer UI, and creates a great application for exploring and creating code for drawing primitive objects in Flex. If ever there’s a use case for needing to visualize code, and to be able to graphically manipulate something, it would be this use case. Great job Jason.

Flex Transitions and Effects Explorer
David Keutgens: blog.keutgens.de
David takes inspiration from the Flex Style Explorer and creates his own Flex Effects Explorer.

The greatest thing to me about Flex is that it enables community involvement, and makes “wouldn’t it be cool if” a reality. Flex comes with a set of default components, but we don’t have to make feature requests and wait around for Flex 3 to come out to get new components. It makes initiatives like FlexLib, The FlexBox, and the Flex Component Exchange possible. And it makes it possible for a kid from Boston to make a little style exploring app, get the help and input from the community, and make a difference.

Here’s to all of us making new tools and components, to help make Flex a great product.

P.S.: (Disclaimer: Waxing personal) The Flex Style Explorer may be a proud papa, but it could never be as proud a papa as the new kid, who’s now a proud papa of his first baby girl, Elisabeth Jane Baird, just 4 months old this week.

New Flex Style Explorer: Jam-Packed with New Features

I’m extremely excited to be able to announce that a new version of the Flex Style Explorer is available, and it has a ton of cool new features that should make users much more productive. Some of the more notable features include Export All CSS functionality, an advanced (photoshop-style) color picker, inclusion of additional components, support for styleName styles, and improved navigation.

preview.jpg

A complete list of the new features are as follows:

Continue reading…

Rich Text Editor with Disclosable Controls in Flex 2

I recently worked on a project that called for the use of the Rich Text Editor control. In our case it was determined that some users would never had the need to format their text. In fact, I’d venture to say in most cases were a Rich Text Editor is called for in an RIA, there are a subset of users or use-cases where those controls are not required.

For that reason, there’s a property called “showControlBar” which allows you to show or hide the control. However, there’s no out-of-the-box affordance for setting this property at runtime. What follows is a simple example that adds a child to the Rich Text Editor that shows and hides the control bar.

It should be said, as always, the following example was created by myself, and I am a User Experience Consultant, not a developer. So, this should be seen as an example of good User-Experience pattern, but should not be seen as a best-practive recommendation for development. For starters, it would have probably been good to componentize it. But, is a simple example with just a few lines of code anway.

To download the source, click here.

Continue reading…

Enable Smoothing on Images for scaling in Flex 2

While I can’t claim any credit for the solution – most of the credit goes to my colleague from Adobe Consulting Flex Architect Brian O’Conner, and the alternative approach comes from Roger Gonzalez from the Flex Team – I recently came across a small issue. By default, when you embed or load an image in Flex, “smoothing” is set to false. This makes sense since most of the images you’d probably want in their native size, and you’d want pixel perfect. But, when you want to scale the image, either up or down, or rotate the image, the image is rendered with the “nearest neighbor” scaling method. You can read more about the issue in the flash player at Tinic Uro’s Blog. As you can see in the example that follows, the results of this are less than beautiful.

After a little trial and error on my own part, I got some help from the experts, and got a simple solution for enabling smoothing on an image in Flex.

Continue reading…

Run the Flex Style Explorer Inside of Flex Builder

It’s been a while since Flex 2 was officially released, but I’m finally getting around to writing about this. Of course, many of you have probably noticed that the release version of the Flex Style Explorer is now linked directly from the start page in Flex Builder. But, I also wanted to point out that its quite possible to run the style explorer directly in Flex Builder in it’s own tab, as shown in the image below:

styleExplorer_inFlexBuilder.jpg

Continue reading…

Time-based Flex 2 UI: If time were a color, what color is it now?

I read an interesting comment on a blog post recently discussing the possibility of a doing mathematical operations on colors in the UI, and not one to shy away from a fun challenge, I cooked up the following example of a time-based user interface in flex, as shown in the below example.

There are two things going on here. First, the background color is chosen from a pre-defined set of colors based on the day of the week. Come back tomorrow, and the background color will be different.

But, the more fun part is the second piece, which is something I’ve mused about in the past before… “if time were expressed as a color, what color would it be right now”. So, follow me on this. The time is expressed as such: Hour is represented by a percentage of red, where 24 equals a full value (so, x / 24 converted to a hex value). Same goes for minutes (Green), and seconds (blue). All put together, a full time with hours, minutes, and seconds, becomes the RGB value. So, 12:00:00 a.m. is black and 23:59:59 is white, 12:30:30 is grey, and so forth.

View the Example (Flash 9 Player Required)

Download the Source Code

timeBasedUI.jpg

Beyond Styling: Applying Filters on Flex Components

This is documented in the livedocs, but I also wanted to give some examples of how you can apply filters to components to further achieve your desired look-and-feel. Want a drop-shadow on a button or a label? Want your text to look chiseled, or maybe your combo-box looking nicely chiseled? What an inner-shadow on a text input? Or maybe you just wantd a an area that looks beveled, or inset. This is all possible with filters in flex, as shown in the image below.

Not only is it possible, but it’s incredibly simple. A label with a drop-shadow is as simple as the following:

<mx:Label label="Label">
   <mx:filters>
      <flash.filters:DropShadowFilter xmlns:flash.filters="flash.filters.*" />
   </mx:filters>
  </mx:Label>

So, I’ve provided a sample mxml file that shows some nice uses of filters.

View the Example

Download the MXML

Once again, here’s to Flex apps that don’t look like flex apps!

filtersOnComponents.jpg

Mac OS X-looking CSS for Flex 2

As an experiment in CSS Styling, and to show off some of the new features of flex 2 styling, I’ve created a Mac OS X looking style sheet for Flex 2. It’s not perfect, but to the untrained eye, it’s pretty close. There are no images or skins used in this, it’s strictly CSS. With the next transparency features, and highlights, there’s a huge variety of look-and-feel that’s possible. Here’s to more flex apps that don’t look like flex apps!

Click here to download the the CSS and source to the below example

Click here to view an example application with the os x css file
(Flash Player 9 required)

OSSXcss.jpeg

[UPDATE] Thanks to all who pointed out some of the errors (I should have test on a PC first ;-) ). I’ve replaced the the swf and the zip. Apparently there’s a bug with embedding an image declaratively in the application tag, so I used a workaround for that. Also, the fonts should be showing now… but that has surfaced another bug (which I’ll file)… embedding a font and then apply a drop shadow to it makes the font disappear until you rollover it, so you’ll see some words missing until you rollover.