CSS support in Flex is something that lets you tidy up your vanilla UI in a very easy manner…. In Flex2, you could do this with the Flex Style Explorer. When Flex3 happened, we decided to add this into FlexBuilder using the new CSS Design View feature. This lets you do a whole lot of stuff, but what if you want a button that looks like this:
With Flash CS3 we have a method of exporting any artwork, which can then be used in your Flex application. Here are the steps to achieve this
Click to see a bigger view of any of the pics:
- Step 1: Create all the artwork in Flash CS3 as below.
- Step 2: Convert each of the artwork to symbols (F8 shortcut) and while doing so, check the Export to ActionScript check box.
- Step 3: Publish the artwork (File > Publish). But before doing so, make sure that in Publish Settings, Export SWC is checked.
- Step 4: Copy the artwork in a folder inside your Flex Project & then import it (File > Import). Provide the path to the SWC and the CSS file that you want to create.
- Step 5: Check all symbols that you want to import into the CSS & the component and the styleName it corresponds to. Click Finish to create the CSS file.
Now go ahead add the CSS to your Flex app using the <mx:Style tag
Here is an example application. In the application the first button & Canvas is un-styled and the second one feeds in from the artwork create in Flash.
Here is the link to the app & its source…