Skip to Page Content

Chris Cassell Dot Net

• Home
• Log
• Portfolio
• Projects
• Classes
• Contact

• GDT 260 Home
• Class Overview
• Class Notes
  • 1.15
  • 1.17
  • 1.22
  • 1.24
  • 1.29
  • 2.7
  • 2.12
  • 2.21
  • 2.26
  • 2.28
  • 3.7
  • 3.12
  • 3.19
  • 4.4
• Assignments
• Student Work
• Links

GDT 260 Animation for the Web: Winter 2002

Class Notes 04.04.02: Dragging a Movie Clip

Download the source

The Normal Version

1. Create the movie clip that you want to drag
2. On the timline of the draggable movie clip, place a button
3. Attach the following actionscript to the instance of the button (your actions panel should say "Object Actions"):
   on (press) {
  startDrag (this);
}
on (release, releaseOutside) {
  stopDrag ();
}

So, when you press the button, you start dragging this which refers to this, or the current, movie clip. Note that this is an expression, no quotes.

Then, when you release the mouse button, you stop dragging. Easy enough.

The Snap to Center Version

1. Simply change the actionscript:
   on (press) {
  startDrag (this, true);
}
on (release, releaseOutside) {
  stopDrag ();
}

The true argument sets the snap center to mouse option.

The Horizontal Version

1. Change the actionscript to the following:
   on (press) {
  startDrag (this, false, this._x-200, this._y, this._x+200, this._y);
}
on (release, releaseOutside) {
  stopDrag ();
}

This one’s a little bit more involved. There’s this - the target, the snap to center (or not in this case), and then four arguments that constrain the movement in this order: left, top, right, bottom.

To make sure that the movie clip can’t move vertically, we set the top and bottom values to this._y, the movie clip’s current Y position on the stage. The left and right values are set to this._x-200 and this._x+200, respectively, which looks at the starting X position and allows you to drag it to 200 pixels to the left of it, and then 200 pixels to the right. Let’s say the clip’s sitting at X: 300 Y: 200. You can only drag the ball vertically from 200 to 200, which means not at all. To the left, we can drag the ball to 300 -200, or 100 pixels from the left of the stage. To the right, we can drag it 300 + 200, or 500 pixels from the left of the stage.

The Vertical Version

on (press) {
  startDrag (this, false, this._x, this._y-200, this._x, this._y+200);
}
on (release, releaseOutside) {
  stopDrag ();
}

Same idea as the horizontal, just change the right and left values to the current X position and set the top and bottom to 200 pixels from the starting Y position.