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.

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

Hi Everybody,
Hope you had a nice Thanksgiving, but don't forget about this class. There are only 2 more to go.
Carter-

WEEK 11

1. Classwork
• LINK    This week's class files



2. Homework
• exercise 1— Please complete the classwork from Monday regarding the drop-down menu. Put a serious effort into getting this to work, as you will need it in your final projects.
• exercise 2— Also, please be on the lookout for an email over the next day or two from me. It will contain important information.

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

Hi Everybody,
Please do your best to complete the homework this week as everything we do from now until the end of the term will eventually become a part of the final project.
Carter-

WEEK 9

1. Classwork
• LINK    This week's class files



2. Homework
• exercise 1— Please look at how we constructed the drop down menu 2 weeks ago (LINK) and make some revisions:
1. Instead of using button symbols as the buttons in your drop-down menu, create movieclip symbols that act like buttons in the way that we made our movieclip buttons in class on Monday (see the files above from class this week).
2. The best way to go about this, perhaps, is to start by trying to get multiple movieclips to behave as buttons first (see the files from this week—LINK—and from week 8—LINK); and then,
3. Then, once you are able to do that, you should put the buttons together into a drop-down menu and get it to function properly as we did 2 weeks ago, but this time with movieclips.



• exercise 2— If you did not do so last week, do the homework exercise that I assigned for week 9 for our next class.

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

Hi Everybody,
It was a nice class we had this week. It seems that most of you have gotten what we worked on in class. As mentioned, I will go back to the issue of drop-down menus in class next week; however, there is one small piece of homework that I'd like you to take care of over the weekend and bring to class next week.
Carter-

WEEK 9

1. Classwork
• LINK    This week's class files



2. Homework
• exercise 1— Please look at your midterm project and make some modifications to your menu. You should include any drop-down menus that I ask for below. These do NOT have to actually link to pages yet, but make certain that you've begun to design your page to accommodate them. This means I want you to have made space for the drop-down menus that I ask for and to put something there in their places even if you don't get them to work properly as we did in class. In addition, you should begin doing the research to gather all the necessary information below to fill up your pages:
1. 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 will be explained in class;
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;
   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;


• exercise 2— If it is not already, make sure that the size of your pages is at least 800px X 600px landscape.



• EXTRA CREDIT— As you may have discovered, the use of the text array did not work properly in class on Monday. This is due to the fact that the type of symbol that we used was a button. It would only have worked if we had made the buttons out of movieclips as demonstrated a couple weeks ago.
  
  Extra credit goes to the person on Monday who can show me how to create a drop-down menu using movie-clips that do three things:
  1. change color when the user mouses over (and changes back when the user mouses off); and
  2. displays the text from the array;
  3. opens up a URL (a website) when the buttons are clicked on--the other (wk10) file that I have in the .zip folder shows how this can be achieved;

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

Hi Everybody,
Good Work, yesterday! Let's keep it up. There's homework this week, and extra credit. Have a nice week.
Carter-

WEEK 8

1. Classwork
• LINK    This week's class files
2. Homework
• exercise 1— Making a Movie-Clip behave as a button:
1. Draw a rectangle with the following characteristics:
1. width: 150px;
2. height: 25px;
3. fill color: light gray;
4. stroke color: dark gray;
5. stroke width: 5px;
2. Select the fill (NOT the stroke).
3. Convert it to a movie-clip named rFill_mc.
4. Temporarily, cut and Paste it into its own layer.
5. Give it the instance name of rFill.
6. Move this layer below the first layer and lock it.
7. Select the entire stroke and convert it to a movie-clip named rStroke_mc.
8. Give it the instance name of rStroke.
9. Unlock both layers, and select both the stroke and the fill on the stage.
10. Convert them together into another movie-clip named btn_mc.
11. Give it the instance name of rect.
12. Delete the blank layer.
13. Enter into edit mode for the rectangle.
14. Once inside the rectangle movie-clip, select both the fill and the stroke on the stage.
15. Then, right-click on top of your selection and choose distribute to layers. Make sure the stroke layer is on top.
16. Delete the blank layer, and exit edit mode.
17. What you have now is a set of nested movie-clips: you have the main movie-clip named rect, and the nested movie-clips inside, stroke and fill.


18. Your job for homework is to make ONLY THE STROKE change to RED when the user mouses over; and then, when the user mouses off, for the color to go back to its original dark gray.




• extra credit: Using BUTTON SYMBOLS as buttons (and NOT movie-clips as buttons), together with the VISIBLE property, create a very simple drop-down menu with a total of 5 buttons in it.

Fall 09 week 7:—10/26/09: Wed. 9:00 - 12:00

Hi Everybody,
So you can all breathe a sigh of relief: you got through the midterm push. Whether you did well at midterm or poorly is not relevant at this point. You should behave as if you're starting fresh, almost as if we're starting a new semester. What you should all consider, however, is HOW you want to start off the rest of the term next week. IF YOU REALLY WANT TO START OFF GOOD, THEN MAKE SURE YOU COME TO CLASS NEXT WEEK WITH YOUR PROJECTS WORKING PERFECTLY AND LOOKING GREAT!

WEEK 7

1. Homework:
   Take a look at your projects and do as much as possible to improve them by next week. We will continue working on these projects for the Final, so you don't want to start out the rest of the term behind by having to fix what you have and then implementing all the many new items of ActionScript that we will be adding over the coming weeks.

Fall 09 week 6:—10/19/09: Wed. 9:00 - 12:00

Hi Everybody,
You all seemed to jump right into working on your midterm projects, which is a good thing. It's a bit of a push to get it done this week, but I'm confident all of you can get a lot done in one week if you put your minds to it.

These projects will be due next week. This means you have to have all of it done by next week. That DOES NOT mean they have to be perfect. We will continue working on them throughout the rest of the semester, adding features and editing what you already have.

The most important part of this project is to get the ACTIONSCRIPT to work. Design is very important, but should take a backseat.

WEEK 6

1. Midterm Requirements:
• page size: 1000px X 700px
• page number: 5 pages
1. bio: this page is about the artist and should include sufficient text, and then enough accompanying images to help explain or demonstrate the text.
2. art: this page is about the art, and should, like the bio page, contain sufficient text and images to accompany the text for us to have a basic understanding of the art.
3. gallery 1 & 2: these pages should contain thumbnail images which, when clicked on, cause a larger image to show up with a caption below it—the best way to do this is to place the large image in a separate Flash file and type some text below or beside it. Each page must have at least 5 images and each should show up with a unique caption to go with it.
4. bibliography: this page contains a list of links and a brief description of at least 10 online resources that have information or images. Also, list some recent books or films about the artist and/or his/her work. This should include who wrote it and when it was published it if is a book; or who directed it and when it was released if it is a film.
2. Midterm Grading:
• topic: 10pts—this is a giveaway of points (10% - a whole letter grade - of the final grade) if you all follow the topics you chose;
• color: 5pts—this has to do with whether you've seriously chosen your color scheme: if you choose too many colors or if they simply don't go together, points will be taken off; so, if you're not sure, keep it really minimal, or use the COLOR INDEX;
• images: 5pts—another point giveaway if you use enough images AND if you DO NOT DISTORT THEM; and also if you don't use images more than once in such a small website;
• text: 5pts—once again, another giveaway of points if you use enough text and if you spend a little time formatting it: a couple suggestions are that you should NOTstretch text all the way across the page, but break it up into a couple columns instead; also, like color, make sure you do not use too many fonts, especially multiple decorative fonts together;
• layout: 10pts—you should carefully consider the organization of each of your pages and, especially, keep in mind that consistency from page to page is very important;
• title: 5pts&#8212;make certain that there is a title and that it is present (in the same spot) no matter what the user does;
• buttons: 5pts—buttons should be fully functional, should have 4 frames in which the hit frame is a simple gray rectangle, and they should be designed well&#a hint here: students often make their buttons too large;
• content: 5pts—yet another point giveaway and it is simply points to determine whether you have enough content in each page;
• movie-clip container: 5pts—do you use a movieclip container (box_mc for the index and bigImg_mc for the gallery, for example)?;
• initial load: 15pts—when the user first opens up your site using the index, does content AUTOMATICALLY LOAD as it should, or does the user have to click on a button to make something appear when the page loads up initially?—this also pertains to the gallery pages;
• button loading: 20pts—this simply refers to the functions connected to the buttons on the stage: does content load when you click on all your buttons?
• folder organization: 5pts—the folder that you give me next week should be organized, meaning that images should be in one folder. Also, right before you give me your project, put your .fla files into a separate folder as well. You should also remove any images or other files that are not being used.