Prototyping Adobe
AIR Applications
with Fireworks CS4
Juan Sanchez
MAX 2008
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

Who is this guy?
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

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.

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.

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.

Structuring the Application
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

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.

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.

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.

What we’re Prototyping
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

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.

Questions?
juan.sanchez@effectiveui.com
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.