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