Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
Windows Vista

Adobe Fireworks CS5 : Working with Adobe AIR (part 3) - Creating an AIR prototype

- Free product key for windows 10
- Free Product Key for Microsoft office 365
- Malwarebytes Premium 3.7.1 Serial Keys (LifeTime) 2019
6/25/2012 5:04:00 PM

Creating an AIR prototype

Yes, you are finally at the point where you create the prototype! Much like an HTML prototype, this gives you and the client a chance to interact with a simulation of the AIR application before any time is spent coding the real thing.

First you should save this file to its own directory. This makes the rest of the process a little easier.

1.
Choose File > Save As.

2.
Create a new folder inside the Lesson13 folder, and call it nature_tours_console.

3.
Open this folder, if necessary, and save the PNG.

4.
Copy the Lesson13/icons folder to the nature_tours_console folder.

5.
Select the home page in the Pages panel.

6.
Choose Commands > Create AIR File.

The Create AIR File dialog box appears, and it’s a big one. In this figure, we’ve filled in the fields—refer to this figure to complete the Create AIR Package dialog box:

  • Name. Specify the name that appears on installation screens when users install the application. By default, the filename is used, but you can change this.

  • ID (required). Enter a unique ID for your application. Don’t use spaces or special characters in the ID. By default, the filename is used.

  • Version (required). Specify a version number for your application. The default value is 1.

  • Program Menu Folder (affects Windows only). Specify the folder in the Windows Start menu where you want the shortcut to the application created.

  • Description. A description of the application to be displayed when the user installs the application. The description we used is Nature Tours presents an interactive console where you can view our preferred camp sites, check out rates, and even inquire about site availability.

  • Copyright (affects Mac only). Include copyright information to be displayed in the About information for Adobe AIR applications installed on OS X.

  • Window Style. System Chrome surrounds the prototype with the standard window control of the operating system. Transparent lets you use your own custom chrome instead. Choose Transparent.

  • Window Size. Specify the dimensions of your application window in pixels when it opens. Depending on your page sizes, outer glows, and drop shadows, you may need to increase the dimensions slightly to prevent scroll bars from appearing. Set the dimensions to 547 and 346, respectively.

    Transparent chrome in AIR prototypes

    One of the unique characteristics of an AIR application is that it can “float” on your desktop. So you could have a custom shape to the application interface—much like we have in our nature tours console—and you will see only the application, not the background of the original PNG file, surrounding the design.

    To use this look, make sure your canvas color for each page is set to transparent and that you use PNG 32 as your Optimization setting. The pages in this file have already been set to PNG 32.


  • Icon. You can select custom images for the application icons. Select the folder for each icon size, and select the image file you want to use. Only PNG files are supported for application icon images.

    Click the button and for each of the four icons, browse to the icon folder you copied over to the nature_tours_console folder. Match the 16×16-pixel icon with the small.png file, the 32×32-pixel icon with the medium.png file, and so on. These icon files must be in the root directory in order to be selected.

  • Content. Select the Use Current Document option to automatically select the folder from which the files are to be included. The resulting list will be simpler if your PNG file is in its own folder rather than, for example, your desktop or main documents folder. This is why you saved the PNG file to its own folder earlier.

    Note

    Fireworks generates all the graphics needed for the prototype at this stage, so it’s not unusual for Fireworks to become nonresponsive for a couple of minutes as it runs through all the pages in the design.

  • Initial Content. Browse to select the page that appears as the starting screen of the prototype. If you selected Current Document, the initial content is automatically set.

  • Included Files. Specify the files or folders to include in your application. You can add additional HTML and CSS files, image files, and JavaScript library files. Click the plus button (+) to add files, and click Folder to add folders. To delete a file or folder from your list, select the file or folder, and click the minus button (−). The files or folders you include in the Adobe AIR package must be in the root content folder. Scroll through this list and locate the original PNG file. Select it, and then click the minus button. The PNG file is not necessary for the AIR application, and this will reduce the file size of the AIR file.

  • Digital Signature (required). All Adobe AIR applications require a digital signature in order to be installed.

    To add a digital signature, click the Set button next to the Digital Signature field, and do one of the following:

    To sign an application with a digital certificate that you have already purchased, click the Browse button, select the certificate, enter the corresponding password, and click OK.

    To create your own self-signed digital certificate, click the Create button. This is the method you will use for this exercise, so click Create.

    You must fill in every field in order for the Create button to become active. You can use the settings in the following figure as a guide.

    Note

    The Key Type option refers to the level of security of the certificate: 1024-RSA uses a 1024-bit key (less secure) and 2048-RSA uses a 2048-bit key (more secure).

    When you’re finished, click Create. Then enter the corresponding password in the Password field of the Digital Signature dialog box, and click OK.

  • Destination (required). Specify the folder to save the new application installer (AIR file). The default location is the initial content folder. Click the Browse button to select a different location.

    Create a new folder called AIR in the nature_tours_console folder, and select this new AIR folder as the location to place the installer package.

    The only file required by the user is the AIR installation file. All the necessary files are added to the AIR installer by Fireworks.

7.
Before you click the create button, test the prototype by clicking Preview.

Fireworks builds a temporary version of the prototype and launches it. You can test interaction and check for unsightly scroll bars at this time. Click the prototype’s Close button (the hiker pictogram) to exit the application.

8.
Click Create AIR file.
Other -----------------
- Adobe Fireworks CS5 : Starting mobile projects - Selecting a device profile
- Adobe Flash Catalyst CS5 : Connecting Your Project to Live Data - Changing the Project Type (part 2) - Configuring the return data
- Adobe Flash Catalyst CS5 : Connecting Your Project to Live Data - Changing the Project Type (part 1) - Set up the project
- Adobe Flash Catalyst CS5 : Connecting Your Project to Live Data - Setting Up a Local Testing Server
- Adobe After Effects CS5 : The Timeline - Timing and Retiming
- Adobe After Effects CS5 : The Timeline - Motion Blur
- Adobe Flash Professional CS5 : Importing Graphics - Setting Illustrator Import Preferences
- Adobe Flash Professional CS5 : Importing Graphics - Understanding Vector and Bitmap Graphics
- Adobe InDesign CS5 : Managing Pages and Books - Navigating Pages & Adding Color Labels to Pages
- Adobe InDesign CS5 : Managing Pages and Books - Changing the Page Size
 
 
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
 
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server