Working with Movie Clips as Buttons


Movie clips dispatch the same events as buttons, so you can work with movie clips in the same ways you work with buttons. You can define onPress(), onRelease(), onRollOver(), onRollOut(), and so on, for movie clips, and the methods are automatically called when the corresponding events occur. The following example illustrates how to define an onPress() method for a movie clip called exampleClip. When the user clicks on the instance it writes the instance path to the Output panel.

   exampleClip.onPress = function():Void {      trace(this);    };


In the next task you'll add an event handler method to the rectangle movie clips so that when the user clicks on them they will temporarily turn invisible so you can see the image movie clip they obscure.

1.

Open the Flash document you completed in the previous task. Optionally, you can open memory3.fla from Lesson08/Completed.

The Flash document has all the elements to build this stage of the application.

2.

Select the first keyframe of the main Timeline and open the Actions panel. Add the following code following the declaration of the clip variable:

  var selected:MovieClip = null;   var correct:Number = 0;


The selected movie clip stores references to movie clips as the user clicks them. The correct variable stores the number of correct cards the user has selected.

3.

In the initialize() function, add the following code just after assigning the value to the card:

   card.onPress = function():Void {      onCardClick(this);    };


When the user clicks a card, tell Flash to call the onCardClick() function. Pass the function a reference to the card the user clicked. You'll define onCardClick() in the next step.

4.

Define onCardClick():

   function onCardClick(cardClip:MovieClip):Void {      cardClip._visible = false;      if(selected == null) {        selected = cardClip;      }      else {        if(clips[cardClip._name].id == clips[selected._name].id) {          correct += 2;          clips[cardClip._name].clip._alpha = 50;          clips[selected._name].clip._alpha = 50;          selected = null;          if(correct == linkageArr.length) {            trace("you win");          }        }        else {          setTimeout(resetclips, 1000, cardClip, selected);          selected = null;        }      }    }


The onCardClick() function first tests whether selected is null. If so, it assigns a reference to the card that was clicked to selected. However, if selected is not null, it means that the user already clicked a card. In that case, the code tests whether the corresponding linkage IDs are equal for the card referenced by selected and the card that was just clicked. If they are, it means that the user has correctly selected two cards. In that case, the code adds 2 to the score, sets the _alpha property of the two cards to 50, and resets selected to null. If the correct variable is equal to the number of elements in linkageArr, the user has won. In the event that the IDs aren't equal, use setTimeout to reset the cards in one second.

5.

Define resetclips():

  function resetclips(a:MovieClip, b:MovieClip):Void {     a._visible = true;     b._visible = true;   }


The resetclips() function simply sets the visibility of the two movie clips.

6.

Test the movie.

When you test the movie you can click on the cards.




Macromedia Flash 8 ActionScript Training from the Source
Macromedia Flash 8 ActionScript: Training from the Source
ISBN: 0321336194
EAN: 2147483647
Year: 2007
Pages: 221

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net