Dragging a Movie Clip Instance within a Boundary

Đang có thể kéo dụ bóng movie clip trên màn hình là dự án quan trọng đối với tương tác của chúng tôi. trên màn hình vị trí của quả bóng sẽ xác định khối lượng và panning của âm thanh nảy. Nếu chúng ta cho phép người dùng tự do kéo dụ bộ phim trên màn hình basketball_mc clip, tuy nhiên, cảnh của chúng tôi sẽ không thực tế bởi vì người sử dụng có thể kéo và trả bóng qua đám đông, các backboard...
Nội dung trích xuất từ tài liệu:
Dragging a Movie Clip Instance within a Boundary < Day Day Up >Dragging a Movie Clip Instance within a BoundaryBeing able to drag the ball movie clip instance around the screen is critical to ourprojects interactivity. The balls position onscreen will determine the volume andpanning of the bouncing sound. If we were to allow users to freely drag thebasketball_mc movie clip instance onscreen, however, our scene would not be realisticbecause the user could drag and bounce the ball over the crowd, the backboard, and soforth. Obviously, we need to restrict dragging to the area denoted by the court.There are several ways of scripting so that an object can be dragged only within a certainarea. In this exercise, youll learn how to control the draggable area by tracking themouses movement and allowing dragging to occur only when the mouse pointer is withina certain area onscreen. 1. Open basketball2.fla. Continue using the file you were working with at the end of the preceding exercise. Before you continue, its important to think through the problem at hand; that is, how to drag the ball movie clip instance in sync with the mouse movement, and how to constrain that dragging to a specific area onscreen.The first objective is to establish the draggable area, or boundary, of our screen. InFlash, you define a boundary by determining four coordinates: top, bottom, left,and right. Our script will use these coordinates to restrict movement within thatarea. For this exercise, the coordinates that represent the four sides of ourboundary will be as follows:Top boundary = 220Bottom boundary = 360Left boundary = 60Right boundary = 490As shown by the arrows, all coordinates are based on the distance of that side fromthe top and left sides of the stage.TIPAn easy and visual method of determining boundary coordinates is to draw asimple box on the stage. Resize it and position it in the area that will serve as theboundary in the scene. Select the box and then open the Info panel. Using theinformation in the X, Y, W, and H boxes, you can determine the four coordinates of your boundary: Y is the top boundary, X is the left boundary, Y + H is the bottom boundary, and X + W is the right boundary. After youve determined the four coordinates of your boundary, delete the box. There are other, more dynamic ways of setting a border, but this technique is the most straightforward. Because we want the basketball to move only when the mouse pointer is within the boundary, in scripting terms we need to check for a condition before the ball can be dragged. Logically, this might be translated as follows: If the mouse pointers position is within the coordinates of the boundary, drag the basketball_mc movie clip instance; otherwise, stop dragging. Well need to instruct the script to check for this condition on a regular basis because the mouse is in frequent motion. Using the onMouseMove event handler, we can check for this condition each time the mouse is moved. This will allow our script to act instantly to enable or prevent the basketball_mc movie clip instance from being dragged. We now have all the information necessary to proceed.2. With the Actions panel open, select Frame 1 of the Actions layer. After the line of script from the preceding exercise creating the bounce Sound object, add the following lines of script:3.4. var leftBoundary:Number = 60;5.6. var rightBoundary:Number = 490;7.8. var topBoundary:Number = 220;9.10. var bottomBoundary:Number = 360;11. These variables contain the x and y coordinates of our boundary. Next, well add an if statement that constantly checks the position of the mouse and allows the ball to be dragged only if the mouse pointer is within the boundary we just defined.3. Add the following lines at the end of the current script:4.5.6. this.onMouseMove = function() {7.8. if (_xmouse > leftBoundary && _ymouse > topBoundary && _xmouse < rightBoundary &&9.10. _ymouse < bottomBoundary) {11.12. basketball_mc.startDrag(true);13.14. } else {15.16. stopDrag();17.18. }19.20. }21. Using an onMouseMove event handler, the if statement is analyzed each time the mouse is moved. With this if statement, were checking to determine that four conditions are true. If they are, dragging will commence; if not, dragging will cease. Were checking the current horizontal and vertical positions of the mouse pointer (_xmouse and _ymouse, respectively) to see how they compare to the boundaries we defined earlier. Lets look at a couple of possible scenarios to understand the logic behind this if statement. Suppose that during playback of the movie, the mouse pointer is moved to where its horizontal ...