ScaleNine

Jeffry Houser had me sit in for an interview on The Flex Show to discuss some of my experiences with skinning, my workflow, and why it might be important to skin an app. It’s easy for me to ramble on and on about some of these topics. In some cases I did At the end of the interview it was pretty much inevitable for me to listen back and criticize myself. All in all I think the interview went well and it may give others interested in skinning their Flex app some insight into what it might take.

Jeffry also gave details on a Flex Show contest to win some free copies of Flex 2 with Charting.

Listen to Episode 10 of the Flex Show

Of course, after being asked questions I didn’t have full knowledge of, I had to go find the answer. Here’s a couple things I was able to find regarding some of the discussion topics I didn’t have complete answers to or wasn’t able to go into details.

Digg API Contest:

The Digg API contest

CSS for htmlText in Flex:

HTMLStyle

StyleSheet Class

My workflow:

App Skinning: A Workflow (probably gonna change when I get some CS3 products)

Where I work:

Atomic Curve is where I work. I failed to mention this.

It’s hard not to get excited about some of the information that’s starting filter out concerning what the new CS3 products will be offering designers involved with Flex. Ryan Stewart blogged a little about what Flash CS3 will be bringing and what the Flex Component Kit for Flash CS3 means for developers. I watched the Flash/Flex Integration presentation and it’s awesome to see some of the things you’ll be able to do with a lot less headaches. I forsee many more designers getting involved with Flex now that there seems to be a much shallower learning curve. There was also some information about what the next version of Flex (codename Moxy) will offer to make things even more integrated.

With Fireworks CS3 packing it’s own integration and Illustrator CS3 more Flex friendly I know my workflow will definitely be changing into a much more streamlined process. So, until I can get my hands on the free trial in a few weeks, win a contest, or actually purchase the software, I’m left repeating “I want my CS3”.

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.

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.

Graphita is a Flex app which allows you to add graphics to your uploaded photos to create custom compositions. I came across it via a post on TechCrunch which led me to the homepage.

It seems the number apps which allow you to customize, add, or modify raw media like video, pictures, etc. are really starting to bubble to the surface. Flex definitely helps these apps pull it off.

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

Glide is a Flex app built by Transmedia and is described as “The first complete online operating system” on the Glide website. It looks to be an ambitious project and there’s a lot going on inside this app. There’s the ability to store and organize photos, music, videos, documents and bookmarks. You can also perform “network” tasks like sharing a calendar, sharing files, email and chat. There’s also the ability to create websites, presentations, edit photos, and create a blog.

There’s a lot of similar features to Wallop, but things are layed out in a much more structured way. There’s also a lot more “syncing” of information. Not only with other Glide users, but with your computer and cell phone as well.

I only played around with this app for a few minutes to get an initial feel and I’m sure there’s more that it offers, or doesn’t. It was worth a look and I’ll be tracking it’s progress as it moves through beta.

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.

Flex.org got a new look today that’s definitely for the better. Things are much easier to find with sub pages broken down by topic, easy to read text and a cleaner page design. It would be nice to see some of the icon/graphics from the homepage trickle into some of the subpages, but the content is all there including a new Showcase, Jobs and easy to navigate Community section.

Check it out and fill out the “Thanks!” form to get a free set of Actionscript and Flex posters.