Flex User Group - Skinning Presentation
Upcoming SlideShare
Loading in...5
×
 

Flex User Group - Skinning Presentation

on

  • 9,902 views

A presentation for the Adobe Flex user group in the UK on Flex applications and skinning.

A presentation for the Adobe Flex user group in the UK on Flex applications and skinning.

Statistics

Views

Total Views
9,902
Slideshare-icon Views on SlideShare
9,809
Embed Views
93

Actions

Likes
12
Downloads
356
Comments
0

8 Embeds 93

http://www.jameswhittaker.com 80
http://www.jjlarrea.com 3
http://www.slideshare.net 3
http://www.e-presentations.us 2
http://www.slideee.com 2
http://bohramt.de 1
http://www.mehtanirav.com 1
http://www.fraggalonia.de 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Flex User Group - Skinning Presentation Flex User Group - Skinning Presentation Presentation Transcript

    • 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 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
    • http://www.flickr.com/photos/dancunningham/ ! BORING ! 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 Application { } • To components ( or custom components ) NewTextLabel { } • Using class - selectors.rightButton { } 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 { 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
    • 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
    • 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
    • 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 http://www.flickr.com/photos/youghal/ • Graphical ( SWF, PNG etc ) • Programmatic AS3 classes • Applied using CSS 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
    • Thanks Now it’s Q & A time Friday, 12 October 2007
    • Friday, 12 October 2007