Flex User Group Skinning Presentation

Styling Adobe Flex 2 James Whittaker Friday, 12 October 2007

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

Why bother styling ? • Corporate branding • Marketing • Differentiate your application • User experience & usability • Remove any reference to Flex ! Friday, 12 October 2007

Styling in the wild Friday, 12 October 2007

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

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

Scrapblog http://www.scrapblog.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 • Graphical skins • Custom components Friday, 12 October 2007

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

The Halo theme • Smart, corporate visual design • Functional • Visually complete for quick prototyping • Use as an example & override but... Friday, 12 October 2007

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

http://www.ﬂickr.com/photos/dancunningham/ ! BORING ! Friday, 12 October 2007

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

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

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

Applying CSS • To the whole application Application { } • To components ( or custom components ) NewTextLabel { } • Using class - selectors.rightButton { } Friday, 12 October 2007

Use the style explorer http://examples.adobe.com/ﬂex2/consulting/styleexplorer/Flex2StyleExplorer.html Friday, 12 October 2007

Custom fonts /*------------------------------------------- =Fonts ---------------------------------------------*/ @font-face { Application { src:local(\"arial\"); fontWeight:normal; fontFamily: myArial; color: #333333; fontFamily: myArial; } font-size: 12; } @font-face { src:local(\"arial\"); 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

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

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

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 = \"#CC0000\"; aLink.textDecoration = \"underline\"; var aHover:Object = new Object(); aHover.color = \"#003366\"; aHover.textDecoration = \"underline\"; var aActive:Object = new Object(); aActive.color = \"#003366\"; aActive.textDecoration = \"underline\"; /* Apply styles */ style.setStyle(\"a:link\", aLink); style.setStyle(\"a:hover\", aHover); style.setStyle(\"a:active\", aActive); textField.condenseWhite = true; /* Apply Link listener */ this.addEventListener(TextEvent.LINK,linkHandler); } Friday, 12 October 2007

HTML Text example • Styled links with HTML behavior • Not full HTML • Can’t set styles with external CSS by default Friday, 12 October 2007

Skins http://www.ﬂickr.com/photos/youghal/ • Graphical ( SWF, PNG etc ) • Programmatic AS3 classes • Applied using CSS Friday, 12 October 2007

Graphical skin assets • Best to use SWF from Flash • Least ﬁle size • Only one ﬁle • Easy to use & reference • Use Scale 9 for perfect corners ! • Each element as a symbol Friday, 12 October 2007

Scale 9 • Native to Flash, Fireworks & Illustrator • Can be speciﬁed in CSS • Has limitations • Watch non-vector images for jagged lines on resize Friday, 12 October 2007

Scale 9 Friday, 12 October 2007

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

example Friday, 12 October 2007

Programmatic Skins • All Halo skins are programmatic • Use Flash drawing API • Can achieve complex results • Smaller ﬁle size & faster at runtime • Apply using ClassReference in CSS • Need to know ActionScript Friday, 12 October 2007

General tips Friday, 12 October 2007

• 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

Resources • http://www.scalenine.com - skins themes • http://www.famfamfam.com - free icons • http://ﬂexdeveloper.eu • http://xd.adobe.com - experience design • http://www.adobe.com/devnet/ﬂex Friday, 12 October 2007

This presentation is released under Creative Commons share alike 3.0 http://creativecommons.org/licenses/by-sa/2.5/deed.en_GB http://ﬂexdeveloper.eu/fuguk http://www.jameswhittaker.com Friday, 12 October 2007

Thanks Now it’s Q & A time Friday, 12 October 2007

Friday, 12 October 2007

Flex User Group Skinning Presentation

0 comments

Notes on slide 1

Favorites, Groups & Events