Do your Flex applications feel cold and dull? Improve the look and feel of any Adobe Flex application using a combination of graphical and programmatic skinning. We will walk through the steps required to take your applications to the next level using CSS, 9-Slice Scaling, and custom classes. Learn how to import your skins directly into Flex from Photoshop using the skinning extensions provided by Adobe. Finally, we will break into some programmatic skinning, custom transitions and third party frameworks to achieve pixel perfect results.

1. FLEX APPEAL Break Away from the Soviet Interface Chris Black 4/2/2009 www.blackcj.com

3. WHO AM I? Chris Black Senior Developer at Sierra Bravo Graduated from the University of Wisconsin, Eau Claire Enjoy Backpacking and Photography www.blackcj.com 4/2/2009

5. WHAT IS SKINNING? “ Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements.” - Adobe 4/2/2009

8. COMPARISON 4/2/2009

11. 9-SLICE SCALING “ The 9-slice scaling feature lets you define nine sections of a skin that scale independently.” - Live Docs 4/2/2009 Adobe Resource Center

12. CSS SAMPLE Code Sample 4/2/2009

14. DEGRAFA SAMPLE 4/2/2009 Code Sample

16. OVERRIDE SAMPLE 4/2/2009 Code Sample

18. CUSTOM COMPONENT SAMPLE 4/2/2009 Code Sample

23. QUESTIONS?

25. RESOURCES http://livedocs.adobe.com/flex/3/skinning_extensions_flex3.pdf http://livedocs.adobe.com/flex/3/html/skinning_1.html http://livedocs.adobe.com/flex/3/html/embed_4.html#186094 http://www.degrafa.org/learning/ 4/2/2009

26. LINKS http://scalenine.com/blog/2008/03/16/tips-for-using-the-flex-skin-design-extensions/ http://www.blackcj.com/blog/tag/skinning/ http://blogs.adobe.com/kiwi/2006/07/loading_flex_skins_at_runtime.html http://www.adobe.com/devnet/flex/articles/skins_styles.html 4/2/2009 www.blackcj.com