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. Why bother styling ?
• Corporate branding
• Marketing
• Differentiate your application
• User experience & usability
• Remove any reference to Flex !
Friday, 12 October 2007
5. Volkswagen
http://www.vw.co.uk/used_cars/find
Friday, 12 October 2007
6. Volkswagen
http://www.vw.co.uk/used_cars/find
Friday, 12 October 2007
7. Virtual Ubiquity
http://www.virtualubiquity.com
Friday, 12 October 2007
8. Virtual Ubiquity
http://www.virtualubiquity.com
Friday, 12 October 2007
9. Virtual Ubiquity
http://www.virtualubiquity.com
Friday, 12 October 2007
10. Scrapblog
http://www.scrapblog.com
Friday, 12 October 2007
11. Scrapblog
http://www.scrapblog.com
Friday, 12 October 2007
12. Sliderocket
http://www.sliderocket.com
Friday, 12 October 2007
13. Sliderocket
http://www.sliderocket.com
Friday, 12 October 2007
14. Sliderocket
http://www.sliderocket.com
Friday, 12 October 2007
15. Nice, how can we get our
apps to look that good ?
Friday, 12 October 2007
16. What can we use ?
• Themes
• CSS
• Programmatic skins
• Graphical skins
• Custom components
Friday, 12 October 2007
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. The Halo theme
• Smart, corporate visual design
• Functional
• Visually complete for quick prototyping
• Use as an example & override
but...
Friday, 12 October 2007
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. 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. 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. Applying CSS
• To the whole application Application {
}
• To components ( or custom components ) NewTextLabel {
}
• Using class - selectors.rightButton {
}
Friday, 12 October 2007
25. Use the style explorer
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html
Friday, 12 October 2007
26. Use the style explorer
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html
Friday, 12 October 2007
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. 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. 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. 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. HTML Text example
• Styled links with HTML behavior
• Not full HTML
• Can’t set styles with external CSS by default
Friday, 12 October 2007
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. 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
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
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
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
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. Thanks
Now it’s Q & A time
Friday, 12 October 2007
