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 nothing more than attaching a script to the instance, which is triggered by an onClipEvent of some sort. 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:

 onClipEvent(mouseDown){    this._rotation += 30;  } 

If you attach this script to an instance, each time the mouse is clicked, the instance will rotate 30 degrees. This instance can be thought of as an interactive placeholder, since any external movie or JPG that you load into it will also rotate when the mouse is pressed down; the only thing that changes is the instance's content.

One clip event designed expressly for loading external data (including variables and even movies) into instances is onClipEvent(data) . You can use this event when attaching a script to a placeholder, and it will be fired each time new variables or a new movie (or JPG) has finished loading into the instance useful if you want an action to occur as soon as content has been loaded into the instance. While onClipEvent(load) will only fire once (when the instance first appears in a scene), onClipEvent(data) can fire numerous times, depending on how often variables or movies (considered data in this context) are loaded into it.

There are numerous ways to create interactive placeholder movie clip instances with a minimum of scripting. Showing you how is what this exercise is all about.

1. Open virtualaquarium3.fla in the Lesson17/Assets folder.

   This is the file we worked on in the previous exercise. In that exercise, we set our movie to dynamically load JPGs into the movie clip instance named placeholder. In this exercise, we'll attach ActionScript to that instance to make the loaded content draggable and to scale it 150 percent when the mouse is pressed down. That ActionScript will also ensure that when the mouse is let up, dragging will cease and the content will be 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) on the left of the stage as a dynamic mask.

   Let's get started.

2. With the Actions panel open, select the placeholder movie clip instance and add the following script:

    onClipEvent(load){    thisX = _x;    thisY = _y;  } 

   This script is executed the moment the placeholder movie clip instance is loaded. Its function is to set the value of two variables thisX and thisY to the x and y property values of the movie clip instance. The importance of these values will become evident in a moment.

   TIP

   We could have easily opened the Property inspector, selected the instance, and copied the x and y values as shown there, and then set thisX and thisY accordingly, but this method is much more dynamic. It allows the values to automatically change if the instance is moved to a new point on the stage during development.

3. With the placeholder movie clip instance still selected, add the following script just below the script you just added:

    onClipEvent(mouseDown) {    if (hitTest(_root._xmouse, _root._ymouse)){      _root.maskClip._x = thisX;      _root.maskClip._y = thisY;      setMask(_root.maskClip);      _xscale = 150;      _yscale = 150;      startDrag(this);    }  } 

   This script is executed whenever the mouse is pressed down. First, an if statement determines whether the mouse is over the placeholder instance when pressed. If it is, the remaining actions will execute. In other words, because our JPG images are being loaded into this instance, these actions will only execute if the mouse is pressed down on top of the image.

   The first two actions within the if statement dynamically position the black rectangle maskClip movie clip instance so that its x and y values equal thisX and thisY , respectively. This places the maskClip instance directly over the placeholder instance during this script's execution.

   

   The next action dynamically sets the maskClip instance to mask the placeholder instance's content necessary because the next two lines in the script scale its size by 150 percent. By masking placeholder's contents, those contents will appear to remain within the panel window even though it becomes larger.

   

   The last action makes the placeholder movie clip instance draggable.

4. With the placeholder movie clip instance still selected, add the following script just below the script you just added:

    onClipEvent (mouseUp) {    stopDrag();    setMask(null);    _xscale = 100;    _yscale = 100;    _x = thisX;    _y = thisY;  } 

   This script executed when the mouse button is released simply reverses the actions that occur when the mouse is pressed: The first line stops the dragging process; the next removes the mask.

   TIP

   As shown, 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 is pressed down, the image becomes larger and draggable, and the dynamic mask we set up takes effect. Release the mouse, and you'll see the maskClip. The reason for this is that when our script removed the masking effect, we didn't compensate for the fact that maskClip would become visible again as a normal clip. Obviously, this is not what we want. There is, however, an easy fix.

6. Return to the authoring environment. With the Actions panel open, select the maskClip instance and attach this script:

    onClipEvent (load){    _visible = false;  } 

   This 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 will be invisible, it won't interfere with viewing the images in the placeholder instance, even when the masking effect is disabled.

7. Choose Control > Test Movie.

   Once again, as soon as the movie begins to play, click and drag on the image of the shark. With the mouse pressed down, the image becomes larger and draggable, and the dynamic mask we set up takes effect. Release the mouse, and the image will appear as it did originally. Not only that, but the maskClip no longer appears because it's invisible.

   Using the right-arrow button, load in a new image. Click on that newly loaded image, and you'll find it has retained its original functionality. That's because the image's functionality resides not within the loaded asset but in the instance into which the asset is loaded. Thus, while 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 completes this exercise. We'll continue to build on this file in the following exercises.