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.

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.

A user on the Flex Components Yahoo Group asked about how to skin a pop up box to have an arrow at the bottom of the box. More specifically how to make it look like a pop up button in Windows Media Player 11. I made a quick sample by skinning a combo box using CSS and Flash. You can view it here and download the source here.

I’m getting close to finishing up the iTunes 7 theme, so maybe I’ll make a Windows Media Player 11 Theme to expand upon this drop down skin. I work on a Mac, so I’ll have to go by screenshots available online.