Fall 09 week 13:—12/07/09: Wed. 9:00 - 12:00

Hi Everybody,
It has been a nice term and I've enjoyed teaching you this semester. I hope you feel that you've learned a little about how to begin creating interactive content with Flash. I'm pleased at how well you all have seemed to pick it up, and am confident that you'll do well the remaining terms you have here at TCI.

I'll be gone for the Spring term on sabbatical and won't return until May, so there may be a few of you that I won't see again. It's been a real pleasure teaching you, and good luck in the Future!

Please email me before our next class if you need any final assistance before you turn you project in. I will be available to come in to TCI on Saturday as well if any of you require it. Just let me know.
Carter-

WEEK 13

1. Final Requirements
• NOTE— Please look at your midterm project and make some modifications to your menu. You should include the TWO drop-down menus that I ask for below. The function for these menus should follow my guidelines in last week's posting. Please note below one modification that you will have to make to that code. The requirements below were put in the week 9 posting of this blog. I am repeating them here this week so that you have all the requirements. The one modification that I am making to the requirements I stated that week is that the Video page is entirely for extra credit. If you get it to stop as stated previously when you click on other pages, then that will be additional extra credit:



1. PAGES: Make certain that your INDEX FILE has a total of at least six links in your menu. These links must include the following:
1. Home;
2. Bio/Biography;
3. an Image Gallery (of Art Works)—This should be a drop-down menu with at least 3 links and each page should have 8-10 images;
4. Video—This page is entirely for extra credit. If you get it to stop as stated previously when you click on other pages, then that will be additional extra credit
5. Your own link—depending on who your artist is and what he/she does, you should come up with an idea for an additional page all your own. This should NOT include a contact page;
6. Information: This should be a DROP-DOWN MENU which contains two buttons—
   1. Information about gallery or museum Exhibitions or Collections;
   2. Information about your research and what can be discovered about the artist: this is known as a Bibliography—This part of nearly everyone's project was VERY weak. Please make sure that you use good sources both online and, I advise, offline; and then, make certain that you document where you got your information. This page should be thorough: all of you have chosen famous artists, so make sure you do some research and put a list of sources for more information here. Also, categorize them according to whether they are books, articles websites, or something else.
      
      Other good sources of information are your Art History teachers, or me;


2. SIZE: If it is not already, make sure that the size of your pages is at least 800px X 600px landscape. Larger is fine if you like, but careful not to make it too much beyond 1000px X 700px as most computer users will not see some of your page if you make it larger than that.


3. AUDIO: As mentioned in class and in previous postings, please create a toggle button and add background music that may be turned on and off with that button. Check last week's posting for additional information, or look in the text for this class.


4. CODE TIP:

   In the code that I offered you in last week's posting, near the bottom I typed an action known as navigateToURL. This action is to be used ONLY for EXTERNAL LINKS. External links are only for pages OUTSIDE of your website, not pages within your website.

   You already know how to "link" to pages within your own website. To do this, for the last 10 weeks, we have been using URLRequests and Loaders. You must also do that for your drop-down menus.

   I only used navigateToURL as an example, and also to show you a new action, how to make your links in your bibliography actually link to external sites. Please make sure you adjust the code for your drop-down menus accordingly.

Fall 09 week 12:—11/30/09: Wed. 9:00 - 12:00

In the tutorials below, there are two things covered: the first, much longer tutorial completes your drop-down menus and makes them fully functional; the second shorter tutorial at the bottom, shows you the code for creating sound objects, and then playing and stopping the audio.

LINK—Completing the Drop-Down Menu
LINK—Adding Sound Functionality

1. DROP-DOWN

   First, if you wish to experiment on my file first before implementing on your own, download the following flash file. It is set up exactly the way that we have been working with in class: LINK

   Second, we'll go about writing the code for the drop-down menu from scratch, beginning with the text that will fit inside of the buttons. The first line creates the array for that text; and the second line places the first text element (txtArray[0]) inside the text box of the main button. The next three lines places the next three text elements of the array (txtArray[1], txtArray[2], txtArray[3]), inside the text boxes of the option buttons. And finally, the last line, although unrelated to the text array, sets the default for the visibility of the options of the drop-down menu to false, making it invisible:

   1.   var txtArray:Array = new Array("main, "one", "two", "three");
   2.   menu.main.btn_txt.text=txtArray[0];
   3.   menu.options.opt_01.btn_txt.text=txtArray[1];
   4.   menu.options.opt_02.btn_txt.text=txtArray[2];
   5.   menu.options.opt_03.btn_txt.text=txtArray[3];
   6.   menu.options.visible = false;





2. But already, despite the fact that the above code is pretty straightforward, there's a better, somewhat more efficient way of writing it, and that is using a new Actionscript element: a with statement. What this statement allows you to do is eliminate some repeated paths. In the above code where we placed text inside the option buttons, we repeated parts of the path 3 times. Such examples of repeatedly typing identical code increases the possibility of making errors, so therefore we must reduce and make it efficient here and wherever else we can. One way of doing this is using the with statement as suggest, allowing us to type that repeated part of the path only one time. See the following example:

   1.   var txtArray:Array = new Array("main, "one", "two", "three");
   2.   menu.main.btn_txt.text=txtArray[0];
   3.   menu.options.opt_01.btn_txt.text=txtArray[1];
   4.   menu.options.opt_02.btn_txt.text=txtArray[2];
   5.   menu.options.opt_03.btn_txt.text=txtArray[3];
   6.   with(menu.options) {
   7.       opt_01.btn_txt.text=txtArray[1];
   8.       opt_01.btn_txt.text=txtArray[2];
   9.       opt_01.btn_txt.text=txtArray[3];
   10.   }
   11.   menu.options.visible = false;





3. Next, we have to add a new array. This array will contail multiple URLs. Here, in this example, I will just put a few random web addresses, but what you should use for your own projects is the file path to your various pages, the external .swf files.

   1.   var txtArray:Array = new Array("main, "one", "two", "three");
   2.   menu.main.btn_txt.text=txtArray[0];
   3.   with(menu.options) {
   4.       opt_01.btn_txt.text=txtArray[1];
   5.       opt_01.btn_txt.text=txtArray[2];
   6.       opt_01.btn_txt.text=txtArray[3];
   7.   }
   8.   menu.options.visible = false;
   9.   var address:Array = new Array();
   10.       address[0] = new URLRequest("http://lipsum.com");
   11.       address[1] = new URLRequest("html-color-codes.com");
   12.       address[2] = new URLRequest("http://dma-205.blogspot.com");





4. Following this, we will create two color objects, one for the original color of the text and outline, and the other for the new color that they will change into when the user mouses over the buttons.

   1.   var txtArray:Array = new Array("main, "one", "two", "three");
   2.   menu.main.btn_txt.text=txtArray[0];
   3.   with(menu.options) {
   4.       opt_01.btn_txt.text=txtArray[1];
   5.       opt_01.btn_txt.text=txtArray[2];
   6.       opt_01.btn_txt.text=txtArray[3];
   7.   }
   8.   menu.options.visible = false;
   9.   var address:Array = new Array();
   10.       address[0] = new URLRequest("http://lipsum.com");
   11.       address[1] = new URLRequest("html-color-codes.com");
   12.       address[2] = new URLRequest("http://dma-205.blogspot.com");
   13.   var btnC_01:ColorTransform = new ColorTransform();
   14.       btnC_01.color=0x330066;
   15.   var btnC_02:ColorTransform = new ColorTransform();
   16.       btnC_02.color=0x3399cc;





5. Now, in order for us to make use of those two colors, we have to create our first functions. These functions will do a few things. Most importantly, they will open and close the menu. We have done this before, and it simply entails setting the visible property to true for it to open, and then to false for it to go back to being closed.

   In addition to this, we want to change the colors of the main button (the button on top), the one that is always open and which triggers the opening and closing of the menu. When we mouse over it, we want the stroke color and the color of the text to change to a new color, and then, when we mouse off of it, we want those two elements to go back to their original color.

   You'll notice, however, that once the menu opens, that the other buttons do not change colors. We'll have to create another set of functions for that.

   1.   var txtArray:Array = new Array("main, "one", "two", "three");
   2.   menu.main.btn_txt.text=txtArray[0];
   3.   with(menu.options) {
   4.       opt_01.btn_txt.text=txtArray[1];
   5.       opt_01.btn_txt.text=txtArray[2];
   6.       opt_01.btn_txt.text=txtArray[3];
   7.   }
   8.   menu.options.visible = false;
   9.   var address:Array = new Array();
   10.       address[0] = new URLRequest("http://lipsum.com");
   11.       address[1] = new URLRequest("html-color-codes.com");
   12.       address[2] = new URLRequest("http://dma-205.blogspot.com");
   13.   var btnC_01:ColorTransform = new ColorTransform();
   14.       btnC_01.color=0x330066;
   15.   var btnC_02:ColorTransform = new ColorTransform();
   16.       btnC_02.color=0x3399cc;
   17.   function menu_open(evt:MouseEvent):void {
   18.       menu.options.visible=true;
   19.       menu.main.stroke.transform.colorTransform=btnC_01;
   20.       menu.main.btn_txt.transform.colorTransform=btnC_01;
   21.   }
   22.   function menu_close(evt:MouseEvent):void {
   23.       menu.options.visible=false;
   24.       menu.main.stroke.transform.colorTransform=btnC_02;
   25.       menu.main.btn_txt.transform.colorTransform=btnC_02;
   26.   }





6. The only thing missing from the script above and which is keeping it from fully functioning are the Event Listeners. We'll create two, one for the MOUSE_OVER mouse event, and the other for the MOUSE_OUT mouse event.

   What is important here is WHICH object you choose. The mouse over listener is rather simple: currently, we really only have one object on the stage, and that is the main button; but the main button is inside of the menu. Since there is nothing else inside the menu currently visible for the user to interact with (not the options, nor the various buttons within the options), then which object we should choose is simple, the menu. That is what I put in front of the listener as done so below.

   Which object to choose for the second listener is a little more difficult since the whole menu is visible for this event. We could choose from any of the buttons available, the main, or any of the options. The difficulty is deciding which one would work the best. We can rule out the indvidual option buttons because we cannot put three objects in a listener and there'd be no logical to choose opt_01 over opt_02 or opt_03. That leaves us with the main button, the options movieclip or the whole menu movieclip. It doesn't make sense to choose the main button since the moment we'd mouse off of it to choose one of the options, the whole menu would close. With the options movieclip, recall that we created an transparent area that encompassed the entire menu and also hung off the edges of the menu. It's alpha is 0%, but that doesn't mean it isn't there, so its area is taken into consideration. This means that the area of the options movieclip is roughly the same as the menu as a whole. In fact, you could choose either object and the drop-down menu would work the same. For my own purposes, I'll choose the options object because the reason for opening the menu is to choose an option; and if I read that in the listener, it makes it more clear to me that it closes when I mouse off the options.

   1.   var txtArray:Array = new Array("main, "one", "two", "three");
   2.   menu.main.btn_txt.text=txtArray[0];
   3.   with(menu.options) {
   4.       opt_01.btn_txt.text=txtArray[1];
   5.       opt_01.btn_txt.text=txtArray[2];
   6.       opt_01.btn_txt.text=txtArray[3];
   7.   }
   8.   menu.options.visible = false;
   9.   var address:Array = new Array();
   10.       address[0] = new URLRequest("http://lipsum.com");
   11.       address[1] = new URLRequest("html-color-codes.com");
   12.       address[2] = new URLRequest("http://dma-205.blogspot.com");
   13.   var btnC_01:ColorTransform = new ColorTransform();
   14.       btnC_01.color=0x330066;
   15.   var btnC_02:ColorTransform = new ColorTransform();
   16.       btnC_02.color=0x3399cc;
   17.   function menu_open(evt:MouseEvent):void {
   18.       menu.options.visible=true;
   19.       menu.main.stroke.transform.colorTransform=btnC_01;
   20.       menu.main.btn_txt.transform.colorTransform=btnC_01;
   21.   }
   22.   function menu_close(evt:MouseEvent):void {
   23.       menu.options.visible=false;
   24.       menu.main.stroke.transform.colorTransform=btnC_02;
   25.       menu.main.btn_txt.transform.colorTransform=btnC_02;
   26.   }
   27.   menu.addEventListener(MouseEvent.MOUSE_OVER, menu_open);
   28.   menu.options.addEventListener(MouseEvent.MOUSE_OUT, menu_close);





7. Now that we've successfully opened and closed the menu, we need to make the option buttons inside function properly: we first need to create functions that make the colors of the buttons change when we mouse on and off of them. The first function changes the colors of the stroke and the text to the new color, and the second function changes them back.

   A new term you will find here is the use of evt.currentTarget. The term evt is a kind of variable. Its first usage is inside the parentheses after the name of the function and before the term MouseEvent. What this variable contains IS the mouse event itself, and the mouse event happens to a particular object. By typing evt.currentTarget, we are selecting whatever the mouse happens to be targeting at that moment.

   Since the OPTIONS movieclip is what the user mouses on top of originally, something inside that movieclip is going to be the currentTarget, and that leaves us with 3 possibilities, one of the three buttons within it, opt_01, opt_02, or opt_03. So, depending on which one the user is on top of, THAT will be the currentTarget. Using this piece of code prevents us from having to write two functions for each button. Instead of writing six functions, all we have to write is two.

   1.   var txtArray:Array = new Array("main, "one", "two", "three");
   2.   menu.main.btn_txt.text=txtArray[0];
   3.   with(menu.options) {
   4.       opt_01.btn_txt.text=txtArray[1];
   5.       opt_01.btn_txt.text=txtArray[2];
   6.       opt_01.btn_txt.text=txtArray[3];
   7.   }
   8.   menu.options.visible = false;
   9.   var address:Array = new Array();
   10.       address[0] = new URLRequest("http://lipsum.com");
   11.       address[1] = new URLRequest("html-color-codes.com");
   12.       address[2] = new URLRequest("http://dma-205.blogspot.com");
   13.   var btnC_01:ColorTransform = new ColorTransform();
   14.       btnC_01.color=0x330066;
   15.   var btnC_02:ColorTransform = new ColorTransform();
   16.       btnC_02.color=0x3399cc;
   17.   function menu_open(evt:MouseEvent):void {
   18.       menu.options.visible=true;
   19.       menu.main.stroke.transform.colorTransform=btnC_01;
   20.       menu.main.btn_txt.transform.colorTransform=btnC_01;
   21.   }
   22.   function menu_close(evt:MouseEvent):void {
   23.       menu.options.visible=false;
   24.       menu.main.stroke.transform.colorTransform=btnC_02;
   25.       menu.main.btn_txt.transform.colorTransform=btnC_02;
   26.   }
   27.   function option_over(evt:MouseEvent):void{
   28.       evt.currentTarget.stroke.transform.colorTransform=btnC_02;
   29.       evt.currentTarget.btn_txt.transform.colorTransform=btnC_02;
   30.   }
   31.   function option_out(evt:MouseEvent):void{
   32.       evt.currentTarget.stroke.transform.colorTransform=btnC_01;
   33.       evt.currentTarget.btn_txt.transform.colorTransform=btnC_01;
   34.   }
   35.   menu.addEventListener(MouseEvent.MOUSE_OVER, menu_open);
   36.   menu.options.addEventListener(MouseEvent.MOUSE_OUT, menu_close);





8. What we do have to type a lot of are listeners. Since we have 3 option buttons, and since we have two events for each (MOUSE_OVER & MOUSE_OUT), we have to type six listeners for these two functions.

   1.   var txtArray:Array = new Array("main, "one", "two", "three");
   2.   menu.main.btn_txt.text=txtArray[0];
   3.   with(menu.options) {
   4.       opt_01.btn_txt.text=txtArray[1];
   5.       opt_01.btn_txt.text=txtArray[2];
   6.       opt_01.btn_txt.text=txtArray[3];
   7.   }
   8.   menu.options.visible = false;
   9.   var address:Array = new Array();
   10.       address[0] = new URLRequest("http://lipsum.com");
   11.       address[1] = new URLRequest("html-color-codes.com");
   12.       address[2] = new URLRequest("http://dma-205.blogspot.com");
   13.   var btnC_01:ColorTransform = new ColorTransform();
   14.       btnC_01.color=0x330066;
   15.   var btnC_02:ColorTransform = new ColorTransform();
   16.       btnC_02.color=0x3399cc;
   17.   function menu_open(evt:MouseEvent):void {
   18.       menu.options.visible=true;
   19.       menu.main.stroke.transform.colorTransform=btnC_01;
   20.       menu.main.btn_txt.transform.colorTransform=btnC_01;
   21.   }
   22.   function menu_close(evt:MouseEvent):void {
   23.       menu.options.visible=false;
   24.       menu.main.stroke.transform.colorTransform=btnC_02;
   25.       menu.main.btn_txt.transform.colorTransform=btnC_02;
   26.   }
   27.   function option_over(evt:MouseEvent):void{
   28.       evt.currentTarget.stroke.transform.colorTransform=btnC_02;
   29.       evt.currentTarget.btn_txt.transform.colorTransform=btnC_02;
   30.   }
   31.   function option_out(evt:MouseEvent):void{
   32.       evt.currentTarget.stroke.transform.colorTransform=btnC_01;
   33.       evt.currentTarget.btn_txt.transform.colorTransform=btnC_01;
   34.   }
   35.   menu.addEventListener(MouseEvent.MOUSE_OVER, menu_open);
   36.   menu.options.addEventListener(MouseEvent.MOUSE_OUT, menu_close);
   37.   menu.options.opt_01.addEventListener(MouseEvent.MOUSE_OVER, option_over);
   38.   menu.options.opt_01.addEventListener(MouseEvent.MOUSE_OUT, option_out);
   39.   menu.options.opt_02.addEventListener(MouseEvent.MOUSE_OVER, option_over);
   40.   menu.options.opt_02.addEventListener(MouseEvent.MOUSE_OUT, option_out);
   41.   menu.options.opt_03.addEventListener(MouseEvent.MOUSE_OVER, option_over);
   42.   menu.options.opt_03.addEventListener(MouseEvent.MOUSE_OUT, option_out);





9. At this point, we've gotten the menu to open and close, we've gotten the buttons to change colors when you mouse on and off of them, but we haven't gotten it to DO anything. The whole point of a drop-down menu is for the user to have a series of link options that bring up new 'pages' or take the user to different content. Therefore, the very last thing we must do is utilize those URLs that we put inside of that array near the beginning of this script.

   We will do this with a new statement type known as the switch statment. The switch statement functions similarly to an if/else conditional statement; but whereas the if/else statement has two conditions (if or else), the switch statment may have many different conditions. This is perfect for the use of a drop-down menu. Our menu only has three options, but some drop-down menus contain many more options.

   The conditions in a switch statement are known as cases, and they operate sort of like common speech as such:

   In the first case, do THIS
   In the second case, do THAT
   In the third case, do this OTHER THING.

   It really is this simple. We start by creating a variable which will contain the instance name of whichever button the user clicks on:

     var optionBtn:String = evt.currentTarget.name;

   Next comes the switch statment with 3 cases, one for each button which have the instance names of opt_01, opt_02, and opt_03. Depending on which one of those buttons the user mouses over, its instance name will be stored in the variable. Which switch case is selected depends on which name is contained in the variable. If it finds "opt_01" inside that variable, then the switch statement goes with case 1; if it finds one of the other instance names inside, then it goes with the corresponding case, either the 2nd or the 3rd.

   switch (optionBtn) {
     case "opt_01" :
       trace(optionBtn);
       break;
     case "opt_02" :
       trace(optionBtn);
       break;
     case "opt_03" :
       trace(optionBtn);
       break;
   }

   Whichever switch case is selected, the function is going to set off a trace action, and this action will tell us what is inside of the variable optionBtn. What we hope will come out is the name of the button that you click on. The break action is necessary to stop the switch once a case is selected. This is just a temporary set of actions. We will modify them once we are certain the switch functions properly. If we can get a different button instance name each time we click on a different button, then we know the switch is working properly and we will be able to remove the trace actions and put in the right ones.

   1.   var txtArray:Array = new Array("main, "one", "two", "three");
   2.   menu.main.btn_txt.text=txtArray[0];
   3.   with(menu.options) {
   4.       opt_01.btn_txt.text=txtArray[1];
   5.       opt_01.btn_txt.text=txtArray[2];
   6.       opt_01.btn_txt.text=txtArray[3];
   7.   }
   8.   menu.options.visible = false;
   9.   var address:Array = new Array();
   10.       address[0] = new URLRequest("http://lipsum.com");
   11.       address[1] = new URLRequest("html-color-codes.com");
   12.       address[2] = new URLRequest("http://dma-205.blogspot.com");
   13.   var btnC_01:ColorTransform = new ColorTransform();
   14.       btnC_01.color=0x330066;
   15.   var btnC_02:ColorTransform = new ColorTransform();
   16.       btnC_02.color=0x3399cc;
   17.   function menu_open(evt:MouseEvent):void {
   18.       menu.options.visible=true;
   19.       menu.main.stroke.transform.colorTransform=btnC_01;
   20.       menu.main.btn_txt.transform.colorTransform=btnC_01;
   21.   }
   22.   function menu_close(evt:MouseEvent):void {
   23.       menu.options.visible=false;
   24.       menu.main.stroke.transform.colorTransform=btnC_02;
   25.       menu.main.btn_txt.transform.colorTransform=btnC_02;
   26.   }
   27.   function option_over(evt:MouseEvent):void{
   28.       evt.currentTarget.stroke.transform.colorTransform=btnC_02;
   29.       evt.currentTarget.btn_txt.transform.colorTransform=btnC_02;
   30.   }
   31.   function option_out(evt:MouseEvent):void{
   32.       evt.currentTarget.stroke.transform.colorTransform=btnC_01;
   33.       evt.currentTarget.btn_txt.transform.colorTransform=btnC_01;
   34.   }
   35.   function option_click(evt:MouseEvent):void{
   36.       var optionBtn:String = evt.currentTarget.name;
   37.       switch(optionBtn) {
   38.           case "opt_01" :
   39.               trace(optionBtn);
   40.               break;
   41.           case "opt_02" :
   42.               trace(optionBtn);
   43.               break;
   44.           case "opt_03" :
   45.               trace(optionBtn);
   46.               break;
   47.       }
   48.   }
   49.   menu.addEventListener(MouseEvent.MOUSE_OVER, menu_open);
   50.   menu.options.addEventListener(MouseEvent.MOUSE_OUT, menu_close);
   51.   menu.options.opt_01.addEventListener(MouseEvent.MOUSE_OVER, option_over);
   52.   menu.options.opt_01.addEventListener(MouseEvent.MOUSE_OUT, option_out);
   53.   menu.options.opt_02.addEventListener(MouseEvent.MOUSE_OVER, option_over);
   54.   menu.options.opt_02.addEventListener(MouseEvent.MOUSE_OUT, option_out);
   55.   menu.options.opt_03.addEventListener(MouseEvent.MOUSE_OVER, option_over);
   56.   menu.options.opt_03.addEventListener(MouseEvent.MOUSE_OUT, option_out);
   57.   menu.options.opt_01.addEventListener(MouseEvent.CLICK, option_click);
   58.   menu.options.opt_02.addEventListener(MouseEvent.CLICK, option_click);
   59.   menu.options.opt_03.addEventListener(MouseEvent.CLICK, option_click);





10. Now that you know the switch statement is functioning properly in that when the user clicks on a button, whichever one of the three buttons that is, a different case is chosen, we can replace the trace() actions with real actions telling the script to do something. What we want to tell the script to do is something with those URLs in the array.

    Ultimately, what you should want it to do is load one of your pages, perhaps gallery one or gallery two, depending on what you have in your drop-down menus; however, what we will do here is simply make it load external websites. The code to load external websites is simple, we just have to tell flash to navigate to a web address, known in web parlance as URLs.

    1.   var txtArray:Array = new Array("main, "one", "two", "three");
    2.   menu.main.btn_txt.text=txtArray[0];
    3.   with(menu.options) {
    4.       opt_01.btn_txt.text=txtArray[1];
    5.       opt_01.btn_txt.text=txtArray[2];
    6.       opt_01.btn_txt.text=txtArray[3];
    7.   }
    8.   menu.options.visible = false;
    9.   var address:Array = new Array();
    10.       address[0] = new URLRequest("http://lipsum.com");
    11.       address[1] = new URLRequest("html-color-codes.com");
    12.       address[2] = new URLRequest("http://dma-205.blogspot.com");
    13.   var btnC_01:ColorTransform = new ColorTransform();
    14.       btnC_01.color=0x330066;
    15.   var btnC_02:ColorTransform = new ColorTransform();
    16.       btnC_02.color=0x3399cc;
    17.   function menu_open(evt:MouseEvent):void {
    18.       menu.options.visible=true;
    19.       menu.main.stroke.transform.colorTransform=btnC_01;
    20.       menu.main.btn_txt.transform.colorTransform=btnC_01;
    21.   }
    22.   function menu_close(evt:MouseEvent):void {
    23.       menu.options.visible=false;
    24.       menu.main.stroke.transform.colorTransform=btnC_02;
    25.       menu.main.btn_txt.transform.colorTransform=btnC_02;
    26.   }
    27.   function option_over(evt:MouseEvent):void{
    28.       evt.currentTarget.stroke.transform.colorTransform=btnC_02;
    29.       evt.currentTarget.btn_txt.transform.colorTransform=btnC_02;
    30.   }
    31.   function option_out(evt:MouseEvent):void{
    32.       evt.currentTarget.stroke.transform.colorTransform=btnC_01;
    33.       evt.currentTarget.btn_txt.transform.colorTransform=btnC_01;
    34.   }
    35.   function option_click(evt:MouseEvent):void{
    36.       var optionBtn:String = evt.currentTarget.name;
    37.       switch(optionBtn) {
    38.           case "opt_01" :
    39.               trace(optionBtn);
    40.               navigateToURL(address[0]);
    41.               break;
    42.           case "opt_02" :
    43.               trace(optionBtn);
    44.               navigateToURL(address[1]);
    45.               break;
    46.           case "opt_03" :
    47.               trace(optionBtn);
    48.               navigateToURL(address[2]);
    49.               break;
    50.       }
    51.   }
    52.   menu.addEventListener(MouseEvent.MOUSE_OVER, menu_open);
    53.   menu.options.addEventListener(MouseEvent.MOUSE_OUT, menu_close);
    54.   menu.options.opt_01.addEventListener(MouseEvent.MOUSE_OVER, option_over);
    55.   menu.options.opt_01.addEventListener(MouseEvent.MOUSE_OUT, option_out);
    56.   menu.options.opt_02.addEventListener(MouseEvent.MOUSE_OVER, option_over);
    57.   menu.options.opt_02.addEventListener(MouseEvent.MOUSE_OUT, option_out);
    58.   menu.options.opt_03.addEventListener(MouseEvent.MOUSE_OVER, option_over);
    59.   menu.options.opt_03.addEventListener(MouseEvent.MOUSE_OUT, option_out);
    60.   menu.options.opt_01.addEventListener(MouseEvent.CLICK, option_click);
    61.   menu.options.opt_02.addEventListener(MouseEvent.CLICK, option_click);
    62.   menu.options.opt_03.addEventListener(MouseEvent.CLICK, option_click);

1. ADDING SOUND

   Creating a Sound object is much the same as creating a URLRequest, an Array, or a Color object. You follow the same syntax in which you create a variable and then occupy it with a new sound object:

   var myMusic:Sound = new Sound();

   Next, you must create a URLRequest object in order to request an external audio file. Finally, you load the audio file into your sound object, and then you're able to play and stop it at will:

   var musicReq:URLRequest = new URLRequest("audio/mySong.mp3"); <-- type YOUR song title (must be .mp3 file) and its location, properly segregated into its own folder.
   myMusic.load(musicReq); <-- this loads a particular song file into the sound object;
   myMusic.play(); <-- this plays the song; and
   myMusic.stop(); <-- this stops the song.

2. You must use these actions together with a toggle button (one that has only two positions, on/off, and in which we know from looking at it whether it is on or whether it is off, to make music play and to enable the user to turn it on and off at will.