• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Flex Appeal
 

Flex Appeal

on

  • 3,093 views

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.

Statistics

Views

Total Views
3,093
Views on SlideShare
2,765
Embed Views
328

Actions

Likes
4
Downloads
0
Comments
0

4 Embeds 328

http://www.blackcj.com 324
http://www.linkedin.com 2
http://www.slideshare.net 1
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Flex Appeal Flex Appeal Presentation Transcript

  • 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 Backpacking and Photography www.blackcj.com 4/2/2009
  • OUTLINE
    • What is Skinning?
    • Why skin components?
    • Techniques
      • CSS / 9-slice scaling
      • Overriding drawing methods
      • Degrafa
      • Programmatic skinning
    • Conclusion / Questions / Resources
    4/2/2009
  • 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
  • WHY?
    • Client requirements
    • Higher usage / more downloads
    • Make Flex not look like Flex
    • Cause it looks cool
    • Skimmer
    4/2/2009 Rock Out
  • CHALLENGES
    • Not enough flex designers
    • Additional cost
    • Limited CSS
    • Time constraints
    • Unfamiliarity
    4/2/2009
  • COMPARISON 4/2/2009
  • 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
  • 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
  • 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
  • CSS SAMPLE Code Sample 4/2/2009
  • DEGRAFA
    • Complexity: Low-Med
    • Control: Med-High
    • “ Degrafa is a declarative graphics framework open source licensed under MIT.” - Degrafa
    4/2/2009
  • DEGRAFA SAMPLE 4/2/2009 Code Sample
  • 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
  • OVERRIDE SAMPLE 4/2/2009 Code Sample
  • CUSTOM COMPONENTS
    • Complexity: High
    • Control: High
    • Create custom flex components by extending UIComponent.
    4/2/2009
  • CUSTOM COMPONENT SAMPLE 4/2/2009 Code Sample
  • WHICH IS BEST?
    • Depends on the application.
    • Evaluate and use a combination.
    • Understand limitations.
    4/2/2009
  • 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
  • CHALLENGES REVISITED
    • Time Constraints
      • Use tools like Degrafa to accomplish tasks more quickly
    • Unfamiliarity
      • Lots of additional resources available. Sample code.
    4/2/2009
  •  
  • QUESTIONS?
  • QUESTIONS?
    • How to get custom skins into design view?
    • What to do next?
    • Will Flex 4 make skinning easier?
    4/2/2009
  • 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
  • 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