SlideShare uma empresa Scribd logo
1 de 24
Interaction Design
in the Designer’s
Hands

Ryan Stewart
Twitter: @ryanstewart
ryan@adobe.com
Welcome to the world of RIAs
Welcome to the world of RIAs




        Widgets                Consumer   Business
       Advertising               Tools     Apps




                                           Social
         Video                  Games
                                           Apps
Differences in Designing RIAs




            Static Design versus Interaction Design
What the Designer Creates
What the Developer Sees
Components as the building blocks


                                    • One of the bene   ts of RIAs is a very rich
                                    component set

                                    • The components allow us to build
                                    customized, sophisticated user interfaces
                                    beyond what HTML provides

                                    • Developers often start by thinking about
                                    which components to use in an application
                                    or user interface.

                                    • The problem is that it’s very hard to
                                    design around those components.

                                    •Designers don’t think about components,
                                    they think about art and user experience.
Flash Catalyst

A professional interaction
design tool for rapidly
creating the user experience
of applications and
interactive content without
coding
Outputs from Flash Catalyst




 Interaction
  Designer
Outputs from Flash Catalyst



                                         •   Wireframes

                                         •   Interactive design comps

                                         •   Self-contained Flash sites
                              Customer




 Interaction
  Designer
Outputs from Flash Catalyst



                                          •   Wireframes

                                          •   Interactive design comps

                                          •   Self-contained Flash sites
                              Customer



                                          •   Flex Project (FXP)
 Interaction
  Designer
                                              •   MXML

                                              •   ActionScript

                                              •   Component skins
                              Developer
                                              •   Graphical assets
Demo:
Wireframing Work ow
The current work ow




    Visual            Interaction
                                    Developer
   Designer            Designer
The “Next” work ow




    Visual           Interaction
                                   Developer
   Designer           Designer
The “Next” work ow in detail




     Visual                    Interaction
    Designer                    Designer
The “Next” work ow in detail




                     • Start with a comp in CS4 design tool




     Visual                                                   Interaction
    Designer                                                   Designer
The “Next” work ow in detail




                     • Start with a comp in CS4 design tool
                     • Import into Flash Catalyst with full
                       delity



     Visual                                                   Interaction
    Designer                                                   Designer
The “Next” work ow in detail




                     • Start with a comp in CS4 design tool
                     • Import into Flash Catalyst with full
                       delity

                     • Convert artwork into components
     Visual                                                   Interaction
    Designer                                                   Designer
The “Next” work ow in detail




                     • Start with a comp in CS4 design tool
                     • Import into Flash Catalyst with full
                       delity

                     • Convert artwork into components
     Visual          • De ne states, interaction and          Interaction
    Designer          animation                                Designer
The “Next” work ow in detail




                     • Start with a comp in CS4 design tool
                     • Import into Flash Catalyst with full
                       delity

                     • Convert artwork into components
     Visual          • De ne states, interaction and          Interaction
    Designer          animation                                Designer

                     • Roundtrip to make re   nements to
                      graphical elements
Demo:
Designing a commerce site
Declarative graphics

                                MXML graphics library providing rich primitive
                     t hs       support - shapes, paths, lls, lters, transformations
  Shapes           Pa
                                <Ellipse y="46" height="144" width="144" x="86">
                                     < ll>
                                          <SolidColor color="0x9ab3e2"/>
                                     </ ll>
                                     <stroke>
 Fills & Strokes      Filters             <SolidColorStroke color="0x0a35aa" caps="none"
                                joints="miter" miterLimit="4" weight="4"/>
                                     </stroke>
                                </Ellipse>
Declarative graphics

                                          MXML graphics library providing rich primitive
                      t hs                support - shapes, paths, lls, lters, transformations
   Shapes           Pa
                                          <Ellipse y="46" height="144" width="144" x="86">
                                               < ll>
                                                    <SolidColor color="0x9ab3e2"/>
                                               </ ll>
                                               <stroke>
  Fills & Strokes      Filters                      <SolidColorStroke color="0x0a35aa" caps="none"
                                          joints="miter" miterLimit="4" weight="4"/>
                                               </stroke>
                                          </Ellipse>



FXG is an interchange format based on MXML
graphics

Closely matches the Flash Player rendering model

Static - no binding support, scripting,
event handlers, etc
Further information




• Adobe Labs:
  http://labs.adobe.com/

• Adobe Developer Connection:
  http://www.adobe.com/devnet/

• My blog:
  http://blog.digitalbackcountry.com

Mais conteúdo relacionado

Semelhante a DelveNYC: Flash Catalyst

Wintellect - Windows 8 for the Silverlight and WPF Developer
Wintellect   - Windows 8 for the Silverlight and WPF DeveloperWintellect   - Windows 8 for the Silverlight and WPF Developer
Wintellect - Windows 8 for the Silverlight and WPF DeveloperJeremy Likness
 
Best Prototyping Tools for UI UX Designers
Best Prototyping Tools for UI UX DesignersBest Prototyping Tools for UI UX Designers
Best Prototyping Tools for UI UX DesignersYellowSlice1
 
Flash Catalyst at Flex Camp Orange County
Flash Catalyst at Flex Camp Orange CountyFlash Catalyst at Flex Camp Orange County
Flash Catalyst at Flex Camp Orange CountyJuan Sanchez
 
Responsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreResponsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreWendy Fischer
 
Web Design Course Srigsystems
Web Design Course SrigsystemsWeb Design Course Srigsystems
Web Design Course SrigsystemsSriG Systems
 
Adobe Flash Professional with CreateJS
Adobe Flash Professional with CreateJSAdobe Flash Professional with CreateJS
Adobe Flash Professional with CreateJSJoseph Labrecque
 
MWLUG 2015 - An Introduction to MVC
MWLUG 2015 - An Introduction to MVCMWLUG 2015 - An Introduction to MVC
MWLUG 2015 - An Introduction to MVCUlrich Krause
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptxNishchaiyaBayla1
 
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017Marc D Anderson
 
silverlight1.pptx
silverlight1.pptxsilverlight1.pptx
silverlight1.pptxAltafSMT
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013Marc D Anderson
 
An Introduction To Model  View  Controller In XPages
An Introduction To Model  View  Controller In XPagesAn Introduction To Model  View  Controller In XPages
An Introduction To Model  View  Controller In XPagesUlrich Krause
 
Deep Dive: Amazon Lumberyard & Amazon GameLift
Deep Dive: Amazon Lumberyard & Amazon GameLiftDeep Dive: Amazon Lumberyard & Amazon GameLift
Deep Dive: Amazon Lumberyard & Amazon GameLiftAmazon Web Services
 
Putting together a web app
Putting together a web appPutting together a web app
Putting together a web appRyan Lou
 
Tools And Tips For Web Designer To Create Effective Web Site
Tools And Tips For Web Designer To Create Effective Web SiteTools And Tips For Web Designer To Create Effective Web Site
Tools And Tips For Web Designer To Create Effective Web SiteEric Lewis
 
How To Express Your Creative Self With Windows Presentation Foundation And Si...
How To Express Your Creative Self With Windows Presentation Foundation And Si...How To Express Your Creative Self With Windows Presentation Foundation And Si...
How To Express Your Creative Self With Windows Presentation Foundation And Si...guest83d3e0
 

Semelhante a DelveNYC: Flash Catalyst (20)

Silverlight 5
Silverlight 5Silverlight 5
Silverlight 5
 
Wintellect - Windows 8 for the Silverlight and WPF Developer
Wintellect   - Windows 8 for the Silverlight and WPF DeveloperWintellect   - Windows 8 for the Silverlight and WPF Developer
Wintellect - Windows 8 for the Silverlight and WPF Developer
 
Best Prototyping Tools for UI UX Designers
Best Prototyping Tools for UI UX DesignersBest Prototyping Tools for UI UX Designers
Best Prototyping Tools for UI UX Designers
 
Jumpstart Your Web App
Jumpstart Your Web AppJumpstart Your Web App
Jumpstart Your Web App
 
Flash Catalyst at Flex Camp Orange County
Flash Catalyst at Flex Camp Orange CountyFlash Catalyst at Flex Camp Orange County
Flash Catalyst at Flex Camp Orange County
 
Responsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit ScoreResponsive Design for SavvyMoney Credit Score
Responsive Design for SavvyMoney Credit Score
 
Xtext, diagrams and ux
Xtext, diagrams and uxXtext, diagrams and ux
Xtext, diagrams and ux
 
Web Design Course Srigsystems
Web Design Course SrigsystemsWeb Design Course Srigsystems
Web Design Course Srigsystems
 
Adobe Flash Professional with CreateJS
Adobe Flash Professional with CreateJSAdobe Flash Professional with CreateJS
Adobe Flash Professional with CreateJS
 
MWLUG 2015 - An Introduction to MVC
MWLUG 2015 - An Introduction to MVCMWLUG 2015 - An Introduction to MVC
MWLUG 2015 - An Introduction to MVC
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptx
 
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
 
silverlight1.pptx
silverlight1.pptxsilverlight1.pptx
silverlight1.pptx
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
 
An Introduction To Model  View  Controller In XPages
An Introduction To Model  View  Controller In XPagesAn Introduction To Model  View  Controller In XPages
An Introduction To Model  View  Controller In XPages
 
Deep Dive: Amazon Lumberyard & Amazon GameLift
Deep Dive: Amazon Lumberyard & Amazon GameLiftDeep Dive: Amazon Lumberyard & Amazon GameLift
Deep Dive: Amazon Lumberyard & Amazon GameLift
 
Putting together a web app
Putting together a web appPutting together a web app
Putting together a web app
 
Decrap Your Application
Decrap Your ApplicationDecrap Your Application
Decrap Your Application
 
Tools And Tips For Web Designer To Create Effective Web Site
Tools And Tips For Web Designer To Create Effective Web SiteTools And Tips For Web Designer To Create Effective Web Site
Tools And Tips For Web Designer To Create Effective Web Site
 
How To Express Your Creative Self With Windows Presentation Foundation And Si...
How To Express Your Creative Self With Windows Presentation Foundation And Si...How To Express Your Creative Self With Windows Presentation Foundation And Si...
How To Express Your Creative Self With Windows Presentation Foundation And Si...
 

Mais de Ryan Stewart

From mobile browser to mobile app
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile appRyan Stewart
 
Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012Ryan Stewart
 
Debugging and deploying with phone gap
Debugging and deploying with phone gapDebugging and deploying with phone gap
Debugging and deploying with phone gapRyan Stewart
 
PhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JSPhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JSRyan Stewart
 
HTML5 and jQuery for Flex Developers
HTML5 and jQuery for Flex DevelopersHTML5 and jQuery for Flex Developers
HTML5 and jQuery for Flex DevelopersRyan Stewart
 
Getting Started with Flex and PHP
Getting Started with Flex and PHPGetting Started with Flex and PHP
Getting Started with Flex and PHPRyan Stewart
 
Flash Builder and Flex Future - Multiscreen Development
Flash Builder and Flex Future - Multiscreen DevelopmentFlash Builder and Flex Future - Multiscreen Development
Flash Builder and Flex Future - Multiscreen DevelopmentRyan Stewart
 
Introduction to Flex Hero for Mobile Devices
Introduction to Flex Hero for Mobile DevicesIntroduction to Flex Hero for Mobile Devices
Introduction to Flex Hero for Mobile DevicesRyan Stewart
 
Mapping and Geolocation on the Flash Platform
Mapping and Geolocation on the Flash PlatformMapping and Geolocation on the Flash Platform
Mapping and Geolocation on the Flash PlatformRyan Stewart
 
Getting Started with Flex and PHP
Getting Started with Flex and PHPGetting Started with Flex and PHP
Getting Started with Flex and PHPRyan Stewart
 
Mapping and Geolocation with the Flash Platform
Mapping and Geolocation with the Flash PlatformMapping and Geolocation with the Flash Platform
Mapping and Geolocation with the Flash PlatformRyan Stewart
 

Mais de Ryan Stewart (12)

Intro to PhoneGap
Intro to PhoneGapIntro to PhoneGap
Intro to PhoneGap
 
From mobile browser to mobile app
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile app
 
Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012
 
Debugging and deploying with phone gap
Debugging and deploying with phone gapDebugging and deploying with phone gap
Debugging and deploying with phone gap
 
PhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JSPhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JS
 
HTML5 and jQuery for Flex Developers
HTML5 and jQuery for Flex DevelopersHTML5 and jQuery for Flex Developers
HTML5 and jQuery for Flex Developers
 
Getting Started with Flex and PHP
Getting Started with Flex and PHPGetting Started with Flex and PHP
Getting Started with Flex and PHP
 
Flash Builder and Flex Future - Multiscreen Development
Flash Builder and Flex Future - Multiscreen DevelopmentFlash Builder and Flex Future - Multiscreen Development
Flash Builder and Flex Future - Multiscreen Development
 
Introduction to Flex Hero for Mobile Devices
Introduction to Flex Hero for Mobile DevicesIntroduction to Flex Hero for Mobile Devices
Introduction to Flex Hero for Mobile Devices
 
Mapping and Geolocation on the Flash Platform
Mapping and Geolocation on the Flash PlatformMapping and Geolocation on the Flash Platform
Mapping and Geolocation on the Flash Platform
 
Getting Started with Flex and PHP
Getting Started with Flex and PHPGetting Started with Flex and PHP
Getting Started with Flex and PHP
 
Mapping and Geolocation with the Flash Platform
Mapping and Geolocation with the Flash PlatformMapping and Geolocation with the Flash Platform
Mapping and Geolocation with the Flash Platform
 

Último

[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 

Último (20)

[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 

DelveNYC: Flash Catalyst

  • 1. Interaction Design in the Designer’s Hands Ryan Stewart Twitter: @ryanstewart ryan@adobe.com
  • 2. Welcome to the world of RIAs
  • 3. Welcome to the world of RIAs Widgets Consumer Business Advertising Tools Apps Social Video Games Apps
  • 4. Differences in Designing RIAs Static Design versus Interaction Design
  • 7. Components as the building blocks • One of the bene ts of RIAs is a very rich component set • The components allow us to build customized, sophisticated user interfaces beyond what HTML provides • Developers often start by thinking about which components to use in an application or user interface. • The problem is that it’s very hard to design around those components. •Designers don’t think about components, they think about art and user experience.
  • 8. Flash Catalyst A professional interaction design tool for rapidly creating the user experience of applications and interactive content without coding
  • 9. Outputs from Flash Catalyst Interaction Designer
  • 10. Outputs from Flash Catalyst • Wireframes • Interactive design comps • Self-contained Flash sites Customer Interaction Designer
  • 11. Outputs from Flash Catalyst • Wireframes • Interactive design comps • Self-contained Flash sites Customer • Flex Project (FXP) Interaction Designer • MXML • ActionScript • Component skins Developer • Graphical assets
  • 13. The current work ow Visual Interaction Developer Designer Designer
  • 14. The “Next” work ow Visual Interaction Developer Designer Designer
  • 15. The “Next” work ow in detail Visual Interaction Designer Designer
  • 16. The “Next” work ow in detail • Start with a comp in CS4 design tool Visual Interaction Designer Designer
  • 17. The “Next” work ow in detail • Start with a comp in CS4 design tool • Import into Flash Catalyst with full delity Visual Interaction Designer Designer
  • 18. The “Next” work ow in detail • Start with a comp in CS4 design tool • Import into Flash Catalyst with full delity • Convert artwork into components Visual Interaction Designer Designer
  • 19. The “Next” work ow in detail • Start with a comp in CS4 design tool • Import into Flash Catalyst with full delity • Convert artwork into components Visual • De ne states, interaction and Interaction Designer animation Designer
  • 20. The “Next” work ow in detail • Start with a comp in CS4 design tool • Import into Flash Catalyst with full delity • Convert artwork into components Visual • De ne states, interaction and Interaction Designer animation Designer • Roundtrip to make re nements to graphical elements
  • 22. Declarative graphics MXML graphics library providing rich primitive t hs support - shapes, paths, lls, lters, transformations Shapes Pa <Ellipse y="46" height="144" width="144" x="86"> < ll> <SolidColor color="0x9ab3e2"/> </ ll> <stroke> Fills & Strokes Filters <SolidColorStroke color="0x0a35aa" caps="none" joints="miter" miterLimit="4" weight="4"/> </stroke> </Ellipse>
  • 23. Declarative graphics MXML graphics library providing rich primitive t hs support - shapes, paths, lls, lters, transformations Shapes Pa <Ellipse y="46" height="144" width="144" x="86"> < ll> <SolidColor color="0x9ab3e2"/> </ ll> <stroke> Fills & Strokes Filters <SolidColorStroke color="0x0a35aa" caps="none" joints="miter" miterLimit="4" weight="4"/> </stroke> </Ellipse> FXG is an interchange format based on MXML graphics Closely matches the Flash Player rendering model Static - no binding support, scripting, event handlers, etc
  • 24. Further information • Adobe Labs: http://labs.adobe.com/ • Adobe Developer Connection: http://www.adobe.com/devnet/ • My blog: http://blog.digitalbackcountry.com

Notas do Editor

  1. Slide 6: Adobe Flash Platform (2 min.) &amp;#xA5;The Flash Platform is a complete system to create and deliver expressive applications, content and video that run consistently across the widest reach of operating systems and devices. &amp;#xA0; &amp;#xA5;With the Open Screen Project, we&amp;#x2019;re going to take that even further, finally achieving the goal of web applications that can really work from all of the places that people connect to the web &amp;#x2014; mobile phones, desktops, browser, social networks and TVs. &amp;#xA0; &amp;#xA5;Even with 13 years of incredible Flash technology innovation, the best of the Flash Platform is still ahead. &amp;#xA0; &amp;#xA5;Our development tools, including Flex Builder, Creative Suite 4 and the interaction design tool we introduced to you last year as Project Thermo offer the foundation for agile design and development workflows, making it faster and easier for you to get your work done. &amp;#xA5;Project Thermo is now a reality called Flash Catalyst Flash Catalyst is all about better tooling, better workflow, and a faster time to market. &amp;#xA5;That&amp;#x2019;s also at the heart of Flex &amp;#x2014; offering a framework for building applications more quickly &amp;#xA5;To improve deployment of these applications, we&amp;#x2019;re continuing to drive innovation and consistency in the Flash Player. &amp;#xA0;The overwhelming success of the Flash Platform becomes increasingly evident with each new version of the Player we release. In the X months since we released Flash Player 20, we&amp;#x2019;ve had an incredible XXX downloads, an X percent increase (?) over this point with 1Flash Player 9. [Need input from PBU for final numbers/positioning] &amp;#xA5;With Flash Player 10, you can create an entirely new class of experiences not previously achievable on the Web. &amp;#xA5;And AIR 1.5, released today, takes all the power of Flash Player 10 and makes it available on the desktop. &amp;#xA5;Finally, the strength of our ecosystem is incredible, and we are continuing to not only extend the reach of the platform through our partners but also engage with every one of you through open feedback and the use of common standards. &amp;#xA5;One of the most gratifying things for me personally is seeing some of the groundbreaking applications built on the Flash Platform coming from new and unexpected places in the community &amp;#x2013; including government, education and the non-profit world