Using the Advanced Script to Call Custom Functions

While the Load URL, Load Movie, and Simple Script options allow you to perform most of the more common actions that occur when clicking a button in Flash, there are some obvious limitations. The most obvious problem is that you can, for example, direct the component to send a simple script command at the same time it loads a movie or loads a URL. If you use the first three options in the Action parameter, you can only have one type of action occur at a time.

The Advanced Script option in the Action parameter provides a means to trigger more than one action at a time. However, as the designation "Advanced" suggests, you do need more advanced skills in coding ActionScript. In particular, you need to be able to write a function that performs.

While we don't have enough space in this book to teach you the ins and outs of writing a function, we can take a look at an example to see how it works. The following example will show you how to leverage the built-in function calls in the Advanced Script parameter.

On the CD 

Locate the following files on the CD and copy them to the same directory on your hard drive:

     video0.swf                 video3.swf                empty.swf     video1.swf                 video4.swf                take2_function.fla     video2.swf                 video5.swf 

Open the take2_function.fla file. Go ahead and test the movie. Roll over the Instructors header and click any of the submenu options. Notice that when you click the submenu items, the "content" movie clip goes to a new frame and a video loads (see Figure 5.27).

Figure 5.27: Clicking the submenu items under the Instructors heading both displays a different frame of the movie clip with the instance name "content" and loads a movie.

Also notice that clicking submenu items under different headings, such as Curriculum or Workshops, only shows a different frame of the "content" movie clip. Movies are only loaded when you click submenu items under the Instructors header. So, in this example, some submenu buttons trigger two actions, and some buttons only trigger one action. All of this is accomplished with a function that is called by the Advanced Script option in the Actions parameter of the Drop Down Menu component.

Incidentally, you probably noticed that an Output box was generated when you clicked any of the submenu items. We'll touch on this in a moment. For now, just close the Output boxes as you preview the movie. I'll show you how to get rid of this annoyance soon. When you have finished previewing the movie, close the test movie and let's look at how it works. Follow these steps to access the Advanced ActionScript functions:

1. Select the instance of the Drop Down Menu component on the stage and open the Component Parameters panel.

2. Click the Next Page button to open the second page of the Component Parameters panel.

3. Select Item 2 in the Menu Items parameter. Item 6 in the Sub Item For Main Item #2 parameter is automatically selected, which is fine for our purpose. All of the items in the Sub Item For Main Item #2 have the same settings for their click actions, so Item 6 is as good as Item 1 for observing the settings.

4. Click the Edit Click Actions button. Notice that the Advanced Script option is selected in the Actions parameter, shown in Figure 5.28.

   
   Figure 5.28: The Advanced Script option is selected.

5. Notice the text box below the Actions parameter labeled Advanced ActionScript. It contains the following functions:

                  dropdown_press();               dropdown_release();               dropdown_rollover();               dropdown_rollout(); 

When the Advanced Script option is selected, the component will send out these four generic function calls to the main Timeline. Obviously, these function calls are for a press event, a release event, a rollover event, and a rollout event, respectively. In other words, the dropdown_press() function is called when you click the corresponding submenu button. These function calls are sent out whether or not you have a function written that captures these function calls. If you don't have a function, nothing will happen—that is, no error message will be generated.

Notice that each function has two arguments. For example, the dropdown_press function is listed in the Advanced ActionScript field as:

       dropdown_press(2, 6); 

The first argument represents the main menu item, and the second argument represents the submenu item. Therefore, when the sixth submenu item under the second main menu item is clicked, the function will send out a call to the dropdown_press function with the arguments (2, 6). If the first submenu item under the first main menu is selected, then the arguments will be (1, 1).

The trick, therefore, is to write a function that takes advantage of these function calls. Let's look at the function that the take2_function.fla file utilizes. Close the Component Parameters panel and look at the Timeline. Notice the new layer named Function above all the other layers on the main Timeline. Select the first frame on the Function layer and press F9 to open the Actions panel (see Figure 5.29).

Figure 5.29: Open the Actions panel to view the ActionScript on the Function layer.

Listing 5.1 shows you the function located on the first frame of the Function layer. The function is on the first frame of the main Timeline to make it easy to access. Even though the code is on a keyframe, none of the code will be executed unless the function is called. Let's look at the code:

Listing 5.1: Leveraging the Function Call from the Drop Down Menu Component

              function dropdown_release(menu, item) {                 unloadMovie(_root.videoholder);                 if (menu == 1) {                    if (item == 1) {                       _root.content.gotoAndPlay("A1");                    } else if (item == 2) {                       _root.content.gotoAndPlay("A2");                    } else if (item == 3) {                       _root.content.gotoAndPlay("A3");                    } else if (item == 4) {                       _root.content.gotoAndPlay("A4");                    } else if (item == 5) {                       _root.content.gotoAndPlay("A5");                    }                 } else if (menu == 2) {                    if (item == 1) {                       _root.content.gotoAndPlay("B1");                       loadMovie("video0.swf", _root.videoholder);                    } else if (item == 2) {                       _root.content.gotoAndPlay("B2");                       loadMovie("video1.swf", _root.videoholder);                    } else if (item == 3) {                       _root.content.gotoAndPlay("B3");                       loadMovie("video2.swf", _root.videoholder);                    } else if (item == 4) {                       _root.content.gotoAndPlay("B4");                       loadMovie("video3.swf", _root.videoholder);                    } else if (item == 5) {                       _root.content.gotoAndPlay("B5");                       loadMovie("video4.swf", _root.videoholder);                    } else if (item == 6) {                       _root.content.gotoAndPlay("B6");                       loadMovie("video5.swf", _root.videoholder);                    }                 } else if (menu == 3) {                    if (item == 1) {                       _root.content.gotoAndPlay("C1");                    } else if (item == 2) {                       _root.content.gotoAndPlay("C2");                    } else if (item == 3) {                       _root.content.gotoAndPlay("C3");                    } else if (item == 4) {                       _root.content.gotoAndPlay("C4");                    }                 } else if (menu == 4) {                    if (item == 1) {                       _root.content.gotoAndPlay("D1");                    } else if (item == 2) {                       _root.content.gotoAndPlay("D2");                    }                 } else if (menu == 5) {                    if (item == 1) {                       _root.content.gotoAndPlay("E1");                    } else if (item == 2) {                       _root.content.gotoAndPlay("E2");                    } else if (item == 3) {                       _root.content.gotoAndPlay("E3");                    }                }            } 

This function contains a lot of lines of code. However, the code is very repetitive. Let's examine its basic structure. If we simplify things, the essential function is structured like this:

           function dropdown_release(menu, item) {              unloadMovie(_root.videoholder);              if menu = 1                 if item = 1                   else if item = 2                   else if item = 3                   else if item = 4                   else if item = 5              else if (menu = 2) {                 if item = 1                   else if item = 2                   else if item = 3                   else if item = 4                   else if item = 5                   else if item = 6              else if menu = 3                if item = 1                  else if item = 2                  else if item = 3                  else if (item == 4) {           ... 

As you can see, the function is composed of a series of if, else if conditional statements. If you look carefully, you'll see that if, else if statements correspond to each of the submenu items. For example, the if menu = 1 line corresponds to the first main menu in the Drop Down Menu component. The if item = 1 statement corresponds to the first submenu item under the first main menu item. The else if item = 2 line corresponds to the second submenu item under the first main menu item… and so on. Let's see how this works.

When a submenu item is pressed and released, the component sends out a call to the dropdown_release function. Included with this call to the dropdown_release function are the two arguments that correspond to the submenu that was clicked.

For example, let's say that you clicked the third submenu item under the second main menu item. The resulting function call would be:

          _root.dropdown_release(2, 3); 

Let's see how this would work with the function. Actually, the first thing the function does is execute the following code:

          unloadMovie(_root.videoholder); 

However, let's look at this in a moment. First we want to see how the arguments in the function call work. The second line with the dropdown_release function is:

          if (menu == 1) { 

This line checks to see if the first argument in the function call is equal to 1. Again, our example function call is:

         _root.dropdown_release(2, 3); 

so this first line of code would resolve to false because the menu argument is equal to 2, not 1. Therefore, the code would bypass everything within the if (menu == 1) { conditional statement. In other words, it would bypass all of the following:

           if (menu == 1) {                 if (item == 1) {                _root.content.gotoAndPlay("A1");             } else if (item == 2) {                _root.content.gotoAndPlay("A2");             } else if (item == 3) {                _root.content.gotoAndPlay("A3");             } else if (item == 4) {                _root.content.gotoAndPlay("A4");             } else if (item == 5) {                _root.content.gotoAndPlay("A5");             } 

The code would continue executing to the following line:

          else if (menu = 2) { 

This line would resolve to true because the menu argument does equal 2. At this point, the code would start evaluating the second argument in the function call. The second argument is equal to 3. So the code would first execute through the if statement within the else if (menu = 2) statement. In other words the code would execute this line:

          if (item == 1) { 

This line of code would resolve to false since the item argument is equal to 3. So the next two lines of code would be skipped:

          _root.content.gotoAndPlay("B1");          loadMovie("video0.swf", _root.videoholder); 

and the following line of code would be executed:

          } else if (item == 2) { 

Once again, the item argument is equal to 3, so this line of code would resolve to false. The next two lines of code would be skipped, and the following line of code would be evaluated:

          } else if (item == 3) { 

Finally, this would resolve to true because the item argument is equal to 3. Therefore the two lines of code within the else if conditional statement would be executed:

          _root.content.gotoAndPlay("B3");          loadMovie("video2.swf", _root.videoholder); 

These two lines of code execute two actions. The first line should look familiar. It tells the "content" movie to go to the frame labeled "B3" and play. The second line of code executes a LoadMovie function.

The LoadMovie function contains two arguments. The first argument is the movie to be loaded, in this example, "video2.swf". The second argument indicates where the movie should be loaded. In this example, the movie is loaded into a movie clip on the main Timeline that has an instance name "videoholder."

The "video2.swf" is a relative path. It assumes that the video2.swf file is in the same directory as the main Flash movie (in this case, take2_function.swf). You can also use other relative URLs such as "movies/video2.swf", which means that the video2.swf file needs to be in a subdirectory named movies. You can also enter absolute URLs such as http://www.flashfoundry.com/movies/video2.swf.

There is now a white dot character on the stage (see Figure 5.30). Flash uses this white dot to represent a movie clip that has no visible contents. Movies can be loaded into a movie clip, or they can be loaded onto the main Timeline as demonstrated earlier. The upper-left corner of the "videoholder" movie clip designates where the loaded movies will be positioned at.

Figure 5.30: The white dot represents the "videoholder" movie clip that is used for loading the movies.

Resolving an Annoying Problem

Before we conclude this chapter, let's revisit the problem that we observed when we were testing the movie. When you test the movie and click a submenu, Flash produces an Output window with a message that begins, "Error opening URL…." The cause of this Output window is a known bug in Flash. It is not indicative of anything that is actually wrong. However, it is annoying.

The problem is the second line of code:

         nloadMovie(_root.videoholder); 

This code removes any movie that has been loaded into the videoholder movie clip. There is no syntax error in this line of code, and it is a perfectly valid way to use the unloadMovie function. Flash simply mishandles it in the Test Movie environment. If you open the SWF file outside of the Flash environment, or if you view the take2_function.swf file in a browser, the file will work just fine, and you will see no error messages. It is only an annoying problem when you are using Test Movie.

Using Test Movie is very convenient, so it is fortunate that there is a simple workaround to the problem. The workaround is to create an empty movie and then load the empty movie instead of executing the unload. Follow these steps:

1. Open Flash and export or publish the movie without putting anything on the stage—no graphics, no sound, no movie clips, nothing.

2. To load the empty movie into the videoholder movie, replace the following code:

                 nloadMovie(_root.videoholder); 

   with this:

                 oadMovie("empty.swf", _root.videoholder); 

3. Test the movie (you copied the empty.swf file to your local drive early on in the chapter, so it should work).

You will see that Flash no longer generates the error message.

It may occur to you that the code always loads the empty.swf file into the videoholder movie. If that is so, why, then, do the video0.swf through video5.swf movies load into the videoholder movie if you click any of the submenu buttons under the Instructors main menu heading? This is because the empty.swf movie is always loaded into the videoholder first, and then the other videos are loaded if the relevant buttons are clicked.

Now that you have an idea of how the function works to capture the built-in function calls from the Drop Down Menu component, you should be able to modify the code for your purposes. Fortunately, even if you are not an accomplished ActionScript programmer, there is no shortage of very good and very affordable (usually) Flash programmers available to help you with such a task. Of course, there is also no shortage of good books on ActionScript, such as my own Flash MX ActionScript: The Designer's Edge (Sybex, 2002), if you need more tutoring on ActionScript.