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
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.
Start the Flex Builder. We'll create a new Flex project by choosing New > Flex Project:
Name the project 'SkinSample' and click Next:
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.
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!