Author Archive: Peter Baird

The Role of User-Experience Design in RIAs

Walking home the other day I ran into an old high school classmate who I hadn’t seen in over 12 years. We did the obligatory catching up, and of course she asked what I did for work. What followed was a typical scenario. I explained I was a user-experience consultant for Adobe, which was followed by a blank stare.

“You know, Flash” … Another blank stare.

The fact of the matter is a lot of very bright people use our technology every day, whether it be Flash Video, Flash Applications, PDF, or consume a product that has been designed by Adobe technology, and have no idea that they are using Adobe technology.

Continue reading…

Designing Flex in Fireworks (Including Style Explorer as Fireworks Extension)

I’ve been using an internal beta of Fireworks CS3 for several weeks now to wireframe Flex projects, and let me just say… Fireworks CS3 rocks. Particularly with the new Flex components library that comes with Fireworks CS3, and the pages feature that allows me to specify which layers are shared across which pages, the time it takes me to develop wireframes has literally been cut in half, leaving me more time to actually focus on designing the best user-experience.

I wrote up an article with one possible workflow using the Fireworks to design, style and skin a Flex application. You can read the article here at the Fireworks Developer Network.

What’s more, with Fireworks CS3 including a AS3 engine, I’ve packaged the Flex Style Explorer as a Fireworks Extension that will run directly in Fireworks. You can download and install the MXP here.

Fireworks CS3 is required.

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)

New Name: Same Great Taste

Looking back at this blog’s inaugural post back in May of 2005, you start to realize how far we’ve come. What was then a North American consulting group with a handful of very talented consultants has grown significantly over the years, with the acquisition and integration of several very talented groups including Iteration::two, as well as the acquisition by Adobe, and the integration with Adobe’s consulting group. In just the past two years the organization has grown to be quite a force, with representation from San Francisco to Tokyo, from Scotland down to Sydney, and literally everywhere in-between.

Several members of Adobe Consulting have begun contributing to the blogosphere with their own blogs, and rightfully so. The Adobe Consulting organization has grown too large, and it’s members too diverse to be represented by a single blog.

With the growth of the organization, and the rise of additional Adobe Consulting blogs, this blog is being rebranded “Adobe Consulting: User-Experience Hub”, with a focus particularly on the design groups within Adobe Consulting. This is not to suggest that our other Adobe Consulting blogs will not offer user-experience insight, or that you won’t find blog entries of a technical nature within this blog anymore. Steven, Ali, Alex, and the rest of the team continue to pump out some incredible user-experiences (see, Distortion Effects, Scheduling Frameworks, and the like). And Ikezi is still going to give great development tips such as the Flex Builder Cairngorm Plugin and Continuous Integration in Flex.

In our first blog entry, we mentioned that this blog was intended to be an avenue to share the lessons that we’ve learned, and be a window to our “work in progress”. That mission has not changed. We hope that the “User Experience Hub” can continue to serve as an avenue to share with all of you the tools, tips, and techniques to create a great user-experience.

We’ve all reached an important milestone in our industry. Two years ago Macromedia had as it’s motto “Experience Matters”. It seems today that everyone accepts that as a fact. Now it’s a matter of giving the people the tools and resources they need to create the best experience possible. And we believe, as Adobe’s motto states, that the experience can be “Better by Adobe”.

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…

Yahoo Maps QuickTip: Measure Mileage for an Exercise Route

Okay, so this is admittedly off-topic from the usual Adobe Consulting fare, but I recently discovered a nice feature of Yahoo Maps Beta that’s a bit hidden that may be of interest to those who exercise and like to measure mileage of new routes.

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…