Tài liệu Creating an Interactive Placeholder ppt

< Day Day Up >

Creating an Interactive Placeholder
A placeholder is nothing more than a movie clip instance (empty or otherwise) into which
external content can be loaded (also known as a target). Creating an interactive
placeholder involves giving that placeholder the capability of interactivity when an event
of some sort occurs. The great thing about loading external content into an instance that
has been scripted in such a way is that even though the instance's content will change, its
scripted 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 30
degrees each time the mouse is clicked. This instance can be thought of as an interactive
placeholder because any external movie or JPG loaded into it will also rotate when the
mouse is clicked. The only thing that changes is the instance's content.
There are many ways to create interactive placeholder movie clip instances with a
minimum 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, we'll 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, we'll use the

black rectangle (a movie clip instance named maskClip_mc) on the left of the
stage as a dynamic mask.
Let's 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, causing
the script to execute whenever the mouse button is pressed. An if statement
determines whether the mouse pointer is over the placeholder_mc instance when
the 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 execute
only 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 black
rectangle maskClip_mc movie clip instance so that its x and y values equal
placeholderStartX and placeholderStartY, respectively. This action places the
maskClip_mc instance directly over the placeholder_mc instance during this
script's execution.

The next action dynamically sets the maskClip_mc instance to mask the
placeholder_mc instance's content—necessary because the next two lines in the
script scale the size of placeholder_mc by 150 percent. By masking the
placeholder_mc contents, those contents appear to remain within the panel

window 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 you'll see
maskClip_mc. The reason for this is that when our script removed the masking
effect, we didn't compensate for the fact that maskClip_mc would become visible
again as a normal clip. Obviously, this isn't what we want, but there's an easy fix.
6. Return to the authoring environment. With the Actions panel open, select Frame 1
of the Actions layer and attach this script:
7.
8. maskClip_mc._visible = false;
9.

This line of script makes the instance invisible as soon as it loads, and it remains
this way because our movie doesn't contain an action to change it. Because the
instance is invisible, it won't interfere with viewing the images in the
placeholder_mc instance, even when the masking effect is disabled.
7. Choose Control > Test Movie.
As soon as the movie begins to play, click and drag the image of the shark. With
the mouse button pressed, the image becomes larger and draggable, and the
dynamic mask we set up takes effect. Release the mouse button, and the image
appears as it did originally. This time, maskClip_mc no longer appears, because
it's invisible.

Load a new image, using the right-arrow button. Click that newly loaded image,
and you'll find that it has retained its original functionality. The image's
functionality resides not within the loaded asset, but in the instance into which the
asset is loaded (placeholder_mc); although the loaded content may change, the
instance and its functionality remain the same.
8. Close the test movie and save the file as virtualaquarium4.fla.
This step completes this exercise. We'll continue to build on this file in the
following exercises.

< Day Day Up >