• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 10. Drag-and-Drop Interactions > Drag and Drop Inferno

Drag and Drop Inferno

You already know from Lesson 9 how the Lower Hell portion of the movie functions. In this quick review, pay close attention to each of the events that happen and what triggers them. Understanding the intended functionality in detail makes scripting much easier.

Open lower.swf in Lesson 10's Complete folder.

Once again, this is the completed version as it will appear when you have completed Lesson 11. You will add most of the functionality of the file in this lesson, however.

To begin with, notice the second set of directions, in blue, that appear at the right of the screen. When the document first loads, this text reads, “Drag a monster to its designated post.”

Drag Chiron the centaur to the center of the lake of ice at the bottom and release the mouse button.

This is the incorrect target for the centaur. When you release the mouse button, two things happen. First, the centaur is snapped back to its original location. Second, the drag-and-drop directions now read, “Incorrect. Please try again!”

Drag the centaur to the second target from the top, just beside the river of blood.

This is the correct target for the centaur. Note that the centaur stuck to its target— in fact, he snapped to his target—and that the correct-target feedback now appears where the drag-and-drop directions started.

Drag the centaur back to its original position.

The centaur snaps back into place and the text is reset to “Drag a monster to its designated post.”

There are three possibilities for the drag-and-drop object: It can be dropped in the correct position, an incorrect position, or its original position. In all three cases, the object snaps into position and the text directions change.

Drag Chiron the centaur back to the river of blood. Then click the Fraud label.

When you drag Chiron to the correct target, the corresponding text appears in the description area. Then, when you click the Fraud label, the main info area (equivalent to the one you built in Lesson 9) is filled with an explanation of Fraud.

But that's not all that happens. The drag-and-drop directions (blue) text is also reset, flushing out the correct-target text that appeared when Chiron was dropped in the correct location. This happens because once the user clicks Fraud, a non-drag and drop event, the drag-and-drop feedback is obsolete and could be confusing. Does clicking the Fraud label have anything to do with Chiron? No.

Close the SWF.

By explaining the functionality of the different user actions at this level of detail, it is much easier to envision the scripts required to make it happen.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint