The MovieClip object is one of Flash's most powerful and useful features. As an object, it's a blueprint from which many instances can be created. After an instance of the object is named, you can access that object's properties (variables) and methods (functions with tasks specific to the movie clip instance), thereby manipulating each instance separately. Be sure to name each instance as you create it so you can access it with ActionScripting and dot syntax addressing. Then you can also use the Insert Target Path button in the Actions panel, which lets you select named instances that are on the stage. When selected, its target path is inserted into the text in the Actions panel. To see any of your code in action and any change in properties, you need to test or publish the movie. You see how your code works after it's compiled into a .swf. For example, if you change the position (_x and _y properties) and transparency (_alpha property) of a movie clip on the stage with ActionScript, the movie clip appears unchanged until you test the movie. Tip If you name your instances with suffixes, code hinting becomes available. For example, if you name an instance ball_mc, code hinting will show you all the methods available for a movie clip. Movie Clip PropertiesEach movie clip instance you create has several properties that you can access with ActionScript. Some properties are read-only, which means that you can get the value, but not change it. An example of a read-only property is MovieClip._target, which returns the target path of a movie clip instance as a string. You cannot, however, set the value for _target, which is what makes it a read-only property. See Table 11.1 for descriptions of some of the movie clip properties.
Working with Movie Clip PropertiesThis example changes the blendMode property of a movie clip when the user clicks on it. To do so, follow these steps:
function blendEffect(){ // set blendMode to "hard light" this.blendMode = 14; } // attach function to event box_mc.onRelease = specialEffect; When you test this, the colors in the box_mc movie clip should change when you click on the box. What if you want to revert to the original color when you click on the box next time? Adding some simple logic can take care of that. Test whether the blendMode is normal. If it's already normal, you can change it to hard light mode with the integer 14. If blendMode is not already set to normal, you reset it to normal mode with the integer 1. function blendEffect(){ // test whether already normal if(this.blendMode == "normal"){ //if normal, set to "hard light" this.blendMode = 14; } else { // revert to normal blend mode this.blendMode = 1; } } // attach specialEffect to box event. box_mc.onRelease = specialEffect; That's all there is to it. You've created a movie clip that changes its color on the first click and then reverts to its normal coloring on the second. Movie Clip EventsMovie clips can have button events attached to them, including all the events listed in the "Working with Buttons" section of this chapter. With no specific hit area determined on the timeline for a movie clip, any filled area in the clip is considered the hotspot for that particular clip. For example, you may want a movie clip to move when the user clicks on it. The following code makes a movie clip move 20 pixels to the right when clicked in your .swf. The filled shape drawn in the movie clip is the hit area for button events. function moveClip(){ this._x +=20; } moveRight_mc.onRelease = moveClip; Tip You can make your movie clip behave exactly like a button and have an up, over, and down visual associated with it. The button timeline is automatically set up to have only four keyframes. To make a movie clip that responds like a button, you must set up the frames yourself. Create _up, _over, and _down frame labels. This is the only time you ever want to use underscores for a frame label name. Add stop() actions below each frame label. Create a graphic below each frame label as in a regular button. Any filled shape can serve as your hit area, or you can assign one to a movie clip instance inside your movie clip button by double-clicking the instance and adding the following code to the timeline inside: this._visible=false; _parent.hitArea=this; You cannot see the movie clip button function until you assign a button event (for example, onRelease) to tell the Flash Player to see it as a button. Movie clip events other than the button events, which you saw being used in the earlier code, can be viewed as "big picture" events. They tend to handle events triggered by data loading or the progress of the playhead from frame to frame. Following is a list of some of these events:
Adding and Removing Movie Clip InstancesThere might be times when you want to create multiple copies of the same symbol, all of which are acting independently on the stage at runtime. There are three ways to place a movie clip on the stage with ActionScript: duplicate an instance already on the stage, attach a clip from the library at runtime, and create an empty clip on the fly. Each method requires that you give the newly created instance a position by setting the _x and _y properties of the movie clip after it's been created. duplicateMovieClip The duplicateMovieClip method copies an instance that was placed on the stage at author time. The syntax is as follows: name_mc.duplicateMovieClip(newname, depth) For example, // create a copy of box1_mc, named box2_mc, with depth at 30; box1_mc.duplicateMovieClip("box2_mc", 30); // position the new clip on the stage box2_mc._x = 20; box2_mc._y = 40; attachMovie The attachMovie method copies instances onto the stage from symbols in the library. This can be especially useful when you want to keep your graphic assets off the stage. When you use the attachMovie method, you are creating an instance directly from the library. Rather than copy an instance onto the stage while authoring your project, you are using code to do the same thing while the movie plays. To use the attachMovie method, you must create a linkage ID for the symbol in the library. Open the library for your project and right-click on the symbol you want to copy from the library during runtime, and then select Linkage from the options. In the Linkage properties box, select Export for ActionScript. The field for the Identifier is now ready for you to give your symbol a linkage idName. This is the name the compiler will use when looking for the symbol to attach. The syntax is as follows: name_mc.attachMovie(idName, newName, depth) For example, // place an instance of a library symbol on the stage this.attachMovie("newClip", "newClip1", 10); //position the new instance relative to its parent clip this.newClip1._x = 0; this.newClip1._y = 0; createEmptyClip The createEmptyClip method creates a new, empty movie clip. The registration point is set automatically in the upper-left corner. The syntax is as follows: name_mc.createEmptyMovieClip(instanceName, depth) For example, // create a new movieclip this.createEmptyMovieClip("myEmptyClip_mc", 100); // position it relative to parent clip this.myEmptyClip_mc._x = 30; this.myEmptyClip_mc._y = 40; Creating a new movie clip at the same depth as an existing movie clip results in the new movie clip replacing the old one. If you don't know what the highest occupied depth is in your Flash document, you can use the getNextHighestDepth() method to have Flash determine at what depth to put your new movie clip instance. this.createEmptyMovieClip("myPhoto_mc", this.getNextHighestDepth()); Removing a Movie ClipTo remove a movie clip, you can use the aptly named removeMovieClip() method with the following syntax: name_mc.removeMovieClip() Dragging and Dropping Movie ClipsOne way to add interactivity to your Flash projects is to create drag-and-drop objects in your user interface. You can make your movie clips dragable as long as the user has the mouse held down by using the onPress button function. To let the user pick up a movie clip, enable drag in a movie clip's onPress method: ball1_mc.onPress = function() { startDrag(this); }; If you want the movie clip to drop when the user releases the mouse, use the onRelease event and the method for stopping the drag or the movie clip. ball1_mc.onRelease = function() { stopDrag(); }; Working with Dynamic MasksComplex interactive effects can be created with dynamically generated masks. Just like a mask created in the authoring environment, dynamic masks have a content layer and a mask layer. To create a masking relationship between two objects, use the following syntax, where myImage_mc is the instance name of the movie clip to be masked, and myMask_mc is the instance name of the movie clip that will be the mask: myImage_mc.setMask(myMask_mc); To cancel the mask without affecting the mask layer in the timeline, pass null to the setMask method: MyImage_mc.setMask(null); If you have two movie clips on the stage and you want one of them to mask the other until the user clicks on it with the mouse, use the following code: // assign a movieclip as mask circle1_mc.setMask(circle2_mc); // define function to turn off mask function removeMask(){ this.setMask(null); } // attach removeMask function to onRelease circle1_mc.onRelease = removeMask; |