Art 444 Lecture Notes

Syllabus
---------------------

Calendar/Schedule

---------------------

Lecture Notes

---------------------

Projects

---------------------

Resources

---------------------

Student Work

Art 444 Lecture Notes

Create a draggable movie clip in Flash MX 2004

Define a droptarget for a draggable movie clip

Adding a bounce-back effect

Advanced variations

Attaching a movie cLip symbol from the library

Attach a sound event with the droptarget property

Note: The following tutorials are variations of the Flash movie tutorials found in Chapter 7 of the Flash MX 2004 Advanced Visual QuickPro Guide by Russell Chun. Please refer to this text for more advanced scripting possibities. THESE EXANPLES USE ACTION SCRIPT 2.0.

NOTE: All scripts below involve creating an Action layer for your script. All script go in this layer.

Create a draggable movie clip in Flash MX 2004 (see Chapter 7, pp. 284-287)
1) Create a movie clip symbol.
2) Give the movie clip an instance name (Properties Panel)
3) Create a layer in your main timeline and call it "actions." All scripts are added here.
4) Type following script below in the ActionScript window on your Actions layer.

Here is how your script should look:

eyes_mc.onPress = function() {
______this.startDrag();
};
eyes_mc.onRelease = function() {
______stopDrag();_____
};

Note: 'eyes_mc' is the instance name of the movieclip you wish to drag.

Define a droptarget for a draggable movie clip (see in Chapter 7, p.308)
1) Follow the steps above to create a draggable movie clip.
2) Create a second movie clip for the drop target movie clip and give an instance name.
3) Type following script below in the ActionScript window on your Actions layer.

Example:

eyes_mc.onPress = function() {
______this.startDrag();
};
eyes_mc.onRelease = function() {
_____stopDrag();
____if (this._droptarget == "/potato") {
____--- - this._visible = false;
______}
};

NOTE: this._visible = false; script makes the 'eyes_mc' invisible when dropped on the 'potato' drop target. See Chapter 7, pp.288-291 for information on setting the movie-clip properties.

Adding a bounce-back effect:

1) Follow the steps above to create a draggable movie clip with a drop target.
2) Type following script below in the ActionScript window on your "Actions" layer.
3) Use the info panel to find the cursor position of where you want your draggable to snap to. In the example below, 200 is listed for the 'x' position (horizontal alignment) and 125 is listed for the 'y' position (vertical alignment). Note: 0, 0 is the upper left hand corner of the stage.

Example:

eyes_mc.onPress = function() {
______this.startDrag();
};
eyes_mc.onRelease = function() {
_____stopDrag();
____if (this._droptarget == "/potato") {
____ ____this._visible = false;
____ } else {
________ this._x = 200;
________ this._y = 125;
______}
};

Variation:

Another technique to create a bounce-back effect is by capturing the position of the MC before it is dragged.

Here's the code:

eyes_mc.onPress = function() {
______startDrag(this);
______x_pos = this._x;
______y_pos = this._y;
};
eyes_mc.onRelease = function() {
_____stopDrag();
____if (this._droptarget == "/potato") {
____ ____this._visible = false;
____ } else {
________this._x = x_pos;
_________this._y = y_pos;
______}
};

Advanced variations:

Start playback of a movieclip's timeline or the main(_root) timeline when the movie clip has been dragged to the correct drop target using:

trashcanlid_mc.play(); This script causes the movieclip instance titled, "trashcanlid_mc" to begin playback from the first frame of the clip (a stop action is placed on its first frame). In this example, the can lid closes.

Variations include nextFrame(); This script takes you to the next frame of a timeline. prevFrame(); This script takes you to the previous frame of a timeline. _root.gotoAndPlay("frame label"); takes you to a named frame label on the movie's main timelime.

Example:

paper.onPress = function() {
______this.startDrag();
};
paper.onRelease = function() {
______stopDrag();
_____if (this._droptarget == "/trashcan") {
______ _ trashcanlid_mc.play();
______}
};

It is important to use Frame labels instead of referring to the frame number at all times when jumping to a new frame in your movie. Add a frame label by selecting the frame in the timeline and entering a name for your label in the Frame Properties panel.

Note: If you need to jump to a new frame of the main timeline you will need to use _root BEFORE gotoAndPlay("frame label");

Example:

paper.onRelease = function() {
______stopDrag();
_____if (this._droptarget == "/trashcan") {
______ _ _root.gotoAndPlay("frame label");
______}
};

Attaching a movie clip symbol from the Library (see in Chapter 7, pp. 314-315 ):In the script below, when you release the "appleButton" a MC named "apple" will attach itself to a parent MC called "plate." The "apple" MC is exported from the Library by linking the MC for export to action script.

Example:

appleButton.onRelease = function() {
____plate_mc.attachMovie("appleID", "attachedApple", 1);
};

Here are the steps:

1) Create two movies clips. The first one will be the parent MC that the other MC will attach to.
2) In the Properties Panel give the parent MC an instance name.
3) In the Library select the MC symbol you wish to attach to the parent MC and from the library's pull-down menu and select Linkage. In the Linkage window select Export this symbol and in the Identifier field type an identifier (name) for your MC.
4) Add the following code to the if statement: plate.attachMovie("appleID", "attachedApple", 1);

Note: "plate_mc" is the instance name of the parent MC on the _root (main) timeline. "appleID" is the Identifier name for the attached MC. "attachedApple" is the name of the MC attached. The number "1" refers to level of the movie clip.

Attach a sound event with the droptarget property (see in Chapter 8, pp. 354-361):This script plays a sound once the draggable has hit the droptarget. You will need to make the attached sound exportable to the root timeline by selecting the sound in the Library and selecting "Linkage" from the pull-down menu. Give the sound an identifier name (I've named the sounds used below as "cheer" and "boo"). Check the "Export for Action script" and enter the following code into your action layer script:

Example:

mySound = new Sound();

eyes_mc.onPress = function() {
______this.startDrag();
};

eyes_mc.onRelease = function() {
_____stopDrag();
____if (this._droptarget == "/potato") {
________mySound.attachSound("cheer");
________mySound.start(0, 1);
____ } else {
________mySound.attachSound("boo");
________mySound.start(0, 1);
______}
};

Note: mySound = new Sound(); instantiates the Sound object. I only needs to be used once if you are attaching the sound object to different MCs. "0" sets the secondOffset, meaning that your sound will start 10 seconds into its timeline if entered. The second number correlates to how many times you wish to loop the sound.