Creating an Interactive Placeholder

Tạo một Trinh Giư Chô Interactive A giữ chỗ là không có gì hơn một dụ movie clip (trống hay cách khác) vào đó bên ngoài nội dung có thể được nạp (còn được gọi là nhắm mục tiêu một). Tạo ra một tương tác liên quan đến việc giữ chỗ giữ chỗ cho rằng khả năng tương tác khi một sự kiện của một số loại xảy ra.
Nội dung trích xuất từ tài liệu:
Creating an Interactive Placeholder < Day Day Up >Creating an Interactive PlaceholderA placeholder is nothing more than a movie clip instance (empty or otherwise) into whichexternal content can be loaded (also known as a target). Creating an interactiveplaceholder involves giving that placeholder the capability of interactivity when an eventof some sort occurs. The great thing about loading external content into an instance thathas been scripted in such a way is that even though the instances content will change, itsscripted functionality can remain the same. Look at the following example:this.onMouseDown = function(){ placeholder_mc._rotation += 30;}If you attach this script to the main timeline, the placeholder_mc instance rotates 30degrees each time the mouse is clicked. This instance can be thought of as an interactiveplaceholder because any external movie or JPG loaded into it will also rotate when themouse is clicked. The only thing that changes is the instances content.There are many ways to create interactive placeholder movie clip instances with aminimum of scripting. The following exercise shows an example. 1. Open virtualaquarium3.fla. When we worked with this file in the preceding exercise, we set the movie to dynamically load JPGs into the movie clip instance named placeholder_mc. In this exercise, well add ActionScript to make the loaded content draggable and to scale it 150 percent when the mouse button is pressed. The ActionScript will also ensure that when the mouse button is released, dragging ceases and the content is scaled back to 100 percent. In the process of setting up this functionality, well use the black rectangle (a movie clip instance named maskClip_mc) on the left of the stage as a dynamic mask. Lets get started. 2. With the Actions panel open, select Frame 1 of the Actions layer and add the following script at the end of the current script:3.4. var placeholderStartX:Number = placeholder_mc._x;5.6. var placeholderStartY:Number = placeholder_mc._y;7. This script creates two variables whose values represent the initial x and y positions of the placeholder_mc movie clip instance, into which our JPGs are loaded. The importance of these values will become evident in a moment. TIP We could have opened the Property inspector, selected the instance, copied the x and y values shown there, and set placeholderStartX and placeholderStartY accordingly, but the method shown in Step 2 is much more dynamic. It allows the values to change automatically if the instance is moved to a new point on the stage during development.3. Add the following script below the script you just added in Step 2:4.5. this.onMouseDown = function(){6.7. if (placeholder_mc.hitTest(_xmouse, _ymouse)){8.9. maskClip_mc._x = placeholderStartX;10.11. maskClip_mc._y = placeholderStartY;12.13. placeholder_mc.setMask(maskClip_mc);14.15. placeholder_mc._xscale = 150;16.17. placeholder_mc._yscale = 150;18.19. startDrag(placeholder_mc, false);20.21. }22.23. }24.This step attaches an onMouseDown event handler to the main timeline, causingthe script to execute whenever the mouse button is pressed. An if statementdetermines whether the mouse pointer is over the placeholder_mc instance whenthe mouse is pressed. If so, the remaining actions are executed. In other words,because our JPG images are being loaded into this instance, these actions executeonly if the mouse button is pressed while the pointer is on top of the image.The first two actions within the if statement dynamically position the blackrectangle maskClip_mc movie clip instance so that its x and y values equalplaceholderStartX and placeholderStartY, respectively. This action places themaskClip_mc instance directly over the placeholder_mc instance during thisscripts execution.The next action dynamically sets the maskClip_mc instance to mask theplaceholder_mc instances content—necessary because the next two lines in thescript scale the size of placeholder_mc by 150 percent. By masking theplaceholder_mc contents, those contents appear to remain within the panelwindow even though placeholder_mc becomes larger. The last action in the event handler makes the placeholder_mc movie clip instance draggable.4. Add the following event handler below the script you just added in Step 3:5.6. this.onMouseUp = function(){7.8. stopDrag();9.10. with(placeholder_mc){11.12. setMask(null);13.14. _xscale = 100;15.16. _yscale = 100;17.18. _x = placeholderStartX;19.20. _y = placeholderStartY;21.22. }23.24. }25. This script—executed when the mouse button is released—simply reverses the actions that occur when the mouse button is pressed. The script first stops the dragging process; then the next several lines use a with statement to perform a set of actions in relation to the placeholder_mc instance. The first action removes the mask from the instance. NOTE Using null removes the mask effect completely. The next two actions scale the instance back to its original size. Because this instance was draggable, the last two actions perform the necessary task of resetting it to its original position.5. Choose Control > Test Movie. As soon as the movie begins to play, click and drag the image of the shark. When the mouse button is pressed, the image becomes larger and draggable, and the dynamic mask we set up takes effect. Release the mouse button, and youll see maskClip_mc. The reason for this is that when our script removed the masking effect, we didnt compensate for the fact that maskClip_mc would become visible again as a normal clip. Obviousl ...