Your SlideShare is downloading. ×
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Flex Appeal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Flex Appeal

1,584

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 …

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,584
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

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

    ×