Objectives: Practice programming:

• mouse up event
• controlling the playhead using gotoAndStop() to change visual content of a movieclip

How the Completed File Works:

Click on the hair icons on the right to change the hair on the head.

Briefing:

Recall that the syntax for writing mouse-up event listener code (Primer Chapter 11) is:

  eventTarget.addEventListener(MouseEvent.MOUSE_UP, handlerFunctionName);

  function handlerFunctionName(evt:MouseEvent): void
  {
     statement(s)
  }

Instructions:
I. Create 5 hair choices (each as a movieclip) and a bald head (see the Flash practice drawing lab)

II. Create one additional movieclip:

1. Inside this movieclip (Note: this is NOT on the main timeline), place each hair choice on a different frame. For 5 hair choices, you would have 5 frames.
2. Create a new layer on top. Give each frame a frame label.

The timeline of this completed movieclip looks like this. The figure also shows the frame label names and the content for the frames.

Note: Each frame contains only one hair style choice. Don't place all five hair together in the same frame in this movieclip.

III. Place the Graphics on Stage:

1. Return to the main timeline.
2. Place the movieclips of the five hair choices on one side of the stage. On the head, place the movieclip that you have created in the preceding section.
3. Give a name to each of the movieclip instances--the five hair choices and the one on the head.
    
   The figure below shows how the stage may look like and the suggested movieclip instance names assigned.
   

IV. Write ActionScript:

1. Before you write any script, create a new layer on top. Name it "action". We will store the script in this layer.
2. Select frame 1 of this "action" layer, and open the Action panel (Window > Actions, or press the F9 key).
3. The sample script below will make mc_hair to show the frame labeled "crazyhair" upon mouse click on mc_choice2.
    
   mc_hair.stop();
   mc_choice2.addEventListener(MouseEvent.MOUSE_UP, onMouseUpHair2);
    
   function onMouseUpHair2(evt:MouseEvent):void
   {
        mc_hair.gotoAndStop("crazyhair");
   }
    
4. Now, based on this example, complete the lab so that clicking on any of the five hair choices will make the mc_hair change to that hair style.

V. Question:

Why do we need the first statement   mc_hair.stop(); ?
Try commenting out this statement, and see what happens.

This lab is created by Dr. Yue-Ling Wong (ylwong@wfu.edu).
Revision: 2010-02.