ScaleNine

In my last post I created a skin example based on the new skinning approach coming with Flex 4. It was a simple button skin that had two states, multiple icons, filters and used FXG for some of the graphics. I thought I’d expand on that example to include transitions.

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.

Last week a lot of new information came out for Flex 4 (Gumbo). One of the major changes we’ll be seeing in the next version of Flex is how you skin components. After doing some reading on the Adobe Open Source site, watching Ely Greenfield’s video on Adobe TV and reading some blog posts I thought I’d jump right into learning how to skin components in Flex 4.

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.

There’s more information starting to filter out about Gumbo, the next iteration of the Flex SDK. A lot of Flex developers were excited after seeing Ely Greenfield’s presentation at MAX last year and it’s great to see things starting to take shape. There’s a lot of change under way and I’m sure the Flex and Thermo teams are moving ahead full steam with an eye on this year’s MAX Conference.

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.

Everyone is getting excited as more details come out about Thermo. I’m sure the number of email requests to get on the “super pre-alpha” have flooded Adobe inboxes. The reason is that Thermo is looking to solve a huge gap in designer/developer workflow. This gap exists across pretty much every development workflow in various shapes and sizes, so it’ll be interesting to see what Adobe comes up with.

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.