Creating linked images and image maps

Any object you create in LiveMotion, including a rollover, can be linked to a Web page address, called a Uniform Resource Locator (URL), transforming the object into a button that links the user to another Web page. An image map is an image on a Web page that contains multiple links. Areas of an image map, called hotspots, link to various URLs.

For example, you can create an image map of an office floor plan. Clicking any office in that image would take users to a Web page about the person in that office.

Note the following:

• You create image maps in LiveMotion by first attaching links to individual objects. Then, using the Export HTML Page option, you export the objects as a single image. LiveMotion generates the HTML code for the image map. You can then open the HTML page and copy and paste the HTML code into the source of your Web-page design application.
• LiveMotion creates client-side image maps in which the links are interpreted by the browser itself. Unlike server-side image maps, client-side image maps don't need to contact the server to function, and thus are significantly faster to navigate.
• You can open the resulting image maps and pages in Adobe GoLive and edit them there.

To link an object to a URL and create an image map when exporting in AutoLayout, GIF, JPEG, and PNG formats:

1. Select the object to which you want to assign a URL.
2. Choose Window > Web to display the Web palette.
3. Enter a URL in the URL text box.

Entering a URL
4. Repeat steps 1 through 3 for additional objects you want to use as an image map.
5. Select AutoLayout, GIF, JPEG, or PNG from the Export palette Format menu.
6. Export the composition with Make Page selected. (This is automatically selected for AutoLayout format.)

LiveMotion exports the image files and creates an HTML page with the client-side image map.

Note: If you overlap objects in creating an image map, the topmost object is the active hotspot in the overlapping area.

To assign a URL link to a rollover when exporting as AutoLayout HTML:

1. Select the rollover to which you want to assign a URL.
2. Choose Window > Web to display the Web palette.
3. Enter a URL in the URL text box.
4. Repeat steps 1 through 3 for additional rollovers to which you want to assign URLs.
5. Select AutoLayout and click the Make HTML Page button  on the Export palette Format menu.
6. Export the composition.

LiveMotion exports the image files and creates an HTML page with JavaScript rollover actions.

Important: Avoid applying URLs to overlapping rollovers when exporting to AutoLayout format. This can result in errors when you export the files.

To assign a URL link to an object or rollover when exporting as SWF:

1. Select the object or rollover to which you want to assign a URL.
2. Choose Window > Web to display the Web palette.
3. Enter a URL in the URL text box.
4. Repeat steps 1 through 3 for additional objects or rollovers you want to link to a URL.
5. Choose Window > Export to display the Export palette.
6. Select Macromedia Flash (SWF) from the Export palette Format menu.
7. Click the Export HTML Page button  on the Export palette if you want to view the SWF file at the same dimensions at which you authored it.
8. Export the composition.

LiveMotion exports the SWF file. If Export HTML Page was selected, LiveMotion makes an HTML page with the SWF file imbedded in it.

Note: The SWF file contains the link information instead of the HTML page. For SWF export, HTML image maps are not created. Also, this links the rollover to a single URL.

To assign a URL link to an object's rollover state when exporting an SWF file:

1. Select the object to which you want to assign a URL.
2. Choose Window > States to display the States palette.
3. If you want, create additional rollover states.
4. Select a state in the States palette. Then click the Script button on the States palette to open the Script Editor.
5. Click the Scripting Syntax Helper button  in the Script Editor.
6. Expand the LiveMotion 1.0 Behaviors triangle  in the left pane of the Script Editor window.
7. Double-click the option, Go to URL.

LiveMotion adds the necessary code in the right pane of the Script Editor.

8. Select the text "url" in the right pane and enter the URL you want to link to that state of the rollover.
9. Select the text "window" in the right pane and enter the target using the standard HTML tag for targeting windows or frames. (The appropriate text to enter for a target is listed in the bottom pane.)

For more information on linking each state to a separate URL, see the Adobe LiveMotion 2.0 Scripting Guide.