Upload
juan-sanchez
View
6.130
Download
0
Embed Size (px)
DESCRIPTION
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
Citation preview
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