• Like
Visual Experience 360 Flex
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Visual Experience 360 Flex

  • 2,839 views
Published

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

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

Published in Technology , Art & Photos
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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 mitesh@clientdriveninnovation.com .And my application in Flex 3 so please send me action script code of this problem.Thank you
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,839
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
160
Comments
1
Likes
11

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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