Working with Movie Clips


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 Properties

Each 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.

Table 11.1. Movie Clip Property Descriptions

Property

Datatype

Description

_alpha

Number

The alpha transparency of the movieclip.

enabled

Boolean

If false, any button events attached to the movieclip are not invoked.

_rotation

Number

Specifies the rotation of the movieclip in degrees.

_visible

Boolean

If false, the movieclip is not rendered on the screen.

_x and _y

Number

Specify the x and y coordinates of the movieclip relative to the local coordinates of the parent clip.

blendMode

Object

Affects how a movieclip appears when it is in a layer above another object.

cacheAsBitmap

Boolean

When set to true, the Flash Player caches an internal bitmap representation of the movie clip.

filters

Array

An array containing each filter currently applied to the movieclip.

This property requires a little preparation code to use. We'll cover this in Chapter 16, "Putting It All Together: Creating an XML-Based Photo Slide Show."


Working with Movie Clip Properties

This example changes the blendMode property of a movie clip when the user clicks on it. To do so, follow these steps:

1.

On the stage, draw a rectangle and fill it with a gradient.

2.

Convert the shape into a movie clip symbol and name it box.

3.

With the Your New Movie Clip instance selected, open the Property inspector and give the instance an instance name of box_mc.

4.

Create a new layer and add this code to the first keyframe.

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 Events

Movie 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:

  • onData This event handler is invoked when all the data is loaded into a movie clip.

  • onEnterFrame Code handled by onEnterFrame is executed continually at the frame rate of the .swf file. onEnterFrame actions are processed before any other code for that frame.

  • onKillFocus The onKillFocus event is invoked when focus is removed from a movie clip.

  • onLoad When the movie clip is instantiated and appears in the Timeline, the onLoad event handler is invoked.

  • onUnLoad The onUnLoad event handler is invoked in the first frame after the movie clip is removed from the Timeline. The code in the handler is executed before any other code associated with the frame.

Adding and Removing Movie Clip Instances

There 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 Clip

To remove a movie clip, you can use the aptly named removeMovieClip() method with the following syntax:

name_mc.removeMovieClip()


Dragging and Dropping Movie Clips

One 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 Masks

Complex 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;




Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net