Designing Flex 2 skins with Flash, Photoshop, Fireworks, or Illustrator

Testing your skins and styles

At this point, you can hand off your exported skin assets and CSS file to your Flex developer. If you have Adobe Flex Builder 2.0.1, however, you can test them yourself using the sample Flex application we've provided. (If you have Flex Builder 2 installed, download the free upgrade to 2.0.1; it fixes some issues with the way the design view renders skins.)

Note: These instructions assume you've installed the stand-alone version of Flex Builder, not the Eclipse plug-in version.

Here's how to do it:

1. Launch Flex Builder 2.0.1.
2. Choose File > New > Flex Project.
3. Ensure that Basic is selected and click Next.
4. Enter a name for the project.
5. In the Project Contents section, uncheck Use Default Location.
6. Click Browse and navigate to the folder into which you extracted the skin files (the folder should contain the FlexSkinTest.mxml file).
7. Click Next.
8. Click the Browse button next to Main application file, select FlexSkinTest.mxml, and click OK.
9. Click Finish.
10. Choose Run > Run FlexSkinTest, or click the green play button on the main toolbar.

A browser window should appear containing a sample Flex application that shows all of the components you skinned. Interact with the components and make sure they look correct in all their states. For components that we've shown at different sizes, make sure all sizes look correct; if not, you'll need to adjust the scale-9 grid for that component's skins.

Not all scalable components are shown in different sizes in the sample file. If one of the components you want to test isn't represented in multiple sizes, you can use Flex Builder's design view to resize the component or change its font:

1. In the Navigator view on the left, double-click FlexSkinTest.mxml.
2. Click the Design button on the toolbar at the top of the document.
3. Find the component you want to edit and click it to select it.
4. Resize the component with the resize handles.
5. If you want to test a different font, use the Properties view on the lower right to edit the text properties.
6. Run the application again.

Note that not all skins are correctly rendered in Flex Builder's design view. For example, bitmap skins with scale-9 grids look stretched out and skins for certain components, such as Panel, don't render at all. So if it doesn't look right in the design view, don't panic—just run the application and make sure it looks right in the browser.

Note: A few skins may not correctly render in Flex Builder's design view. If something doesn't look right in the Flex Builder Design view, don't panic—just run the application and make sure it looks right in the browser.

Where to go from here

If you've gotten this far, congratulations—you have a working Flex 2 skin! Package the entire folder and ship it off to the Flex developer. He can include the skin by simply copying your CSS and asset files into his top-level project folder and then adding one line to his Flex application:

<mx:Style source="flex_skins.css"/>

The application will be magically reskinned with your beautiful new design.

Attributions

Thanks to Kim Pimmel and Ryan Hicks for the many long hours they spent creating the skin template files used in this article, Ryan Tandy for creating the initial versions of the files, and Rob Adams and Glenn Ruehle for their helpful comments.

Page 10 of 10

Previous Page