Adobe LiveMotion is a great tool for Web enthusiasts and professional designers. It lets you create static and motion graphics easily, thanks to its familiar Adobe interface.
LiveMotion independently modifies individual images, so creating sophisticated effects such as remote rollovers is relatively simple. Unlike standard rollovers, which swap one graphic with another, remote rollovers allow one graphic to trigger the behavior of another. For example, say a page on an animal lover’s site shows a Pet The Cat button on the left and a blank space on the right. When you mouse over the button, a picture of a contented cat appears in the space. As the mouse moves off the button (called mouse out), the cat disappears.
Remote rollovers add interactivity and a bit of fun to your sites. I’ll show you how to create basic remote rollovers and then export them in formats that almost all Web surfers can see. If you want to try before you buy, download a free 30-day trial from https://www.adobe.com/products/livemotion.
Molly E. Holzschlag is the author of Teach Yourself Adobe LiveMotion in 24 Hours (Sams, 2000). You can learn more about her books, articles, and seminars at https://www.molly.com.
1. Design the Trigger Object The first task is to create a trigger–the object people see when they load the page. After you create the trigger in LiveMotion or import it, you’ll add standard rollover states to it (Normal, Over, and Out).
To create a canvas, select New from the File menu. Click on OK to accept the default composition settings. Make a trigger object in the program or place a premade object. I used the type tool (A) to create a text trigger.
Next, produce standard rollovers for the trigger object. Select the object with the pointer tool (B). In the Rollovers palette (choose Window: Rollovers), click on the New Rollover State button (C). The Over state will appear in the palette.
Select the Over state and change the trigger object’s appearance. Because I wanted the object to change from black to brown when it was moused over, I selected the object and used the eyedropper tool (D) and the color picker (choose Window: Color) to grab a different color.
Click on the New Rollover State button again to create an Out state. I made my Out color black, the same as my Normal color.
2. Creating the Remote Object The remote object–the one that appears when you mouse over the trigger object–can be simple or complex, and it can appear anywhere on the page. As you do for the trigger object, you create separate Normal, Over, and Out states for the remote object.
Place the remote object (A) (File: Place). Select it, and in the Rollovers palette, you’ll see the Normal state.
Because I wanted my remote object to be invisible at first, I set its Normal-state opacity to 0 by moving the Object Layer Opacity slider (B) in the Opacity palette (Window: Opacity) to 0.
Click on the New Rollover State button. When the default Over state appears, choose Custom State from the pop-up menu. In the resulting dialog box (C), name the state. I named mine image remote. For this state, I set the Object Layer Opacity slider to 100 percent, because I wanted the remote object to appear when someone moused over it.
Click on the New Rollover State button again. Choose Out from the pop-up menu. Now you can control what the object looks like when the mouse leaves it. I set the Object Layer Opacity slider to 0, making it disappear on mouse out.
3. Connecting the Trigger and the Remote Objects Now you have rollovers for the trigger and remote objects, but the rollover states aren’t connected between objects. To make that connection, you’ll target the corresponding rollover state in the Rollovers palette.
Select the trigger object. In the Rollovers palette, highlight the first state in which a rollover occurs. In my example, that’s the Over state. Drag the targeting button (to the immediate left of the Rollover thumbnail (A) ) from the palette to the remote object. When the boundary box of the remote object appears (B), drop the target.
The remote object now appears in the Rollovers palette, underneath the Over state. From the pop-up menu (C) choose the corresponding rollover state for the remote object (here, Image Remote).
Connect the Out states in the same way.
To preview what you’ve done, click on the Preview button in the Tool palette (D), and then pass your mouse over the trigger object. If it triggers the remote event, you’re on the right track.
4. Prepare for Export You can save this remote rollover as a Flash file and embed it in an HTML page. However, if your audience isn’t likely to have the Flash plug-in, I recommend saving your rollover as HTML and JavaScript.
First, name your images. Select the trigger object. Open the Web palette (Window: Web). If you don’t see a File Name field, choose Detail View by clicking on the arrow in the upper right of the palette (A). In the File Name field (B), enter a name for the trigger image. I named mine text_over. Click on the remote object and name it using the same method.
Next, choose Edit: Composition Settings. When the dialog box appears, choose AutoLayout from the Export pop-up menu (C). Select the Make HTML option. Click on OK.
Open the Export palette (choose File: Export Settings). Choose GIF or JPEG from the pop-up menu (D). If you’re not sure which format to use, click on the Preview check box (E) and test your design using different settings. Use the Web Adaptive option (F) to limit the number of colors in the composition–this makes the size of the graphic files smaller.
5. Exporting HTML and JavaScript Exporting is the last stage of creating a remote rollover. You can export the files as HTML, GIF, JPEG, or Flash files. For Flash export directions, go to http://www.macworld.com/2000/10/howto/rollover1.html.
Once you’re satisfied with the export settings, choose File: Export As. Determine a location for the exported file and name the HTML file. Click on OK, and LiveMotion will render all the necessary graphics and code. To check the results, open the HTML file in your Web browser (A), (B).
