25 February 2008
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.
To download and view the full source, right-click the Flex application and select View Source from the context menu.
The application has two main pieces: Flash/ShirtConfigurator.swc and Flex/Configurator.zip/src/Configurator.mxml.
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.
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).
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.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
Note: You may use the sample code in your products, commercial or not.