When we first developed this project, we had the drag-and-drop scenario configured as it is at this point in the lesson. But when we did usability testing, we found that people often started to drag a monster and then changed their minds before releasing. When they changed their minds, they dragged the monster back to its starting location. Unfortunately, they were greeted with a message that said, "Incorrect. Please try again!" even though they weren't trying to drop the monster over a target. It became clear that we needed to add another target area over the originating area. This target would be neutral; it wouldn't send a correct or incorrect message to the drag_txt text field. In addition, if dropped on this target, the object would snap to its original position.
In this task, you'll add this additional functionality to the movie. Let it serve as a reminder that it's important to do usability testing early enough in the project to allow time for making significant changes.
1. | Select Frame 10 of the monster targets layer. Drag out an instance of monsterTarget. Using the Free Transform tool, resize the instance to cover the entire area shared by all four monsters . |
As before, you'll use hitTest() in conjunction with a new drop target. The difference this time is that instead of a separate target for each of the monsters, all four will share one target.
Normally, you wouldn't use the Free Transform tool to disproportionately resize a symbol instance, because it distorts the appearance of the instance. In this case, you can see how the black borders around the target are enlarged and blurry. But it doesn't matter here, because you're about to make the instance invisible. And invisible movie clips are just like invisible buttons in one regard: it doesn't matter what they look like.
2. | With the newly stretched instance still selected, give it an instance name of start_targ_mc . |
With this instance name, you have a parameter you can test for using hitTest().
3. | In the Property inspector's Color drop-down, choose Alpha, and drag the slider beside it down to 0 . |
This makes the movie clip instance invisible.
4. | Select Frame 10 of the actions layer. In the Actions panel, find the code block for the chiron_mc instance, and insert the following code between the if and else blocks: } else if (this.hitTest(_root.start_targ_mc)) { this._x=562; this._y=342; _root.drag_tx233Text="Drag a monster to its designated post."; |
We have a variation on the if...else sequence: if...else if...else. Flash tests these code blocks in order, starting with the if block. If the if action evaluates to false, it proceeds to the else if action. If that evaluates to false, it proceeds to the next else if action (or, in this case, the final else action). You can string together as many else if actions as you need. Should any of these if or else if actions evaluate to true at any time, Flash will execute their nested statements and stop there, not checking any subsequent condition.
This particular else if line works just like the if line you created earlier: a hitTest() is performed to find out whether the chiron_mc instance was dropped over the named instance (in this case, _root.start_targ_mc). Should it evaluate to TRue, the chiron_mc instance is snapped back to its original position, and the drag_txt text field is reset to its initial text.