Over the weekend I noticed a new build of the Flex SDK popped up with some new samples, like a CircularScrollBar, and some Gumbo Effects (amongst other things). I decided to make a Button skin with transitions that included a Resize and Fade Effect. Here’s what the 2 states look like:

The transition between the up and over states resizes the skin vertically then fades in the Sun/Cloud icon and the static temperature text. When you roll off the Button the transition plays in reverse. The transitions are pretty easy to implement if you’re familiar with working with Transitions and Effects currently in Flex. However, it will be nice to have Thermo to see exactly what your transitions are doing in real-time, especially for making more advanced composite effects.

During the process of putting this example together I experimented with using the includeIn property to only show content in certain states. Eventually I took it out, but that’s another option for showing/hiding content rather just messing with the alpha and scale. Plus, you’ll be sure that content will only show up in a designated state and not mess with the layout.

If you’re interested in what I did to get this sample to work you can download the source here.

Skinning in Flex 4 is drastically different than what we do today. Instead of having to work with a single graphic to represent the skin of a component, skins can be composed of multiple elements, like text, images, FXG graphics, transitions, filters, transforms, states, etc. You create your skin in a separate file and compose the skin elements together using MXML markup. This makes skinning so much more versatile so you can do things like layer graphics on top of labels, add multiple icons, create unique transitions and more.

Just to get started, I thought I’d just create a Button skin that began to illustrate some of the benefits of this new way of skinning. Here’s an image of the skin I ended up creating:

It’s a relatively simple skin (or is it?). If you look closer you’ll notice some things that aren’t possible to do in Flex 3 without making a custom component or using OpenFlux. Here’s why:

• - There’s two icons. One is the cloud, the other is an arrow.
• - Notice the Glow Filter on the text. How many times has a designer or yourself wanted to throw that in a Flex application only to have to scrap it ’cause it would take too long to implement.
• - It may be hard to see, but the highlight on the Button is actually an FXG graphic layered on TOP of the Label and the 2 icons.

Those reasons are just the beginning of why I’m looking forward to skinning in Flex 4. You have so much more control and it’s easy to do. However, that may have been the case for me because I use Degrafa so much.

This was just a “getting started” exercise for me and I plan to get into more dynamic things like transitions, working with transforms, maybe adding some 3D, experimenting with Pixel Bender filters and working with skins for other components, like Lists. Definitely fun stuff.

In case anyone’s interested, you can download the source here.

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?

What you need to get going is Flash CS3 and the Flex Skin Design Extension for Flash, which includes the templates. Download the Flex Skin Design Extension for Flash and install it. Once installed, fire up Flash CS3. You should see a “Flex Skins” option under the “Create from Template” column in the Getting Started window.

When you click on the “Flex Skins” option you’ll get a window with a list of available Flex Component skins. For this example I’ll select the Button skin.

When you first open the file you’ll see 4 layers: information, symbols, labels, background. Double-click on the Button symbol to reveal the timeline within.

If you scrub through the timeline you’ll notice the artwork changes to reflect the different states. This coincides with the frame labels: up, over, down, disabled. These frame labels match the state names for this Button component. Each of the other component skins may have different frame labels.

You may also notice the other frames with labels that are right next to each other. These are the transition starting and ending frames. The reason they are right next to each other is to prevent a time delay between the states. So, the first thing you want to do is spread those frames apart. For this example I’ll be working with the up-over transition.

If you look at the frame labels for that particular transition you’ll notice they’re named up-over:start and up-over:end. This is necessary for the transition to work properly in Flex.

With the frames spread apart I’ll create an under-glow transition where the Button will appear to be lit from the bottom as the user rolls over. Here’s a snapshot of the work area after I’ve created my transition:

I’ve got my skin all set up, so now I’ll export it for use in Flex. For this example I’ll just publish the SWF/SWC to my Desktop.

Once those are published I switch over to Flex Builder 3. In Flex Builder I’ll create a new Flex Project called “ButtonTransitionSkin”. Now it’s time to bring in my Button skin.

To bring in the Button skin got up to the File > Import > Skin Artwork menu item in Flex Builder. When you select “Skin Artwork” there are a few options. At the top select the “SWC or SWF file” radio button and then browse for the SWC that was published. I had put mine on my Desktop. Make sure you select the SWC and not the SWF.

I’ll change the default CSS entry for “Create skin style rules in:” to style.css and just leave the default selection for the “Attach style sheet to application:” option. Usually I’ll put my skin assets into a subfolder called something like “style” or “skins”, but in this case I’m not. After doing that the window looks like this:

When I hit the “Next” button I get a list of check box items to select the skins I want to include in my style sheet. I’ll leave “Button_skin” checked and click “Finish”. When I do that the style.css file is created and the skin is assigned to that component.

Now all that’s left is to add a Button to my Application layout and I get something like this:

Click here to view in new window (View Source enabled). Or download the project (including FLA) here.

If you’re looking for another method of creating “stateful” skins without using Flash, check out a post Nahuel of AsFusion wrote.

You can recreate the Resize, Fade, and Move effects by using the AnimateProperty effect and animating size, position and alpha:

Click here to view source

With the AnimateProperty effect you can also animate certain styles by setting isStyle=”true” in the effect properties. This allows you to do things like animate the cornerRadius and fontSize of a Button:

Click here to view source

Like I said, these are simple examples, but with a little experimentation you can add another level of detail to any effect you might be trying to create and it some cases have a bit more control.

Nahuel Foronda and Laura Arguello of ASFusion have put together a great Flex skins resource site inspired by CSS Zen Garden. It’s called FillColors and it provides more examples of what’s possible with skinning a Flex application. Not only that, but they’re having a contest to celebrate the launch, so show ‘em what you can do before September 28th and win yourself a FlexBuilder 2 license.

If I can find the time I’m going to try to support them and put together a theme. Maybe based on the application sample that Andy McIntosh and I presented at 360Flex. Or, maybe I’ll just expand upon my Flex Bar App that never got finished.

FillColors makes it easy to find, preview or download any of the Flex styles on the site, and if you see something you like, you can let the author of the theme know with comments or a rating. When I was there I couldn’t figure out how to download a style to try. The download buttons were greyed out, but I’m sure those will become active very soon

I’ve heard several people mention new Flex skinning resource sites on the horizon and it’s great to see them starting to bubble to the surface.

Check out FillColors

The presentation, titled “Creating a Visual Experience in Flex 2,” was a test run of some of the topics Andy McIntosh and I will be presenting at the 360Flex Conference in August. Overall things went great and I got a lot of feedback. Some of the feedback I got was to be expected like, “You need more visuals.” I got into a time crunch and didn’t get to implement all the visuals I wanted to, I mean come on, I’m talking about something visual and I have no visuals. Completely understandable and I’ll make sure to get more in there.

There was a bit of redundancy in parts of the presentation that I breezed through to get to showing some actual live examples of what I was talking about. Everybody really responded to those, so I’m going to try to work live examples in the presentation even if I do have to break between the slides and FlexBuilder. I’ve got a bit of work to do.

Also, I mentioned to those who attended that I’d be making the presentation slides available so you can access a PDF of the slides below. The redundant parts were stripped out and the majority of the slides have general concepts that I went into detail while speaking.

Download Presentation “Creating a Visual Experience in Flex 2″

I tackled this challenge graphically by modifying my Tab skins by slicing them up like and putting the “overlapped” portion of the Tab with part of the Tab skin next to it. This is pretty similar tactics to creating overlapping tabs fot HTML sites using CSS. This is how my skin graphics looked:

Which gave me a TabBar with Tabs that looked like this:

I then ended up adding some gradients to smooth out the juncture of where one Tab skin met the next to prevent any hard edges. Subtle stuff, but it makes a difference. Adding those gradients gave me a TabBar with Tabs that looked like this:

The final step was pointing to my CSS file for the styling of the TabBar and Tabs. With the styling in place, this technique creates the illusion of overlapping Tabs in a TabBar.

View Sample and with Source (FLA file included)

Of course there are downsides to this technique. The most flexible solution would be tweaking the TabBar to bring the selected child/tab to the foreground. Doing so would mean there’d be no need to mess with slicing up images and all you’d have to do is set the horizontalGap on a TabBar to a negative value like I initially tried to do. Hopefully there wasn’t an allowTabOverlap property, or something, I missed.

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.

Say that 5 times fast. If you get a chance, check out this FlexApps Flickr collection viewer by Kellen Styler of Cynergy Systems. Talk about a nice Flex app to look at other nice Flex apps. It’s a nice way to view Ted Patrick’s FlexApps image collection and I’m sure as more images get added there will be less panning.