Prototyping Adobe
    AIR Applications
    with Fireworks CS4
    Juan Sanchez
    MAX 2008




                          ...
Who is this guy?




                                                                  ®




Copyright 2008 Adobe Systems ...
Introduction

          The Bene ts of Prototyping
          Why Adobe Fireworks CS4?
          How Adobe AIR Fits into...
The Bene ts of Prototyping

      Helps all parties gain easy understanding of goal
      Helps the internal team build ...
Why Fireworks?

      Easy Creation
               Fast, drag and drop environment that
                allows for bitma...
Structuring the Application




                                                                  ®




Copyright 2008 Ado...
Tying Things Together

      Slices
               Cuts images up for easy image swapping
               Attach links, ...
How AIR Fits into the Picture

      Adobe AIR
               Build rich Internet applications that deploy to the
      ...
Let’s Prototype Something!

      Plan it out
               Diagram and sketch
               Interaction models

   ...
What we’re Prototyping




                                                                  ®




Copyright 2008 Adobe Sy...
Recommended Resources

      Fireworks and Skinning
               senocular.com
               weblogs.macromedia.com/...
Questions?

    juan.sanchez@effectiveui.com




                                                                  ®




Co...
Upcoming SlideShare
Loading in...5
×

Prototyping Adobe AIR Applications with Fireworks CS4

4,262
-1

Published on

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/

Published in: Art & Photos, Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,262
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
117
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

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.
  6. Structuring the Application ® 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.
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×