1. week 1
  2. week 2
  3. week 3
  4. week 4
  5. week 5
  6. week 6
  7. week 7
  8. week 8
  9. week 9
  10. week 10
  11. week 11
  12. week 12
  13. week 13

kirupa.com Tutorials

Monday, November 29, 2010

Fall 2010 week 12:
—11/29/10: Mon. 9:00 - 12:00f

Hi Everybody,

Seems that many of you who have been stumped are finally starting to get how all this work. There are only two weeks remaining, so make the most of the little time you have.

ALL BUTTONS SHOULD BE MOVIECLIPS. YOU WILL HAVE TO COMPLETE RE-DO THEM.

YOU WILL NEED AT LEAST ONE DROP-DOWN MENU, PROBABLY FOR YOUR GALLERY BUTTON (GALLERY 1, GALLERY 2) IN YOUR INDEX FILE. EXTRA POINTS TO ANY ADDITIONAL DROP-DOWNS YOU USE, BUT DON'T USE A DROP-DOWN IF IT IS NOT NECESSARY.

Carter-

    WEEK 12
  1. Homework
    1. Continue working on your final projects, re-making your buttons from scratch as MovieClips, and including a drop-down menu, probably in place of your 2 Gallery buttons.
  2. Classwork
    • LINK    This week's class files
      1. Below is the work that we began in class this week. Please review it if you feel you require extra practice, and come to class with any questions you may still have. This will be required for you final project.

      2. Continue on with the drop-down menu that you started last week.
      3. Type following object type known as an array at the very top of your actions:
        • var txtArray:Array = new Array();
        • txtArray[0] = "menu";
        • txtArray[1] = "one";;
        • txtArray[2] = "two";
        • txtArray[3] = "three";
        • txtArray[4] = "four";
        • txtArray[5] = "five";
      4. Now, change the following code:
        1. btn_00.btn_txt.text = txtArray[0];
        2. options.btn_01.btn_txt.text = txtArray[1];
        3. options.btn_02.btn_txt.text = txtArray[2];
        4. options.btn_03.btn_txt.text = txtArray[3];
        5. options.btn_04.btn_txt.text = txtArray[4];
        6. options.btn_05.btn_txt.text = txtArray[5];
      5. Now, let's create another array object right below the first:
        1. var swfArray:Array = new Array();
        2. swfArray[0] = "one.swf";
        3. swfArray[1] = "two.swf";
        4. swfArray[2] = "three.swf";
        5. swfArray[3] = "four.swf";
        6. swfArray[4] = "five.swf";
      6. Next, change the next bit of code:
        1. var req_01:URLRequest = new URLRequest(swfArray[0]);
        2. var req_02:URLRequest = new URLRequest(swfArray[1]);
        3. var req_03:URLRequest = new URLRequest(swfArray[2]);
        4. var req_04:URLRequest = new URLRequest(swfArray[3]);
        5. var req_05:URLRequest = new URLRequest(swfArray[4]);
      7. Now look at your functions. At this point you should have 17 functions in total. That results in a lot of code, much of which is redundant. We can simplify it.
      8. Here is what you do: Except for the functions for the top button, you should delete the Mouse Over and Mouse Out functions for EACH button. I’d named mine newColor_01 through newColor_05 and deleted all of those.
      9. Here is what you do: Except for the functions for the top button, you should delete the Mouse Over and Mouse Out functions for EACH button. I’d named mine newColor_01 through newColor_05 and deleted all of those.
      10. You should also delete the listeners for those functions.
      11. When you're finished deleting, you should be left with 2 functions for the first button and 1 function for each of the options. That will be a total of 7 functions and 7 listeners. Unfortunately, now only the top button changes colors. We have to create a new function now that makes ALL the buttons change colors.
      12. Type the following code:
        1. function newColor_opt(evt:MouseEvent):void
        2. {
          1. trace(evt);
        3. }
      13. Now, create five listeners for the MOUSE_OVER event which calls this new function, newColor_opt at the end of it. We want this so that when we mouse over each of the buttons they call the SAME function, this new one.
      14. Test the movie.
      15. What you'll get when typing that is information about the MouseEvent. If you look in your code, in between the parentheses of the function, you will see that EVT is there. It is a variable that contains information about the MouseEvent. That is why when we do a trace(), we see the information that is held in that evt variable.
      16. Now change the trace to the following:
        • function newColor_opt(evt:MouseEvent):void
        • {
          • trace(evt.currentTarget);
        • }
      17. What you'll see now, is information that tells you what you have moused over is a MovieClip. Mouse over each of the options and you should get the same thing.
      18. Current Target refers to the thing that you as the user are currently touching or mousing over with your mouse at that moment.
      19. We can even output the NAME of the button that you mouseOver:
        • function newColor_opt(evt:MouseEvent):void
        • {
          • trace(evt.currentTarget.name);
        • }
      20. But we don't need the name. What we do need is to change the stroke and fill and text colors:
        • function newColor_opt(evt:MouseEvent):void
        • {
          • evt.currentTarget.stroke.transform.colorTransform = s_newC;
          • evt.currentTarget.fill.transform.colorTransform = f_newC;
          • evt.currentTarget.btn_txt.transform.colorTransform = s_newC;
        • }
      21. Now, we need a new function and set of listeners so that when you mouse off EACH button, they change back to their original colors:
        • function oldColor_opt(evt:MouseEvent):void
        • {
          • evt.currentTarget.stroke.transform.colorTransform = s_oldC;
          • evt.currentTarget.fill.transform.colorTransform = f_oldC;
          • evt.currentTarget.btn_txt.transform.colorTransform = s_oldC;
        • }
      22. Don't forget to type the listeners, one for each button for the MOUSE_OUT for this function.


No comments:

Post a Comment