Foundation Fireworks CS4- P7 doc

Your new page should look exactly like the master page you just created, and you should see a layer named Master Page Layer in your Layers panel that contains all of the elements you def

Figure 9‑3 Final master page layout

With the tab backgrounds in place, just add the foreground text, and you’re finished We’ve selected

Adding the application title

The final element of the master page layout is the application title The title uses a heavier weight

of Futura, and its baseline is positioned slightly below the content rectangle We’ve applied the same color (#666666) to the title as the background of the content rectangle to make it look as if these two elements are joined With this final piece in place, the master page now looks like Figure 9-3, and we’re ready to move on to the additional pages of our application

Designing the information page

The Information page of this application is like the Help ➤ About page of a traditional application It contains some supplemental or background information about the portfolio Start by creating a new page:

1 Open the Pages panel

2 Click the New Page icon

3 Double-click the page and rename it Info

4 Switch to the Layers panel

Your new page should look exactly like the master page you just created, and you should see a layer named Master Page Layer in your Layers panel that contains all of the elements you defined

in the master page Now, add a dummy title and description so your layout looks like that shown in Figure 9-4

Generate filler text quickly by using the Fireworks Lorem Ipsum command (Commands

➤ Text ➤ Lorem Ipsum) This command will create a new text box on the canvas that

you can then size, position, and style For more advanced control over Lorem Ipsum,

check out Mayur Mundada’s Lorem Ipsum panel on Fireworks Exchange (www.adobe.

com/cfusion/exchange/).

Designing the gallery page

The Gallery page consists of a number of thumbnails that each link to its own individual detail page Again, start by creating a new page We’ll now create a placeholder symbol that will serve as the thumbnail icon, and then duplicate it a few times to create a total of four thumbnail icons

Creating the thumbnail symbol

We’ll start with our old friend the rounded rectangle

Create a new rounded rectangle with the following

settings (or be creative and create your own look):

Width: 246

Height: 217

Corner Roundness: 24 px

Fill: Radial Gradient (#666666, #333333)

Figure 9-5 shows the gradient handle positions

used to create the soft radial fill

Figure 9‑5 Gradient handle positions

Figure 9-7 shows the position of the gradient handles on the design surface By setting the last opacity stop to 0% and positioning the last handle in the middle of the rectangle, the base rectangle (with the radial gradient) is still visible beneath this new highlight.

Adding some color

We’ve been working with grayscale fill values up to this point Let’s add a little color to these nails to help them stand out from the background Select both of the rounded rectangles and apply a Hue/Saturation filter (Filters ➤ Adjust Colors ➤ Hue/Saturation) with the following values:

Figure 9‑7 Gradient handle positions

for our highlight rectangle

Creating the thumbnail symbol

Now that the design of the thumbnail is complete, and knowing that we need to use it three more times, let’s convert the thumbnail elements to a symbol and create multiple instances of it Start by selecting all of the thumbnail elements: the base rectangle, the highlight rectangle, and the shadow Then, right- click the canvas and choose Convert to Symbol When the dialog opens, enter portfolioThumb

as the name and set the type to Graphic Finally, click OK to create the thumbnail symbol

The three elements you just selected have now been replaced with a single symbol instance on the canvas You can double- click the symbol instance at any time to edit the underlying artwork Create three copies of the thumbnail and position them on the canvas so your final layout resembles that shown in Figure 9-9

Figure 9‑9 Final thumbnail layout

Building the portfolio detail pages

Each thumbnail on the gallery page will link to a specific detail page that includes a large thumbnail, a title, and a description We’ll start by creating the base layout as a new page, and then duplicate that page three times for a total of four unique detail pages

To save a little time, we can start by duplicating the Information page created earlier It already contains title and description elements that will make the creation of these subpages fly by To dupli-cate the Information page, switch to the Pages panel, right- click the Information page, and select Duplicate Page Adjust the position of the title and description elements, and then add an instance of

Figure 9‑10 portfolio detail page

Duplicating the pages and finalizing page names

Create three additional pages by duplicating the detail page you just created Change the title of each page to correspond to a specific thumbnail (as in “portfolio Item 1,” “portfolio Item 2,” and so on) Also apply a Hue/Saturation filter to the large thumbnail symbol on each page to create a unique color for each page

Now, switch back to the Pages panel one final time and update the names of your pages so that they match the page names shown in Figure 9-11

Adding hotspots and interaction

In the previous section, you defined all of the pages of your mock application and took the time to give each page a name that represented its content accurately You’ll now add button hotspots to each

of the pages and assign actions to each hotspot that navigate between the pages when the buttons are clicked

Global navigation

Let’s start by defining the global navigation that will be shared across all pages in the application And

where would we define global navigation? In the master page, of course!

Creating the hotspots

Select the master page in the Pages panel, and then select the

Rectangle Hotspot tool, which you will use to draw the hotspots

on the navigation buttons Draw hotspot rectangles over both

of the tabs so that your document looks similar to Figure 9-12 Figure 9‑12 Tab hotspots in place

Add one more hotspot that will be used to drag the application around the screen Select the Polygon Hotspot tool and draw a shape around the header area of the layout, making sure to exclude the tabs and leaving room for minimize, maximize, and close buttons Your polygon should look like that shown in Figure 9-13

Figure 9‑13 header-drag- area hotspot in place

Figure 9‑14 Assigning a link in the property inspector

Continue by setting the link of the Information tab to the Info.htm page The third hotspot’s link on the master page is assigned a little differently Instead of targeting a specific page, we want it to per-form an AIR- specific action: window dragging Fortunately, you don’t have to know any code to do this Simply select the polygon hotspot, and then select Commands ➤ AIR Mouse Event ➤ Drag from the main menu The Link field is automatically updated with the following code:

events:onMouseDown='window.nativeWindow.startMove();'

You could have typed this code into the Link field, but using the command is much faster and nates the chance of error We’re sure you noticed the other commands available in the AIR Mouse Events category In addition to Move, Fireworks includes commands for Minimize, Maximize, and Close We’re not going to add buttons for those events in this chapter, but you can follow the same steps that we’ve already covered to add those buttons yourself

elimi-Defining links on the gallery page

With the master page links defined, we can move on to the Gallery page Each thumbnail in the gallery needs to link to its corresponding detail page Navigate to the Gallery page using the Pages panel, and then draw rectangle hotspots over each of the thumbnail symbols Using the same technique as you did for the tab hotspots, assign the link of each thumbnail to its corresponding detail page using the drop- down Your final layout with hotspots in place should look like Figure 9-15

Figure 9‑15 Thumbnail hotspots on the Gallery page

Creating the Adobe AIR package

And now for the part you’ve been waiting for—creating the AIR application! With all of the design work out of the way, our internal navigation defined, and AIR events assigned to buttons, it’s time to create our application

Launch the Create AIR Package dialog by selecting Commands ➤ Create AIR Package from the main menu The dialog, shown in Figure 9-16, includes a number of fields that must be completed before your application can be published

Figure 9‑16 Create AIR Package dialogThe following list explains the role each field plays in the final application.

Under the Application Settings section:

Name: The application name will be seen in installation screens and desktop shortcuts

ID: The unique identifier for your application This is used internally by AIR applications and can usually be the same as the application name

Version: The version number of your application This will be seen when the application is installed and is a useful reference if you create multiple interactions of your application for clients

Description: A custom description for your application that will be seen when the application is installed

Copyright: Copyright string that is also displayed in the installer.

Window Style: Drop- down that allows you to select chrome settings for the application.Window Size: The default width and height settings

Icon: The application icon

Under the Installer Settings section:

Content: Option that has Fireworks automatically generate files based on all of the pages in the document When checked, a dialog box launches so you can select a target folder for file generation

Initial content: The start page of the application Click the Browse button to select the start page

Included Files: The list of files that will be added to the AIR file, normally generated by the Package content property

Digital Signature: Adobe AIR applications must have a digital signature in order to be installed Click the Set button to browse to a digital signature file on your system See the upcoming

“Creating a digital signature” section for more details on this

Destination: The name and location of the generated AIR file

For the most part, each of these fields is pretty straightforward however, there are a couple of tions that need a little more explanation

sec-Packaging content

For the scenario described in this chapter, you will always check the Package content option When you first check this box, a Folder Browser dialog will launch Select or create a folder that will house the temporary files required for this application Once you’ve selected a folder, hTML and images will

be generated for all of the pages in your document and added to the folder you just specified The generated files will then be added to the Included files list in this dialog box Click the Browse button

to select Gallery.htm from the Export folder This will be the file first seen when the application launches

Creating a digital signature

Adobe AIR applications require a digital signature Click the Set button to launch the Digital Signature dialog shown in Figure 9-17

Figure 9‑17 Selecting a digital signature

You can either browse for an existing signature or create one directly from this dialog Click the Create button to launch the Create Certificate dialog shown in Figure 9-18

In the Certificate file field, enter a name for the generated file, like MyCertificate The certificate file will

be generated in the folder you selected for the content Complete the additional fields and enter a password for your signature file Once all of the required fields have been completed, the Create but-ton will be enabled Click the Create button and this dialog box will close, returning you to the previ-ous Digital Signature dialog shown in Figure 9-17

Figure 9‑18 Creating a digital signature (certificate)

The certificate path should now reference the signature file you just created Enter the password you specified and click the OK button For subsequent AIR packages that you create, you can click the Browse button and select the signature file that you just created

Previewing the AIR file

Before you create the AIR application, you can click the Preview button to see what your application will look like When you choose Preview, you bypass the AIR installation process and get to a sample application immediately This is much faster than publishing the AIR file and stepping through the installation process

Creating and installing the AIR file

With all of the fields in the Create AIR Package dialog complete, you can now click the Create Package button Once the dialog box closes, you can browse to the location of the AIR file you specified and double- click the file to launch the Adobe AIR Installer Figure 9-19 shows an AIR Installer similar to the one that will be seen with your newly created file The settings you entered in the Create AIR Package dialog should be honored in the Application Install dialog that launches

Figure 9‑19 Adobe AIR Application Install dialogWith your application installed, you can now launch it from the desktop, Start menu (Windows), Applications Folder (Mac), or Dock (Mac) Figure 9-20 shows the published version of our final AIR application running on a Vista desktop Notice the support for full alpha- channel transparency on the desktop Nice!

Figure 9‑20 Final AIR application running on the desktop

Summary

This chapter stepped you through all of the tasks required to create a true AIR application from your Fireworks mockup You learned how to organize your document using pages, add hotspots that cre-ate interactivity between those pages, and assign AIR- specific commands to hotspots to enable win-dow dragging, minimizing, maximizing, and closing You can now use this knowledge to create fully self- contained AIR application mockups that you can send to clients and colleagues for immediate feedback Use the Version field of the Create AIR Package dialog to help keep track of mockup ver-sions as you incorporate feedback into each round of design You should see by now that Fireworks’ AIR support is not intended to replace a dedicated AIR environment, but rather takes advantage of the AIR platform to empower more sophisticated application mockups

Many of the applications in the Adobe Creative Suite include support for extensions,

and Fireworks CS4 is no exception Extensions are a means of enhancing the

applica-tion, much like plug- ins or macros in other applications Fireworks has a rich history

of extensibility, with scores of freely (and commercially) available extensions ble online These extensions range in complexity from simple commands (“Distribute Frames to Pages” by John Dunning, for example) to sophisticated Flash- or Flex- based command panels (such as 3D Rotate by Aaron Beall)

accessi-Extensions add to the power of Fireworks, often automating repetitive tasks or plifying complex operations Here are a couple examples of the types of extensions that can be found online

sim-You can find command extensions that

Generate web- safe guides and bounding boxes for various web browser sizes Convert all text to lowercase, uppercase, or title case

Delete all of your empty layers

FIREWORKS EXTENSIONS