SlideShare a Scribd company logo
1 of 32
Download to read offline
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 ScrapBlog




                    Text
Example picnik




                 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

More Related Content

What's hot

ED CONNOR RESUME 2013
ED CONNOR RESUME 2013ED CONNOR RESUME 2013
ED CONNOR RESUME 2013Edward Connor
 
From Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holesFrom Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holesPatric Lanhed
 
Forge - DevCon 2017, Darmstadt Germany: Forge AR-VR-MR experiments
Forge - DevCon 2017, Darmstadt Germany: Forge AR-VR-MR experimentsForge - DevCon 2017, Darmstadt Germany: Forge AR-VR-MR experiments
Forge - DevCon 2017, Darmstadt Germany: Forge AR-VR-MR experimentsAutodesk
 
It presentation specialised application software
It presentation specialised application softwareIt presentation specialised application software
It presentation specialised application softwareNisarga Nikam
 
Forge - DevCon 2017, Darmstadt Germany: Moving to Forge and the Cloud with yo...
Forge - DevCon 2017, Darmstadt Germany: Moving to Forge and the Cloud with yo...Forge - DevCon 2017, Darmstadt Germany: Moving to Forge and the Cloud with yo...
Forge - DevCon 2017, Darmstadt Germany: Moving to Forge and the Cloud with yo...Autodesk
 
Windows 8 App Developer Day
Windows 8 App Developer DayWindows 8 App Developer Day
Windows 8 App Developer DayPatric Boscolo
 
Harnessing the Power of Customer Feedback
Harnessing the Power of Customer FeedbackHarnessing the Power of Customer Feedback
Harnessing the Power of Customer FeedbackAutodesk
 
Forge - DevCon 2017, Darmstadt Germany: Control & program a real robot by man...
Forge - DevCon 2017, Darmstadt Germany: Control & program a real robot by man...Forge - DevCon 2017, Darmstadt Germany: Control & program a real robot by man...
Forge - DevCon 2017, Darmstadt Germany: Control & program a real robot by man...Autodesk
 

What's hot (9)

ED CONNOR RESUME 2013
ED CONNOR RESUME 2013ED CONNOR RESUME 2013
ED CONNOR RESUME 2013
 
From Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holesFrom Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holes
 
Forge - DevCon 2017, Darmstadt Germany: Forge AR-VR-MR experiments
Forge - DevCon 2017, Darmstadt Germany: Forge AR-VR-MR experimentsForge - DevCon 2017, Darmstadt Germany: Forge AR-VR-MR experiments
Forge - DevCon 2017, Darmstadt Germany: Forge AR-VR-MR experiments
 
It presentation specialised application software
It presentation specialised application softwareIt presentation specialised application software
It presentation specialised application software
 
Arc+ EXEcutive 2010
Arc+ EXEcutive 2010Arc+ EXEcutive 2010
Arc+ EXEcutive 2010
 
Forge - DevCon 2017, Darmstadt Germany: Moving to Forge and the Cloud with yo...
Forge - DevCon 2017, Darmstadt Germany: Moving to Forge and the Cloud with yo...Forge - DevCon 2017, Darmstadt Germany: Moving to Forge and the Cloud with yo...
Forge - DevCon 2017, Darmstadt Germany: Moving to Forge and the Cloud with yo...
 
Windows 8 App Developer Day
Windows 8 App Developer DayWindows 8 App Developer Day
Windows 8 App Developer Day
 
Harnessing the Power of Customer Feedback
Harnessing the Power of Customer FeedbackHarnessing the Power of Customer Feedback
Harnessing the Power of Customer Feedback
 
Forge - DevCon 2017, Darmstadt Germany: Control & program a real robot by man...
Forge - DevCon 2017, Darmstadt Germany: Control & program a real robot by man...Forge - DevCon 2017, Darmstadt Germany: Control & program a real robot by man...
Forge - DevCon 2017, Darmstadt Germany: Control & program a real robot by man...
 

Viewers also liked

Netflix Presentation
Netflix PresentationNetflix Presentation
Netflix Presentationsmiths05
 
7 Ways Brands Will Transform TV and Media Strategies in 2017
7 Ways Brands Will Transform TV and Media Strategies in 20177 Ways Brands Will Transform TV and Media Strategies in 2017
7 Ways Brands Will Transform TV and Media Strategies in 2017iQ Media
 
'The Collective' Marketing Strategy for NUVO TV
'The Collective' Marketing Strategy for NUVO TV'The Collective' Marketing Strategy for NUVO TV
'The Collective' Marketing Strategy for NUVO TVTom Van Wie
 
Room214 Sample Research: TV & Entertainment
Room214 Sample Research: TV & EntertainmentRoom214 Sample Research: TV & Entertainment
Room214 Sample Research: TV & EntertainmentRoom 214
 
Social media on tv survey
Social media on tv surveySocial media on tv survey
Social media on tv surveyConvierte Más
 
Netflix and Containers: Not Stranger Things
Netflix and Containers: Not Stranger ThingsNetflix and Containers: Not Stranger Things
Netflix and Containers: Not Stranger ThingsAll Things Open
 
Direc tv – digital strategy
Direc tv – digital strategyDirec tv – digital strategy
Direc tv – digital strategyRj Shelton
 
Case Study on 360 degree marketing (Zindagi Na Milegi Dobara)
Case Study on 360 degree marketing (Zindagi Na Milegi Dobara)Case Study on 360 degree marketing (Zindagi Na Milegi Dobara)
Case Study on 360 degree marketing (Zindagi Na Milegi Dobara)Amrita Beri
 
Market Analysis on Netflix
Market Analysis on NetflixMarket Analysis on Netflix
Market Analysis on NetflixTapan Desai
 
Netflix Promotional Campaign
Netflix Promotional CampaignNetflix Promotional Campaign
Netflix Promotional Campaignashleyphenix
 
Ericsson ConsumerLab, annual TV & Media report 2015 - Presentation
Ericsson ConsumerLab, annual TV & Media report 2015 - PresentationEricsson ConsumerLab, annual TV & Media report 2015 - Presentation
Ericsson ConsumerLab, annual TV & Media report 2015 - PresentationEricsson
 
Content Marketing: A 360 Degree Approach
Content Marketing: A 360 Degree ApproachContent Marketing: A 360 Degree Approach
Content Marketing: A 360 Degree ApproachSearch Engine Journal
 
Stranger Things: The Forces that Disrupt Netflix
Stranger Things: The Forces that Disrupt NetflixStranger Things: The Forces that Disrupt Netflix
Stranger Things: The Forces that Disrupt NetflixC4Media
 
360 Degree Marketing in a Digital World
360 Degree Marketing in a Digital World360 Degree Marketing in a Digital World
360 Degree Marketing in a Digital WorldOgilvy
 
Sleeping Giants: Digital Awakens TV and Media
Sleeping Giants: Digital Awakens TV and MediaSleeping Giants: Digital Awakens TV and Media
Sleeping Giants: Digital Awakens TV and MediaRazorfish
 

Viewers also liked (20)

OM: TV and Media
OM: TV and MediaOM: TV and Media
OM: TV and Media
 
Netflix Presentation
Netflix PresentationNetflix Presentation
Netflix Presentation
 
Stranger things
Stranger thingsStranger things
Stranger things
 
stranger things
stranger thingsstranger things
stranger things
 
7 Ways Brands Will Transform TV and Media Strategies in 2017
7 Ways Brands Will Transform TV and Media Strategies in 20177 Ways Brands Will Transform TV and Media Strategies in 2017
7 Ways Brands Will Transform TV and Media Strategies in 2017
 
'The Collective' Marketing Strategy for NUVO TV
'The Collective' Marketing Strategy for NUVO TV'The Collective' Marketing Strategy for NUVO TV
'The Collective' Marketing Strategy for NUVO TV
 
Netflix
NetflixNetflix
Netflix
 
Room214 Sample Research: TV & Entertainment
Room214 Sample Research: TV & EntertainmentRoom214 Sample Research: TV & Entertainment
Room214 Sample Research: TV & Entertainment
 
Social media on tv survey
Social media on tv surveySocial media on tv survey
Social media on tv survey
 
Netflix and Containers: Not Stranger Things
Netflix and Containers: Not Stranger ThingsNetflix and Containers: Not Stranger Things
Netflix and Containers: Not Stranger Things
 
Direc tv – digital strategy
Direc tv – digital strategyDirec tv – digital strategy
Direc tv – digital strategy
 
Case Study on 360 degree marketing (Zindagi Na Milegi Dobara)
Case Study on 360 degree marketing (Zindagi Na Milegi Dobara)Case Study on 360 degree marketing (Zindagi Na Milegi Dobara)
Case Study on 360 degree marketing (Zindagi Na Milegi Dobara)
 
Mobile Media and TV
Mobile Media and TVMobile Media and TV
Mobile Media and TV
 
Market Analysis on Netflix
Market Analysis on NetflixMarket Analysis on Netflix
Market Analysis on Netflix
 
Netflix Promotional Campaign
Netflix Promotional CampaignNetflix Promotional Campaign
Netflix Promotional Campaign
 
Ericsson ConsumerLab, annual TV & Media report 2015 - Presentation
Ericsson ConsumerLab, annual TV & Media report 2015 - PresentationEricsson ConsumerLab, annual TV & Media report 2015 - Presentation
Ericsson ConsumerLab, annual TV & Media report 2015 - Presentation
 
Content Marketing: A 360 Degree Approach
Content Marketing: A 360 Degree ApproachContent Marketing: A 360 Degree Approach
Content Marketing: A 360 Degree Approach
 
Stranger Things: The Forces that Disrupt Netflix
Stranger Things: The Forces that Disrupt NetflixStranger Things: The Forces that Disrupt Netflix
Stranger Things: The Forces that Disrupt Netflix
 
360 Degree Marketing in a Digital World
360 Degree Marketing in a Digital World360 Degree Marketing in a Digital World
360 Degree Marketing in a Digital World
 
Sleeping Giants: Digital Awakens TV and Media
Sleeping Giants: Digital Awakens TV and MediaSleeping Giants: Digital Awakens TV and Media
Sleeping Giants: Digital Awakens TV and Media
 

Similar to Visual Experience 360 Flex

Adobe fireworks cs5 [old version]
Adobe fireworks cs5 [old version]Adobe fireworks cs5 [old version]
Adobe fireworks cs5 [old version]Kimetenthray
 
Visual Experiences with flex 4
Visual Experiences with flex 4Visual Experiences with flex 4
Visual Experiences with flex 4Saurabh Narula
 
Flex 4 Deep Dive
Flex 4 Deep DiveFlex 4 Deep Dive
Flex 4 Deep DiveEffective
 
Flex 4 Deep Dive
Flex 4 Deep DiveFlex 4 Deep Dive
Flex 4 Deep DiveEffectiveUI
 
Exploring Adobe Flex
Exploring Adobe Flex Exploring Adobe Flex
Exploring Adobe Flex senthil0809
 
Flex And Ria
Flex And RiaFlex And Ria
Flex And Riaravinxg
 
Share point 2010-uiimprovements
Share point 2010-uiimprovementsShare point 2010-uiimprovements
Share point 2010-uiimprovementsLiquidHub
 
Business Strategies for Content Management - Part 3: Publishing Web Content U...
Business Strategies for Content Management - Part 3: Publishing Web Content U...Business Strategies for Content Management - Part 3: Publishing Web Content U...
Business Strategies for Content Management - Part 3: Publishing Web Content U...TJ O'Connor
 
Wiring the Web
Wiring the WebWiring the Web
Wiring the Webgoodfriday
 
Flex 4 Overview
Flex 4 OverviewFlex 4 Overview
Flex 4 OverviewRJ Owen
 
Simon Brown: Software Architecture as Code at I T.A.K.E. Unconference 2015
Simon Brown: Software Architecture as Code at I T.A.K.E. Unconference 2015Simon Brown: Software Architecture as Code at I T.A.K.E. Unconference 2015
Simon Brown: Software Architecture as Code at I T.A.K.E. Unconference 2015Mozaic Works
 
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...John Hartley
 
Designing Optimized Symbols for InduSoft Web Studio Projects
Designing Optimized Symbols for InduSoft Web Studio ProjectsDesigning Optimized Symbols for InduSoft Web Studio Projects
Designing Optimized Symbols for InduSoft Web Studio ProjectsAVEVA
 
Not Just Better, Faster - Expression and Sketchflow
Not Just Better, Faster - Expression and SketchflowNot Just Better, Faster - Expression and Sketchflow
Not Just Better, Faster - Expression and SketchflowMS Innovation Days
 
An Overview Of Silverlight 2
An Overview Of Silverlight 2An Overview Of Silverlight 2
An Overview Of Silverlight 2Clint Edmonson
 
Requirement Gathering & Rapid Prototyping
Requirement Gathering & Rapid PrototypingRequirement Gathering & Rapid Prototyping
Requirement Gathering & Rapid PrototypingAurobindo Nayak
 
Vb6.0 Introduction
Vb6.0 IntroductionVb6.0 Introduction
Vb6.0 IntroductionTennyson
 
Intro To Flex Typography 360|Flex
Intro To Flex Typography 360|FlexIntro To Flex Typography 360|Flex
Intro To Flex Typography 360|FlexMatt Guest
 

Similar to Visual Experience 360 Flex (20)

Adobe fireworks cs5 [old version]
Adobe fireworks cs5 [old version]Adobe fireworks cs5 [old version]
Adobe fireworks cs5 [old version]
 
Visual Experiences with flex 4
Visual Experiences with flex 4Visual Experiences with flex 4
Visual Experiences with flex 4
 
Flex 4 Deep Dive
Flex 4 Deep DiveFlex 4 Deep Dive
Flex 4 Deep Dive
 
Flex 4 Deep Dive
Flex 4 Deep DiveFlex 4 Deep Dive
Flex 4 Deep Dive
 
Exploring Adobe Flex
Exploring Adobe Flex Exploring Adobe Flex
Exploring Adobe Flex
 
Flex And Ria
Flex And RiaFlex And Ria
Flex And Ria
 
Flex RIA
Flex RIAFlex RIA
Flex RIA
 
Real Estate in Hyderabad
Real Estate in HyderabadReal Estate in Hyderabad
Real Estate in Hyderabad
 
Share point 2010-uiimprovements
Share point 2010-uiimprovementsShare point 2010-uiimprovements
Share point 2010-uiimprovements
 
Business Strategies for Content Management - Part 3: Publishing Web Content U...
Business Strategies for Content Management - Part 3: Publishing Web Content U...Business Strategies for Content Management - Part 3: Publishing Web Content U...
Business Strategies for Content Management - Part 3: Publishing Web Content U...
 
Wiring the Web
Wiring the WebWiring the Web
Wiring the Web
 
Flex 4 Overview
Flex 4 OverviewFlex 4 Overview
Flex 4 Overview
 
Simon Brown: Software Architecture as Code at I T.A.K.E. Unconference 2015
Simon Brown: Software Architecture as Code at I T.A.K.E. Unconference 2015Simon Brown: Software Architecture as Code at I T.A.K.E. Unconference 2015
Simon Brown: Software Architecture as Code at I T.A.K.E. Unconference 2015
 
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
 
Designing Optimized Symbols for InduSoft Web Studio Projects
Designing Optimized Symbols for InduSoft Web Studio ProjectsDesigning Optimized Symbols for InduSoft Web Studio Projects
Designing Optimized Symbols for InduSoft Web Studio Projects
 
Not Just Better, Faster - Expression and Sketchflow
Not Just Better, Faster - Expression and SketchflowNot Just Better, Faster - Expression and Sketchflow
Not Just Better, Faster - Expression and Sketchflow
 
An Overview Of Silverlight 2
An Overview Of Silverlight 2An Overview Of Silverlight 2
An Overview Of Silverlight 2
 
Requirement Gathering & Rapid Prototyping
Requirement Gathering & Rapid PrototypingRequirement Gathering & Rapid Prototyping
Requirement Gathering & Rapid Prototyping
 
Vb6.0 Introduction
Vb6.0 IntroductionVb6.0 Introduction
Vb6.0 Introduction
 
Intro To Flex Typography 360|Flex
Intro To Flex Typography 360|FlexIntro To Flex Typography 360|Flex
Intro To Flex Typography 360|Flex
 

Recently uploaded

AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 

Recently uploaded (20)

AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 

Visual Experience 360 Flex

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