Yahoo! Flex Skin
by Joseph Magnani, Media Innovation Group
Yahoo! Flex Skin modifies the appearance of standard Flex components and gives your applications a new, fresh and cool appearance.
Starting with Yahoo! Flex Skin in Four Steps
What You Need
- Adobe Flex Builder 3 (trial version available)
- or the free Flex 3 SDK
Step 1. Download and Unzip the Source File
Grab the zip file here, and unpack it wherever convenient.The following files are included in the distribution:
- yflexskin.swf – all of the graphic resources necessary for the Yahoo! Flex skin.
- yflexskin.ai – the Adobe Illustrator source file for the Yahoo! Flex skin – feel free to modify and re-export!
- misc.swf – the Yahoo! logo header.
- yflexskin.css – the style sheet that maps the resources in yflexskin.swf to their respective styles.
- DemoApp.mxml – a sample application containing all of the standard Flex components.
Step Two: Create a New Project in Flex
Start the Flex Builder. We'll create a new Flex project by choosing New > Flex Project:
Name the project 'SkinSample' and click Next:
Step Three: Import the Sample Application
Allow the project to remain in the default folder, and click Finish. You should now be presented with the default SkinSample.mxml file and a Flex Navigator on the left. We won't be using the default mxml file for the project, so you can close it. Instead, open the folder where you unzipped the files, select all of the swf, css and mxml files, and drag them into the src folder in the project tree in the navigator view.
Step Four: Run it!
And now you're almost ready to go: right-click the DemoApp.mxml file, and select "Set as Default Application." Then run the project, and you'll see the Yahoo! Flex Skin sample application. That's it!