Flex User Group - Skinning Presentation

of 44 /44
Styling Adobe Flex 2 James Whittaker Friday, 12 October 2007

description

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

Transcript of Flex User Group - Skinning Presentation

Page 1: Flex User Group - Skinning Presentation

Styling Adobe Flex 2James Whittaker

Friday, 12 October 2007

Page 2: Flex User Group - Skinning Presentation

• 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

Page 3: Flex User Group - Skinning Presentation

Why bother styling ?

• Corporate branding

• Marketing

• Differentiate your application

• User experience & usability

• Remove any reference to Flex !

Friday, 12 October 2007

Page 4: Flex User Group - Skinning Presentation

Styling in the wild

Friday, 12 October 2007

Page 5: Flex User Group - Skinning Presentation

Volkswagen

http://www.vw.co.uk/used_cars/find

Friday, 12 October 2007

Page 6: Flex User Group - Skinning Presentation

Volkswagen

http://www.vw.co.uk/used_cars/find

Friday, 12 October 2007

Page 7: Flex User Group - Skinning Presentation

Virtual Ubiquity

http://www.virtualubiquity.com

Friday, 12 October 2007

Page 8: Flex User Group - Skinning Presentation

Virtual Ubiquity

http://www.virtualubiquity.com

Friday, 12 October 2007

Page 9: Flex User Group - Skinning Presentation

Virtual Ubiquity

http://www.virtualubiquity.com

Friday, 12 October 2007

Page 10: Flex User Group - Skinning Presentation

Scrapblog

http://www.scrapblog.com

Friday, 12 October 2007

Page 11: Flex User Group - Skinning Presentation

Scrapblog

http://www.scrapblog.com

Friday, 12 October 2007

Page 12: Flex User Group - Skinning Presentation

Sliderocket

http://www.sliderocket.com

Friday, 12 October 2007

Page 13: Flex User Group - Skinning Presentation

Sliderocket

http://www.sliderocket.com

Friday, 12 October 2007

Page 14: Flex User Group - Skinning Presentation

Sliderocket

http://www.sliderocket.com

Friday, 12 October 2007

Page 15: Flex User Group - Skinning Presentation

Nice, how can we get our apps to look that good ?

Friday, 12 October 2007

Page 16: Flex User Group - Skinning Presentation

What can we use ?

• Themes

• CSS

• Programmatic skins

• Graphical skins

• Custom components

Friday, 12 October 2007

Page 17: Flex User Group - Skinning Presentation

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

Page 18: Flex User Group - Skinning Presentation

The Halo theme

• Smart, corporate visual design

• Functional

• Visually complete for quick prototyping

• Use as an example & override

but...

Friday, 12 October 2007

Page 19: Flex User Group - Skinning Presentation

http://www.flickr.com/photos/dancunningham/

Friday, 12 October 2007

Page 20: Flex User Group - Skinning Presentation

! BORING !

http://www.flickr.com/photos/dancunningham/

Friday, 12 October 2007

Page 21: Flex User Group - Skinning Presentation

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

Page 22: Flex User Group - Skinning Presentation

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

Page 23: Flex User Group - Skinning Presentation

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

Page 24: Flex User Group - Skinning Presentation

Applying CSS

• To the whole application

• To components ( or custom components )

• Using class - selectors

Application {}

.rightButton {}

NewTextLabel {}

Friday, 12 October 2007

Page 25: Flex User Group - Skinning Presentation

Use the style explorer

http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

Friday, 12 October 2007

Page 26: Flex User Group - Skinning Presentation

Use the style explorer

http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

Friday, 12 October 2007

Page 27: Flex User Group - Skinning Presentation

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

Page 28: Flex User Group - Skinning Presentation

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

Page 29: Flex User Group - Skinning Presentation

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

Page 30: Flex User Group - Skinning Presentation

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

Page 31: Flex User Group - Skinning Presentation

HTML Text example

• Styled links with HTML behavior

• Not full HTML

• Can’t set styles with external CSS by default

Friday, 12 October 2007

Page 32: Flex User Group - Skinning Presentation

Skins

• Graphical ( SWF, PNG etc )

• Programmatic AS3 classes

• Applied using CSS

http://www.flickr.com/photos/youghal/

Friday, 12 October 2007

Page 33: Flex User Group - Skinning Presentation

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

Page 34: Flex User Group - Skinning Presentation

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

Page 35: Flex User Group - Skinning Presentation

Scale 9

Friday, 12 October 2007

Page 36: Flex User Group - Skinning Presentation

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

Page 37: Flex User Group - Skinning Presentation

example

Friday, 12 October 2007

Page 38: Flex User Group - Skinning Presentation

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

Page 39: Flex User Group - Skinning Presentation

General tips

Friday, 12 October 2007

Page 40: Flex User Group - Skinning Presentation

• 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

Page 41: Flex User Group - Skinning Presentation

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

Page 43: Flex User Group - Skinning Presentation

ThanksNow it’s Q & A time

Friday, 12 October 2007

Page 44: Flex User Group - Skinning Presentation

Friday, 12 October 2007