“Well,” you may be saying, “Thermo looks great and all, but what do I do in the meantime?” The good news is that we have some nice improvements coming in Flex Builder 3 that help automate the visual design workflow, and you can try them out in the Flex Builder 3 beta that we posted to Adobe Labs last week.
In Flex 2, if you wanted to style components using CSS, you could use the Flex Style Explorer to experiment with the styles, then cut and paste the CSS into a Flex app. If you wanted to skin components with custom graphics, you could use my Developer Center article on creating skins using the Creative Suite tools, but you would likely still need to edit some of the CSS by hand.
The new design features in Flex Builder 3 help automate both of these workflows. Here’s a quick summary:
Flex Skin Design Extensions for CS3. These actually aren’t a feature of Flex Builder 3 itself, but rather a set of extensions for Photoshop, Illustrator, Fireworks, and Flash that make it easy to create skins for Flex components. Essentially, we’ve taken the templates from my Developer Center article and integrated them into the CS products through a “New Flex Skin” menu command in each tool, adding the ability to create individual component skins as well as a whole template, and to create multiple variations on a single component. We’ve also created a one-step “Export Flex Skin” command for PS/AI/FW that automates the manual export steps from the article.
You can download beta versions of the skin design extensions from Adobe Labs. Thanks to Juan Sanchez of ScaleNine for building out the new templates for us!
Flex Component Kit for Flash. For Flash, we’ve gone one step further, and redone the skin template entirely to use multi-state symbols using the Flex Component Kit for Flash. If you’re not familiar with the Kit, it allows you to build components and skins in Flash that can be used in Flex applications–participating in layout, sending and receiving events, building states and transitions on the timeline, and more. In the case of skins, this means you can build animations between the different states of a component–for example, between the up and over states of a button–using the Flash timeline.
Import Skin Artwork. In my dev center article for Flex 2, we provided a pre-built CSS file that worked in conjunction with the skin templates to glue the template artwork into your Flex application. If you wanted to create multiple variations of a component, you had to do this by hand, and if you wanted to only skin certain components, you’d need to edit the CSS file manually.
In Flex Builder 3, we’ve automated this process with File > Import Skin Artwork. Now you can just point at a folder of bitmaps or a SWC exported by the CS3 skin design extensions, and Import Skin Artwork will automatically write all the CSS code to glue those skins into your app. You can even create multiple styles for a given component using the CS3 “New Flex Skin” commands, then import them as separate CSS class styles. And if you have fully custom components that expose their own skin properties, you can build skin templates for those components that can be imported using Import Skin Artwork by following a simple naming convention.
CSS Design View. This is really the heart of the new design features in Flex Builder 3, and it works with both the skinning and styling workflows:
- If you’re following the skinning workflow from the previous features, then the CSS Design View will let you visually customize things like font styles and scale-9 grids for the imported skins. Previously, you had to do this by hand in the CSS.
- If you’re doing pure styling, you can use the CSS Design View like a beefed up version of the Flex Style Explorer, to create global, component, or class styles, preview them directly in Flex Builder, and write the code directly into your Flex application.
Accessing the CSS Design View is simple–just open any CSS file, then click the “Design” button to switch to Design View.
If you want to see some demos of these features, here are some resources:
- We showed off a number of these features at Flex Camp in SF a couple of months ago; you can watch the videos of CS integration and skinning workflow (boy, I hate the sound of my voice in this video!) and CSS Design View and other FB3 features. (Update: forgot to put in a link to the second part of this originally.)
- The Flex Builder team put up writeups and video of Import Skin Artwork and the CSS Design View (but not the CS3 extensions or the Flex Component Kit for Flash).
- Peter Flynn also gave an excellent talk on this topic at MAX, but there’s no video of that up yet–I’ll post a link when it becomes available.
Download the Flex Builder 3 beta, give the new features a try, and let us know what you think!
digg this | del.icio.us | 14 Comments