It appears the Halo theme we’ve all have come to know is going to be replaced with a refreshed look (Any guesses on the name of this theme?). This theme is done all in FXG and includes a pretty good number of new “Gumbonents”. It’s great seeing the new method of skinning executed on an entire theme because you can really see some of the power behind what you’ll be able to do.

After I saw this default theme, I started looking around in other folder in the SDK download and there’s another theme that’s been added as well, called Wireframe. It looks like this:

What I like about this theme is it feels very “blueprint-like”. It does indeed remind me of what you might see in a created set of wireframes. This theme also is a great way to manage client expectations and get them to focus on interactions versus the visual design. One of the issues I’ve seen with the Halo theme is that it can look great right out of the box, so people might feel fine leaving it as is. This theme does a great job of begging to be customized.

While looking at the source files of the skins, I wondered what it might take to make a graphical skin that works in Flex 3 with with the new “Gumbonents”. Turns out it’s pretty easy. If you’ve got a Flex 3 Button skin created with PNGs that you want to use in an FxButton, you can do something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<?xml version="1.0" encoding="utf-8"?>
<Skin xmlns="http://ns.adobe.com/mxml/2009">
 
	<states>
        <State name="up" />
        <State name="over" />
        <State name="down" />
        <State name="disabled" />
    </states>
 
    <!-- Skin -->
    <Image left="0" top="0" right="0" bottom="0" maintainAspectRatio="false"
    	source.up="@Embed(source='Button_upSkin.png',scaleGridTop='5',scaleGridLeft='5',scaleGridRight='59',scaleGridBottom='17')"
    	source.over="@Embed(source='Button_overSkin.png',scaleGridTop='5',scaleGridLeft='5',scaleGridRight='59',scaleGridBottom='17')"
    	source.down="@Embed(source='Button_downSkin.png',scaleGridTop='5',scaleGridLeft='5',scaleGridRight='59',scaleGridBottom='17')"
    	source.disabled="@Embed(source='Button_disabledSkin.png',scaleGridTop='5',scaleGridLeft='5',scaleGridRight='59',scaleGridBottom='17')"
    />
 
    <!-- Label -->
    <TextBox id="labelField"
             horizontalCenter="0" verticalCenter="1"
             left="10" right="10" top="2" bottom="2"
             textAlign="center" verticalAlign="middle"
             color.over="0x336699">
    </TextBox>
 
</Skin>

And what about a skin created in Flash and outputted as a SWC? Well, for that you’d can drop the SWC into your libs folder and then use the local namespace to reference the skin classes. Using that skin class in a Gumbo skin looks something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?xml version="1.0" encoding="utf-8"?>
<Skin xmlns="http://ns.adobe.com/mxml/2009">
 
	<states>
        <State name="up" />
        <State name="over" />
        <State name="down" />
        <State name="disabled" />
    </states>
 
    <!-- Skin -->
    <local:Button_skin left="0" top="0" right="0" bottom="0"
    	currentState="up"
    	currentState.over="over"
    	currentState.down="down"
    	currentState.down="disabled"/> 
 
    <!-- Label -->
    <TextBox id="labelField"
             horizontalCenter="0" verticalCenter="1"
             left="10" right="10" top="2" bottom="2"
             textAlign="center" verticalAlign="middle">
    </TextBox>
 
</Skin>

If you want to gain a good understanding of how the new method of skinning works in Flex 4, I recommend looking at these themes and playing around with them. You’ll be up to speed in no time.

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.

Of course, the things I’m most interested in are the ways they’re improving designer/developer workflows. As I mentioned previously, there’s a lot of stuff that has to happen to make that collaboration smooth. Here’s a few things that caught my eye:

FXG
FXG is the graphics markup that will allow you to compose graphics for things like skins and visual displays. This is similar in concept to Degrafa, but with more focus on Thermo and the capabilities of Flash Player 10.

Skin Parts, States and More
All these features surround the new approach to creating components in Flex 4. With skins being separate you’ll be able to do a lot of wild stuff without feeling the current constraints you may be experiencing in Flex 3. Things are going to get a lot easier.

Advanced Animations
A lot of designers and developers I’ve spoken with have had issues working with Effects and Transitions in current versions of Flex. Animations are being reworked to be more versatile and support both component and non-component objects like FXG, colors, etc. I definitely like the sound of “intelligent” and “blended” effects.

New Text Elements
I use HTML text a lot in applications to support styled and dynamic text. It’s great to see additional support coming for <div>, <span>, etc.

This is all really great stuff to read and I can’t wait to see it come across in code. I’m also looking to see how this all integrates with Thermo. For more information, check out Deepa Subramaniam’s post with a round-up of links.

Thermo looks like a great tool, but it’s only half the story. The other part of the story (a big part) is what Flex 4 (Gumbo) is doing to make all the things in Thermo possible. You know, the code that’s generated behind the scenes as a designer is turns artwork into a working interface, adds transitions, etc. There’s a lot of work being done on Flex 4 to make Thermo look good, but each component, Flex 4 and Thermo, is vitally important.

If you were at last year’s MAX and saw Ely Greenfield’s presentation on “the flex roadmap”, then you probably know what I’m talking about. After MAX I tried to explain to people what I saw in his presentation, but it usually just wouldn’t come across. Now, on Adobe TV there’s a video of exactly what Ely was talking about. In the video he changes the way a component looks and acts all in a skin file. I assume this would be done by designer’s in Thermo so they don’t have to touch any code. This is also the same presentation that inspired Ben Stucki to create OpenFlux.

I showed this video to another developer and he asked, “Well, what will there be left for me to do? Create data and clean up Thermo code?” To him, making custom components was the fun part and now it seems part of that responsibility is falling on designers in Flex 4. The thing is, you can’t do everything with Thermo and Flex 4 out of the box, like turn a List into a spinning globe. I think things will definitely change to allow designers to have more control, but developers will now be freed up to do even more innovative things.

Things are definitely going to get interesting. Check out the video here.