Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visual Experience 360 Flex


Published on

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

Published in: Technology, Art & Photos
  • Hi,I have an image and i want to remove white color from image.That removing color is same like its background color.If anybody have any idea of this problem please reply me on .And my application in Flex 3 so please send me action script code of this problem.Thank you
    Are you sure you want to  Yes  No
    Your message goes here

Visual Experience 360 Flex

  1. 1. Creating a Visual Experience Theory + Strategy 360 Flex 08 14 2007
  2. 2. Juan Sanchez Interface Designer modern brand architecture skins and themes for Flex™ and AIR™ declarative graphics framework 360 Flex 08 14 2007
  3. 3. Andy McIntosh Experience Architect experience innovation www.e rants, raves, thoughts, etc. declarative graphics framework 360 Flex 08 14 2007
  4. 4. Why? Brands your application Create visual cues and connections Fluid, more engaging interaction Users will remember it Text Increased Usability
  5. 5. Example ScrapBlog Text
  6. 6. Example ScrapBlog Text
  7. 7. Example picnik Text
  8. 8. Example picnik Text
  9. 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. 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. 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. 12. Applying Styles Levels: to all components (global) per component-type (type-selector) per instance (class-selector) Text as individual attributes
  13. 13. Style Precedence Text
  14. 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. 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. 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. 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. 18. Graphical or Programmatic? Text
  19. 19. Icons, Indicators & Cursors Text provide additional guidance and visual cues. promote usability and discoverability.
  20. 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. 21. Embedding Fonts with Flash don’t have to be TrueType OTF + TTF + ? easily specify character ranges Text vs
  22. 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. 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. 24. Summary styling graphical and programmatic skinning embedded fonts icons, indicators and cursors bitmap lters Text e ects and transitions
  25. 25. What else is there? Custom Components Flex Component Kit for Flash CS3 Flex 3 CS3 Integration Adobe MAX Conference Text
  26. 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. 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 Showcase Find the right component for the job Flex Application Showcase Primitive Explorer Dynamically Drawn Shapes
  28. 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. 29. Files & Resources Text
  30. 30. Creating a Visual Experience Hands-on 360 Flex 08 14 2007
  31. 31. Before & After Text
  32. 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