Flex 3 product configurator

This application, built by Teknision, allows you customize a bowling shirt, demonstrating how to use Flex to build a product configurator. The user starts by choosing a shirt type, then chooses base and trim colors. They can then put a logo on the shirt along with a player name. As the user selects features, the shirt is updated in realtime to show how it will appear in its final version. When the user's selections are complete they can see a consolidated list of all their selections.

• Experience the application

To download and view the full source, right-click the Flex application and select View Source from the context menu.

File and folder descriptions

The application has two main pieces: Flash/ShirtConfigurator.swc and Flex/Configurator.zip/src/Configurator.mxml.

ShirtConfigurator.swc

ShirtConfigurator.fla uses the Flex Component Kit for Flash CS3. This is a simple Flash file, which holds movie clips of different shirt types. Each of these movie clips are linked to a class located in com/adobesamples/controls/. They all extend UIMovieClip which is a compiled clip located in the library. This allows these movie clips to be pulled into and used in Flex. Once the ShirtConfigurator.swc is exported it should then be copied over to the Flex project's /libs/ folder.

Configurator.mxml

The Object that populates the Configurator is located in the com/adobesamples/vo/ConfigurationItem.as file. Each of the variables within this object are populated with default values. The com/adobesamples/vo/ConfigurationData.as file includes arrays which hold information on the shirt designs and logos. The com/adobesamples/controls/DesignItemFactory.as file takes in the shirtFront name and returns a DesignItem. This DesignItem includes the front of the shirt (from the Flash file), and the back (if indicated to do so).

Setting up the project in Flex Builder 3

1. Import the Configurator project into your Flex Builder workspace by selecting File > Import > Flex Project from the main menu.
2. Make sure the "Archive file" radio button is selected and press the Browse button to launch the Open dialog box.
3. In the Open dialog box, navigate to the Flex/Configurator.zip file and click the Open button to select the file and dismiss the dialog box.
4. Click the Finish button to finish importing the project into your current workspace.
5. Run Project.

Flex framework features

This example shows off how you can integrate Flash content into a Flex application easily by using the Flex Component Kit for Flash CS3 (see description of ShirtConfigurator.swc above). The various screens such as Help and the final screen showing the configuration details are exposed via States and use Transitions to provide a better loading experience. The application achieves its look using a number of styles specified in CSS as well as images used as skins.

Note: You may use the sample code in your products, commercial or not.