Flex User Group - Skinning Presentation

Styling Adobe Flex 2James Whittaker

Friday, 12 October 2007

• Interactive Developer @ Egg since 2006

• Previously QinetiQ & Helyx (MoD)

• IT & Multimedia degree

• Developer - Flex 2 application for Prudential

A bit of history


Why bother styling ?

• Corporate branding

• Marketing

• Differentiate your application

• User experience & usability

• Remove any reference to Flex !


Styling in the wild


Volkswagen

http://www.vw.co.uk/used_cars/find


http://www.sliderocket.com


Virtual Ubiquity

http://www.virtualubiquity.com




Scrapblog

http://www.scrapblog.com




Sliderocket





Nice, how can we get our apps to look that good ?


What can we use ?

• Themes

• CSS

• Programmatic skins

• Graphical skins

• Custom components


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


The Halo theme

• Smart, corporate visual design

• Functional

• Visually complete for quick prototyping

• Use as an example & override

but...


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




! BORING !





What can we do?

• Use CSS for style changes

• Visual skins - SWF, PNG, JPG

• Embed fonts

• Program custom skin classes

• Use some cool graphics!


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


Using CSS

• Inline with <Style><Style> tags

• As MXML attribute < color=”#CC0000”>

• External using <Style source=”myStyle.css”

• Using ActionScript setStyle()


Applying CSS

• To the whole application

• To components ( or custom components )

• Using class - selectors

Application {}

.rightButton {}

NewTextLabel {}


Use the style explorer

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




Custom fonts/*------------------------------------------- =Fonts---------------------------------------------*/

@font-face { src:local("arial"); fontWeight:normal; fontFamily: myArial;}

@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

Application { fontFamily: myArial; color: #333333; font-size: 12;}


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 !


Applying styles with AS

• Primary example is HTML text

• Use StyleSheet object in ActionScript

• SetStyle

• Apply the StyleSheet to the component


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); }

public class StyledText extends Text { private var style:StyleSheet = new StyleSheet();


HTML Text example

• Styled links with HTML behavior

• Not full HTML

• Can’t set styles with external CSS by default


Skins

• Graphical ( SWF, PNG etc )

• Programmatic AS3 classes

• Applied using CSS

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




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


Scale 9

• Native to Flash, Fireworks & Illustrator

• Can be specified in CSS

• Has limitations

• Watch non-vector images for jagged lines on resize


Scale 9


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 ( # )


example


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


General tips


• 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


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


http://www.scalenine.com

http://www.scalenine.com

http://www.famfamfam.com

http://www.famfamfam.com

http://flexdeveloper.eu

http://flexdeveloper.eu

http://xd.adobe.com

http://xd.adobe.com

http://www.adobe.com/devnet/flex

http://www.adobe.com/devnet/flex

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








ThanksNow it’s Q & A time


Flex User Group - Skinning Presentation

Business

Transcript of Flex User Group - Skinning Presentation