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.

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.
With the Actions panel open, select Frame 1 of the Actions layer and add the following script at the end of the current script:
```
var placeholderStartX:Number = placeholder_mc._x;

var placeholderStartY:Number = placeholder_mc._y;
```
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.
Add the following script below the script you just added in Step 2:
```
this.onMouseDown = function(){

  if (placeholder_mc.hitTest(_xmouse, _ymouse)){

    maskClip_mc._x = placeholderStartX;

    maskClip_mc._y = placeholderStartY;

    placeholder_mc.setMask(maskClip_mc);

    placeholder_mc._xscale = 150;

    placeholder_mc._yscale = 150;

    startDrag(placeholder_mc, false);

  }

}
```
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 contentnecessary 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.
Add the following event handler below the script you just added in Step 3:
```
this.onMouseUp = function(){

  stopDrag();

  with(placeholder_mc){

    setMask(null);

    _xscale = 100;

    _yscale = 100;

    _x = placeholderStartX;

    _y = placeholderStartY;

  }

}
```
This scriptexecuted when the mouse button is releasedsimply 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.
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.
Return to the authoring environment. With the Actions panel open, select Frame 1 of the Actions layer and attach this script:
```
maskClip_mc._visible = false;
```
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.
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.
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.