ScaleNine

Right on the heels of my previous post is information from Ryan Stewart regarding the Designer/Developer Workflow. He was able to attend the Adobe Engage event and describes some of the ways Adobe is addressing the Designer/Developer Workflow.

Some of the highlights include getting Illustrator and Flex to “talk to each other” as well as the ability to bring animations/transitions from Flash and use them right within Flex. This is all great news and I can’t wait to take advantage of these new features.

Check out Ryan Stewart’s full article for more details.

I’ll be posting more information as it becomes available.

A recent blog post I came across brought up some questions regarding the UI design workflow and bringing those designs into Flex 2. I replied to the post outlining my experiences and I thought it might be worth sharing that information here.

Initially, when I first got started with Flex 2 I spent time just getting to understand the default components and what attributes could be skinned. The Component Explorer helped a lot, as did the Style Explorer to begin understanding what could be done with just CSS.

With that knowledge I just jumped in and started experimenting and learning how to write MXML to get the layout I wanted. I made up some projects to give myself a direction/goal. I used XML files to populate all my data driven components. Sure, nothing really ended up being completely functional, but it looked nice and this knowledge would prove to be quite helpful.

Now, the first thing I do is create a design and get approvals. I create the initial vector art in Adobe Illustrator. Yes, Adobe Illustrator. Why not Photoshop or Flash you might be asking. Well, basically it’s just in case I ever need the icons, buttons, etc. for printed pieces. I’ve run into numerous occasions where a client has needed some graphic I created for the web to be scaled up to 5 times it’s original size and placed in some corporate documentation or instruction manual.

From Illustrator I’ll either go into Photoshop or right into Flash. I use Flash to hold all my graphical assets for buttons, backgrounds, drop downs, etc. in one SWF. It’s really easy to define the 9-slice or scale9 characteristics for scaling purposes. Also, it’s nice just to have everything in one place to insure design consistency. If file size becomes an issue, I’ll split things up.

After I have enough graphics to get going, I fire up Flex Builder. By this time I have a layout going. I create a new CSS file if I don’t have one already and start defining CSS styling globally (including embedded fonts, and embedded images/swfs) for components and CSS styling for other design variations (ie. .blueButtoon, .orangeButton). If there are single instances of a component that need certain styling I’ll do it in the MXML.

As I mentioned above, I use XML files to get data populating my components. If I need any Item Renderers or Item Editors I’ll create those and skin them. Basically create a visual prototype since sometimes it’s easier to show someone than explain it and Flex makes it easy to do that.

This is great for the programmers ’cause when they come in they’ve got the initial structure. They ditch my XML files and hook the components up to a database. They also implement everything else that I’m not able to do, like build custom Action Script components. Then it’s just me going back and forth with the programmers to get everything looking the way it should.

This is the way I have been working, but by no means am I saying it’s best practices. The worflow has worked great so far, but if anyone has any suggestions on how to improve it I, and I’m sure others, would love to hear about it.

This process will get easier and more simple as new releases and versions of Adobe software become available. So until then, if you can get designers to learn MXML and a little XML it can definitely speed up the work flow. There’s a bit of a learning curve to be sure, but it can be worth it.

If you visited ScaleNine in the last 14 hours you may have noticed it was down. Things were going on with my hosting service, as some of you might have read elsewhere. Also, my stuff was on the last bank of servers to go back online.

Things seem to be back to normal. I’m just keeping my fingers crossed.

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

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

On February 28th the Boston Flash Platform User Group (BFPUG) will be having Joey Lott as a guest speaker presenting methods of “Customizing the Flex Application Appearance.”

From the site:

It will be a discussion of how to use CSS, skins, themes, and much more to create a completely customized appearance for Flex applications. This will be a complete overview of the subject, including basic CSS, runtime CSS, graphical skinning, programmatic skinning, customizing the preloader, etc.

This sounds like a great opportunity to learn more about beautifying Flex applications. Unfortunately (well, in this instance), I live in California and can’t really make it. However, if you can make it, it definitely sounds like something worth checking out. Be sure to send me a video or transcript of the day’s proceedings

Get more info here.

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.

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.

Say that 5 times fast. If you get a chance, check out this FlexApps Flickr collection viewer by Kellen Styler of Cynergy Systems. Talk about a nice Flex app to look at other nice Flex apps. It’s a nice way to view Ted Patrick’s FlexApps image collection and I’m sure as more images get added there will be less panning.

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!