Putting all your icons in one basket
You know the saying, “Don’t put all your eggs in one basket?” Well, that person didn’t have to keep track of a bazillion icons in one of their apps.
| view source |
The icons here are loaded as assets of a CSS class selector .icon
.icons {
Actionscript: Embed( 'assets/icons/Actionscript.png' );
AIR: Embed( 'assets/icons/AIR.png' );
AMF: Embed( 'assets/icons/AMFPHP.png' );
Flash: Embed( 'assets/icons/Flash.png' );
Flex: Embed( 'assets/icons/Flex.png' );
FMS: Embed( 'assets/icons/FlashMediaServer.png' );
Photoshop: Embed( 'assets/icons/Photoshop.png' );
}
Then the RadioButtons just change the icon by using the StyleManager as such:
private function onRadioBtnChange( e:Event ):void {
var selectedIcon:String = e.target.selectedValue
iconBtn.setStyle( 'icon',
StyleManager.getStyleDeclaration('.icons').getStyle( selectedIcon ) );
iconBtn.label = selectedIcon;
}
With this approach you could put all your icons in one external CSS file and then just pick from the bunch as needed. I came across this tid-bit from the book Creating Visual Experiences with Flex 3.0, page 80.
If something here has proved valuable to you then feel free to drop a couple of bucks in the tip-jar.






