Installing the Flex Component Kit for Flash CS3

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:

Downloading the latest Flex 3 SDK
Point your browser of choice over to: http://labs.adobe.com/technologies/flex/sdk/flex3sdk.html and click the check box stating you have read whatever needs to be read. This enables the display of nightly SDK builds so that now if you scroll down to the “Recent Nightly Builds of the Flex 3 SDK” section, you should see a list of available builds. Click the “Download” link next to the latest build and save the ZIP file somewhere easily accessible (such as your user directory or your desktop). Once the download completes, locate the file and extract the files from the ZIP archive. At this point, you can (and probably should) install the latest SDK build by following these instructions “Installing the latest nightly Flex 3 SDK build into Flex Builder 3“.

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.

18 thoughts on “Installing the Flex Component Kit for Flash CS3

  1. Hi Peter,

    by the way I noticed that if you published an SWC and added this allready to yur Flex3 Project (through the Buil-Path Setting) and by updateing or rebuilding this SWC from Flash CS3, Flex automatically detects this changed SWC version and updates itself in the background quickly….that’s awesome.

    Best
    Ali (Germanys weather sucks)

  2. Oh yes, at the moment i using the cs3 plugin for the new css styles with flex. very nice postings.flex will be the rule for flashing next generations.

    best regards

  3. Peter – Great explanation and blog. Regarding the future posts where you will show how create assets using Flash CS3 and then import them into a Flex Builder project, have they happened? if so can you point me to it – can’t seem to find them – would love to see an example.
    Thanks
    Jim

  4. I’ve tried several examples of using the flex component kit for Flash AS3 and none of them are working for me. Whenever I run the “Convert Symbol to Flex Component Command,” I get the following output:

    Command made the following changes to the FLA:
    Turned on Permit Debugging
    Turned on Export SWC
    Set frame rate to 24
    Imported FlexComponentBase component to library
    Symbol “BallComponent” can be used as a Flex component.
    Select File > Publish to create the SWC file for use in Flex.

    This appears to be correct but after adding the SWC to the flex library, my flex application does not seem to “see” the new component. I’ve managed to pull in components that others have made with Flash AS3 and the component kit so I don’t think I’m doing anything wrong on the flex side.

    I noticed that in Flash, FlexComponentBase does not show up in my library after converting my symbol to a flex component. Additionally, nothing happens when I drag FlexComponentBase into my library. It just doesn’t show up. When I go to the properties dialog for my exported component and try to validate mx.flash.UIMovieClip, I get the following message:

    A definition for the base class could not be found in the classpath. Please enter the name of a class that is defined in the classpath, or enter the default base class ‘flash.display.MovieClip’.

    I suspected there was something wrong with my installation of Flash CS3 or the Component Kit so I just uninstalled and reinstalled Flash CS3, Flex Builder, and the component kit with the same results.

    I’ve now seen the same behavior with Flash CS3 9.0.2, Flex Builder 3 (tried both beta 2 and beta 3), and component kit 1.1.2.

    Has anyone seen this behavior before?

    Thanks in advance,
    Jake

    1. Hi, Jack
      I have some problems just the same with you. But I have some different. I import the swc then I close flex builder and I can see them in custom list . But I just create a component , the components which exported from Flash CS3 disappear in custom list . I had to close the flex Build and open it again . After this I can see them in custom list …… Once I create a component , I had to repeat this …… Oh , my god ……. So ,What’s wrong …… And one thing confuse me is I have one fla file , I export swc and put it in flex builder , I can see them in custom , and nothing wrong …….

  5. Hi,

    I’ve downloaded the Flex 3 SDK (flex_sdk_3.0.0.866), however I don’t seem to have a folder ‘flash-integration’ under frameworks. Am I missing something? Do I need to build something?

    Wiebe

  6. mike,

    I have to say that the FCK acronym has led to some very amusing and memorable email subject lines over the past year. :)

    Peter

  7. you should totally post those! great site by the way. i was trying to find really good examples of custom flex components built using the FCK, but to no avail. do you happen to know where i could find resources such as these?

  8. Jake,

    I’m experiencing the exact same behavior as you. I can’t figure out what’s wrong for the life of me. I’ve reinstalled Flex Builder 3, Flash CS3, and the Flash Component Kit, both on mac and PC. I’ve followed every tutorial I could find to the letter. And still, Flex doesn’t seem to “see” the components in the SWC I added. Code hinting don’t show the compoenents, and if I try to instantiate them anyway I just a compilation error.

    The really frustrating thing is that maybe 1 time out of 20 or so, it actually does work. Then, when I go back into Flash to make some edits to my component and republish the SWC, Flex goes back to its normal behavior of not recognizing it.

    This is seriously the only issue preventing us from launching our Flex based website and its making me bang my head against the wall.

    Anyone have any suggestions?

  9. I have the same problem as Jake and Chris where the flex components wont show up under Custom Components. I have found that by rebuilding the workspace, custom components will show up. However they will disappear when you publish the SWC from Flash again. So you need to rebuild the workspace again (which is annoying) once you have updated your component in Flash.

    I have found that if you have one good SWC build in your library it will make all other custom components appear. So as a workaround I always start a new project by placing a good SWC in the projects “libs” folder. Oddly enough I have only been able to build one good SWC from 3 full days straight of building and testing, uninstalling, re-installing, using multiple workstations. After all that testing I gave up and just use the good SWC build workaround.

    I also noticed that all tutorials out there in books and the internet never mention that you can access the custom components from the Component Library in Flex. They always declare custom components programmatically through custom name-spaces. That makes me wonder if this is a widespread problem…

  10. I have the same problem as Angelm. I am becoming crazy about these all. I have followed all the instructions, followed advices of Angel(thank you for advices) about workspaces and good SWC. And everytime I put SWC file to lib folder, but no result. Adobe please direct us what we are doin wrong or is it Flex bug!

  11. I did every step as adobe flex-component-kit examples instructed,but no one worked. There is something maybe helpful to get the reason. First I download a examples which have all resource code. Use my flex-buider3 rebuild the example, it work good in my ie. second, I open the example’s fla file. redo convert component for flex.Use new published swc,replace old one. rebuild example in flex , new component display in ie , but don’t move. I think this flash cs3 software’s faults

Comments are closed.