Information Rollovers

I l @ ve RuBoard

A common technique in applications that need to display large amounts of information is to use rollovers to bring up information instead of requiring the user to click on buttons .

The general idea is to allow the user to quickly roll over various hotspots. Each hotspot triggers a different piece of information that appears in another part of the screen.

Figure 13.4 shows an example. The nine hotspots, each with the name of a planet, appear on the left. The user has moved the cursor over a hotspot, which triggers another movie clip to display information to the right. When the user moves the cursor off that hotspot, the information disappears.

Figure 13.4. This rollover example has nine hotspots. Each brings up different information.

You can create rollovers with ActionScript in many different ways. Let's take a look at a few of them.

Rollovers Using Buttons

Earlier in this chapter, you saw the on (rollOver) and on (rollOut) handlers used with buttons. You can use these for rollovers in a similar way. In fact, the second cursor task basically turned the cursor into a rollover. The code is the same.

The following code is an example of using buttons to create rollovers. When the button is rolled over, another movie clip is sent to a specific frame. Check out 13buttonrollover.fla to see it in action.

 on (rollOver) {     information.gotoAndStop("information 1"); } on (rollOut) {     information.gotoAndStop("none"); } 

Buttons make good choices as rollover hotspots because you can also easily attach a script to an on (release) handler that performs another action. So rolling over the Mercury button brings up a summary of the section on the planet, and clicking on the button goes to that section.

Rollovers Using Movie Clips

You can also detect when a mouse enters and leaves a movie clip. However, you have to use a little more code to do this. There is no such thing as a onClipEvent(mouseOver) handler, so you have to use another method.

The hitTest function tells you whether the cursor is over the movie clip. So you could do this:

 onClipEvent (enterFrame) {     if (this.hitTest(_root._xmouse,_root._ymouse, true)) {         _root.information.gotoAndStop("information 1");     }  else {         _root.information.gotoAndStop("none");     } } 

This works, but it presents a few problems. First, it continually sets the frame of the information movie clip over and over. Every frame that goes by, a gotoAndStop is executed.

In addition, consider whether there is more than one rollover. The first one might send the information movie clip to frame none, whereas the other one will send it to mercury. They will constantly be sending conflicting messages to the information movie clip.

A better way to handle this is to make the script remember whether the cursor is currently over the movie clip. If it is, it should only act if the cursor leaves the movie clip. If it is not, it should only act if the cursor enters the movie clip.

To do that, we'll use a variable, called over in the following script, to hold a true or false depending on where the cursor is. Then once per frame, the script uses hitTest to see whether the cursor is really over the movie clip. Only if this conflicts with over , then a change is made.

 onClipEvent (load) {     over = false; } onClipEvent (enterFrame) {     // if the cursor over it right now?     testOver = (this.hitTest(_root._xmouse,_root._ymouse, true));     // if it is over it, but wasn't last time     if (testOver and !over) {         _root.information.gotoAndStop("information 1");         over = true;     // if it isn't over it, but was last time     }  else if (!testOver and over) {         _root.information.gotoAndStop("none");         over = false;     } } 

Check out 13mcrollover.fla to see this script in action.

Rollovers Using Frames

As I mentioned at the start of this section, there are many ways to create informational rollovers. I want to show at least one variation here.

Instead of using a single movie clip to hold all the information in the rollovers, you could use the main timeline. The first frame of the main timeline could be the none frame, and each one after that could hold information relating to each of the hotspots.

Figure 13.5 shows the main Flash window for the movie 13framerollover.fla. You can see that the buttons are stretched over all three frames of the movie, whereas the information layer has different elements for each frame.

Figure 13.5. This method of doing rollovers adds more frames to the movie but doesn't require an additional movie clip.

This example uses buttons for the hotspots. However, you could also use movie clips with onClipEvent(enterFrame) handlers.

The scripts look similar to the script from the button rollovers. However, instead of addressing the gotoAndStop command to the information movie clip, it just goes to the main timeline, which is at the same level as the buttons themselves :

 on (rollOver) {     gotoAndStop("information 1"); } on (rollOut) {     gotoAndStop("none"); } 

The advantage of doing it this way is that it makes it easier to edit the information on each frame. You don't have to dig inside a movie clip. If you are used to editing many frames in your Flash movie, this is probably a better solution than the one in 13buttonrollover.fla.

Notice that the results of all three rollover examples are identical. The button method, movie clip method, and frame method all produce the same results. This shows how ActionScript programming is largely based on your own personal style that you will develop as you learn.

I l @ ve RuBoard