SlideShare a Scribd company logo

DelveNYC: Flash Catalyst

•Download as KEY, PDF•
•
Ryan Stewart
Ryan Stewart

This document discusses interaction design for rich internet applications (RIAs) using Adobe Flash Catalyst. It explains that Flash Catalyst allows designers to create wireframes, interactive design comps, and self-contained Flash sites without coding. The designer can start with a Photoshop comp, import it into Flash Catalyst to convert artwork into reusable components, define states, interactions and animations, and then roundtrip changes back to Photoshop. This streamlines the design process and handoff to developers. The document also provides an example using Flash Catalyst to declaratively design the graphics for a commerce site using shapes, fills, strokes and filters.

1 of 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

More Related Content

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

Editor's Notes

  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