Fill Colors: Flex CSS styles and skins

Setting up Adobe Flex project for Fill Colors 

1. Download the FillColors shell application and unzip the file into a directory.  

2. Open Adobe Flex Builder 2. Choose File > New > Flex Project.  The New Flex Project screen appears.  Leave default setting and click Next:

3. Enter ‘FillColors’ as the Project name and click Next:

 

4. Leave the default settings, but make sure you set your Main application file as FillColors.mxml and click Finish:

 

5. The FillColors project will be created and be displayed in the Navigator window and the default FillColors.mxml file will be open in the right window:

 

6. In the Navigator window, right-click on the FillColors root directory and select Import: 

7. The Import window appears.  Choose General > File System and click Next:  

8. Browse to select the directory of the unzipped FillColors shell application you downloaded: 

9. Select the directory in the left window for import and click Finish: 

10. You will be prompted to overwrite the existing FillColors.mxml file.  Click Yes: 

11. When import is finished, you will see new files and folders in the Navigator window and the imported FillColors.mxml file open in the right window: 

12. In the Navigator window, right-click on the FillColors root directory and select Properties: 

13. The Properties window appears.  Choose Flex Build Path > Library path: 

14. Click Add SWC… to open the browse window.  Browse to the root directory of the FillColors directory, select the Mate3.swc file and click Open: 

15. After selecting the Mate3.swc file, click OK: 

16. The Mate3.swc file will appear in the Build path libraries window.  Click OK to exit the Properties window:  

If you wish to also be able to compile the two sample skins included in the zip (Aqua and Rainbow), you will need to follow the same steps (13-16) to add another swc library to your library path: CSSPlus.swc 

17. The project should now be ready to compile and run with no errors.  After compiling and running, the FillColors shell application should appear in your internet browser. Now the real fun begins!  You can start to modify the look and feel of the application!

Modifying the Fill Colors application

1. In the Navigator window, under the FillColors directory, navigate to the Styles directory.  It contains a directory for each skin and includes a template directory that contains a sample Template.css file:  

2. To get started, create a new folder for your new skin under the Styles directory: 

3. Name your new folder and click Finish:

4. Copy the Template.css file to your new folder and open it.  You can modify any of the properties in the css file: 

4. After modifying your css file, save it and then open to FillColors.mxml file.  There is a section with commented instructions to change the style reference to point to your css file: 

5. Uncomment the indicated style line, change the path to point to your css file and save the FillColors.mxml file: 

6. In the Navigator window, right-click your css file and select Compile CSS to SWF: 

7. Under the bin/assets/styles directory, you will find a directory for your new skin which contains the SWF file: 

8. Go here to test your new skin against the real app: 

9. Select Choose File to browse and select your SWF file.  The SWF file will be loaded and you will see your new skin applied: