Flex User Group - Skinning Presentation

  • 8,615 views
Uploaded on

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

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

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,615
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
357
Comments
0
Likes
12

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. 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/find Friday, 12 October 2007
  • 6. Volkswagen http://www.vw.co.uk/used_cars/find 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 file • 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.flickr.com/photos/dancunningham/ Friday, 12 October 2007
  • 20. http://www.flickr.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 can’t 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 <Style><Style> tags • As MXML attribute < color=”#CC0000”> • External using <Style source=”myStyle.css” • Using ActionScript setStyle() Friday, 12 October 2007
  • 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/flex2/consulting/styleexplorer/Flex2StyleExplorer.html Friday, 12 October 2007
  • 26. Use the style explorer http://examples.adobe.com/flex2/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 files can become large • Navigation can be tricky • Techniques from HTML CSS /*------------------------------------------- =Containers ---------------------------------------------*/ • Use search and the first character (=C) • Remember cascading ! Friday, 12 October 2007
  • 29. Applying styles with AS • Primary example is HTML text • Use StyleSheet object in ActionScript • SetStyle • Apply the StyleSheet to the component Friday, 12 October 2007
  • 30. public class StyledText extends Text { private var style:StyleSheet = new StyleSheet(); override protected function childrenCreated():void { super.childrenCreated(); /* Set up the new stylesheet for the HTML text */ var aLink:Object = new Object(); aLink.color = quot;#CC0000quot;; aLink.textDecoration = quot;underlinequot;; var aHover:Object = new Object(); aHover.color = quot;#003366quot;; aHover.textDecoration = quot;underlinequot;; var aActive:Object = new Object(); aActive.color = quot;#003366quot;; aActive.textDecoration = quot;underlinequot;; /* Apply styles */ style.setStyle(quot;a:linkquot;, aLink); style.setStyle(quot;a:hoverquot;, aHover); style.setStyle(quot;a:activequot;, aActive); textField.condenseWhite = true; /* Apply Link listener */ this.addEventListener(TextEvent.LINK,linkHandler); } Friday, 12 October 2007
  • 31. HTML Text example • Styled links with HTML behavior • Not full HTML • Can’t set styles with external CSS by default Friday, 12 October 2007
  • 32. Skins http://www.flickr.com/photos/youghal/ • Graphical ( SWF, PNG etc ) • Programmatic AS3 classes • Applied using CSS Friday, 12 October 2007
  • 33. Graphical skin assets • Best to use SWF from Flash • Least file size • Only one file • Easy to use & reference • Use Scale 9 for perfect corners ! • Each element as a symbol Friday, 12 October 2007
  • 34. Scale 9 • Native to Flash, Fireworks & Illustrator • Can be specified in CSS • Has limitations • Watch non-vector images for jagged lines on resize Friday, 12 October 2007
  • 35. Scale 9 Friday, 12 October 2007
  • 36. Styling a button • Set skin for all affected button states • Use an Embed to embed the assets in the main SWF at compile time • State Scale 9 properties or use symbol name ( # ) Friday, 12 October 2007
  • 37. example Friday, 12 October 2007
  • 38. Programmatic Skins • All Halo skins are programmatic • Use Flash drawing API • Can achieve complex results • Smaller file size & faster at runtime • Apply using ClassReference in CSS • Need to know ActionScript Friday, 12 October 2007
  • 39. General tips Friday, 12 October 2007
  • 40. • Use HBox & VBox for layout - easy to style & extend • Build adaptable components like headers & links • Set naming conventions for MXML, CSS and Assets • Set the default namespace to be blank, loosing the mx: , more like XAML Friday, 12 October 2007
  • 41. Resources • http://www.scalenine.com - skins themes • http://www.famfamfam.com - free icons • http://flexdeveloper.eu • http://xd.adobe.com - experience design • http://www.adobe.com/devnet/flex Friday, 12 October 2007
  • 42. This presentation is released under Creative Commons share alike 3.0 http://creativecommons.org/licenses/by-sa/2.5/deed.en_GB http://flexdeveloper.eu/fuguk http://www.jameswhittaker.com Friday, 12 October 2007
  • 43. Thanks Now it’s Q & A time Friday, 12 October 2007
  • 44. Friday, 12 October 2007