This presentation gives an overview of prototyping AIR applications using Fireworks CS4. You can get the source for the prototyped application here: http://scalenine.com/blog/2008/12/01/adobe-max-presentation-and-source/
Jeremy Casson - How Painstaking Restoration Has Revealed the Beauty of an Imp...
Prototyping Adobe AIR Applications with Fireworks CS4
1. Prototyping Adobe
AIR Applications
with Fireworks CS4
Juan Sanchez
MAX 2008
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
2. Who is this guy?
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
3. Introduction
The Bene ts of Prototyping
Why Adobe Fireworks CS4?
How Adobe AIR Fits into the Picture
A Live Look
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
4. The Bene ts of Prototyping
Helps all parties gain easy understanding of goal
Helps the internal team build the nal product more accurately
Reduces the documentation overhead
Reduces misinterpretation
Generates excitement for internal buy-off, funding, or demonstration
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
5. Why Fireworks?
Easy Creation
Fast, drag and drop environment that
allows for bitmaps and vector
Pages and states allow for organized structure
Styles and symbols for easy construction
and updating
Easy hotspots for links, code, behaviors
Fast Deployment
Deploy to multiple environments simultaneously
(HTML, SWF, Flex, FXG, AIR, PDF)
Assets are production-ready
Create prototypes quickly without investing time in coding
Customizable
Extend Fireworks through a robust scripting environment
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
7. Tying Things Together
Slices
Cuts images up for easy image swapping
Attach links, behaviors and code
Links
Allow you to jump to other Pages
Attach behaviors and code
Behaviors
Attach actions like Swap Image or Rollover
Triggered by interactions like onClick, onMouseOver, etc.
Code (JSF)
Scripting used in Fireworks for advanced scenarios
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
8. How AIR Fits into the Picture
Adobe AIR
Build rich Internet applications that deploy to the
desktop and run across operating systems
Desktop Prototyping
Custom Chrome, Desktop Icon, etc.
Consider the operating system’s (OS) guidelines
Integrated experiences with the OS
(e.g., Filesystem, Drag-Drop, Windowing)
Browser within app, instead of app within browser
Apple Human Interface Guidelines
http://developer.apple.com/documentation/UserExperience/index.html
Windows User Experience Guidelines
http://msdn.microsoft.com/en-us/library/aa511258.aspx
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
9. Let’s Prototype Something!
Plan it out
Diagram and sketch
Interaction models
Lay it out
Structure the pages, layers and states
Design and build
Design key screens rst
Build symbol and style library
Build states
Fill in the rest of the pages and states
Link pages and assign rollovers
Export to Adobe AIR
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
10. What we’re Prototyping
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
11. Recommended Resources
Fireworks and Skinning
senocular.com
weblogs.macromedia.com/amusselman
reworksguru.com
scalenine.com
Adobe AIR Showcases
adobe.com/products/air/showcase
refreshingapps.com
airapps.pbwiki.com
Interface Guidelines
developer.apple.com/documentation/UserExperience/index.html
msdn.microsoft.com/en-us/library/aa511258.aspx
adobe.com/devnet/ ex/ g
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
12. Questions?
juan.sanchez@effectiveui.com
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.