Creating a Visual Experience
Theory + Strategy
360 Flex 08 14 2007

Juan Sanchez Interface Designer
modern brand architecture
www.atomiccurve.com
skins and themes for Flex™ and AIR™
www.scalenine.com
declarative graphics framework
www.degrafa.com
360 Flex 08 14 2007

Andy McIntosh Experience Architect
experience innovation
www.e ectiveui.com
rants, raves, thoughts, etc.
www.andymcintosh.com
declarative graphics framework
www.degrafa.com
360 Flex 08 14 2007

Why?
Brands your application
Create visual cues and connections
Fluid, more engaging interaction
Users will remember it
Text
Increased Usability

Example ScrapBlog
Text

Example ScrapBlog
Text

Example picnik
Text

Example picnik
Text

Overview
When and how to use:
styling
graphical and programmatic skinning
embedded fonts
icons, indicators and cursors
Text
bitmap lters
e ects and transitions

Styling
Styling is customizing the appearance of a component
by modifying a subset of its attributes
fonts icons padding
text Text
indicators alignment
formatting
cursors relative
colors positioning
skins
size states component
properties
absolute e ects
positioning event handlers

Applying Styles
Where and how:
within MXML Style tags <Style> </Style>
in CSS les <Style source=”main.css”>
with ActionScript setStyle();
Text
as MXML tag-attributes <Button color=”#FF0000” />
declarations can be packaged SWFs and loaded/
replaced at runtime

Applying Styles
Levels:
to all components (global)
per component-type (type-selector)
per instance (class-selector)
Text
as individual attributes

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)
Text
Borders for containers (borderSkin)
Various indicators (sortArrowSkin, headerSeparatorSkin)
Types:
graphical (bitmap or vector)
programmatic

Graphical Skinning
Graphical skins are embedded external assets, i.e., bitmap or vector
artwork.
Bitmap assets:
PNG, GIF, or JPEG format
subject to pixelation
Text
Vector assets:
SWF format (Flash and Illustrator)
less impact on total le size
can contain many skins in one le

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 statement
use 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 package
in updateDisplayList draw based on size and styles
Text
optionally de ne borderMetrics property

Graphical or Programmatic?
Text

Icons, Indicators & Cursors
Text
provide additional guidance and visual cues.
promote usability and discoverability.

Embedded Fonts
Embedded fonts:
display the same on all systems
can be rotated or semi-transparent
are easier to read and smoother with e ects
may be less legible at smaller sizes
Text
can signi cantly increase SWF le size
Fonts can be embedded by referencing:
A font installed on your system
A font le
A SWF le with an embedded font

Embedding Fonts with Flash
don’t have to be TrueType
OTF + TTF + ?
easily specify character ranges
Text
vs

Bitmap Filters
blur bevel shadow glow more...
Text
achieve additional depth in appearance
can be processor intensive
not bindable, must replace and redraw

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 parallel
E ects are triggered by events
Text
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.

Summary
styling
graphical and programmatic skinning
embedded fonts
icons, indicators and cursors
bitmap lters Text
e ects and transitions

What else is there?
Custom Components
Flex Component Kit for Flash CS3
Flex 3
CS3 Integration
Adobe MAX Conference Text

Resources : Styling & Skinning
Repeating Image Component Graphical Skinning : LiveDocs
Create repeating backgrounds How to use and create graphical skins
Building an Advanced UI Skinning & Styling
Graphical and Programmatic Skinning Presentation on Skinning and Styling
Understand Runtime CSS Programmatic Skinning
Implement runtime CSS Text
Programmatic Skinning on Live Docs
Flex Interface Customization ScaleNine
Using themes, styles and skins Skins, Themes, Resources & User
Interface Showcase
Creating Flex 2 Skins
Creating skins with Flash, Photoshop, Vecteezy
Illustrator and Fireworks Free vector artwork

Resources : Cool Stu
Flex 2 Style Explorer Filters Explorer
Create styles for your Flex applications Preview di erent lters for Flex
Style Explorer : Kuler Import Kuler
Use Kuler with the Style Explorer Color inspiration for your apps
Transitions & E ects Explorer Custom Easing Explorer
Experiment with Transitions & E ects Text custom easing functions
Create
Component Explorer Flex.org Showcase
Find the right component for the job Flex Application Showcase
Primitive Explorer
Dynamically Drawn Shapes

Resources : Fonts & Icons
FamFamFam Flash Fonts Library
IconFactory Adobe Type Showroom
StockIcons Fonts For Flash
GlyphLab Font Freak
Text
IconBu et OrgDot
InterfaceLift Veer
FastIcon Dafont
IconShock 1001 Free Fonts
IconFish

Files & Resources
Text
www.andymcintosh.com/360Flex/
www.andymcintosh.com/360Flex/

Creating a Visual Experience
Hands-on
360 Flex 08 14 2007

Before & After
Text

Nine Step Program
1. Set some application-wide styles
2. Stylize the TitleWindow
3. Graphically skin the close button
4. Graphically skin the TextInputs
5. Programmatically skin the Buttons
6. Text
Add an icon to the Sign In button
7. Embed the font
8. Add hide/show e ect
9. Create a transition