Search Flex Components Free

Custom Search

December 9, 2007

Installing the Flex Skin Design Extensions for CS3 from Adobe Labs

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 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.

Related Flex Tutorials