jump to navigation

Setting up Flash CS3 to integrate with Flex3 July 25, 2010

Posted by Tournas Dimitrios in Flash, Flex.

Under the hood , Flash and Flex are closely related. Both work with AC3 , both output to a SWF format and both use FP-9 to display their content. But they are very different in what they are good at. Flash is intending for creating animations , Flex in contrast is really good at developing applications and things that are associated with it ( Charting , handling data and such) . Flex sure can do animations , but the kinds of animation that it is focused are things as transitions that take place as menus expand, or items such as images scaling to different sizes in different states . There are three major ways to integrate Flash and Flex.

  • Use Flash to create skins and component animations
  • Bringing in Flex complex timeline animations created with Flash
  • Bringing in Flex Flash MovieClips that can be controlled in Flex

This article explains how to install two extensions that help integrate Flash and Flex .

Two extensions need to be installed on Flash CS3 :

  1. The Flex Component Kit for Flash CS3
  2. The Flex Skin Design Extensions for CS3

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 need is Flash CS3, Flex Builder 3 (or Flex 3.*.* SDK) and Adobe Extension Manager 1.8

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

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 MXP downloaded, you can 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 Jully 2010), the latest version of the Flex Component Kit is 1.1.2 .

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.

Installing the Flex Skin Design Extensions

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

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.

Read furder :

For Flex4 and CS4 : Importing Flash CS Professional assets into Flex  here >>>


1. Creating Flash Content for use in Flex « Tournas Dimitrios - July 29, 2010

[…] thing that must be done is installing the Flex component Kit for Flash CS3  (see this article ) […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s