ScaleNine

From time to time I need a quick way to reference or gain better understanding of certain features available in Flex and fortunately there are some great tools to do this. Here’s a round up of several explorers that I’ve bookmarked over time:

Component Explorer

Style Explorer (Also available as a Fireworks CS3 Extension)

Style Explorer with Kuler Import

Transtions & Effects Explorer

Charting Explorer

Primitive Explorer

Filter Explorer

Resize Manager Explorer (for custom component)

Enhanced Button Skin Explorer (for custom component)

Reflection Manager/Explorer

Distortion Effects Explorer 

Kuler : Color Explorer? (Also accesible in Illustrator CS3 under Window > Adobe Labs > kuler)

I caught the announcement the other day on FlexCoders that a new version of the SearchCoders Dashboard was available. Tom Bray and Robert Cadena have managed to pack in some great features which brings the tally to a number of ways to get the info your looking for regarding Flex.

With information at your finger tips, like mail list tracking, RSS feed pulls, Chat, and Search, your bound to find what you’re looking for. There is also a number of ways to personalize the app by adding RSS feeds, creating notes, and creating favorite.

It looks as though the SearchCoders Dashboard is in constant development to bring even more information to your desktop. If you have any ideas let these guys know. Very nice.

Check out the Screencast

Download Page

The Flex 2 Style Explorer was updated with a more robust color picker, which includes the ability to save swatches. This is great because formerly I was writing down custom color values, then retyping them in each time I wanted to use them. You can read about the features here and experience the app here.

Also, the Flex 2 Style Explorer was packaged as a Fireworks CS3 Extension, which allows you to run it right in Fireworks CS3. I can’t wait until the new CS3 applications are available for trial downloads so I can try this out.

Do you find yourself creating graphic assets to achieve a quad-gradient, dual-rounded corner, tri-alpha button? If so check out the EnhancedButtonSkin, complete with an Explorer, from Daniel Wabyick. There’s a lot of looks you can create, from highly complex to simple sweet, and it can be quite the time saver.

Check out the EnhancedButton Skin

I came across a post on Ryan Stewart’s blog with a very useful link to a post on isarie.com with a listing of available fonts formatted as SWFs, which can be easily used in Flex. I was actually thinking about doing something like this as well as creating icon library SWFs, but I’m glad I didn’t go through the trouble of duplicating others’ efforts. Font copyrights also was factor, but it looks like most of these fonts can be found from free font resources like fontfreak.com, 1001freefonts.com and in your system fonts library.

This listing of SWF formatted fonts is a great resource and can be a time saver especially since doing something as quick as changing the fonts in your Flex app can start to make it take on a more “custom” look. The few fonts I tried worked great after I got the fontFamily names figured out. One thing to keep in mind is these fonts might be best suited for use as “display” or accent fonts as I found several that didn’t have special characters like bullets, an @ symbol, etc. and may not be suitable for dynamic or user inputted text. Also, it saves you from needing Flash or going through the trouble of creating the font embedded SWF in Flash. Although you could always create an embedded font SWF in Flex via Actionscript and the compiler.

One of the ways I’ve mentioned you can get a custom look for your Flex or Apollo app is by adding filters. Sometimes it can be hard to visualize what your filter is going to look like until you compile your project. The Flex 2 Filter Explorer by Joe Johnston is a great way to get the look you’re trying to achieve with a custom filter and then easily implement it.

Check it out.

If your dealing heavily with the design side of Flex 2, creating UIs and skins, you may find it tedious having to write and rewrite, or copying and pasting the same CSS code over and over for embedding SWF assets. Brian Wills put together a JSFL based helper script for Flash to help ease this process and save time.

It’s an early “work in progress” but a great start for a solution to one of the processes that I’m hoping Adobe will be addressing/solving in the upcoming release of CS3.

Check it out.

The Flex 2 Primitive Explorer, from Jason Hawryluk, is great for helping to understand how to draw shapes in Flex 2, whether for graphics, programmatic skins or custom components.

Jason expanded upon the Flex 2 Style Explorer to create this easy to use/understand tool. It will definitely help me with getting more involved with programmatic skinning and the source is included.

Experience: http://www.3gcomm.fr/Flex/PrimitiveExplorer/Flex2PrimitiveExplorer.html

Info: http://flexibleexperiments.wordpress.com/2007/03/14/flex-20-primitive-explorer/

Source: http://www.3gcomm.fr/Flex/PrimitiveExplorer/srcview/index.html

Peter Baird of Adobe Consulting has released a new version of the Flex Style Explorer. He’s really done a great job and added a bunch of new features including an export all CSS feature. Check out his post to learn more about all the new features and download the source files. You can also see the new version of Flex Style Explorer in action here.

Hopefully with this new updated tool we’ll start seeing a lot more styled Flex apps. Maybe even some submissions to be featured for download on the ScaleNine homepage.

Great job Peter!

I set up a quick system to allow ScaleNine themes to be used in Flex without having to download the source files from the homepage. Simply copy one of the following urls and paste it into the source attribute of a mx:Style tag in your working MXML under the Application tag. However, If you decide on using one of the themes I would suggest downloading the source for the theme you settled on and load it into your Flex project. A couple of weird things happen if you don’t do that, like disappearing images.

Obsidian Theme: http://try.scalenine.com/obsidian/obsidian.css

iTunes 7 Theme: http://try.scalenine.com/itunes7/jukebox.css

WMP 11 Theme: http://try.scalenine.com/wmp11/wmp11.css

Moxy CSS Theme: http://try.scalenine.com/moxy/moxy.css

Minty CSS Theme: http://try.scalenine.com/minty/minty.css

Shadow CSS Theme: http://try.scalenine.com/shadow/shadow.css

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

Vista Blue Theme: http://try.scalenine.com/vistaBlue/vistaBlue.css

Note: You must run/compile your project to see the theme get applied. It would be nice to see the theme change a project right inside Flex Builder rather than having to compile/run it. Maybe in a future release.