Flex User Group - Skinning Presentation

Click here to load reader

  • date post

    02-Dec-2014
  • Category

    Business

  • view

    9.985
  • download

    1

Embed Size (px)

description

A presentation for the Adobe Flex user group in the UK on Flex applications and skinning.

Transcript of Flex User Group - Skinning Presentation

  • 1. Styling Adobe Flex 2 James Whittaker Friday, 12 October 2007
  • 2. A bit of history Interactive Developer @ Egg since 2006 Previously QinetiQ & Helyx (MoD) IT & Multimedia degree Developer - Flex 2 application for Prudential Friday, 12 October 2007
  • 3. Why bother styling ? Corporate branding Marketing Differentiate your application User experience & usability Remove any reference to Flex ! Friday, 12 October 2007
  • 4. Styling in the wild Friday, 12 October 2007
  • 5. Volkswagen http://www.vw.co.uk/used_cars/nd Friday, 12 October 2007
  • 6. Volkswagen http://www.vw.co.uk/used_cars/nd Friday, 12 October 2007
  • 7. Virtual Ubiquity http://www.virtualubiquity.com Friday, 12 October 2007
  • 8. Virtual Ubiquity http://www.virtualubiquity.com Friday, 12 October 2007
  • 9. Virtual Ubiquity http://www.virtualubiquity.com Friday, 12 October 2007
  • 10. Scrapblog http://www.scrapblog.com Friday, 12 October 2007
  • 11. Scrapblog http://www.scrapblog.com Friday, 12 October 2007
  • 12. Sliderocket http://www.sliderocket.com Friday, 12 October 2007
  • 13. Sliderocket http://www.sliderocket.com Friday, 12 October 2007
  • 14. Sliderocket http://www.sliderocket.com Friday, 12 October 2007
  • 15. Nice, how can we get our apps to look that good ? Friday, 12 October 2007
  • 16. What can we use ? Themes CSS Programmatic skins Graphical skins Custom components Friday, 12 October 2007
  • 17. What is a theme? At least one CSS le Programmatic skin (AS3) classes Graphical skin assets (PNG, SWF etc) Themes can be compiled as a SWC Easily distributed Friday, 12 October 2007
  • 18. The Halo theme Smart, corporate visual design Functional Visually complete for quick prototyping Use as an example & override but... Friday, 12 October 2007
  • 19. http://www.ickr.com/photos/dancunningham/ Friday, 12 October 2007
  • 20. http://www.ickr.com/photos/dancunningham/ ! BORING ! Friday, 12 October 2007
  • 21. What can we do? Use CSS for style changes Visual skins - SWF, PNG, JPG Embed fonts Program custom skin classes Use some cool graphics! Friday, 12 October 2007
  • 22. CSS in Flex 2 Differences to CSS for XHTML Used to set styles not properties You cant set size or position - they are properties not styles Setting padding will drive you crazy! Runtime changing of CSS Friday, 12 October 2007
  • 23. Using CSS Inline with
  • 24. Applying CSS To the whole application Application { } To components ( or custom components ) NewTextLabel { } Using class - selectors.rightButton { } Friday, 12 October 2007
  • 25. Use the style explorer http://examples.adobe.com/ex2/consulting/styleexplorer/Flex2StyleExplorer.html Friday, 12 October 2007
  • 26. Use the style explorer http://examples.adobe.com/ex2/consulting/styleexplorer/Flex2StyleExplorer.html Friday, 12 October 2007
  • 27. Custom fonts /*------------------------------------------- =Fonts ---------------------------------------------*/ @font-face { Application { src:local(quot;arialquot;); fontWeight:normal; fontFamily: myArial; color: #333333; fontFamily: myArial; } font-size: 12; } @font-face { src:local(quot;arialquot;); fontWeight:bold; fontFamily: myArial; } New declaration for differing font weights Careful, embedded fonts increase SWF size Better for displaying within SWF Friday, 12 October 2007
  • 28. Tip - CSS Organisation CSS les can become large Navigation can be tricky Techniques from HTML CSS /*------------------------------------------- =Containers ---------------------------------------------*/ Use search and the rst character (=C) Remember cascading ! Friday, 12 October 2007
  • 29. App