ScaleNine

Sven-Olav Paavel has created a theme for Flex 3/AIR that mimics the look of Windows Classic. Not every situation calls for duplicating the exact look of an OS, but there have been requests for this type of theme. Most of the time people want an OS theme for doing demonstrations of how something might work in the actual operating system of choice.

It looks like Sven spent a lot of time making sure the skins represented the Windows Classic OS as closely as possible. If you’re one of the people asking for a Windows Classic theme, it looks like Sven is your guy. Nice work!

You can view or download out the Windows Classic theme. It has also been added to the growing ScaleNine themes page of skins for Flex/AIR that are available out there.

I’ve been getting emails regarding some of the themes featured on ScaleNine not working properly with Flex 3. There have been some changes to the framework that have caused this, like Panel changes and name changes for some styles. However, there are things that were added to Flex 3 that you can take advantage of now, like iconColor and popUpIcon to further customize an app.

Right now, I don’t have much time to go back and change them all, so I’ll probably do one at a time in between the other stuff I have going on. Since not all of the themes are mine, you may need to contact the authors of other themes to ask about an update, if they are going to do one at all. Until some of the issues have been smoothed out, you can always download the available FLA for some themes and make the tweaks yourself. Or just start making skins using Degrafa

I came across this skin for Flex via the Yahoo! Flash Blog. It’s a very clean looking theme created by Joe Magnani and Jeff Bennett of the Yahoo Media Innovation Group. Best of all, the assets for the skin, including the AI, SWF and CSS file, are available for you to use and tweak under the BSD license. Check out the post here or download the theme here. Thanks guys!

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

Browsing the Flex area of the Adobe Exchange I came across some really nice themes created by Ralf Sczepan of Fleksray.org. One theme is called Flekscribble, which falls into a visual category along with the Napkin Skin created by Eylon Stroh. The other theme available is called DarkNite.

Both of these themes are available for download from Fleksray.org or from the Adobe Exchange, so you can check them out, use them and modify them. I will also be featuring these themes on the ScaleNine homepage. Nice work Ralf!

Another theme submitted by Bhavin Padhiyar is now available. You can check out the Orange theme here and get the source, including the Photoshop file, from the ScaleNine homepage.

You can also try it out using the following url in the mx:Style of your application:

http://try.scalenine.com/orange/orange.css

Thanks Bhavin!

When I first started ScaleNine I envisioned it as a community effort to bring skins, themes, and overall Flex visual UI enhancements to interested developers. As the knowledge base of Flex grows I suspect this may be the case and it seems as more and more developers get there hands on Flex, the more individuals there are who are eager to contribute to the community.

With that said, here’s a theme based on Windows Vista submitted by Bhavin Padhiyar. He approached this theme using bitmap assets and specifying the 9-slice grids in the CSS file. This is great because it shows another method of skinning a Flex application. He also provided the Photoshop file in case you’d like to modify some of the assets. Thanks Bhavin!

See this theme in action here (view source enabled), or download the PSD and source from the ScaleNine homepage.

You can also try this theme out without downloading any files by using this URL in the mx:Style source in the MXML of your application:

http://try.scalenine.com/vistaBlue/vistaBlue.css

I also made the Darkroom Theme available using this method:

http://try.scalenine.com/darkroom/darkroom.css

When I first started ScaleNine there was an immediate request for a theme based on Adobe Lightroom when it was in beta. I added the suggestion to the list and now finally got around to putting a theme together.

Initially I was just going skin the basic components, but as I got into it I started creating additional skins resembling those components in Lightroom. I ended up with multiple background, scroll bar, toggle button, combo box and button bar skins. I almost went into icons, but those are specific to Lightroom and I figured people would just use their own.

Also, to see how far I could go with the skin I mocked up what I thought Lightroom would look like in Flex. I was able to get real close without creating any custom components, but the best solution would be taking the time to create them for areas like the expanding/scrolling accordian-like area, putting a scroll bar on the left versus the right, etc. I just put VBoxes inside Canvases inside HBoxes inside… At least it will give anyone wanting to use the theme an idea where to use the different skins.

Almost everything is collapseable, like the trays and content areas in Lightroom, but I didn’t spend too much time getting into effects so they’re a little buggy in some instances.

Check out the Darkroom Theme (view source enabled) or download it and get the FLA from the Scalenine homepage. Happy Cinco de Mayo!

I don’t know if it’s because of all the Apollo sample application screenshots floating around, but several people have been asking for a “dark” CSS theme. Maybe it’s just ’cause “dark” UIs look nice. Hmmm, maybe an Adobe Lightroom Theme is in order.

Anyhow, you can check out the Shadow CSS Theme, download the CSS or test it out using the following source in the mx:Style tag of your Application’s MXML:

http://try.scalenine.com/shadow/shadow.css

Second in my pure CSS theme series is Minty. It’s almost like a Flex interpretation of a Junior Mints box. A preview and download link can be found on the homepage.

Or try Minty by using http://try.scalenine.com/minty/minty.css in the source attribute of the mx:Style tag in your Flex 2 app MXML.