To quote the Flex Skin Design Extensions page on the [...]]]> The Flex Skin Design Extensions are a set of extensions for various Adobe Creative Suite 3 applications (notably Flash, Photoshop, Illustrator, and Fireworks) that allow you to easily create skins for various Flex components and other assets (such as cursor manager, drag manager, etc.)

To quote the Flex Skin Design Extensions page on the Adobe Labs site:

Flex 3 helps designers and developers to more easily work together by enabling you to import skins that were created in the Adobe Creative Suite 3 products, including Photoshop, Illustrator, Flash, and Fireworks. New extensions are available below for each of these CS3 products that will allow you to create and export Flex component skins that can then be consumed using the Flex Builder Skin Import Wizard.

Basically, the workflow is install the extension for the various products (each extension’s install instructions are different, so make sure you read the read me files), create a skin in CS3 program, and then import the skin into Flex Builder using the super-handy Import Skin Artwork wizard? Sound easy? You betcha!

Since I have Flash CS3 Professional installed and handy at home, we’ll take a look at the workflow.

First, head over to the Flex Skin Design Extensions page on the Adobe Labs site and download the MXP file for the “Flex Skin Design Extension for Flash”. Before you can install the extension, you should have Flash CS3 and the Adobe Extension Manager CS3 already installed. Don’t have a copy of Adobe Flash CS3 (*gasp*)? Well, head over to http://www.adobe.com/go/tryflash and download a 30 day trial version (downloading requires an Adobe account — check out the Flash CS3 system requirements). If you don’t already have the Extension Manager installed, you can download the Adobe Extension Manager CS3 (version 1.8). Extension Manager 1.8 includes support for the Dreamweaver CS3, Fireworks CS3, and Flash CS3 releases.

To install the MXP, simply double-click to launch the Adobe Extension Manager. The Extension Manager will bring up an end user license agreement for the Flex Skinning Templates extension which you must read and accept before proceeding. After clicking the Accept button, the extension is installed, and you can close the Extension Manager application.

Again, to quote the Flex Skin Design Extension for Flash section of the Flex Skin Design Extensions page on the Adobe Labs site:

These templates, in conjunction with the Flash Component Kit, enable you to create and export a skin in Flash CS3 and then import it into Flex Builder using the Skin Import Wizard. To install the Flash Component Kit, follow the readme instructions found in the /frameworks/flash-integration/ folder in the Flex 3 SDK.

For more information on installing the Component Kit, see Installing the Flex Component Kit for Flash CS3.

Next, launch Flash CS3 Professional and select either “Flex Skins” under the “Create from Template” section on the Flash Welcome Screen, or select File > New from the main menu and then select Templates > Flex Skins from the New from Template dialog box. Now the fun part. Simply select a template, and start customizing. Just for giggles, I’m going to select the Tree template and click OK.

You’re presented with a very clean template showing the Tree control’s border skin, default leaf icon, disclosure closed icon, disclosure open icon, folder closed icon, and folder open icon. You can customize these assets however you see fit, such as changing colors, or replacing the assets completely with your own graphics.

For more information on the default values for the Flex Tree control, see Displaying the default icons from a Flex Tree control.

Once you are finished, simply save and publish the Flash document to generate the SWF and SWC files. (If you want, you can now close Flash CS3.) Launch Flex Builder 3 and create a new Flex project (or you can open an existing document, your call). Next, in my Flex document I entered the following code:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/06/installing-the-flex-skin-design-extensions-for-cs3-from-adobe-labs/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="xmlDP">
        <node>
            <node label="1.a" />
            <node label="1.b" />
            <node label="1.c">
                <node label="1.c.i" />
                <node label="1.c.ii" />
                <node label="1.c.iii" />
                <node label="1.c.iv" />
                <node label="1.c.v" />
            </node>
            <node label="1.d" />
            <node label="1.e">
                <node label="1.e.i" />
                <node label="1.e.ii" />
                <node label="1.e.iii">
                    <node label="1.e.iii.A" />
                </node>
                <node label="1.e.iv" />
            </node>
            <node label="1.f" />
        </node>
    </mx:XML>

    <mx:Tree id="tree"
            dataProvider="{xmlDP}"
            labelField="@label"
            showRoot="false"
            width="50%"
            rowCount="6" />

</mx:Application>

View source is enabled in the following example.

After entering the previous code, save and run the Flex project. You should see a Tree control with the default skins applied. Now for the fun part, select File > Import > Skin Artwork from the main menu in Flex Builder 3. In the Import Skin Artwork dialog box, select the “SWC or SWF File” radio button and hit browse. Locate the SWC file created earlier where you saved and published your Flash document. Hit the Next button to select the skins to import into your Flex project. Items with a check will be imported into the Flex project and the associated CSS document. Leave the default values selected (“Tree_borderSkin”, “Tree_defaultLeafIcon”, “Tree_disclosureClosedIcon”, “Tree_disclosureOpenIcon”, “Tree_folderClosedIcon”, and “Tree_folderOpenIcon”) and hit Finish. You’ll notice that Flex Builder 3 added a CSS and SWC document to your Flex project’s /src/ folder. Also, if you open up the Flex project’s main MXML document, you can see that it also added an <mx:Style /> tag which includes the new CSS document. Save and run the Flex project again and you should see that the Tree control now has your customized skins applied.

View source is enabled in the following example.

Congratulations, you’ve just created and imported your own custom Flex skins from Flash CS3!