Prototyping AIR applications with Fireworks

Additional Requirements

Adobe AIR 1.5 Update for Fireworks CS4

• Download

Prototyping is a great way to get feedback on concepts early in the pre-development stage of a project without investing a tremendous amount of time. Although the complexity of prototypes may vary, Fireworks CS4 allows you to create prototypes for desktop applications from the designs you create.

This article provides step-by-step instructions to turn a concept into a design, add interactions and export the prototype to a packaged AIR application using the new features available in Fireworks CS4.

There are a wide variety of techniques for prototyping, from paper prototyping to high fidelity and fully functional executions. While each approach may vary in the level of detail and time required to execute, the benefits of prototyping are numerous—whether the final experience is a website, rich Internet application (RIA) or desktop application.

No matter what type of prototype you create, adding more details will yield more detailed insights and feedback. However, the sooner you can put a prototype in front of users, the faster you'll be able to do the following:

• Ensure that all parties can easily understand the end goal
• Help the internal team build the final product more accurately
• Reduce the documentation overhead
• Avoid misinterpretation of key functionality
• Generate excitement for internal buy-off, funding or demonstration
• Test and refine concepts

Check out Dave Cronin's article, Industry trends in prototyping, to learn more about how prototypes are used and why they are an integral part of the design process. Creating prototypes for desktop applications is easier than ever before using Fireworks CS4 and the new AIR export features.

Choosing the right tool

Fireworks is the perfect environment for rapidly creating user interfaces for desktop applications. The fast, drag and drop environment allows you to manipulate bitmaps and vectors to generate pixel-precise designs. Best of all, the ability to intuitively structure and repurpose assets makes broad-sweeping changes a non-issue throughout the project.

Of course, creating a design is only the first part of the story. You also have to consider how the design will be integrated into a development environment. All assets created in Fireworks are production-ready, which means you can do a lot of rapid prototyping without coding, but when you get to a final state you can seamlessly move the assets right into production.

When you use an image-editing program, you are working with static views. One of the most important aspects of a prototype is that it is interactive. Fireworks includes tools that allow you to attach simple behaviors, such as rollover buttons and links, to slices and hotspots. In addition, you can also attach AIR events, like window close, that will give your prototype the feeling of a true desktop application. For those a bit more daring, custom JSF commands can be written to extend functionality beyond the default AIR events that ship with Fireworks CS4.

For more information on designing with Fireworks, read Nick Myers' article, Designing interactive products with Fireworks, which delves into the greater details of why Fireworks is ideal for designing these types of products.

How AIR fits into the picture

Adobe AIR allows the creation of desktop applications using web technologies, such as HTML, Ajax and Flex, which can be deployed across operating systems. With the ability to export to AIR from Fireworks CS4, you can create prototypes for desktop applications and take advantage of the great features of AIR.

Using AIR, you can completely customize the window chrome as well as the application icon. These features allow for a completely unique and branded experience that will look consistent across operating systems. However, while creating completely custom chrome may sound like a complete necessity, it is always important to consider the native chrome of the user's operating system. In some cases, you may discover that users become disoriented when presented with an unfamiliar window chrome, but that's precisely why prototypes are important!

Learn more about the six AIR features that may annoy your users on Serge Jespers' blog.

With many AIR applications out in the wild already, there are plenty of examples you can examine to get inspiration. In many cases, the application has been customized to create a completely unique experience for the user. Although you won't be able to export fully functional applications from Fireworks CS4, you can test the visual design, structure and interaction in your application. To see a great showcase of AIR applications, visit the Adobe AIR Marketplace or Refreshing Apps website.

Building the AIR prototype

Before you start any type of project, it's always a best practice to create a strategy of execution. Using Fireworks to prototype an AIR application isn't any different, but sometimes it's better to follow a specific order of operations. For the purposes of this sample project, we'll walk through the following steps in order to create a packaged AIR application ready to distributed:

1. Create a roadmap for the application.
2. Structure the Fireworks project.
3. Design and build the prototype.
4. Add interactions.
5. Export the Adobe AIR package.

In this sample project, the application you'll be prototyping is a simple desktop application, codenamed "Ventura" that facilitates syncing images across multiple image services. Before jumping into the thick of creating the design, it's best to have a clear understanding of what you're going to be designing and ultimately prototyping.

In this case, you have a rough sketch to work with as a starting point (see Figure 1).

In the sketch above, the general layout of the application is represented, including the following:

• Image albums
• Button for syncing images to image services
• Drawer for viewing the image services
• Elements of window chrome

Some of the interactions you'll be modeling in the prototype are also shown. When using the application, the user should be able to do the following:

• See a visual change (rollover) when they move their cursor over an album or image
• Understand how the syncing images functionality will work
• Open and close the drawer to view the services

Now that a development plan is established, you can jump into Fireworks CS4 and start to build the prototype. Feel free to start from scratch and create your own design assets, or download the sample files from the first page of this article and use the provided design assets that are already set up as symbols and styles.

As I mentioned previously, Fireworks CS4 includes many features that help you maintain a working structure within your project to keep things organized. The Pages panel, States panel, and Layers panel contain the various interface elements in ways that can be shared throughout your project. For example, since the application chrome is a consistent element that is visible everywhere in the application, you can share that element across the entire visual structure of your project. This makes it easy to make global updates to the application chrome later, after gathering feedback. For more information, read David Hogue's article, Using pages, states, and layers in Fireworks CS4.

Organizing and repurposing assets

Another great feature that helps with rapid prototyping are symbols. Symbols allow you to reuse common artwork repeatedly. If you change a symbol, all instances of that symbol will automatically be updated throughout your design. This is extremely useful if, at the last minute, you decide to change the color of the buttons from white to blue.

Styles are also great timesavers. Styles allow you to save the visual attributes that you've applied to artwork and then apply those attributes to any other piece of artwork. For example, if you have created a button with a gradient and a drop shadow, you could save those visual attributes as a style, select another design element and then apply the style to that new element, to make them match. Styles are handy for maintaining visual consistency throughout your design.

Note: If you simply want to apply the same visual attributes of one object to another, you can also copy the source artwork (Edit > Copy), select the artwork you'd like to apply the copied attributes to, and then choose the option to Paste Attributes (Edit > Paste Attributes).

In order to illustrate some of these concepts more visually, I've created a flow chart that defines how the structure of a design for an ecommerce application created in Fireworks might be organized. Pages have states, states have layers, layers can contain symbols, and styles can be applied to a symbol (see Figure 2).

To learn more about how to leverage the features in Fireworks to organize and repurpose design assets, read Nick Myers' article, Designing interactive products with Fireworks.

Setting the stage for the design

Before you begin designing the Ventura application, it is a good idea to set up some of the structure as previously discussed. Depending on the project, this may require a bit of forethought as you define the best way to organize your Fireworks document. It is likely that the initial structure will change organically as needed to accommodate the evolution of the design.

The structure for this prototype has already been defined within the Ventura_start.png file provided with the sample files (see Figure 3).

The sample PNG file also incorporates various styles and symbols you can use to create the design (see Figure 4).

Depending on the type of projects you are developing, you may decide to organize your project differently to facilitate the prototyping process. Either way, setting up a flexible structure not only helps you stay organized, it also makes it much easier to make changes rapidly.

Now that your document is well structured, you can begin adding design elements and create the user interface and views of the application using the provided symbols in the Ventura_start.png file.

Creating the initial view state

The first view of the Ventura application displays the window chrome, footer controls, image albums and a drawer on the left. To add these elements to the design, you can just drag and drop the provided symbols to the layers that have been created. If you'd like to replicate the final prototype as I created it, follow these steps:

1. Add the Chrome symbol to the Shell > Chrome Layer.
2. Add the Footer symbol to the Shell > Footer Layer.
3. Add the Circle_button, GreyFooter_button and Drawer_icon to the Interactive > Footer Layer. Set the GreyFooter_button on the left side with a width of 40px. Place the Drawer_icon on top and center it horizontally and vertically.
4. Add the Album_up and provided Image_000 symbols to the Content Layer to create five albums. You can duplicate the symbols as needed.
5. Add text labels to each of the albums on the Content Layer.
6. Finally, you need to add the drawer. Although the drawer will not be visible in the initial state of the application, adding it now is a good idea for placement purposes. Add the Drawer symbol to the Drawer layer.
7. Add some text to the drawer on the same layer to indicate the different image services that the images could be synced to, such as My Computer, Flickr, Facebook, Photobucket, etc.

After walking through those steps, the initial state of the application should match the structure outlined in the rough sketch shown in Figure 1. At this point your design should look similar to the one shown below, although it doesn't have to match pixel for pixel (see Figure 5).

Creating the secondary view states

With the initial view state created, it's time to create a second state that displays the secondary states of various portions of the interface, such as rollover buttons. As mentioned previously, the interactions to be represented in the prototype include the following:

• Rollovers for the albums
• Showing and hiding the drawer
• Providing an intuitive syncing feature for images

To begin creating this second view state, rename State 1 to Initial in the States panel. Duplicate the Initial state and name the duplicated state Secondary (see Figure 6).

After creating the duplicate state, you'll notice that any changes you make to layers with the page and state icon will automatically update across the pages and states they are shared across.

The first states you'll set up are for the rollover buttons of the image albums. On the Secondary state, select the first dark grey image album background. Right-click (or Control-click) on the album background and select Swap Symbol (see Figure 7).

Select the Album_over Symbol and click OK. The dark gray background changes to a light blue. Repeat this step for the rest of the album background graphics, to ensure that they all have a secondary state for the rollover behavior.

Tip: Swap Symbol is a great feature for easily adding rollover states and switching artwork out while maintaining exact positioning. This strategy prevents accidental shifting of graphics that can sometimes occur when changing states.

Next, we need to add a graphic indicator to represent the functionality of syncing images with the various image hosting services listed in the drawer. In the rough sketches, this was displayed as the circle sync button rotating slightly and the appearance of a progress bar. Again, using the Swap Symbol feature, select the Circle_button symbol (the gray circle button with the rounded arrows) and swap it with the CircleBlue_button symbol.

To add the sync progress bar, drag and drop a couple symbols to the bottom right region of the footer. Add the ProgressBar symbol and the DarkGreyClose_button symbol to the footer. After making those changes and swapping out the sync button, the Secondary state should look something like the screenshot below (see Figure 8).

We need to add different states that indicate that the drawer on the left side can be expanded and collapsed. In the Initial state the drawer is open. Select the Initial state from the States panel, group the drawer artwork and then set the alpha value of that group to 0.

Now, back on the Secondary state, you can add some details to the drawer button and provide the interface item that allows the user to close the drawer. When the drawer is open, you can indicate to the user that the drawer button is toggled or inset by applying a style to the button.

Select the gray Drawer button in the bottom left side of the footer. In the right area of the Property inspector, you'll see a pop-up menu that says "No Style." When you click on that menu, you'll see a list of predefined styles available. Select the style called GreyInset_002. After choosing this style, the drawer button has a slightly inset look. Feel free to experiment with other styles or create your own styles to indicate the toggle effect (see Figure 9).

The final thing to do is provide an interface item to allow the user to close the drawer. Add the DarkGreyClose_button to the upper right area of the drawer. After making these changes, the Initial and Secondary states should look similar to the examples shown below (see Figure 10).

You have now created the two states that will provide the necessary views for the interactions outlined in the pre-planning phase of the application development.

In the previous section of this article, we created the Initial and Secondary states to create the different views. In this section, we'll add interactions to the prototype. To accomplish this, we'll use slices, hot spots and links to incorporate some simple interactivity, as well as incorporating some AIR-specific events to make the prototype feel like a true desktop application.

Note: If you'd like to begin following along at this point, use the Ventura_secondary.png file from the sample files folder as you step through the remaining instructions.

Creating the album rollovers

One of the most basic interactions commonly seen in applications is a rollover effect that graphically changes as the user rolls their cursor over an interface item. You've already set up this graphic change by swapping out the symbols to use different artwork for the image albums in the two states. Since we already have two states displaying different artwork, it's a simple task to create the rollover effect:

1. On the Initial state, select the Slice tool from the Tools panel. Click and drag to create a slice around each of the image albums (see Figure 12).

2. Select the slice for the first image in the top left corner. Open the Behaviors window (Window > Behaviors).
3. While the slice is still selected, click the plus button in the Behaviors window and select the option Swap Image (see Figure 13).

4. When you select Swap Image, the Swap Image dialog box appears. It displays a simplified representation of your slices across states. Make sure the same slice is selected in the top left corner. Set the State no. to Secondary (2), and be sure to leave the check boxes next to Preload images and Restore image onMouseOut checked (see Figure 14).

5. Click OK. A circular crosshair icon appears in the center of the slice, and a blue S shaped line connects the crosshair icon to the little black rectangle in the top left corner of the image slice. This is a visual representation of the interaction you've just added to that slice (see Figure 15).
6. Preview the AIR prototype to make sure you added the roll over successfully.

You've just created an interaction that displays the Secondary state graphic when a user rolls their cursor over that slice. When the user moves their cursor outside the slice area, the image will restore to display the Initial image slice. This behavior creates a rollover effect. Repeat this process to create rollover effects for the other image albums. Be sure to preview the application along the way to make sure everything is working.

Representing image syncing

To create the simulation of how the images will sync to image hosting services, you can alter the look of the sync button and display the syncing progress bar. We'll use some of the same steps described above to create the album rollover effects, with a few minor differences. The interaction to represent is that when a user clicks the sync button, the progress bar appears. The user can cancel the sync while it is in progress by clicking the dark grey button with the white X:

1. On the Secondary state, insert a slice over the sync button and another slice over the progress bar and dark grey cancel button (see Figure 16).

2. On the Initial state, select the slice over the sync button. Open the Behaviors window (Window > Behaviors).
3. While the slice over the sync button is selected, add a new Swap Image behavior.
4. Use the Swap Image dialog box to set the rollover behavior. Make sure the appropriate slice is selected for swapping the sync button image. Also make sure the State no. is set to Secondary(2) and uncheck the option to Restore image onMouseOut.
5. Add another Swap Image behavior to the sync button, but this time select the slice that corresponds to the area where the progress bar is located. Make sure Secondary(2) is set and uncheck the option to Restore image onMouseOut (see Figure 17).

6. You've just added two behaviors to the sync button slice. However, rather than the Swap Image occurring onMouseOver, you need to set the image to swap onClick. In the Behaviors window there is a column titled Events. Click the arrow next to the onMouseOver event and select the event onClick for both behaviors (see Figure 18).

7. At this point, you've added the Swap Image to change the look of the sync button and display the progress bar, but you still need to add the interaction to show users how to cancel the syncing of images. Select the progress bar slice and add a Swap Image behavior using the Behavior window.
8. This time, both the progress bar image and the sync button image should swap to the Initial(1) state when the progress bar slice is clicked. After adding those behaviors, you'll see the same circular crosshair icon and blue lines, but this time you'll see the lines connecting to themselves as well as the other slices (see Figure 19).

9. Preview the AIR prototype and click on the interface to ensure the rollover states are displaying correctly.

By adding these behaviors, the sync button will swap to the image in the Secondary state and the progress bar will become visible. The user can also now click the cancel sync button to get an idea of how that interaction might feel.

Showing and hiding the drawer

The steps for showing and hiding the drawer are very similar to the steps for swapping the sync button and progress bar. The behaviors you add in the following steps will display and hide the drawer with the image sync sources:

1. In the Secondary state, insert a slice that covers the entire drawer and the expand drawer button. In the Initial state, select the slice for the expand drawer button.
2. In the Behaviors window, add a Swap Image behavior to the expand drawer button slice and the drawer slice in the Secondary(2) state. Set the Swap Image behavior to be triggered by an onClick event.
3. Now, on the Secondary state, select the drawer slice and add a Swap Image behavior to the drawer slice and the expand drawer button slice in the Initial(1) state. Again, these behaviors should be triggered by an onClick event. Your slices with behaviors will look similar to the screenshot below (see Figure 20).
4. Preview the AIR prototype.

When a user clicks the expand drawer button, the drawer in the prototype appears to pop out. The user can close the drawer by clicking the dark grey close button in the drawer, which is really using the entire slice as the hit area.

Adding AIR mouse events

Up until this point the interactions you've added aren't really different from a web-based application, although it's important to know how to create these types of interactivity. However, the purpose of this sample project is to create a prototype of a desktop application. Adding some interactions that you might expect in a desktop application, such as minimize, maximize, dragging the window, and other common interactions are easy to add in Fireworks CS4 with the newly added Commands for AIR Mouse Events.

In order to make this prototype feel like a true desktop application, add AIR mouse events for minimizing, maximizing, dragging and closing the application window. Similar to the instructions in the previous steps, you can attach these special AIR mouse events to hot spots or slices:

1. On the Initial state, draw slices over the minimize, maximize and close buttons. Also insert a slice that extends across the title bar of the application (see Figure 21).

2. Select the slice over the application title bar. Choose Commands > AIR Mouse Events > Drag (see Figure 22).

3. After adding this mouse event, if you look in the Property inspector you'll notice that the following line has been added in the Link field:

4. This is a special event that tells AIR to drag the window when a user presses their mouse button and holds it down.
5. When you selected the Drag AIR mouse event, you probably noticed the other available options for Minimize, Maximize and Close. Select the other slices you created and attach the appropriate AIR mouse events to each button slice. As you do this, similar events will be added to the Link field in the Property inspector for each event.
6. Preview the AIR prototype and click the various areas to interact with the AIR mouse events you've just added.

Note: Figure 22 displays mouse events that you do not see in your installation of Fireworks. These are custom events that were created in JSF and added to Fireworks. Keep in mind that you can create custom events if you'd like to add additional AIR functionality to your applications.

The interactions you've created in this section are just an introduction to what is possible when creating a prototype in Fireworks. Try experimenting with advanced slicing combinations, using links to jump to different pages and try adding different behaviors. If you would like to review a working copy of the sample project up to this point, the Ventura_interactions.png file from the sample files folder.

Throughout the process of prototyping an application, it is a good idea to preview your progress as you add additional design elements and interactions. Fireworks CS4 allows you to preview the AIR application to make sure everything looks the way you expect it to look before packaging the prototype for distribution.

To preview your AIR application prototype at this stage, select Commands > Create AIR File. The Create AIR File dialog box appears. It contains a series of options, but for the purposes of simply previewing the prototype, the only options you need to set are Window Style (System Chrome or Transparent) and Window Width.

Set the Window Style to transparent since this project uses a custom chrome. Choose System Chrome option whenever you want to use the native Mac OS X or Windows chrome, but for this particular sample project it won't look right.

For the Window Size, set the dimensions to 1 pixel larger than the file dimensions (721 × 521 pixels). If you don't add an extra pixel in each direction, a horizontal and vertical scrollbar will be displayed when you preview the AIR application (see Figure 11).

Click the Preview button to generate a preview of the AIR application. You may have to wait a moment, and then a preview of the application will launch as a native desktop application. The previewed application displays its custom window chrome and transparency. The only thing left to add are the interactions. Close the application by selecting ADL > Quit ADL.

You can preview the AIR application periodically as you follow along with the steps in the rest of this article. It's particularly helpful to preview the file as you add interactions, to ensure that the prototype looks and behaves the way you desire. If you'd like to review an example of how the states are set up, open the provided Ventura_secondary.png file and browse through the structure.

As we've been creating the prototype in Fireworks, we've taken advantage of the Create AIR File dialog box to preview the AIR application. In this section I'll describe the process for distributing the finished application. Using the same Create AIR File dialog box, we'll take a look at the options to create a packaged AIR file, along with some other features.

Note: If haven't been following along but would like to begin with the instructions at this point, open the Ventura_interactions.png file from the sample files folder.

Before you create the AIR file, let's create a folder that will contain the exported assets and application icons:

1. Create a new folder on your desktop. Name the folder Ventura.
2. Copy the icons folder from the sample files provided in the first page of this article and paste it into the Ventura folder.

After defining the export folder and copying the application icons to it, you're ready to create the AIR file.

Note: It is important to copy any dependent files to the export folder that will be packaged with the AIR file prior to creating it, because otherwise an error will occur.

Defining the application settings

This time we'll export the completed AIR file as a "final" distributed application, which means that you'll need to pay a bit more attention to some of the application settings that we've initially overlooked. Choose Commands > Create AIR File to access the Create AIR file dialog box. Enter the following information into the fields:

• Name: Provide a name for your application. This field defaults to the file name, but the name entered here will display in the Windows Task Bar (or the Mac OS X Menu Bar) when the application is running, so be sure to entered the desired name.
• ID: While it is not absolutely necessary, you have the option of providing a unique ID that can be different than the application name in this field.
• Version: This field is also optional, but if you plan on showing the client multiple iterations of the prototype, it can be helpful to increment the version number of the application as it evolves.
• Program menu folder, Description, and Copyright fields are all optional. You may find that it is useful to add a note regarding what has changed in the description and enter the latest change date in the copyright field.
• Window style: We set this to Transparent earlier in this article, but depending on the project, you may decide to switch to the System Chrome window style when creating other prototypes.
• Window size: For this sample project, the dimensions should be set to 721 × 521 pixels.

Defining the installer settings

The installer settings tell Fireworks which files need to be packaged up for the AIR application. It's similar to how a website might be packaged with the needed HTML files, image files and CSS files. All the required files will end up in the Ventura folder that was created on your desktop:

• Content: Check the Use Current Document check box. This just tells Fireworks that you want to use the current working file as the source for the saved AIR file. When you check the box a dialog window will pop up. Browse to your Desktop and select the Ventura folder.
• Initial content: This will automatically be specified for you after selecting the content folder. It specifies what the initial view of the application is and maps to the name that was given to the Page you were working on, in this case Main. You may want to change this if you have multiple Pages and selected the Create AIR File command when you weren't on the initial view of your application. For this example, you're fine leaving it the default.
• Included files: This will also automatically populate after selecting the content folder. If you scroll through the list you'll see all the necessary images, HTML files and application icon images have been added for you. You also have an option to add additional files or folders, but you don't need to worry about that for this example.

Setting the application icon

One of the main differences between simply previewing the application and saving an AIR file is that you can add an application icon to the completed AIR file. This application icon will act just like you would expect it would when the application is installed. The icon will show up on the native operating system, in the Windows Task Bar (or in the Mac OS X dock).

To add an icon to your application, you'll need to create a total of four icons. Make one icon for each of the required sizes: 16 × 16, 32 × 32, 48 × 48 and 128 × 128 pixels. Make sure that the images are saved at exactly those dimensions, otherwise the AIR application won't save correctly. For the purposes of this sample project, application icon images have been included in the sample file folder. These images are located in the icons folder you pasted into to the Ventura export folder before creating the AIR file (see Figure 23).

To specify these icons, click the Select icon images button and browse to select each of the different sized images in the Ventura/icons folder. After specifying all the icons, click OK. Now that you've added all the icons, the Create AIR File dialog box will display the application icons you've selected (see Figure 24).

Note: Make sure to specify the Ventura folder that exists on your desktop for the Use Current Document setting in the Content section of the Installer Settings. If you didn't specify the folder that contains the application icons, you may get an error stating that the icon images are outside the root folder of the application.

Adding a digital signature

When an AIR application is created, it requires a digital signature. When the user installs the AIR application, the digital signature verifies where the application came from and who created it. You can either specify an existing digital signature file or create a new one:

1. In the Digital Signature section, click the Set button to access the Digital Signature dialog box (see Figure 25).

2. If you already have a digital signature file, you can browse for it and then type in your password. To create a new digital signature file, click the Create button.
3. A Create Certificate dialog box appears. It contains a number of different fields, and all of the fields are required. If you want, you can just enter Test in all of the fields as shown below, but keep in mind that the person installing the application will see this information, so in a real world project you'll need to enter the relevant data (see Figure 26).

4. After entering all the required information, click the Create button. The new digital signature file is specified for you in the Digital Signature window.
5. Now that the digital signature file has been specified, you can type in your password. Choose if you'd like your password remembered for this session and then click OK.

Specifying the destination and creating the AIR file

The last thing you need to do is specify the destination where you'd like to save the AIR file. The name of the AIR file will default to the name of your Fireworks file and the destination will default to the location of the export folder. However, you can change either of those settings to suit your needs.

With all of the necessary information specified, click the Create AIR File button to package up your prototype for distribution. An AIR file will be created on your desktop. If you open the AIR file, you can proceed through the installation process and see your final application launch like a native desktop application, complete with the application icon and window interactivity!

Note: If you'd like to review the completed prototype, open the Ventura.air file provided in the sample file folder.

Where to go from here

Prototyping can play an important role in the final outcome of any product, including desktop applications. With the new Export to AIR features introduced in Fireworks CS4, prototypes created in Fireworks can now extend to the desktop and offer further details of how an application might actually "feel" in that environment.

There are many online resources available to help you learn more about the concepts described in this article. For more great information regarding prototyping, designing with Fireworks and general tips, refer to the following resources:

• Fireworks Tips and Tricks – Rapid Prototyping (Adobe TV)
• Rapid prototyping with Fireworks CS3 (Adobe TV)
• Designing interactive products with Fireworks
• Industry trends in prototyping

To get more information about developing desktop applications with Adobe AIR, visit the Adobe AIR Developer Center.