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


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/ﬁnd

Virtual Ubiquity

http://www.virtualubiquity.com

Scrapblog

http://www.scrapblog.com

Sliderocket

http://www.sliderocket.com

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 ﬁle
• 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.ﬂickr.com/photos/dancunningham/


http://www.ﬂickr.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 Application {
}

• To components ( or custom components ) NewTextLabel {
}

• Using class - selectors.rightButton {
}


Use the style explorer

http://examples.adobe.com/ﬂex2/consulting/styleexplorer/Flex2StyleExplorer.html


Custom fonts
/*-------------------------------------------

=Fonts
---------------------------------------------*/

@font-face {
Application {

src:local(quot;arialquot;);

fontWeight:normal;
fontFamily: myArial;

color: #333333;

}
font-size: 12;
}
@font-face {

src:local(quot;arialquot;);

fontWeight:bold;

}

• New declaration for differing font weights
• Careful, embedded fonts increase SWF size
• Better for displaying within SWF

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 !

Applying styles with AS

• Primary example is HTML text
• Use StyleSheet object in ActionScript
• SetStyle
• Apply the StyleSheet to the component


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

}


HTML Text example

• Styled links with HTML behavior
• Not full HTML
• Can’t set styles with external CSS by default


Skins

http://www.ﬂickr.com/photos/youghal/

• Graphical ( SWF, PNG etc )
• Programmatic AS3 classes
• Applied using CSS

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


Scale 9

• Native to Flash, Fireworks & Illustrator
• Can be speciﬁed 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 ﬁle 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://ﬂexdeveloper.eu
• http://xd.adobe.com - experience design
• http://www.adobe.com/devnet/ﬂex


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


Thanks
Now it’s Q & A time


Flex User Group - Skinning Presentation

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (9)

Similar to Flex User Group - Skinning Presentation

Similar to Flex User Group - Skinning Presentation (20)

Recently uploaded

Recently uploaded (20)

Flex User Group - Skinning Presentation