flex user group - skinning presentation
DESCRIPTION
A presentation for the Adobe Flex user group in the UK on Flex applications and skinning.TRANSCRIPT
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
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/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
• Graphical skins
• Custom components
Friday, 12 October 2007
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
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.flickr.com/photos/dancunningham/
Friday, 12 October 2007
! BORING !
http://www.flickr.com/photos/dancunningham/
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
• To components ( or custom components )
• Using class - selectors
Application {}
.rightButton {}
NewTextLabel {}
Friday, 12 October 2007
Use the style explorer
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html
Friday, 12 October 2007
Use the style explorer
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html
Friday, 12 October 2007
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;}
Friday, 12 October 2007
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
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
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();
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
• Graphical ( SWF, PNG etc )
• Programmatic AS3 classes
• Applied using CSS
http://www.flickr.com/photos/youghal/
Friday, 12 October 2007
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
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
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 file 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://flexdeveloper.eu
• http://xd.adobe.com - experience design
• http://www.adobe.com/devnet/flex
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://flexdeveloper.eu/fuguk
http://www.jameswhittaker.com
Friday, 12 October 2007
ThanksNow it’s Q & A time
Friday, 12 October 2007
Friday, 12 October 2007