Visual Experience 360 Flex

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

http://www.slideshare.net	12
http://air-arulmurugant.blogspot.com	6
http://air-arulmurugant.blogspot.co.uk	1

Visual Experience 360 Flex

by Juan Sanchez

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 19

Statistics

Visual Experience 360 Flex Presentation Transcript