ScaleNine

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.

For those of you who are interested in skinning beyond the graphical approach, Adobe TV has a nice video covering the topic of Programmatic Skinning. Kevin Hoyt does a nice job covering some of the basics of getting started with creating Programmatic Skins. He explains some of the differences between both methods of skinning and some of the impacts of going all graphical.

Check out the video on Adobe TV.

If you’re interested in expanding your knowledge on the topic, the book I co-authored with Andy McIntosh goes into detail on creating Programmatic Skins and provides some great tips and tricks. Apparently the book is slated to start shipping early next month (fingers crossed).

This method of creating skins is very powerful, however it can take a bit more time than creating graphical skins unless you’re doing it on a consistent basis. I’ve always been a fan of what you get from programmatic skinning, like the dynamic nature of them, the ability to customize through CSS styles,  and the optimization improvements. However, the necessity of working with the Drawing API and time it takes to create the skins eventually pushed me into getting involved with Degrafa. You’ll also see these benefits in Flex 4 and the introduction of FXG.

Over the weekend I added a bunch more themes from the ScaleNine “Skin to Win Challenge”. This brings the total number of themes available to 45. Thanks again to all who entered. You can see all the new themes in the ScaleNine Gallery.

I’ll be adding the artwork source files very soon. Until then, you can use the themes in your own applications. Enjoy!

Just wanted to send out a quick note that I’ve made the winning themes of the “Skin to Win Challenge” available for download. Not all of them included source files for the artwork, but you can grab the skins and CSS to use in your own applications. Get them from the Gallery

I’ve also revised the homepage to list the winners and feature the themes of the top 3 prize winners. Stay tuned for more themes from all the other entrants.

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.

The time to submit entries to the ScaleNine “Skin to Win Challenge” has officially come to an end. To be honest, I wasn’t sure how many entries this contest would generate, but to my pleasant surprise we received over 30 entries! That means a ton of new themes for the Flex community and some awesome prizes for the winners.

Now on to the hard part, the judging. I have to go through and get everything prepped for the judges to go review the entries and pick the winners. It’s going to be a tough job. I’ve gone through a bunch of the entries already and the quality is awesome!

So, stay tuned for the announcement of the winners, which we’re shooting to have out next week. At that time you’ll also have access to all the entries to use in your own Flex applications, including the winning entries.

I’m constantly in conversations with people concerning the perfect tools for different stages during a project. One stage that seems to come up in everyone’s process is creating wireframes. I’ve heard of people using Apple’s Numbers, Fireworks or Balsamiq, which all have there pros and cons.

Tracey Varnell, a fellow Experience Architect at EffectiveUI, pitched me a link to Protoshare, a site for rapidly creating wireframes and collaborating on them with others. Even better, is that there’s interactivity, so people can see various interactions, rather than trying to describe them in text or over the phone. They have a tour on the site covering some of the features.

Other Options

There’s also Axure for wireframes, prototypes and spec creation. The bummer is that it’s PC only, however, there is a prebuilt library of design patterns you can use instead of having rethink the wheel. If someone tries this out, I’d love to hear their thoughts. Check out the tour.

iRise looks like it does a lot of the same stuff and is also a desktop application. There’s a bunch of different editions you can get depending on your needs. Check out the tour.

While browsing the internets I came across some greta tutorials on creating skins for Flex. Currently, there seems to be many options for getting UI designs into Flex and having them look pixel perfect. So, if you’re new to skinning or want look into honing your skills, here’s a couple articles that might help.

Designing a Media Player in Fireworks

Fireworks is my tool of choice for creating Flex-based interfaces and it’s pretty often that people get surprised when I tell them that. If you’ve ever wondered about using Fireworks for designing Flex applications you might want to check this out.

Nikola Borisov has an article up on the Adobe Developer Center about “Designing a Media Player in Fireworks” to create something that looks like this:

This article does a good job of introducing Fireworks as a tool for designing UIs. Seeing some of the features I’ve seen in Fireworks CS4 reenforces why I love using Fireworks.

Also, there’s a great article on using rich symbols in Fireworks, which is a huge timesaver.

Creating Skins with Bitmaps, a SWF or Programmatically

Over on a site called Ntt.cc, there’s a tutorial on how to create the same skin three different ways: using bitmaps, a SWF or programmatically. The final skin created is called “Kingnare Style”, which mimics the styling of Photoshop Express.

The article is great for getting up to speed with using each of these three techniques, but if you’re not interested in that it’s worth checking out just to get the custom skin.

Pixel-perfect Precision

On a side note, Dan Florio of PolyGeek filled me in on an AIR application he created called pixDIF. The app offers features, like guides and increments, for verifying that your design matches pixel-perfectly to the way it’s implemented in Flex or any other technology. Check it out