Prototyping Adobe AIR Applications with Fireworks CS4
12
® Copyright 2008 Adobe Systems Incorporated. All rights reserved. Prototyping Adobe AIR Applications with Fireworks CS4 Juan Sanchez MAX 2008
-
Upload
juan-sanchez -
Category
Art & Photos
-
view
6.552 -
download
0
description
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/
Transcript of Prototyping Adobe AIR Applications with Fireworks CS4
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Prototyping Adobe AIR Applications with Fireworks CS4Juan 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 constructionand 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.
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
How AIR Fits into the Picture
®
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
