ScaleNine

I thought I’d put together some solid instructions for installing the ScaleNine themes since the link I have on the homepage seemed to be a little vague and there are recurring questions regarding the topic. Please forgive the lack of screenshots, my Flex Builder trial ran out and I’ve switched to using the free Flex 2 SDK.

Installing any of the ScaleNine themes is pretty easy depending on it’s use and on your knowledge of Flex 2. Either way, it is still pretty easy. There is also a slight difference in installing a pure CSS theme and a graphical theme.

Installing a CSS Theme

Download and unzip the provided source files. Usually it will contain a CSS file and maybe a background image. You can drop these files anywhere in your Flex Project folder. Now, in your Application’s MXML create an mx:Style tag and specify the path of where you dropped the CSS and supporting files. Like this:

<mx:Style source=”/yourFilePath/CSSFile.css”/>

If your in Flex Builder you can hit the “Refresh View” button in the Design View and if the theme was set up correctly you should see the appearance of your app change to reflect the specified CSS.

It’s that easy. Once installed you can change the CSS to suit your needs or make style changes in your MXML to alter the installed CSS theme for certain components.

If things don’t seem to be working you can always refer to the source of the CSS themes on the ScaleNine homepage.

Installing a Graphical Theme

Installing one of the ScaleNine graphical themes is pretty much the same as the instructions above. The only difference is that your dealing with another asset, a SWF.

When you unzip the provided source files you should see a SWF, CSS file, and a background image inside a style folder. Drop that folder into the top level of your Flex Project. Then, in your Application’s MXML create an mx:Style tag and specify the path of where you dropped the CSS and supporting files. Like this:

<mx:Style source=”/yourFilePath/CSSFile.css”/>

If your in Flex Builder you can hit the “Refresh View” button in the Design View and if the theme was set up correctly you should see the appearance of your app change to reflect the specified CSS. You may also see what look to be purple boxes (embedded SWF symbols) if you’re in the Design View.

If you put the provided CSS file in one place and the SWF in another, that’s where things change a little. In the CSS file there is a path defined for the SWF file. So, if you move the SWF file just do a “Find and Replace” in the CSS and switch the old path to the new location of the SWF file.

As a side note, if you’re using the ThemeSwapper source or doing any Runtime CSS stuff, make sure you right click on any CSS files and select “Compile CSS to SWF”. Otherwise you’ll get an error stating that a specified SWF can’t be found.

Hope this information helps. For more information using external style sheets check out these links:

Applying CSS Styles to components , Using external Style Sheets , Graphical Skinning

1. Style it with CSS

This is one of the quickest and easiest ways to start making your Flex 2 Application look a bit more “custom”. CSS styling can be applied using an external style sheet or directly inline of your MXML. A great tool for creating and understanding CSS styling is Peter Baird’s Flex 2 Style Explorer. This tool also gives you the ability to export your CSS to use in your Flex app. Whether inline or as an external stylesheet.

Examples: Moxy Theme , Mac OS X Theme by Adobe Consulting

2. Go Graphical

Another method is Graphical Skinning, which can be a bit more time consuming, but allows for more control over the look of the UI. Most “unique” looking Flex applications use this method in combination with CSS styling to get a more custom look.Graphics can be created a few different ways using Photoshop, Fireworks, or Flash. Scale-9 or 9-slice tactics can be used to allow your graphics to scale uniformly with the component it’s applied to. Also, like styling, this method can be used inline or with definitions in an external CSS file.

Check out Narcisso Jaramillo’s great tutorial on how to do all this. If you’re using Photoshop there’s this video tutorial from Jesse Warden about getting a Photoshop design into Flex 2.

Examples: Messenger Theme , Picnik , Flip Flip Books

Resources: Flash 9 Button in Flex 2, Integrating a Flash interface into Flex 2

3. Make it Programmatic

If you want the most control over the way you Flex 2 application looks, then programmatic skinning is the way to go. It is a more advanced method of skinning and requires programming knowledge. Eylon Stroh of Adobe put together a really great step-by-step walkthrough, including implementation of programmatic skinning.

Examples: Napkin Skin by Eylon Stroh

Other Styling and Skinning Resources: Programmatic Skinning with Flex 2 , Interface Customization in Flex , ScaleNine Resources

4. Customize the App Preloader

One of the ways you can usually tell an application was built using Flex is it loads in with the default preloader. I’ve run across several people in various forums asking about how to skin the preloader. The Adobe Live Docs provide a method and explanation on how to do this. Ted Patrick also provides some insight on how to do this.

Examples: Picnik , Flip Flip Books , Flipper FlexApps Viewer

5. Establish a Color Scheme

Another way to get a great looking Flex app is to establish a appealing and consistent color scheme. It seems like something small, but it can make a big difference when executed correctly. I know not everyone is a designer and picking colors can be scary, but it’s worth it. There’s a lot of great online tools to help with this. Of course, there’s Adobe’s Kuler, which is easy to browse and find a color scheme you like. Write or copy the values and use them to give you Flex app a new color scheme. There’s also Daily Color Scheme, this Color Scheme Tool, and I’m sure many others.

Keep in mind that color does play a big role in your application and depending on it’s functionality or purpose you may want to go with more neutral colors like greys, subtle color shandes or white.

6. Fonts

The way text looks in your app can set it appart from others. In Flex you can embed other fonts (inline or via external CSS file) to use for any purpose, whether for your application as a whole or in select locations to bring attention. At the moment Flex 2 only supports the embedding of TrueType fonts.

Choosing a font, like choosing a color sheme, can be tricky. Again, it depends on what you wnat to accomplish with it and insuring legibility and usability when implemented. Keep in mind that fonts range in price from free to fairly expensive.

Here’s a few resources for finding fonts: Font Freak, Fonts For Flash, Orgdot, Free-Fonts, Dafont, Veer, Adobe Type

7. Icons

Usuability and an intuitive user interface can make or break an application. The use of visual cues can ease a users perception of an application and increase the pace at which they learn the app. Icons are an easy way to give users “directions” in what they need to do and can compliment or reenforce the text the icon may be next to. Like the saying goes, “A picture is worth a thousand words.” In some cases an icon can say more than text.

Here’s a few resources for icons: Fam Fam Fam, Stock Icons, Glyph Lab, Icon Buffet, Fast Icon, Icon Shock, Icon Base, Icon Fish

8. Add Some Effects

Selectively adding static and animated effects like drop shadows, glows, etc. can help add a polished look to your Flex 2 app. You can use Flex’s effects, create composite effects, or take advantage of importing Flash Filters for images and text. To get a better idea of what’s possible by using effects check out the Flex Component Explorer.

In addition, David Keutgens put together a Flex Effects Explorer, which makes it easy to see what these effects can do to various components in your app. And a more in depth display of Distortion Effects was created by Alex Uhlmann.

Other Effects Resources: Animated Color Transitions by Darron Schall

Examples: Flipper FlexApps Viewer, JamJar

9. State Transitions

Smooth out your app’s state changes by creating transitions. With a little code components can grow, reveal, collapse, flip, etc. for any number of purposes. Defining multiple transitions can create an even more fluid user experience.

Other Effects Resources: Animated Color Transitions by Darron Schall

Examples: FlexStore

10. Get Feedback

Successful applications are rarely built without the influence of other people and I know not everyone has access to advanced user group testing and polling. However, during the process of creating a UI it’s always a good idea to get feedback from people who are familiar with what you’re doing and, maybe more importantly, by those who are not. There’s a lot to learn from a fresh and unfamiliar perspective. In most cases, these perspectives can help shape a final product.