These slides are from a presentation given at 360|Flex covering ways of customizing your Adobe Flex application. For more information on the topic, check out the book at http://www.cveflex.com

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

2. 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

3. 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

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

5. Example ScrapBlog
Text

6. Example ScrapBlog
Text

7. Example picnik
Text

8. Example picnik
Text

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

10. 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

11. 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

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

13. Style Precedence
Text

14. 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

15. 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

16. 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

17. 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

18. Graphical or Programmatic?
Text

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

20. 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

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

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

23. 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.

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

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

26. 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

27. 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

28. 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

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

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

31. Before & After
Text

32. 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