Title : Styling and Skinning By : Mohammed Khan

Agenda Styling Skinning Progressive Layout What’s Next?

Styling with CS3 and Flex 3 What do we set out to achieve

Styling with CS3 and Flex 3 Components Involved: Buttons Check Box Text Input Tools Required: Flex Builder 3 D

Components Involved:

Buttons

Check Box

Text Input

Tools Required:

Flex Builder 3

Component States Check Box Button

References Flex Style Explorer http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

Skinning using Illustrator CS3 and Flex 3 What are we going to achieve

Skinning using Illustrator CS3 and Flex 3 Components Involved: Buttons Check Box Text Input Panel Tools Combinations using Flex Skin Component: Adobe Illustrator CS3 with Flex 3 Adobe Flash CS3 with Flex 3 Adobe Fireworks CS3 with Flex 3 Adobe Photoshop CS3 with Flex 3 D

Components Involved:

Buttons

Check Box

Text Input

Panel

Tools Combinations using Flex Skin Component:

Adobe Illustrator CS3 with Flex 3

Adobe Flash CS3 with Flex 3

Adobe Fireworks CS3 with Flex 3

Adobe Photoshop CS3 with Flex 3

Skinning using Illustrator CS3 and Flex 3 Scale-9

References Flex Skin Design Extension http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins Blog on ADN by Narciso Jaramillo http://www.adobe.com/devnet/flex/articles/skins_styles.html Scale Nine http://www.scalenine.com

UI Performance : Progressive Layout Component Instantiation: First it loads and applies the components properties and sets up the internal state. Secondly, it determines the component size. Finally the component/container is sized and positioned.

Component Instantiation:

First it loads and applies the components properties and sets up the internal state.

Secondly, it determines the component size.

Finally the component/container is sized and positioned.

UI Performance : Progressive Layout Progressive Layout: creationPolicy : all, none, queued creationPolicy : containers only Simple Demo creationIndex Demo creationIndex with Nested Containers Demo D

Progressive Layout:

creationPolicy : all, none, queued

creationPolicy : containers only

Simple Demo

creationIndex Demo

creationIndex with Nested Containers Demo

NEXT Degrafa : Declarative Graphics Framework Thermo : A UI and component design tool Flash Player 10 : With 3D rendering capabilities

Degrafa : Declarative Graphics Framework

Thermo : A UI and component design tool

Flash Player 10 : With 3D rendering capabilities

Queries For any queries/suggestions, please visit : http://blogs.esberi.com THANK YOU