Exercise 5-3: Using Invisible Buttons

In this exercise, you’ll add interactivity to the invisible buttons you created to make the hammer swing up and down and pound the nail into the wood.

1. Make sure you are working in the same file from the last exercise.
2. In the Library, double-click the mcHammer movie clip to enter its Timeline. If you are having trouble selecting the mcHammer movie clip, you can lock the buttons layer so that you won’t have to worry about accidentally selecting one of the buttons.
3. Inside the mcHammer movie clip, notice the registration point is near the bottom right of the hammer, as shown here. This is the rotation point for this movie clip. Because the registration point is there, the hammer will rotate around that point. If the rotation point of the hammer were at the top left, the hammer would rotate around its top-left corner.



4. At the bottom of the Timeline, click the Scene 1 button to return to the Main Timeline.
5. In the Main Timeline, select the first keyframe of the actions layer and open the Actions panel.
6. In the DECLARE VARIABLES AND CREATE OBJECTS section of code, create a variable called bashAmt, with a data type of Number and a value of 15. This variable will represent how much the nail will move down when hit by the hammer. Your code should match the code that follows (new code is bold):

   // DECLARE VARIABLES AND CREATE OBJECTS
   
   var bashAmt:Number = 15;
   

7. On the next line, create a variable called rotateAmt, with a data type of Number and a default value of –15. This variable will represent the amount the hammer rotates when it swings. The value is negative because the hammer will swing by rotating counterclockwise. If the value were positive, the hammer would rotate clockwise.

   // DECLARE VARIABLES AND CREATE OBJECTS
   
   var bashAmt:Number = 15;
   var rotateAmt:Number = -15;
   

8. In the DEFINE EVENT HANDLERS section of code, create the skeleton of an onRollOver event handler for the bottom_btn button.

   // DEFINE EVENT HANDLERS
   
   bottom_btn.onRollOver = function():Void
   {
   
   }
   

9. Inside the event handler you just created, write the code that rotates the hammer by setting its rotation equal to the rotateAmt variable’s value.

   bottom_btn.onRollOver = function():Void
   {
     hammer_mc._rotation = rotateAmt;
   }
   

10. On the next line, move the nail down by the amount held in the bashAmt variable.

    bottom_btn.onRollOver = function():Void
    {
      hammer_mc._rotation = rotateAmt;
      nail_mc._y += bashAmt;
    }
    

11. On the next line, update the rotateAmt variable by decreasing its value by bashAmt divided by 7. This will make the hammer rotate a little more each time it hits the nail.

    bottom_btn.onRollOver = function():Void
    {
      hammer_mc._rotation = rotateAmt;
      nail_mc._y += bashAmt;
      rotateAmt -= bashAmt / 7;
    }
    

NOTE: You may be wondering where the number 7 came from. This number actually came from a trial and error process when I initially created the game. At the end of this exercise, you can change this number to modify the change in rotation amount for the hammer if you’d like to see what a different value would look like.

12. Below the bottom_btn.onRollOver event handler, define the skeleton of an onRollOver event handler for the top_btn button.

    top_btn.onRollOver = function():Void
    {
    
    }
    

13. Inside the top_btn.onRollOver event handler you just created, reset the value of the hammer’s rotation to zero. This will make the hammer move up when the mouse (or Wii remote) rolls over the top button.

    top_btn.onRollOver = function():Void
    {
      hammer_mc._rotation = 0;
    }
    

14. Test the movie, and move your mouse up and down to swing the hammer. Sweet! Well, almost sweet. Notice that the nail goes through the wood and the hammer keeps rotating, which looks a little fake. You’ll fix that in the next exercise.



15. Save the file, and keep it open for the next exercise.

Exercise 5-4