First of all, what *is* the Flex Component Kit, you may be asking yourself. If you havent tried the kit before, the Flex Component Kit (or the semi-awkwardly initialled ‘FCK’) was first released on Adobe Labs for Flex Builder 2.0.1 (see “Flex Component Kit for Flash CS3“) in April of 2007. It allowed developers to “create interactive, animated content in Flash, and use it in Flex as a Flex component” (to quote the previously mentioned Adobe Labs page). To use the kit, all you needed was Flash CS3, Flex Builder 2.0.1 (or Flex 2.0.1 SDK), the Adobe Extension Manager 1.8 (which I believe should get installed when you installed Flash CS3) and a Flex 2.0.1 patch for CS3 Compatibility.
Well, with Flex Builder 3 (or Flex 3 SDK), the set up is a bit simpler as the Flash extension files (the MXP) are shipped with the Flex SDK, and you no longer need the patch for CS3 compatibility. Simply download the latest Flex 3 SDK, extract, and double-click the MXP file to install the Flash extension.
Full details after the jump.
System Requirements for the Flex Component Kit
To use the Flex Component Kit for Flash CS3, you’ll need to have the following software installed:
- Flex 3 (download free SDK) or Flex Builder 3 (download beta free trial)
- Flash CS3 Professional (download free trial)
- Adobe Extension Manager CS3 (Version 1.8) — this should have been installed with Flash CS3. If not, you can download the Adobe Extension manager from www.adobe.com/go/em_download.
Downloading the latest Flex 3 SDK
Point your browser of choice over to:
The Flex Component Kit was removed from the final version of the Flex 3 SDK. To download the Flex Skin Design Extensions and Flex Component Kit for Flash CS3, go to http://www.adobe.com/go/flex3_cs3_swfkit.
Installing the Flex Component Kit for Flash CS3
Once you have the SDK files downloaded, you can locate the MXP file and double-click it to install the Flash extension. If you have a previous version of the Flex Component Kit already installed, I’d recommend uninstalling it before proceeding. Currently (as of September 2, 2007), the latest version of the Flex Component Kit is 1.1.1.
To uninstall the Flex Component Kit, open the Adobe Extension Manager by selecting “Start > All Programs > Adobe > Adobe Extension Manager CS3″ (in Windows XP). Conversely, you can also launch the “Extension Manager.exe” file from “C:\Program Files\Adobe\Adobe Extension Manager”. To delete your existing copy of the Flex Component Kit, highlight the extension with your mouse and click the “Remove Extension” button (trash can icon), or select “File > Remove Extension” from the main menu. With the old extension removed, next we’ll look at installing the Component Kit MXP from the ZIP archive in the previous section.
To install the Flex Component Kit, locate the MXP file in the ZIP archive you downloaded and extracted in the previous section, “Downloading the latest Flex 3 SDK”. The MXP file, FlexComponentKit.mxp, is located in the “[flex_sdk_3.zip]\frameworks\flash-integration\” folder. To install the file, simply double click the MXP file to launch the Adobe Extension Manager and then read and accept the disclaimer. Once you are finished you can close the Adobe Extension Manager. There is also a readme.txt file in the same directory as the MXP file, and the readme contains a few useful links, system requirements, and installation instructions.
If you want to view the source of the Flex Component Kit (*.JSFL, *.FLA, *.AS), you can find the full source in the following directory: “[flex_sdk_3.zip]\frameworks\projects\flash-integration\” (note the addition of the “projects” folder in the path. This folder also includes a readme.txt file which contains a URL to some documentation and a reference to find the MXP file which we covered above.
Updating existing files to use the latest Flex Component Kit code
If you’ve already published files with an older version of the Flex Component Kit (1.1.0, for example), you can follow these quick and easy steps to update the code without having to rebuild the assets from scratch:
- Open the FLA.
- Delete the FlexComponentBase symbol from the Library.
- Drag the FlexComponentBase symbol from the Components panel to the Library.
- Publish the FLA.
Where to go from here
This was just a quick introduction/walkthrough of installing the Flex Component Kit. In future posts I’ll show how create assets using Flash CS3 and then import them into a Flex Builder project.