Adding Connector Lines to the Document
Now you'll use the new Connector tool in FreeHand to add connector lines to the document. The connector lines show how the home page links to the individual files you specified.

• In the Tools panel, click the Connector tool.
• Move the pointer over the bottom line of the Home rectangle (see Figure 5).
• Hold down the mouse button and drag a connector line down to the top line of the Showroom rectangle. When you begin dragging, the Home rectangle becomes selected, indicating that there is an object from which a connector line can start. When you reach the Showroom rectangle, it also becomes selected, indicating that there is an object where the connector line can end.
• Release the mouse button.
• A connector line appears between the Home rectangle and the Showroom rectangle.

  Note: If there isn't enough space between rectangles to accommodate the default arrowheads of the connector line, the tool cannot draw the line properly. If you encounter this problem, try increasing the space between rectangles.

• Position the pointer near the starting point of the connector line you drew in the previous steps (the bottom line of the Home rectangle) and hold down the mouse button so that the Home rectangle is selected again.
• Drag another connector line to the top line of the News and Events rectangle. The Connector tool can be sensitive, so this may take some practice. Make sure that both rectangles are selected before you release the mouse button.
• Draw a third connector line from the bottom of the Home rectangle to the top of the Owners rectangle.
• Draw a fourth connector line from the bottom line of the Home rectangle to the top line of the Financial Services rectangle.
• Move the pointer over the handle at the center of the horizontal line you drew in step 8.
• The pointer changes to a resize pointer.
• Drag the horizontal line upward until it overlaps the other horizontal line on the page, as shown.
• Continue drawing connector lines until you have linked the Home rectangle to all the other rectangles on the page. Reshape connector lines as necessary by dragging the resize handles on the connector lines (see Figure 7).

You now have a FreeHand document that shows the full navigation scheme. Your lines indicate that the Home page links to five separate pages called Showroom, News and Events, Owners, Financial Services, and Previews. It also links to a page about a featured technology, as well as to a page that provides the results of the search application that you'll build later.

Exporting the Plan as a SWF File
After sketching your site navigation, you can present the preliminary plan to your client or members of your group in a browser window. This is particularly convenient if you want to share the document with people who do not have FreeHand.

• With your navigation scheme open in FreeHand, select File > Export.
• The Export Document dialog box (Windows) or Export dialog box (Macintosh) appears.
• Select Macromedia Flash (SWF) from the Save As Type pop-up menu (Windows) or Format pop-up menu (Macintosh).
• (Optional) If you want the file to open with Macromedia Flash Player immediately upon export, select Open in External Application, select Macromedia Flash Player from the External Application dialog box, and click Open.
• Click Save (Windows) or Export (Macintosh).
• The file is exported as a Flash SWF file to the location specified in the Export Document dialog box (Windows) or Export dialog box (Macintosh). If you selected Open in External Application, the plan opens in Macromedia Flash Player.
• You can now present the plan on any computer running a web browser and Flash Player. To view the plan in a browser window, drag the trio_navigation.swf file to an open browser such as Internet Explorer or Netscape Navigator. You can also present the plan with Flash Player alone by double-clicking the file.

Note: When you open the trio_navigation.swf file in a browser, the plan is automatically resized to fit in the browser window.

Completed versions of the files you created in this tutorial are available in the trio_motors_complete directory on the Studio MX 2004 CD. To locate the directory, insert your Studio MX 2004 CD, click Browse CD contents, and select the Samples folder.