Task: Quick Reference Application

I l @ ve RuBoard

Now let's use our knowledge of cursors and rollovers to create a complete application. This application acts as a quick reference information guide on a topic, in this case the planets.

The movie has nine hotspots, each triggering a rollover information box to appear. These hotspots also are buttons that the user can click to go to a particular frame of the movie with more information.

One key element of this movie is that the rollovers work across all the frames . For instance, the user could click on Saturn to see the details about Saturn. Then, the user can roll over Jupiter to see Jupiter's rollover at the same time. Therefore rollover will be independent of the current frame. You can see this in Figure 13.6.

Figure 13.6. This complete application allows the user to see rollovers even while viewing other information.

graphics/13fig06.jpg

Start with the movie 13quickreference-noscripts.fla. This movie includes 10 frames. Frames 2 through 10 have information about each of the nine planets. In frame 1, labeled none, the information area is blank.

Nine buttons on the left, one for each planet. A summary movie clip appears when one of the buttons is rolled over. This movie clip also has 10 frames: a blank one and one about each planet.

Note that the layering of these elements is important. In the movie 13quickreference-noscripts.fla, I spread out the elements over three layers so that the summary movie clip appears on top of the others.

  1. Place stop(); scripts in the first frame of the main timeline. Also place one in the first frame of the summary movie clip. This prevents the main movie and the movie clip from animating when playback begins.

  2. Let's get the rollover working first. The hotspots are buttons, so we'll use the button rollover script. Here is the one for the Mercury button:

     on (rollOver) {     summary.gotoAndStop("mercury"); } on (rollOut) {     summary.gotoAndStop("none"); } 
  3. These buttons take the user to the frame of the movie that relates to the planet. This happens in the on (release) handler:

     on (release) {     gotoAndStop("mercury"); } 

    Note that now two frames are named mercury: one on the main timeline and one in the movie clip summary.

    With these two small scripts, the main portion of our functionality works. The rollovers appear, and the buttons work. Now, let's add a changing cursor.

  4. The 13quickreference-noscripts.fla movie has a cursor movie clip placed slightly off the screen. Inside this clip is a normal frame and an over button frame. You'll need to add a stop(); command to the first frame.

  5. Add this script to the cursor movie clip so that it follows the location of the cursor:

     onClipEvent(load) {     // hide the real cursor     Mouse.hide();     // bring this movie clip to the front     this.swapDepths(99999); } onClipEvent(enterFrame) {     // follow the mouse     this._x = _root._xmouse;     this._y = _root._ymouse; } onClipEvent(unload) {     // show the real cursor again     Mouse.show(); } 
  6. Next, let's make the cursor change to its over button state when it moves over any of the buttons. We'll add some code to the button scripts to do this. Here is the next complete button script:

     on (rollOver) {     summary.gotoAndStop("mercury");     cursor.gotoAndStop("over button"); } on (rollOut) {     summary.gotoAndStop("none");     cursor.gotoAndStop("normal"); } on (release) {     gotoAndStop("mercury"); } 
  7. Don't forget that you need to put scripts similar to the preceding button script on each button. The only difference is that the word "mercury" needs to be replaced with "venus," "earth," and so on. This corresponds to the names of the frames in the main timeline and the names of the frames in the summary movie clip.

This completes the scripts needed for the quick reference movie. You can test it with the movie you made, or use 13quickreference.fla.

This example is just one way to make a quick reference movie. You can get much more creative with your buttons, rollovers, and information areas. A movie like this could comprise the complete contents of a small Web site.

I l @ ve RuBoard


Sams Teach Yourself Flash MX ActionScript in 24 Hours
Sams Teach Yourself Flash MX ActionScript in 24 Hours
ISBN: 0672323850
EAN: 2147483647
Year: 2002
Pages: 272

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net