Downloaded 55 times
Uploaded byRyan Stewart
DelveNYC: Flash Catalyst
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.
DelveNYC: Flash Catalyst
- 1. Interaction Design in theDesigner’s Hands Ryan Stewart Twitter: @ryanstewart ryan@adobe.com
- 2. Welcome to theworld of RIAs
- 3. Welcome to theworld of RIAs Widgets Consumer Business Advertising Tools Apps Social Video Games Apps
- 4. Differences in DesigningRIAs Static Design versus Interaction Design
- 5. What the DesignerCreates
- 6.
- 7. Components as thebuilding 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 professionalinteraction design tool for rapidly creating the user experience of applications and interactive content without coding
- 9. Outputs from FlashCatalyst Interaction Designer
- 10. Outputs from FlashCatalyst • Wireframes • Interactive design comps • Self-contained Flash sites Customer Interaction Designer
- 11. Outputs from FlashCatalyst • Wireframes • Interactive design comps • Self-contained Flash sites Customer • Flex Project (FXP) Interaction Designer • MXML • ActionScript • Component skins Developer • Graphical assets
- 12.
- 13. The current workow Visual Interaction Developer Designer Designer
- 14. The “Next” workow Visual Interaction Developer Designer Designer
- 15. The “Next” workow in detail Visual Interaction Designer Designer
- 16. The “Next” workow in detail • Start with a comp in CS4 design tool Visual Interaction Designer Designer
- 17. The “Next” workow in detail • Start with a comp in CS4 design tool • Import into Flash Catalyst with full delity Visual Interaction Designer Designer
- 18. The “Next” workow 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” workow 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” workow 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
- 21.
- 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 • AdobeLabs: http://labs.adobe.com/ • Adobe Developer Connection: http://www.adobe.com/devnet/ • My blog: http://blog.digitalbackcountry.com
Editor's Notes
- #3 Slide 6: Adobe Flash Platform (2 min.) &#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. &#xA0; &#xA5;With the Open Screen Project, we&#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 &#x2014; mobile phones, desktops, browser, social networks and TVs. &#xA0; &#xA5;Even with 13 years of incredible Flash technology innovation, the best of the Flash Platform is still ahead. &#xA0; &#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. &#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. &#xA5;That&#x2019;s also at the heart of Flex &#x2014; offering a framework for building applications more quickly &#xA5;To improve deployment of these applications, we&#x2019;re continuing to drive innovation and consistency in the Flash Player. &#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&#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] &#xA5;With Flash Player 10, you can create an entirely new class of experiences not previously achievable on the Web. &#xA5;And AIR 1.5, released today, takes all the power of Flash Player 10 and makes it available on the desktop. &#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. &#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 &#x2013; including government, education and the non-profit world