Your SlideShare is downloading. ×
FLEX APPEAL Break Away from the Soviet Interface Chris Black 4/2/2009 www.blackcj.com
 
WHO AM I? Chris Black Senior Developer at  Sierra Bravo Graduated from the University of Wisconsin, Eau Claire Enjoy Backp...
OUTLINE <ul><li>What is Skinning? </li></ul><ul><li>Why skin components? </li></ul><ul><li>Techniques </li></ul><ul><ul><l...
WHAT IS SKINNING? “ Skinning is the process of changing the appearance of a component by modifying or replacing its visual...
WHY? <ul><li>Client requirements </li></ul><ul><li>Higher usage / more downloads </li></ul><ul><li>Make Flex not look like...
CHALLENGES <ul><li>Not enough flex designers </li></ul><ul><li>Additional cost </li></ul><ul><li>Limited CSS </li></ul><ul...
COMPARISON 4/2/2009
CSS <ul><li>Complexity: Low </li></ul><ul><li>Control: Low </li></ul><ul><li>“ Cascading Style Sheets  (CSS) is a style sh...
SKINNING EXTENSIONS <ul><li>Import Flex skins from Fireworks, Photoshop, Illustrator and Flash </li></ul><ul><li>Plug-ins ...
9-SLICE SCALING “ The  9-slice scaling  feature lets you define nine sections of a skin that scale independently.”  - Live...
CSS SAMPLE Code Sample 4/2/2009
DEGRAFA <ul><li>Complexity: Low-Med </li></ul><ul><li>Control: Med-High </li></ul><ul><li>“ Degrafa is  a declarative grap...
DEGRAFA SAMPLE 4/2/2009 Code Sample
OVERRIDE DISPLAY <ul><li>Complexity: Med-High </li></ul><ul><li>Control: Med-High </li></ul><ul><li>“ By combining these v...
OVERRIDE SAMPLE 4/2/2009 Code Sample
CUSTOM COMPONENTS <ul><li>Complexity: High </li></ul><ul><li>Control: High </li></ul><ul><li>Create custom flex components...
CUSTOM COMPONENT SAMPLE 4/2/2009 Code Sample
WHICH IS BEST? <ul><li>Depends on the application. </li></ul><ul><li>Evaluate and use a combination. </li></ul><ul><li>Und...
CHALLENGES REVISITED <ul><li>Not enough Flex designers  </li></ul><ul><ul><li>Use Adobe provided   tools   to allow CS3 de...
CHALLENGES REVISITED <ul><li>Time Constraints  </li></ul><ul><ul><li>Use tools like   Degrafa   to accomplish tasks more q...
 
QUESTIONS?
QUESTIONS? <ul><li>How to get custom skins into design view? </li></ul><ul><li>What to do next? </li></ul><ul><li>Will Fle...
RESOURCES http://livedocs.adobe.com/flex/3/skinning_extensions_flex3.pdf http://livedocs.adobe.com/flex/3/html/skinning_1....
LINKS http://scalenine.com/blog/2008/03/16/tips-for-using-the-flex-skin-design-extensions/ http://www.blackcj.com/blog/tag...
Upcoming SlideShare
Loading in...5
×

Flex Appeal

1,596

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
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,596
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Transcript of "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

    ×