360 Flex 08 14 2007

Creating a Visual ExperienceTheory + Strategy

360 Flex 08 14 2007

Juan Sanchez Interface Designer

www.atomiccurve.com

modern brand architecture

www.scalenine.com

skins and themes for Flex™ and AIR™

www.degrafa.com

declarative graphics framework

360 Flex 08 14 2007

Andy McIntosh Experience Architect

www.e!ectiveui.com

experience innovation

www.andymcintosh.com

rants, raves, thoughts, etc.

www.degrafa.com

declarative graphics framework

Text

Why?

Brands your applicationCreate visual cues and connectionsFluid, more engaging interactionUsers will remember itIncreased Usability

Text

Example ScrapBlog

Text

Example ScrapBlog

Text

Example picnik

Text

Example picnik

Text

When and how to use:stylinggraphical and programmatic skinningembedded fontsicons, indicators and cursorsbitmap "lterse!ects and transitions

Overview

Text

Styling

Styling is customizing the appearance of a component by modifying a subset of its attributes

fonts

text formattingcolors

icons

indicators

cursors

skins

padding

alignment

relative positioning

size

absolute positioning

states

e!ects

event handlers

component properties

Text

Applying Styles

Where and how:within MXML Style tags <Style> </Style>

in CSS "les <Style source=”main.css”>

with ActionScript setStyle();

as MXML tag-attributes <Button color=”#FF0000” />

declarations can be packaged SWFs and loaded/

replaced at runtime

Text

Applying Styles

Levels:to all components (global)

per component-type (type-selector)

per instance (class-selector)

as individual attributes

Text

Style Precedence

Text

Skinning Overview

Skinning is customizing the appearance of a component by modifying or replacing its visual elements. Skinning is the key to creating truly unique looking applications.

Skinnable elements:States for controls (upSkin, overSkin)Borders for containers (borderSkin)Various indicators (sortArrowSkin, headerSeparatorSkin)

Types:graphical (bitmap or vector)programmatic

Text

Graphical Skinning

Graphical skins are embedded external assets, i.e., bitmap or vector artwork.

Bitmap assets:PNG, GIF, or JPEG formatsubject to pixelation

Vector assets:SWF format (Flash and Illustrator)less impact on total "le sizecan contain many skins in one "le

Text

Using Scale-9

Scale-9 allows graphical skins to scale without distortion by specifying nine sections that scale independently

De!ne scale-9 grid:specify scaleGridTop/Left/Bottom/Right in the embed statementuse visual guides in Flash or Illustrator

Text

Programmatic Skinning

Programmatic skins are classes that de!ne dynamic visuals using the Drawing API methods

Creating a programmatic skin:extend a class from the mx.skins packagein updateDisplayList draw based on size and stylesoptionally de"ne borderMetrics property

Text

Graphical or Programmatic?

Text

Icons, Indicators & Cursors

provide additional guidance and visual cues.promote usability and discoverability.

Text

Embedded Fonts

Embedded fonts:display the same on all systems can be rotated or semi-transparentare easier to read and smoother with e!ectsmay be less legible at smaller sizescan signi"cantly increase SWF "le size

Fonts can be embedded by referencing:A font installed on your systemA font "leA SWF "le with an embedded font

Text

Embedding Fonts with Flash

don’t have to be TrueType

easily specify character ranges

OTF TTF+ + ?

vs

Text

Bitmap Filters

achieve additional depth in appearancecan be processor intensivenot bindable, must replace and redraw

blur bevel shadow glow more...

Text

E!ects & Transitions

An e!ect is a change to a components appearance over time.Compound e!ects can be applied to a component and executed sequentially or in parallelE!ects are triggered by events

Transitions are grouped e"ects that allow for smooth visual changes between states

Can help a user maintain context so they know where they came from and what to expect when they go back

Achieve additional depth in appearance.

Text

Summary

stylinggraphical and programmatic skinningembedded fontsicons, indicators and cursorsbitmap "lterse!ects and transitions

Text

What else is there?

Custom ComponentsFlex Component Kit for Flash CS3Flex 3CS3 IntegrationAdobe MAX Conference

Text

Resources : Styling & Skinning

Repeating Image ComponentCreate repeating backgrounds

Building an Advanced UIGraphical and Programmatic Skinning

Understand Runtime CSSImplement runtime CSS

Flex Interface CustomizationUsing themes, styles and skins

Creating Flex 2 SkinsCreating skins with Flash, Photoshop,Illustrator and Fireworks

Graphical Skinning : LiveDocsHow to use and create graphical skins

Skinning & StylingPresentation on Skinning and Styling

Programmatic SkinningProgrammatic Skinning on Live Docs

ScaleNineSkins, Themes, Resources & User Interface Showcase

VecteezyFree vector artwork

Text

Resources : Cool Stu!

Flex 2 Style ExplorerCreate styles for your Flex applications

Style Explorer : Kuler ImportUse Kuler with the Style Explorer

Transitions & E!ects ExplorerExperiment with Transitions & E!ects

Component ExplorerFind the right component for the job

Primitive ExplorerDynamically Drawn Shapes

Filters ExplorerPreview di!erent "lters for Flex

KulerColor inspiration for your apps

Custom Easing ExplorerCreate custom easing functions

Flex.org ShowcaseFlex Application Showcase

Text

Resources : Fonts & Icons

FamFamFam

IconFactory

StockIcons

GlyphLab

IconBu!et

InterfaceLift

FastIcon

IconShock

IconFish

Flash Fonts Library

Adobe Type Showroom

Fonts For Flash

Font Freak

OrgDot

Veer

Dafont

1001 Free Fonts

Text

Files & Resources

www.andymcintosh.com/360Flex/www.andymcintosh.com/360Flex/

360 Flex 08 14 2007

Creating a Visual ExperienceHands-on

Text

Before & After

Text

Nine Step Program

1. Set some application-wide styles2. Stylize the TitleWindow3. Graphically skin the close button4. Graphically skin the TextInputs5. Programmatically skin the Buttons6. Add an icon to the Sign In button7. Embed the font8. Add hide/show e"ect9. Create a transition