Prototyping

The purpose of a prototype or "clickthru" is to give the client an opportunity to test the navigation using the "comp."

The great advantage the Studio offers you, the developer, is the opportunity to choose from several methods of accomplishing the same task. This builds efficiency into the process because the method chosen fits your workflow. "clickthrus" are a great example of this. Thus, there are a number of ways to accomplish this using the Studio:

• Design all the pages in Fireworks MX 2004. Slice the pages, add the hot spots and links, and export the resulting files to Dreamweaver MX 2004. From there, the resulting HTML page created in Fireworks can be posted to the client site.

• Do the slicing and dicing in Fireworks but do the final assembly, including links, in Dreamweaver.

• Do the assembly in Freehand MX and select File, Export as HTML.

Then again, if, like Tom Cruise in Top Gun, you "feel the need for speed," you just can't beat a new feature of Freehand MX: the Action tool.

Using the Action Tool in Freehand MX

Every now and then, a software manufacturer slips a new feature into the application that makes one wonder how one ever lived without it. Layers in Photoshop is a great example. The Action tool in Freehand MX is another.

This tool creates a clickthru using the multiple page feature of Freehand MX. It does this by assigning Flash Actions to areas of the Freehand image and then creating a fully interactive .swf file that can be dropped into Dreamweaver. To use the Actions tool, follow these steps:

1. Open the ClickThru.fh11 file located in the Chapter Five exercise folder. If you don't see six pages on your screen, select Fit All from the Magnification pop up menu located in the bottom-left corner of the document window.

   For this exercise, we will be creating a link that moves from the Number 1 on Page 1 to Page 6. The next link will simply be from Page 6 back to Page 1 and from the Sports page to the main page. If you can create that simple combination, you will have mastered the use of the tool.

2. Open the Document Properties to see the page order as shown in Figure 5.21. The pages we will be linking are Pages 1 and 6.

   Figure 5.21. The ordering of multiple pages in Freehand MX is set using the Document Properties panel or the Page tool.

   

   Note

   When working with multiple pages in Freehand MX, you can't simply move the pages around in the main window. There are two ways to accomplish this task.

   The first is to click and drag the pages to be moved in the View window of the Document Properties panel. If the page to be moved isn't visible, click on a page in the panel and press the spacebar. When you see the cursor change to the Grabber Hand, drag the window until the page is visible.

   A less convoluted method is to select the Page tool, the icon under the solid arrow in the toolbar, and in the Show All view, drag the page to its final position. Hold down the Alt (PC) or Option (Mac) key when you drag the page with this tool to create a copy of the page. If you simply want to add a page, click the Add Page button beside the Preview pop-down.

3. Select Page 1 in the View window of the Document properties. This makes Page 1 the active Page.

4. Zoom out to 25% view in the Magnification pop up window. All six pages are visible.

5. Select the Actions tool on the toolbar. It is beside the Connector tool and looks like a black arrow in a blue circle.

6. Click once on the number 6 on Page One and click once, anywhere , on Page 6. A blue line appears to meander between Pages 1 and 6 as shown in Figure 5.22. This is the Link. The blue square with the plus sign on Page 1 shows the start point, and if you follow the line, it ends on Page 6. Create another link from Page 6 back to Page 1.

   Figure 5.22. The blue line, created by clicking the Action tool on the start and end points of a link, shows the navigation path .

   

7. Open the Navigation panel or double-click the start point of the navigation path the blue arrow in the boxto open the Navigation panel shown in Figure 5.23.

   Figure 5.23. The Navigation Panel in Freehand MX enables you determine the event that starts the navigation and the final location.

   

Navigating the Navigation Panel

If you are familiar with Flash MX or earlier versions of Flash, the Navigation panel in Freehand MX uses the same drag-and-drop metaphor for ActionScript coding as the "Behaviors" panel of Flash MX. Though not as complete or robust as its Flash counterpart , the Actions included are more than sufficient to undertake some very sophisticated tasks . Some of the more important Actions available to you through the Actions pop-down menu are:

• Go To and Stop jumps to a frame or scene and stops playback. Use this if you are moving between Freehand pages.

• The Go To and Play action jumps to a frame or scene and continues playback. If you are working on a clickthru, avoid this one because it will go to the targeted page but then just keep playing.

• The Get URL action retrieves the URL listed in the Link text box in the Navigation panel. Use this if you add buttons that open web pages.

• The Play and Stop actions play and stop movies. If you have a Stop action assigned to a page, the movie stops dead on that page unless there is an Action such as "Go To and Play" or "Go To and Stop" assigned to a button on the page.

• The Full Screen action displays the movie in the Flash Player in full-screen mode, rather than normal mode.

When you assign an action, you also select an event that will cause the action to run when the movie is played . A mouse click or the arrival of the movie's playback head at a specified frame are events that can trigger an action during movie playback.

Removing an Action

There will be times when you make a mistake with the Actions tool. Just for the record: We speak from bitter experience. Here is how to remove a link:

1. Open the Navigation panel.

2. Select None in the Actions pop-down menu. The blue link will vanish .

Testing and Publishing Actions

To test a series of links, follow these steps:

1. Save the document.

2. Select Window, Movie, Test. When you release the mouse, the movie will compile and Flash Player 7 will open.

3. Click the links.

Tip

This process actually mirrors the process used by Flash. In fact, you can skip the Window Menu completely and use the Flash keyboard command to test a movie: Control-Enter (PC) or Command-Return (Mac).

Having confirmed everything works to your satisfaction, you can now publish the document and place it in a Dreamweaver page. The file you will be creating is a .swf file. Here is how to create the .swf file:

1. Select File, Export or press Command-Shift-R (Mac) or Control-Shift-R (PC). This opens the Export dialog box shown in Figure 5.24.

   Figure 5.24. The Export dialog box in Freehand MX.

   

2. Name the file, navigate to the location to which the file is to be saved, and select Macromedia Flash SWF from the Format pop-down menu. Click Export and the .swf file is created.

3. Quit Freehand, launch Dreamweaver, and open a new Dreamweaver page.

4. When the blank page opens, click the Flash button on the Insert toolbar to open the Select File dialog box. Navigate to the folder where you saved the .swf file in Freehand. When you locate the file, click it once and select Choose at the bottom of the dialog box.

5. The .swf file will import into Dreamweaver MX 2004 as a gray box with a Flash icon. Click the Play button on the Dreamweaver Property Inspector to see the file and test it. You can also test the file in a browser by pressing the F12 key.