Flex User Group - Skinning Presentation
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Flex User Group - Skinning Presentation

on

  • 9,957 views

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.

Statistics

Views

Total Views
9,957
Views on SlideShare
9,863
Embed Views
94

Actions

Likes
12
Downloads
356
Comments
0

8 Embeds 94

http://www.jameswhittaker.com 80
http://www.jjlarrea.com 3
http://www.slideshare.net 3
http://www.slideee.com 3
http://www.e-presentations.us 2
http://bohramt.de 1
http://www.mehtanirav.com 1
http://www.fraggalonia.de 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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 User Group - Skinning Presentation Presentation 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