Flex Appeal


Published on

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.

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Flex Appeal

    1. 1. FLEX APPEAL Break Away from the Soviet Interface Chris Black 4/2/2009 www.blackcj.com
    2. 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
    3. 4. OUTLINE <ul><li>What is Skinning? </li></ul><ul><li>Why skin components? </li></ul><ul><li>Techniques </li></ul><ul><ul><li>CSS / 9-slice scaling </li></ul></ul><ul><ul><li>Overriding drawing methods </li></ul></ul><ul><ul><li>Degrafa </li></ul></ul><ul><ul><li>Programmatic skinning </li></ul></ul><ul><li>Conclusion / Questions / Resources </li></ul>4/2/2009
    4. 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
    5. 6. WHY? <ul><li>Client requirements </li></ul><ul><li>Higher usage / more downloads </li></ul><ul><li>Make Flex not look like Flex </li></ul><ul><li>Cause it looks cool </li></ul><ul><li>Skimmer </li></ul>4/2/2009 Rock Out
    6. 7. CHALLENGES <ul><li>Not enough flex designers </li></ul><ul><li>Additional cost </li></ul><ul><li>Limited CSS </li></ul><ul><li>Time constraints </li></ul><ul><li>Unfamiliarity </li></ul>4/2/2009
    7. 8. COMPARISON 4/2/2009
    8. 9. CSS <ul><li>Complexity: Low </li></ul><ul><li>Control: Low </li></ul><ul><li>“ Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language.” - Wikipedia </li></ul>4/2/2009
    9. 10. SKINNING EXTENSIONS <ul><li>Import Flex skins from Fireworks, Photoshop, Illustrator and Flash </li></ul><ul><li>Plug-ins available for Creative Suite 3 </li></ul><ul><li>Integrated into Creative Suite 4 </li></ul>4/2/2009
    10. 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
    11. 12. CSS SAMPLE Code Sample 4/2/2009
    12. 13. DEGRAFA <ul><li>Complexity: Low-Med </li></ul><ul><li>Control: Med-High </li></ul><ul><li>“ Degrafa is a declarative graphics framework open source licensed under MIT.” - Degrafa </li></ul>4/2/2009
    13. 14. DEGRAFA SAMPLE 4/2/2009 Code Sample
    14. 15. OVERRIDE DISPLAY <ul><li>Complexity: Med-High </li></ul><ul><li>Control: Med-High </li></ul><ul><li>“ By combining these very simple drawing methods, you can create complex shapes that make up your component skins.” - Adobe </li></ul>4/2/2009
    15. 16. OVERRIDE SAMPLE 4/2/2009 Code Sample
    16. 17. CUSTOM COMPONENTS <ul><li>Complexity: High </li></ul><ul><li>Control: High </li></ul><ul><li>Create custom flex components by extending UIComponent. </li></ul>4/2/2009
    17. 18. CUSTOM COMPONENT SAMPLE 4/2/2009 Code Sample
    18. 19. WHICH IS BEST? <ul><li>Depends on the application. </li></ul><ul><li>Evaluate and use a combination. </li></ul><ul><li>Understand limitations. </li></ul>4/2/2009
    19. 20. CHALLENGES REVISITED <ul><li>Not enough Flex designers </li></ul><ul><ul><li>Use Adobe provided tools to allow CS3 designers to skin Flex components </li></ul></ul><ul><li>Additional Cost </li></ul><ul><ul><li>Use free skins from Scalenine </li></ul></ul><ul><li>Limited CSS </li></ul><ul><ul><li>Use coding techniques to overcome limitations of CSS in Flex </li></ul></ul>4/2/2009
    20. 21. CHALLENGES REVISITED <ul><li>Time Constraints </li></ul><ul><ul><li>Use tools like Degrafa to accomplish tasks more quickly </li></ul></ul><ul><li>Unfamiliarity </li></ul><ul><ul><li>Lots of additional resources available. Sample code. </li></ul></ul>4/2/2009
    21. 23. QUESTIONS?
    22. 24. QUESTIONS? <ul><li>How to get custom skins into design view? </li></ul><ul><li>What to do next? </li></ul><ul><li>Will Flex 4 make skinning easier? </li></ul>4/2/2009
    23. 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
    24. 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