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/ďŹnd
Friday, 12 October 2007
6. Volkswagen
http://www.vw.co.uk/used_cars/ďŹnd
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 ďŹle
⢠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/ďŹex2/consulting/styleexplorer/Flex2StyleExplorer.html
Friday, 12 October 2007
26. Use the style explorer
http://examples.adobe.com/ďŹex2/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 ďŹ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
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 ďŹle size
⢠Only one ďŹle
⢠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 speciďŹed 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 ďŹle 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://ďŹexdeveloper.eu/fuguk
http://www.jameswhittaker.com
Friday, 12 October 2007
43. Thanks
Now itâs Q & A time
Friday, 12 October 2007