ScaleNine

On a recent project I was implementing some skins into an AIR application. Things were moving forward without any problems until recently when the lead developer on the project, Greg Owen, walked up to me and asked about potential performance issues with skinning. I asked what the issue was and he mentioned a major CPU hit was being taken as soon as the style sheet was loaded and it just continued to climb. He also mentioned the issue had gotten worse as more development and skinning progress had been made.

We stripped out Degrafa (we were using Degrafa for skinning). That wasn’t the issue. We changed around some embeds. That wasn’t the issue. Greg eventually narrowed it down to using the Flex Component Kit for skinning as the issue by reverting a sample skin back to the “stateless” way of creating skins. When that was done there was a substantial difference.

The thing is, this issue may not be very noticeable in smaller applications. It’s when you begin to add more controls that the issue becomes very apparent, which may explain why nothing really comes up when you do a Google search.

Patrick Hansen, the UX Designer who created the skins, has written about the issue from a designer perspective and Greg Owen has written a post from a developer’s perspective. They’ve also provided sample files so you can see the issue first hand.

There have been a ton of new specs added for Flex 4 lately, so I thought I’d grab the most recent version of the Flex 4 SDK to see what’s changed since I last checked. I currently have the Flex 4 SDK set up to run in Flex Builder 3, so I just added some components to start playing around with a few things. When I ran the application I noticed a whole new Flex theme that looks something like this:

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.

Before we get into the winners, let me just say that the response to this contest exceeded the expectations of Adobe, EffectiveUI and myself. We got 27 total entries and enough to make it really hard to pick the final winners. That also means 27 more themes for people to access here on ScaleNine, so thanks to everyone who submitted.

Now, on to the winners. Oh, and if you don’t remember what each of the prizes were, you can refresh your memory here. With one exception. Initially, some of the prizes included Adobe Creative Suite 3 software, however, since Creative Suite 4 was just released, Adobe isn’t going to send you on your way with old software. Winners will now be getting CS4 software instead of CS3!

Ok, really, on to the winners.

First Place – Undefined by Alberto Alcaraz

Alberto did an awesome job of creating a really tight theme and paid attention to pixel by pixel details. As one judge put it:

I must say, [ this ] is some tight skinning. And although I have never agreed with the half-rounded half-rectangular aesthetic, this guy makes it look acceptable. He brings a designer’s eye to the developer’s table, in terms of his implementation of pixel-level precision and design consistency.

You can check out Alberto’s theme here. Congratulation’s Alberto!

Second Place – Brownie by Nahuel Foronda

I can tell you that it was a battle for first place between Nahuel’s entry and the winner. Judges found this entry both interesting and polished. Several were interested to see some of the technical detail that also went into the entry with some of the custom Flex code that came along with it.

You can check out Nahuel’s theme here. Congratulation’s Nahuel!

Third Place – iCandy by Phil Chung

Phil did a great job of mixing detail and color while throwing in some unique design touches into different components. Every component was represented in a consistent manner and he added in some extra programmatic bits as well.

You can check out Phil’s theme here. Congratulation’s Phil!

Spot Prizes

The idea for the Spot Prizes was to reward people because the judges found something interesting/inspiring/unusual about the entry. Judges decided to reward Spot Prizes to three entries:

Spot Prize – Aeon Graphical by Xu Jiajun

Spot Prize – Rock On by Bhavin Padhiyar

Spot Prize – Disco Type by Heather Ford

Thanks again to everyone who entered and congratulations to the winners. Winners will be receiving an email concerning their prizes shortly. Thanks to the sponsors: Adobe and EffectiveUI.

I’m hoping to have all the themes available for everyone to download by next week. As a side note, if you’d like to host your own theme and have the link from ScaleNine go to your site, blog or whatever for downloading, just let me know or send me a link to where you’re hosting the theme.

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.

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?

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

Recently I was presented with the challenge of creating overlapping Tabs and when clicked, the selected Tab should come to the foreground. No problem I thought. I’ll just set the horizontalGap of the TabBar to a negative value to get the overlap and, um, wait a second. How do I get the selected Tab to come to the foreground when it’s clicked? It doesn’t do that by default. A selected Tab stays at it’s itnitially rendered depth.

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.

Originally the Obsidian theme was used as part of a quick experiment I did using Flickr (before their latest API version) and Ely Greenfield’s Display Shelf Component. I wanted to see what I could do visually with other Flex 2 samples I found. It’s neat seeing what a little stylin’ can do to dress up an app.

The app has a few bugs since Flickr changed to their api, but I thought I’d post it just the same. Who knows, maybe someone will download the source and fix the bugs.

Based on Rich Tretola’s example mentioned in my last post, I created a Theme Swapper app using the Flex 2.0.1 runtime CSS feature. It swaps between three of the graphical themes I created (Obsidian, iTunes 7, and WMP 11 themes).

See it here: http://scalenine.com/samples/themeSwapper/themeSwap.html or view the source.