Styling Adobe Flex 2
                                James Whittaker




Friday, 12 October 2007
A bit of history

                     • Interactive Developer @ Egg since 2006
                     • Previously QinetiQ ...
Why bother styling ?

                     • Corporate branding
                     • Marketing
                     • Di...
Styling in the wild




Friday, 12 October 2007
Volkswagen




                          http://www.vw.co.uk/used_cars/find
Friday, 12 October 2007
Volkswagen




                          http://www.vw.co.uk/used_cars/find
Friday, 12 October 2007
Virtual Ubiquity




                          http://www.virtualubiquity.com
Friday, 12 October 2007
Virtual Ubiquity




                          http://www.virtualubiquity.com
Friday, 12 October 2007
Virtual Ubiquity




                          http://www.virtualubiquity.com
Friday, 12 October 2007
Scrapblog




                          http://www.scrapblog.com
Friday, 12 October 2007
Scrapblog




                          http://www.scrapblog.com
Friday, 12 October 2007
Sliderocket




                          http://www.sliderocket.com
Friday, 12 October 2007
Sliderocket




                          http://www.sliderocket.com
Friday, 12 October 2007
Sliderocket




                          http://www.sliderocket.com
Friday, 12 October 2007
Nice, how can we get our
                      apps to look that good ?



Friday, 12 October 2007
What can we use ?

                     • Themes
                     • CSS
                     • Programmatic skins
    ...
What is a theme?

                     • At least one CSS file
                     • Programmatic skin (AS3) classes
     ...
The Halo theme

                     • Smart, corporate visual design
                     • Functional
                  ...
http://www.flickr.com/photos/dancunningham/




Friday, 12 October 2007
http://www.flickr.com/photos/dancunningham/




                          ! BORING !

Friday, 12 October 2007
What can we do?

                     • Use CSS for style changes
                     • Visual skins - SWF, PNG, JPG
    ...
CSS in Flex 2

                     • Differences to CSS for XHTML
                     • Used to set styles not propertie...
Using CSS


                     • Inline with <Style><Style> tags
                     • As MXML attribute < color=”#CC00...
Applying CSS


         • To the whole application   Application {
                                      }




         • ...
Use the style explorer




            http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html


F...
Use the style explorer




            http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html


F...
Custom fonts
                    /*-------------------------------------------
                    
    =Fonts
           ...
Tip - CSS Organisation
                     • CSS files can become large
                     • Navigation can be tricky
  ...
Applying styles with AS


                     • Primary example is HTML text
                     • Use StyleSheet object...
public class StyledText extends Text
                          
    {
                          
    
     private var sty...
HTML Text example

                   • Styled links with HTML behavior
                   • Not full HTML
               ...
Skins



                                         http://www.flickr.com/photos/youghal/




                     • Graphica...
Graphical skin assets
                     • Best to use SWF from Flash
                      • Least file size
           ...
Scale 9

                     • Native to Flash, Fireworks & Illustrator
                     • Can be specified in CSS
   ...
Scale 9




Friday, 12 October 2007
Styling a button

                     • Set skin for all affected button states
                     • Use an Embed to em...
example




Friday, 12 October 2007
Programmatic Skins

                     • All Halo skins are programmatic
                     • Use Flash drawing API
  ...
General tips


Friday, 12 October 2007
• Use HBox & VBox for layout - easy to style
                          & extend
                     • Build adaptable com...
Resources

                     • http://www.scalenine.com - skins themes
                     • http://www.famfamfam.com ...
This presentation is released under Creative Commons
                                      share alike 3.0
               ...
Thanks
                          Now it’s Q & A time




Friday, 12 October 2007
Friday, 12 October 2007
Upcoming SlideShare
Loading in...5
×

Flex User Group - Skinning Presentation

8,689

Published on

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

Published in: Business, Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,689
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
357
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Flex User Group - Skinning Presentation

  1. 1. Styling Adobe Flex 2 James Whittaker Friday, 12 October 2007
  2. 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. 3. Why bother styling ? • Corporate branding • Marketing • Differentiate your application • User experience & usability • Remove any reference to Flex ! Friday, 12 October 2007
  4. 4. Styling in the wild Friday, 12 October 2007
  5. 5. Volkswagen http://www.vw.co.uk/used_cars/find Friday, 12 October 2007
  6. 6. Volkswagen http://www.vw.co.uk/used_cars/find Friday, 12 October 2007
  7. 7. Virtual Ubiquity http://www.virtualubiquity.com Friday, 12 October 2007
  8. 8. Virtual Ubiquity http://www.virtualubiquity.com Friday, 12 October 2007
  9. 9. Virtual Ubiquity http://www.virtualubiquity.com Friday, 12 October 2007
  10. 10. Scrapblog http://www.scrapblog.com Friday, 12 October 2007
  11. 11. Scrapblog http://www.scrapblog.com Friday, 12 October 2007
  12. 12. Sliderocket http://www.sliderocket.com Friday, 12 October 2007
  13. 13. Sliderocket http://www.sliderocket.com Friday, 12 October 2007
  14. 14. Sliderocket http://www.sliderocket.com Friday, 12 October 2007
  15. 15. Nice, how can we get our apps to look that good ? Friday, 12 October 2007
  16. 16. What can we use ? • Themes • CSS • Programmatic skins • Graphical skins • Custom components Friday, 12 October 2007
  17. 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. 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. 19. http://www.flickr.com/photos/dancunningham/ Friday, 12 October 2007
  20. 20. http://www.flickr.com/photos/dancunningham/ ! BORING ! Friday, 12 October 2007
  21. 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. 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. 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. 24. Applying CSS • To the whole application Application { } • To components ( or custom components ) NewTextLabel { } • Using class - selectors.rightButton { } Friday, 12 October 2007
  25. 25. Use the style explorer http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html Friday, 12 October 2007
  26. 26. Use the style explorer http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html Friday, 12 October 2007
  27. 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. 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. 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. 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. 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. 32. Skins http://www.flickr.com/photos/youghal/ • Graphical ( SWF, PNG etc ) • Programmatic AS3 classes • Applied using CSS Friday, 12 October 2007
  33. 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. 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. 35. Scale 9 Friday, 12 October 2007
  36. 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. 37. example Friday, 12 October 2007
  38. 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. 39. General tips Friday, 12 October 2007
  40. 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. 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. 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. 43. Thanks Now it’s Q & A time Friday, 12 October 2007
  44. 44. Friday, 12 October 2007
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×