ScaleNine

Today I came across something interesting while trouble-shooting an issue with Patrick Hansen, a designer/developer at EffectiveUI. Patrick was creating skins for a Flex application using Flash. One Button skin had some very intricate and rich animated artwork that extended beyond the “actual” bounds of the skin. That is, the animation had artwork that was masked so it would only appear within the viewable area of the Button skin. Below is a simple example I made to illustrate what I mean.

Button skin artwork that extends beyond the bounds. Unmasked and masked.

The animation appeared fine in Flash, but when it was applied as a skin to a Button the skin shrank in size (see image below). This was because the Button took into account the artwork that was masked in Flash. This made total sense. To fix it I thought, “Well, we could just use the bounding box technique that has been outlined in several Flex Component Kit Tutorials.” Easy enough.

Button skin without a bounding box. The red is the “actual” bounds of the Button component.

If you’re not familiar with using a bounding box in Flash to define the bounds you’d like your Flash artwork to adhere too, the concept is simple. Basically, you create a box, make it a MovieClip (called “BoundingBox” or something), give it an instance name of “boundingBox” when it’s on the Stage and then use it to define bounds of the Flash content. Kinda like this:

Button skin with bounding box (red) applied.

We did all that without any issues. However, we hit a snag when we tried to apply the Button skin that had this bounding box to an actual Flex Button component. We were trying to apply the skin by embedding a skinClass through CSS like this:


Button
{
skin: Embed(skinClass="Button_skin");
}


The Flex application would just hang. The trick to getting it to work was to just use a ClassReference like this:


Button
{
skin: ClassReference("Button_skin");
}


Everything compiled fine when using ClassReference. The skin looked exactly as it did in Flash and used the bounding box correctly. Cool!

The scary thing is that “Skin Import Wizard” in Flex automatically uses skinClass and most designers who use Flash are probably used to working with masks and artwork that extends “beyond the bounds”. The thing is that to a designer or developer it could appear that the skin is the issue, but in fact it was just a matter of switching the Skin Import Wizard default of skinClass to use ClassReference.

Just to make sure it wasn’t a fluke I made a quick test (view source enabled). If you wanna make the app break, just switch ClassReference to skinClass as shown above. Am I just doing something wrong?

With Flex 3 there are a lot of great new features to help streamline the implementation of your custom skins into your Flex or AIR application. One of them is the Flex Skin Design Extensions (SDE) for Flash, Illustrator, Photoshop and Fireworks. These were available during the beta releases of Flex 3, so you may already be familiar with it. However, since the full release of Flex 3 there have been some updates to the extensions and I wanted to point out a few tricks that may help streamline your skinning workflow a bit further. Also, if you’re new to skinning Flex apps, check out Narciso Jaramillo’s updated article about creating skins for Flex using Adobe Creative Suite 3.

Naming Conventions

If you look at the skin templates that come with the Flex SDE you’ll notice that each skin is named in a particular way. The naming convention works by specifying the component name, an underscore “_”, then the component skin part. For example, Button_upSkin, Button_overSkin, etc. They are named this way so when you import the skin through Flex Builder’s Skin Import Wizard the combo boxes that allow you to assign a skin state for each skin are “automagically” assigned to the skin state you specified in the skin template. This is good to know because you can use the same naming conventions when you’re making your own custom skins that may be created without using the templates provided. I typically make a single file with all my skins in it and use this naming convention frequently.

This method will work for a variety of scenarios. For example, if you need to add a background image to a certain container, you could use myVbox_backgroundImage and it will go through the Skin Import Wizard very easily. This will work for other “skinnable” parts, like borderSkin, upIcon, etc. Easy enough, right?

The other nice thing you can do with adhering to these naming conventions is skin “sub-components”. For example, the DateField component allows you to specify a textInputStyleName. You can assign skins to that text input by specifying the component name, adding a hypen “-” (Illustrator, Fireworks, Illustrator) or dollar sign “$” (Flash) with the sub-component name, then and underscore “_” and the sub-component skin part. So, in the case of the DateField, you could specify the borderSkin for the text input like this:

DateField-textInput_borderSkin (Illustrator, Fireworks, Photoshop) or DateField$textInput_borderSkin (Flash)

Notice I just used “textInput” and not “textInputStyleName”. This is because “StyleName” is appended to the sub-component name during the Skin Import process in Flex. For example, naming a skin asset in Flash “ComboBox$dropdown_backgroundImage”, publishing it and importing it using the Skin Import Wizard would produce the following CSS (Note: You’d have to add backgroundSize: ‘100%’ for the image to stretch.):

ComboBox
{
dropdownStyleName: “comboBoxDropdown“;
}
.comboBoxDropdown
{
backgroundImage: Embed(skinClass=“ComboBox$dropdown_backgroundImage“);
}

If you look at the skin template for the application your using you should see this naming convention used for the tab skins. You can use this same naming convention for other sub-components, like dropdown, verticalScrollBar, etc. Just naming your skin assets a certain way can really streamline the the skin production process.

Naming for CSS Design Mode Previews

Another new feature in Flex 3 is CSS Design Mode. While viewing CSS you can click on the “Design” mode button to see what your CSS looks like applied to a particular component. However, if you were to create a style class and switch to CSS Design Mode you won’t get an immediate preview. This is because you have to specify a component to preview the CSS against. A way to forego this step is to add the type of component you want the styling applied to to the class name. For example, if I had a class name of “blueButton” I could preview it as a Button component in CSS Design Mode by adding “Button” to the class name keeping the dot “.” of the class name like this:

Button.myButton
{
fillAlphas: 1.0, 1.0;
fillColors: #84B1F4, #1D4888;
borderColor: #07314F;
color: #FFFFFF;
}

This will work for pretty much any component, provide a quick way to preview the CSS styling on a component without having to specify it in CSS Design Mode and make your CSS a bit more descriptive. If you use the same styling across multiple components you may want to leave class names void of component specifications.

Other Resources

Designing Flex 3 skins and styles using Creative Suite 3 and Flex Builder 3
Flex 3 CSS Design Mode in LiveDocs

I don’t know if it’s because of all the Apollo sample application screenshots floating around, but several people have been asking for a “dark” CSS theme. Maybe it’s just ’cause “dark” UIs look nice. Hmmm, maybe an Adobe Lightroom Theme is in order.

Anyhow, you can check out the Shadow CSS Theme, download the CSS or test it out using the following source in the mx:Style tag of your Application’s MXML:

http://try.scalenine.com/shadow/shadow.css

1. Style it with CSS

This is one of the quickest and easiest ways to start making your Flex 2 Application look a bit more “custom”. CSS styling can be applied using an external style sheet or directly inline of your MXML. A great tool for creating and understanding CSS styling is Peter Baird’s Flex 2 Style Explorer. This tool also gives you the ability to export your CSS to use in your Flex app. Whether inline or as an external stylesheet.

Examples: Moxy Theme , Mac OS X Theme by Adobe Consulting

2. Go Graphical

Another method is Graphical Skinning, which can be a bit more time consuming, but allows for more control over the look of the UI. Most “unique” looking Flex applications use this method in combination with CSS styling to get a more custom look.Graphics can be created a few different ways using Photoshop, Fireworks, or Flash. Scale-9 or 9-slice tactics can be used to allow your graphics to scale uniformly with the component it’s applied to. Also, like styling, this method can be used inline or with definitions in an external CSS file.

Check out Narcisso Jaramillo’s great tutorial on how to do all this. If you’re using Photoshop there’s this video tutorial from Jesse Warden about getting a Photoshop design into Flex 2.

Examples: Messenger Theme , Picnik , Flip Flip Books

Resources: Flash 9 Button in Flex 2, Integrating a Flash interface into Flex 2

3. Make it Programmatic

If you want the most control over the way you Flex 2 application looks, then programmatic skinning is the way to go. It is a more advanced method of skinning and requires programming knowledge. Eylon Stroh of Adobe put together a really great step-by-step walkthrough, including implementation of programmatic skinning.

Examples: Napkin Skin by Eylon Stroh

Other Styling and Skinning Resources: Programmatic Skinning with Flex 2 , Interface Customization in Flex , ScaleNine Resources

4. Customize the App Preloader

One of the ways you can usually tell an application was built using Flex is it loads in with the default preloader. I’ve run across several people in various forums asking about how to skin the preloader. The Adobe Live Docs provide a method and explanation on how to do this. Ted Patrick also provides some insight on how to do this.

Examples: Picnik , Flip Flip Books , Flipper FlexApps Viewer

5. Establish a Color Scheme

Another way to get a great looking Flex app is to establish a appealing and consistent color scheme. It seems like something small, but it can make a big difference when executed correctly. I know not everyone is a designer and picking colors can be scary, but it’s worth it. There’s a lot of great online tools to help with this. Of course, there’s Adobe’s Kuler, which is easy to browse and find a color scheme you like. Write or copy the values and use them to give you Flex app a new color scheme. There’s also Daily Color Scheme, this Color Scheme Tool, and I’m sure many others.

Keep in mind that color does play a big role in your application and depending on it’s functionality or purpose you may want to go with more neutral colors like greys, subtle color shandes or white.

6. Fonts

The way text looks in your app can set it appart from others. In Flex you can embed other fonts (inline or via external CSS file) to use for any purpose, whether for your application as a whole or in select locations to bring attention. At the moment Flex 2 only supports the embedding of TrueType fonts.

Choosing a font, like choosing a color sheme, can be tricky. Again, it depends on what you wnat to accomplish with it and insuring legibility and usability when implemented. Keep in mind that fonts range in price from free to fairly expensive.

Here’s a few resources for finding fonts: Font Freak, Fonts For Flash, Orgdot, Free-Fonts, Dafont, Veer, Adobe Type

7. Icons

Usuability and an intuitive user interface can make or break an application. The use of visual cues can ease a users perception of an application and increase the pace at which they learn the app. Icons are an easy way to give users “directions” in what they need to do and can compliment or reenforce the text the icon may be next to. Like the saying goes, “A picture is worth a thousand words.” In some cases an icon can say more than text.

Here’s a few resources for icons: Fam Fam Fam, Stock Icons, Glyph Lab, Icon Buffet, Fast Icon, Icon Shock, Icon Base, Icon Fish

8. Add Some Effects

Selectively adding static and animated effects like drop shadows, glows, etc. can help add a polished look to your Flex 2 app. You can use Flex’s effects, create composite effects, or take advantage of importing Flash Filters for images and text. To get a better idea of what’s possible by using effects check out the Flex Component Explorer.

In addition, David Keutgens put together a Flex Effects Explorer, which makes it easy to see what these effects can do to various components in your app. And a more in depth display of Distortion Effects was created by Alex Uhlmann.

Other Effects Resources: Animated Color Transitions by Darron Schall

Examples: Flipper FlexApps Viewer, JamJar

9. State Transitions

Smooth out your app’s state changes by creating transitions. With a little code components can grow, reveal, collapse, flip, etc. for any number of purposes. Defining multiple transitions can create an even more fluid user experience.

Other Effects Resources: Animated Color Transitions by Darron Schall

Examples: FlexStore

10. Get Feedback

Successful applications are rarely built without the influence of other people and I know not everyone has access to advanced user group testing and polling. However, during the process of creating a UI it’s always a good idea to get feedback from people who are familiar with what you’re doing and, maybe more importantly, by those who are not. There’s a lot to learn from a fresh and unfamiliar perspective. In most cases, these perspectives can help shape a final product.

Second in my pure CSS theme series is Minty. It’s almost like a Flex interpretation of a Junior Mints box. A preview and download link can be found on the homepage.

Or try Minty by using http://try.scalenine.com/minty/minty.css in the source attribute of the mx:Style tag in your Flex 2 app MXML.

Peter Baird of Adobe Consulting has released a new version of the Flex Style Explorer. He’s really done a great job and added a bunch of new features including an export all CSS feature. Check out his post to learn more about all the new features and download the source files. You can also see the new version of Flex Style Explorer in action here.

Hopefully with this new updated tool we’ll start seeing a lot more styled Flex apps. Maybe even some submissions to be featured for download on the ScaleNine homepage.

Great job Peter!

Things are getting busy for me lately and it seems it’s going to be for a bit. Rather than let ScaleNine sit idle I thought I’d create a series of pure CSS themes for Flex 2. They’re quick to make and can be just as effective for a quick theme solution.

Moxy is the first in the series and took nothing but some time with the Flex 2 Style Explorer (some CSS tweaking required) and a search for the background image at stock.xchng.

Try Moxy by using http://try.scalenine.com/moxy/moxy.css in the source attribute of the mx:Style tag in your Flex 2 app MXML.

In case you haven’t seen the sample themes that come with Flex 2, look in the Flex SDK 2 > frameworks > themes folder of the Flex install folder (at least that’s where it is on my Mac :)) for themes called Ice, Smoke, Institutional, Wooden and others.