September 24, 2007

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.

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)

Posted by Simon Smith at 4:33 PM | Comments (1)

April 3, 2007

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.

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)

Posted by Peter Baird at 2:26 PM | Comments (16)

March 16, 2007

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.

Posted by Peter Baird at 7:41 AM | Comments (4)

February 13, 2007

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.

A complete list of the new features are as follows:

1. Advanced Color Picker

No longer are you either limited to to the web-safe palette, or figuring out the right hex value in some other design program, as the Style Explorer now includes an advanced color picker (Thanks to Tinic, of the Flash Player team for the Advanced Color Picker Example). Rollover any form element for a color, and a color wheel appears as shown below. Click the color wheel and a popup appears, allowing you to select from millions of colors.

2. Export All CSS

Probably the most asked for feature, the Style Explorer now allows you to export all the CSS that you've generated for all components. I went back and forth on the best way to implement this, but landed on the following. At any time, click the "Export All CSS" button, and all of the CSS is copied to your computers clipboard. Switch to flex builder or any text editing program and paste the code into your CSS file. The reason for simply copying rather than generating a file include the need for the Style Explorer to be usable in both online and offline environments (many solutions for generating a file required connection to a server), and more importantly, the common use case where a person is merely appending styles to an existing style sheet. Copy-and-paste seemed to be the simplest solution. Thanks to Derek Wischusen for the inspiration in getting this implemented.

3. Support for StyleName Styles

Many components have styleName styles, which allow even greater customization of component, as well as cleaner code. For example, TabNavigator has tabStyleName and selectedTabTextStyleName properties. The TabStyleName style allows you to style the individual tabs and their text, without having the TabNavigator's children inherit those styles. The SelectedTabTextStyleName allows you to style the text of a selectedTab differently from the text on all other tabs, useful for example if your selectedTab is a lighter color than the other tabs, as shown below. In addition to allowing customization at this level, the CSS generated also includes the appropriate styleName definitions for clean code.

4. Text Formatting Styles

Text formatting styles have been included for all components that support those styles, including fontFamily, fontSize, textAlign, fontWeight, fontStyle, textDecoration, leading, and letterSpacing.

5. Text-Entry for Slider Controls

Ever tried to get that little slider at exactly 0.40 for an alpha value? It can be a difficult task. Sliders are great for quickly adjusting a value and seeing the effect instantaneously, but if you know the value that you'd like, it's hard to pinpoint. A text field has been added to each slider that allows you to alternatively enter a text value.

6. Inclusion on New Components

Several components were missing from the original style explorer, and they have been added. These components include:

• ToggleButtonBar
• HDividedBox
• VDividedBox
• TextArea
• VRule
• VSlider
• ColorPicker
• ToolTip

7. Improved Navigation

Something that's always troubled me is that the previous navigation involved a bit of "click-and-wonder", that is, if you didn't know that "LinkButton" as in the "Other" category, you'd have to go around searching for it. But, as John Maeda affirms in "Laws of Simplicity", sorting elements does make the interface appear simpler, so if I were to make a flat alphabetical list of all the components, it the list of 32 elements would appear somewhat overwhelming. I went back and forth trying to decide on the best approach.

Looking at my iTunes library one day, I had a "duh" moment. (Some people have "a-ha" moments, I have "duh" moments). Seeing the different layout options for my library in iTunes... list, artwork, coverflow ... I realized, why not include both options.

So, the navigation options are as follows:

• By Category. This allows you to scan through items if like category.


• Alphabetical List. This includes an alphabetical list of the components.


• Mini-List. Knowing that I've just stolen some of your horizontal real-estate by adding this navigation, you can collapse either list at anytime to regain that real-estate, but still be able to switch components by component icon.

8. Indication of Components Edited.

When it list view, a check-mark is added to those components that have been edited. If "Restore Defaults" is selected, the check-mark disappears.

9. Progressive Disclosure of Controls

Not all styles are applicable to a component at all times. For example, if the dropShadowEnabled is false, then properties such as shadowDistance, shadowColor, and shadowDirection will have no effect. Therefore, in an effort to include some education as to those connections, and to simplify the interface, if components are not applicable, they will not be visible. As shown below, once dropShadowEnabled is selected as true, the three subsequent styles appear.

10. Improved Graphic Representation of Styles

Where possible, instead of simply using radio-buttons to represent the possible options, a button bar with icons representing the various options is being used to both clean up the interface, and as a visual representation of the option.

11. Improved Scrollbar management

On of the biggest things that bugged me personally about previous versions of the Style Explorer was the scrollbar management. As list options exceeded the vertical real-estate, the entire application would grow and a scrollbar appear on the far right as shown below. Not very useful if the control your editing is at the bottom, and the component whose styles are being updates is off the screen up above. This version includes an improved scrollbar system, where the scrollbar appears only in the list of controls. Compare the screenshot of the previous behavior at top, with the improved scrolling of the image below that.

12. Skinning for a "Transparent" App

Finally, additional skinning work was done to make the app more "transparent". Since you the user can set the background color or image to anything you want, I needed to make the entire UI event more transparent than the default flex. So, you'll notice some skinned components lying around, and hopefully the application is just as usable with a dark background as it is with a light background.

Known Issues:

Will all those updates, there are a few small, known issues with the application, that shouldn't get in the way, but you should know.

• Weird Text Controls Bug: For just a few components, selecting the text formatting options for a style name, such as selectedTabStyle will bump in the controls to the right. This doesn't affect usability, but as a designer, it bugs me to death.
• Can't Clear Style on AlternatingItemColors. This relates to a known bug in Flex as a whole. The function clearStyle('alternatingItemColors') has no effect. So, if you set those styles on a component (list, tree, dataGrid), "Restore Defaults" will have no effect on the component.

With all that said...

DOWLOAD THE FLEX STYLE EXPLORER

EXPERIENCE THE APPLICATION ONLINE (View Source Enabled)

Posted by Peter Baird at 1:11 PM | Comments (25)

September 12, 2006

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.

Posted by Peter Baird at 10:17 AM | Comments (10)

September 6, 2006

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.

The first approach uses the BitmapAsset class, where init() is called on creationComplete as follows:

import mx.core.BitmapAsset;

[Bindable]
public var mySmoothImage:BitmapAsset;

[Bindable]
[Embed(source="assets/myImage.png")]
public var myImage:Class;

public function init():void
{
mySmoothImage = BitmapAsset(new myImage());
mySmoothImage.smoothing = true;
}


The second approach is somewhat more compact, and uses a class level embed that extends Bitmap, as follows:


[Embed(source="myImage.png")]
public class mySmoothImage extends Bitmap
{
public function mySmoothImage()
{
smoothing = true;
}
}


Below is an example of the same image embedded twice in a flex app, the first with Smoothing enabled, and the second in the default manner. As you change the scale of the image via the slider control, you should be able to notice the difference. This would be valuable for any image that you intend to scale, or perhaps an image that you intend to apply a scale or zoom effect to.

Be warned though, enabling smoothing can affect performance, so you certainly wouldn't want to enable smoothing for UI elements or items that never intend to scale or rotate.

Click to download the below example

Posted by Peter Baird at 11:01 AM | Comments (14)

July 21, 2006

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:

To do so, just follow these few simple steps (with apologies to those whoever this was already obvious to):

1. Download the Flex Style Explorer to your computer by clicking here
2. Save it wherever your heart desires
3. Inside Flex Builder, select File --> Open File... and choose Flex2StyleExplorer.html
4. Ta da.... Flex Style Explorer running in its own tab inside of Flex Builder

Yeah, it's really that easy, and I apologize if I've insulted your intelligence.

Posted by Peter Baird at 11:35 AM | Comments (11)

May 11, 2006

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

Posted by Peter Baird at 9:01 PM | Comments (3)

May 10, 2006

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!

Posted by Peter Baird at 8:04 PM | Comments (8)

May 9, 2006

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)

[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.

Posted by Peter Baird at 6:51 PM | Comments (16)

March 20, 2006

Flex 2 Style Explorer Now Beta 2

With today's release of the Flex 2 Beta 2 we're also releasing a companion Flex 2 Style Explorer Beta 2. You'll notice a lot of changes in naming to styles in Beta 2, and so if you're working with Beta 2, you'll need to use this version of the Style Explorer to generate the right CSS.

If you haven't yet downloaded Beta 2 yet, head over to Macromedia Labs and grab it. If you do, you'll notice that view-source has been enabled. That said, I'm not a developer, I'm a user-experience guy, so keep that in mind when you look at the source.

[Update: The Style Explorer is in release version and can be found here, on adobe.com

Click Here to run the Flex 2 Style Explorer

Click Here to download the Flex 2 Style Explorer Beta 2

Posted by Peter Baird at 8:51 PM | Comments (7)

March 14, 2006

Flex 2 Style Explorer (beta) available

The Flex 2 Style Explorer (beta) is now available for use. It being a beta, built with a beta product, there are the usual caveats. Being Flex 2, of course, to use this you'll need the Flash Player 8.5 to run it. Also, as Flex 2 is beta, there are some interesting behaviors you'll notice in terms of the way some things might look. And finally, as this is built on Beta 1 of Flex 2.0 some things may, and most likely WILL change in later versions. Once the next Beta comes out, I'll update it to beta 2, and re-submit.

Working through CSS in Flex 2, You'll notice some new and interesting things that are important for all designers and developers to understand. The most important thing is that the new Aeon components are built by layering transparent pieces. So, for example each buttons is made up of three peices, as shown in the image below):

• Border: this is the same as before
• FillColors: These fill colors also now have fill alphas, so by default the buttons is partially transparent with the colors beneath it showing through.
• HilightAlphas: There's a highlight on the top half of each button, which is basically a white fill with customizable levels of transparency.

  This allows for some very interesting effects, and a lot more customization with just a little code.

  BUT, it does also mean that designers of Flex 2.0 apps can no longer simply hand an image to a developer and expect them to be able to recreate it, since the colors that appear on the screen cannot be expressed and interpreted strictly by their color, but must include alpha values for two layers.

  That means designers will have to either hand off the CSS for a chosen component as "the spec" for that component, or will have to at the very least have an understanding of how that component is created and hand off specs that include fill-colors, fill-alphas, and highlight-alphas.

  Please let us know if you find anything buggy, or "not quite right". Enjoy.

  
  Click Here to run the Flex 2 Style Explorer

  [UPDATE] For those that haven't seen it, as Flex 2.0 is now released, a release version is now available, and can be loaded from the follow up post at http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

  Posted by Peter Baird at 8:16 AM | Comments (14)

  October 30, 2005

  4-color gradient CSS customizable Programmatic Skin-set for Flex 1.5

  While you can go pretty far in visual design of Flex components using straight CSS, there are some limitations. It an attempt to address those limitations, I've created a programmatic skin set for Flex that can be easily customized with CSS for effects such as the screenshot below:
  

  For you designers out there, take a look at the sample to play around with some of the possibilities with this skinset, that are not available with out-of-the-box CSS. For the developers, download the skinset and take a peak at the mxml file to see what css properties are available. And then feel free to use these skins to achieve the visual design you've always wanted.

  The additional properties now available when using this skinset are:
  

  • fill-colors: 4-color gradients (four color hex values)
  
  
  • ratios: the points along the fill where each color falls in the gradient (a number between 0 and 255)
  
  
  • drop-shadow: added to the button and accordion control. On the accordion, the dropShadow falls under the selected accordion header (true or false)
  
  
  • border-alpha: the alpha value on a button's border. Allows you to have a borderless button when set to zero. (a number between 0 to 100)
  
  
  • highlight: allows for a highlight along the top of a button or a ComboBox, NumericStepper, or Tab (true or false)
  
  
  • right-fill-colors: allows for separate left and right-side colors (the arrow control) on a combo-box (four color hex values)
  
  
  • divide-line: On a comboBox, the option of having or not having the divided line between the arrow and the rest of the control (true or false)
  
  
  • hover-glow, glow color: Allows for a glow over on rollover on an accordion header, and define the color (true or false, color hex value)
  
  
  • grip: allows for whether or not the scroll thumb has grip lines (true or false)
  
  
  • arrow-alpha: On a Scrollbar, the arrows can also have an alpha value (number 0 - 100)
  
  
  • track-fill-colors: the ScrollBar track could also have 4 colors (4 hex values)
  
  
  • corner-radius: Accordion Headers now also respect cornerRadius. (number)
  
  
  
  Enjoy! Implement those design you've always wanted to. And if you use this skin set for a design, leave a comment and point us all to it. We'd love to see what you're coming up with.

  Oh, and I should note, for performance reasons, since we're doing a whole bunch of setStyles here, I haven't tied in the tabs to the sliders, but the CSS styles for tabs do work. They aren't being changed intentionally.

  Once again: Play with the samples

  Download the Skinset

  Posted by Peter Baird at 9:35 AM | Comments (7)

  July 29, 2005

  Gestural Navigation in Flex

  One of the great things about Flex is the "mouseOver" event that pretty much any component, including containers, has available. What this means is that we can trigger almost any event without requiring a mouse click. Why and when would you want to do such a thing? Imagine, for example, a list with details, as shown in the flex application below.
  

  
  
  

  In this example, we've got hypothetically limited real estate, where when our focus is on the list, we'd like to see as much of the options as possible, but while our focus is on the details, we'd like to read and view all the details as possible. The different mouse interactions in a user interface that could be used, in order of level of increasing level of effort are:

  1. mouseover (rollover button, highlight)
  2. click (button)
  3. click and hold (scroll arrows)
  4. click and drag (scrollbar thumbs, dividers)

  Given that this is a list of items, these interactions would be repetitive as the user reads details for each action. We, therefore, would want to minimize the level of effort, and this mouseover example would be an appropriate way to do that.

  Why wouldn't you want to use a gestural approach to events? There are a couple of reasons you wouldn't want to use a gestural approach. First, if everything is gestural, there's the risk of many things bouncing around the screen, possibly becoming distracting. The second, larger issue, is one of intention and user expectation. A user click usually signals the users intent to an action or an event. You certainly would not want to trigger an event on rollover that the user did not intend to do. The types of changes that might be appropriate on rollover are subtle state changes. The user should not loose anything from the view without their intent. So, for example, a change of visibility in a viewstack would be less appropriate on rollover.

  Finally, a consideration. The size of the target area for a mouseOver action should be larger that the typical target for a click, as it requires more precision. Hover requires a full stop and wait, while click can be a "drive-by" so to speak. So to make hover more accurate, it helps to make the target area larger. If a user simply wants to drive through a list and view details. Using the arrow keys is also very powerful.

  To see the source code for the above example, right click and select "view source code".

  Posted by Peter Baird at 7:34 AM | Comments (10)

  July 26, 2005

  Flex Style Explorer on DevNet

  Just a quick note that we've recently published an article on the Macromedia Developer Center (DevNet) related to the Flex Style Explorer. In addition to the things that have already been mentioned here, there's also an analysis of the Designer-Developer workflow, and how the Flex Style Explorer can help to bridge that gap. To view the full article, go to http://www.macromedia.com/devnet/flex/articles/style_explorer.html

  Posted by Peter Baird at 8:30 AM | Comments (4)

  June 28, 2005

  Windows XP Theme for Flex

  Recently had an engagement where we were tasked with accurately simulating a Microsoft Windows application with Flex. In the process, we created a Windows XP skin for Flex Components that we’re now offering up to the Flex community as a whole.

  

  Why should or why shouldn't you use this skin? There are instances, like the one we were tasked with, where the requirements call for an accurate simulation, or perhaps a rapid prototype of a Windows Application. However, we wouldn't recommend using this skin in most other cases. We try to advocate appropriate user-experiences, and throwing a Windows XP skin on a Flex App that will likely run in a Windows XP window just for the sake of it is anything but an appropriate user experience.
  
  With the previous posts about the Flex Style Explorer, you might be noticing a theme emerging here. The Flex Style Explorer, of course, is all about styling Flex applications with CSS. This approach uses a combination of CSS and a Skin (a .swc file created in Flash Authoring). This, of course, opens up the whole debate about whether to style (CSS) or skin (SWC). I'll avoid going long on this post and just make a couple points, and leave it to your comments to fuel the Style/Skin debate.

  • First, skinning takes significantly more development time than styling with CSS. This skin took roughly 40 hours to create, whereas a CSS style could conceivable be done in a matter of minutes to hours, depending on the intended design
  • Second, styling is more easily updatable than skins, which require you to fire up Flash Authoring, work with some drawing tools, and export as a SWC rather than changing a few lines of code
  • Third, since skinning requires graphical assets, it may increase the file size of your app beyond that which is desireable. (You'll notice the sample app below is 208K)

  That all said, skinning does give you a bit more control over the design of the app than styling does. My personal advice would be see what you can do with styling before venturing into skinning.

  Finally, I should mention that this skin is not completely perfect (specifically with menus, we ended up going Custom, but the styled menus included are a start).

  To see a sample of the XP skins, Click Here.

  To download the files, click here.

  Posted by Peter Baird at 4:14 AM | Comments (13)

  June 20, 2005

  Updated: Flex Style Explorer (Background Images & Halo Themes)

  The Flex Style Explorer has been public now for several weeks, and we’ve already gotten a lot of great feedback. Some of those suggestions have been implemented in this update (with many more to follow).

  This release adds support for the backgroundImage property for an application. Both the online and the downloadable versions include a couple of sample background images, and the downloadable version includes support for trying out your own background image. This release also includes the use of the “haloSilver�, “haloOrange�, and “haloBlue� themes for themeColor. Beyond that, some bugs have been fixed.

  With the release of the Flex Style Explorer, there were a lot of questions circulating. I’ll try to answer a few of them here, but please post comments and questions and we’ll try and address them (we’ve got the comments working now, along with the move to the new server for the MC Blog).

  1. How was the style of the three main panels in the Style Explorer achieved? No, it’s not CSS, and that was intentional for two reasons. First, it looks cooler. Second, as a subtle reminder to designers that, while styling with CSS is pretty powerful, designers do not need to feel limited to just what is available with out-of-the-box CSS. As for how it was done, it’s basically a headerless panel (headerHeight=0) with a 50% backgroundAlpha, and then where the header would be is a container with a custom background image (yup, we just created a swf in Flash Authoring) and the appropriate text in the container. Simple, huh!

  2. How are we updating styles on the fly? I’ve seen some pretty interesting code out there speculating on how this was done. But the truth is, it’s much simpler, and yet more tedious. We’re just basically using the setStyle() function. So, something like this (though not exactly)

  We know there are many other questions (and recommendations), so please add them to the comments, and we’ll try to address them when we’re not busy saving the world one flex-client at a time.

  To run the updated Flex Style Explorer, click here.

  To download the updated Flex Style Explorer, click here.

  Posted by Peter Baird at 12:55 PM | Comments (5)

  May 17, 2005

  Announcing Flex Style Explorer

  Macromedia Consulting is happy to share our initial version of the Flex Style Explorer.

  

  This application grew out of our experience working with other visual designers and user-experience professionals who were tasked with creating visual designs for Flex applications, and were often asking for some tool to help them in that pursuit.

  Our purpose in creating the Flex Style Explorer was the following:

  1. Create a catalog of the available style controls for flex components
  2. Allow for easy real-time manipulation of the component’s style in order to see the effect of the various controls.
  3. Provide the CSS associated with each style control.

  Some Caveats
  Use this at your own risk. This is by no means an official Macromedia product and is not supported. You know, the whole "the views expressed here do not represent the views of the parent company". Same goes here. We haven’t had the opportunity to do much testing so you’re bound to find bugs.

  While we've tried to catalog every possible style, there are some we've knowingly left out. For example, there's the ability to specify the size, weight, underline, font-family where text appears in components. Rather than include that for every component, we've included a view for Text Formatting, and noted that any component that has text can be formatted.

  We welcome any comments, ideas, or complaints on the Flex Style Explorer. If you feel that there are any components that are missing, please let us know. Keep in mind that it's a style App, therefore it focuses on visible components, so don't go telling me that Tile, Grid, and Canvas are missing.

  Also, we would be very interested in ideas for future enhancements. Some of the ideas that we’re hoping to include in future versions are...
  

  • A selection of predefined themes or examples from which to compare CSS and the ability to bring these into edit mode
  • The ability to have a global custom color palette for the user to select from across components.

  To launch the Flex Style Explorer, click here.

  You can download the Flex Style Explorer here

  Posted by Peter Baird at 9:10 PM | Comments (28)