RICHARD GIBSON

Freelance Writer and Editor

Design Works tutorial for MacUser magazine

CREATING SMART ROLLOVERS IN PHOTOSHOP AND GOLIVE

 

There are two ways to create rollovers in GoLive: Smart and Lean. Smart Rollovers offer more functions, including nested actions, but they also contain more Javascript code. Lean Rollovers are designed for the most basic actions.

 

For buttons as simple as the ones in this tutorial, you could, as effectively, make them as lean rollovers. The smart rollover option has been chosen for this, as it is not too difficult to master, and is useful to know. You can also convert smart rollovers into lean ones if, for example, you want to use them elsewhere to perform more simple tasks. Since the extra Javascript contained in smart rollovers can affect their performance, to make them operate more efficiently, you can extract the code from the page and export it into a separate library file.

GoLive provides you with the means to create complex actions, even if you have absolutely no knowledge of Javascript, and will not require you to write a single word of code. You can also easily check for errors without being a programming expert. Once you have created smart rollovers, if you are careful to stick to the correct naming convention for each mouse event, you have only to name the file for the Normal, or Base, state in the Image Inspector, and it will then automatically produce a hyperlink to the other files used in the action. This is especially convenient when creating actions that carry out a number of different functions.

Rollover buttons for navigation are usually made from variations on the same image, and are more often than not the same size. But if, as in this workthrough, the Over or Down button is larger image than the Base button, you need to make the canvas size big enough to contain the largest one. If you do not, the browser will default to the size of the first imaage, and squash all the others. If you have already created your first image and trimmed the canvas, open the largest one, draw a narrow rectangular box from the top to the bottom of the canvas, set the opacity to 0% in the layers palette, to make it invisible, then cut and paste it into the other images, and finally retrim the canvas to fit.

If you need to use the same button a number of times with different text, you can keep the text on a separate layer, which will then be edited as a Smart Object in GoLive.

The site window has a wide range of useful funtions for organising many aspects of your site. However, GoLive, like Photoshop and Illustrator, is not the easiest of programs to navigate, and certain basic functions do not always operate in the most obvious way. This can often lead to a great deal of time wasted for new users, as they thumb through the handbook, tearing out great clumps of hair as they go.

A prime example of this is keeping the site window in view, wich you might expect to be easily acccessible, but which is inclined to vanish in the course of switching between applications. You can waste precious time searching the layout window for a button or a menu action to get it back. Don’t bother, as you won’t find one!

Instead, here is what you must do: either choose Open from the File menu, and locat the file marked .site in your site folder, or retrieve it by clicking the icon for the .site file in the finder.