Wednesday 05/14/08 Day #3 Flash Games class: Two examples combined



  1. Here is the ActionScript code that we did in the hands-on class today (Wednesday 05/14/08 Class #3).
    roll_btn.addEventListener(MouseEvent.CLICK, roll);
    
    function roll(evt:MouseEvent) {
        var r1:int;
        var r2:int;
    	
        r1 = Math.floor(Math.random() * 6 + 1);
        r2 = Math.floor(Math.random() * 6 + 1);
    	
        d1.gotoAndStop(r1);
        d2.gotoAndStop(r2);
    }	
    
  2. d1 and d2 are two different instances of dieSymbol. What is dieSymbol?

    1. dieSymbol is a Movie Clip symbol stored in the Library.

    2. To create dieSymbol today, we used the Insert menu, New Symbol... command. We did NOT create a graphic shape on the stage in Scene 1 and then Convert that shape to Symbol!

    3. dieSymbol is a square. Holding down the Shift key when using the Rectangle tool is an easy way to make sure the H height is equal to the W Width. If you want a circle instead of an Oval, you do the same thing.

    4. dieSymbol is made up of another symbol. We named it pips in the hands-on class. Upon reflection, it could have been called pipSymbol, to emphacize that it was a symbol in the Library.

    5. We made the pips (pipSymbol) using the same approach. Insert menu, New Symbol... command. The pipSymbol pips was created BEFORE we started to make the dieSymbol.

    6. The dieSymbol consists of SIX different keyframes.

      • Keyframe 1 has 1 pipSymbol.
      • Keyframe 2 has 2 pipSymbols.
      • Keyframe 3 has the same number of pips as Gladys Knight backup singers when she led the group Gladys Knight & the Pips.
      • Keyframe 4 had as many pipSymbols as planet earth has seasons.
      • Keyframe 5 had as many pipSymbols as one of your hands has MetaCarpals, and you cannot easily roll a pair of dice without using both of your 1st Metacarpals, not to mention the space bar would be more difficult to use when trying to use a computer keyboard.
      • Finally, keyframe #6 of the dieSymbol has exactly half a dozen of the pipSymbols nested inside of it.
      • So, how many pips does the dieSymbol have? 1 + 2 + 3 + 4 + 5 + 6 = 7 + 7 + 7 = 21 pips!
        Gladys Knight should have had so many pips! :-)
      • Midnight Train To Georgia with Gladys Knight and animated, choreographed Pips!

    7. There are two layers in the dieSymbol timeline. They are named "actions" and "faces".
      Layer 1 was renamed "faces". Layer 2 was renamed "actions".
      1. actions layer - each keyframe has one ActionScript statement:   stop();
      
      2.   faces layer - each keyframe has a colored face with enough
                                             pips to sing its song.
      
  3. How do we roll the die and display the result of the roll?
    1.   var r1:int;
    
         This statement creates a variable.
    
         A variable is a chunk of memory, an area in RAM.
         RAM is an acronym for Random Access Memory.
    
         r1 is the name of the variable.
    
         int is the TYPE of data that Flash ActionScript 3.0 will
             allow you to store in the r1 memory location.
    
         int stand for integer.   -22, 0, 33, 17, 5, 14, 8, 21 and 10 are
                                      some examples of INTEGER int values.
    
    2.   r1 = Math.floor(Math.random() * 6 + 1);
    
         This statement results in a random number 
         where random number r1 is  >= 1 and <= 6.
         r1 will be 1, 2, 3, 4, 5 or 6, i.e. one of the six integers 
                                             in the set {1, 2, 3, 4, 5, 6}.
    
         Do NOT worry at all about the above statement that we did in lab!
    
         We will talk about Math.random() and Math.floor() later on this
            summer, as needed.
    
         Obviously, there could be very few interesting computer games without
            random numbers, just like there would be not nearly as many board
            games like Monopoly and Clue and Yahtzee if it weren't for the 
            random result you get when you roll a pair of dice!  :-)
    
         Math.random()
    
    3.   d1.gotoAndStop(r1);  
    
         This statement goes to frame # r1 of the dieSymbol timeline,
            which displays the 1 or 2 or 3 or 4 or 5 or 6 face of the die d1.
    
         d1.gotoAndStop(6); would go the the face that shows you rolled a 6,
                            for example.
    
  4. You might be interested in glancing at the code that tells whether a number was an EVEN or an ODD number. It uses the MOD operator, which we discussed in class. The syntax for the MOD operator is %, the percent character on your keyboard.
    function evenOrOdd(n1:int):String {
       if (n1 % 2 == 0) {               <-- n1 % 2 == 0 is either TRUE or FALSE
          return "Even";                    -----------
       } else {
          return "Odd";                 
       }
    }
    
         var n1:int = 97 % 10;     <------- remainder is 7  quotient is 9
         var n2:int = 43 % 10;     <------- remainder is 3  quotient is 4
         var n3:int = 16 % 10;     <------- remainder is 6  quotient is 1
         var n4:int = 90 % 10;     <------- remainder is 0  quotient is 9
         var n5:int =  7 % 10;     <------- remainder is 7  quotient is 0
    
         n1 = 25 % 2;     the mod, the remainder is 1 for ALL ODD numbers.
    
         n2 = 5 % 2;      n2, a chunk of computer memory for storing int's,
                              would be storing 1, since the remainder (MOD)
                              when you divide 5 by 2 is 1.  5 is an ODD number, 
                                                   so the remainder has to be 1!
    
         n3 = 2 % 2;
         n4 = 4 % 2;      REMAINDER, the MOD, for all these EVEN numbers is 0.
         n5 = 6 % 2;                  
    
         n5 == 0           is TRUE.
         n5 == 1           is FALSE
    
         n2 = 5 % 2;      n2, an area of RAM for storing int data.
                                                         ---
         n2 == 0           is FALSE.
         n2 == 1           is TRUE.         
    
    There are some comments about ignoring the function evenOrOdd(n1:int):String { ... } below here, if you are interested.

    Do NOT worry about this evenOrOdd function! It returns either the String "Even" or the String "Odd as its result. It is not void! However, as you can see, it has something you have never seen between the ()s.

                        ------     ------
    function evenOrOdd( n1:int ) : String {
                        ------     ------
                        INPUT      OUTPUT or result returned
                        ------     ------
    
    someFineButton_btn.addEventListener(MouseEvent.CLICK, questionInTodaysClass);
    
    
                                    --------------     ----
    function questionInTodaysClass( evt:MouseEvent ) : void { 
                                    --------------     ----
                                       INPUT           NO                          
                                       to function     OUTPUT - thus VOID
                                                         void, i.e. returns
                                                                    nothing,
                                        the function returns NOTHING at all.
    

  5. Below here is all of the code behind the above Flash application. Do NOT worry about the additional features that I added to it. They will be discussed in class later this week or this month, when they are needed or especially useful in taking your understanding of Flash to the next level.

roll_btn.addEventListener(MouseEvent.CLICK, roll);

function roll(evt:MouseEvent) {
	var r1:int;
	var r2:int;
	
	r1 = Math.floor(Math.random() * 6 + 1);
	r2 = Math.floor(Math.random() * 6 + 1);
	
	d1.gotoAndStop(r1);
	d2.gotoAndStop(r2);
	
    /* Ignore the ActionScript code BELOW here.  We will get to this
	                 during class on Thursday or Friday of this week. */
	
	dice_txt.text = String(r1 + r2);
	dd1.val = Math.floor(Math.random() * 6 + 1);
	dd2.val = Math.floor(Math.random() * 6 + 1);
	
	dd1.gotoAndStop(dd1.val);
	dd2.gotoAndStop(dd2.val);
	dice2_txt.text = String(dd1.val + dd2.val);
	
	d1EO_txt.text = evenOrOdd(r1);
	d2EO_txt.text = evenOrOdd(r2);
	dEO_txt.text = evenOrOdd(r1 + r2);
	
	dd1EO_txt.text = evenOrOdd(dd1.val);
	dd2EO_txt.text = evenOrOdd(dd2.val);
	ddEO_txt.text = evenOrOdd(dd1.val + dd2.val);	
}

// Do NOT worry about this evenOrOdd function!  It returns either the
//    String "Even" or the String "Odd as its result.  It is not void!
//    However, as you can see, it has something you have never seen between
//    the ()s.                      ------     ------
//              function evenOrOdd( n1:int ) : String
//                                  ------     ------
//                                  INPUT      OUTPUT or result returned
//                                  ------     ------

function evenOrOdd(n1:int):String {
   if (n1 % 2 == 0) {
      return "Even";
   } else {
      return "Odd";
   }
}