In the Dragging Objects tutorial I introduced you to the basics of dragging objects using a little bit of ActionScript in Flash. This tutorial goes a little beyond that because not only will we be dragging a MovieClip across the stage, (a button inside of a MovieClip) but we'll also be triggering another MovieClip to move across the screen as well. This movieclip will contain a series of photos.  (See the example above.)

1. I'm not going to go into how to create the animated dog button because that was discussed in the Dragging Objects tutorial so we'll just jump in and set up everything to add the ActionScript.

Create a new Flash document 300 X 200 with a dark blue background and a Frame rate of 15.

2.  Create a button (my button is two movie clips, the Up state being the dog sitting movie clip and the dog dragging the Over state.)  You can create whatever button you like.  I named my button dogBtn.

3.  Create a new MovieClip symbol and name it dogMC (or whatever is appropriate for your button) and drag out the button you just created into this movie clip.

Add the following ActionScript to this button.  (Make sure that you're adding the ActionScript to the button and not the Frame!)

Button ActionScript (Attached to dogBtn)

on (press) { startDrag ("", false, left, top, right, bottom); drag = true; } on (release) { stopDrag (); drag = false; }

This sets up the dragging ActionScript for the button so users will be able to drag the button across the stage.  When the user clicks and holds down the mouse button on the button they'll be able to drag it.  When they click off of the button it will stop dragging.

4.  Now go back to the main stage and drag out the MovieClip you just created.  Give this an instance name of dogMC.

5.  Now we need to create the MovieClip that has the photos inside of it.  So, hit F8 and name this movie clip photos.  Make sure that the Registration Point is the center of the clip.

Obviously, you'll need some photos for your movie.  I have 4 just for demonstration purposes but you'd likely would have more.  Each photo is 140 X 105 pixels.  Just place these next to each other like below.

Place the first photo in the middle of the stage and align it to the center of the stage. Place the other photos to the right of it.

6. Once that is done go back to the main stage and drag the photos clip into its own layer. Place it so that the first photo is in the middle of the stage above the drag button. Create a new layer on top of this and draw out a rectangle the same size as one of the photos 140 X 105. This is going to be the mask. Right-Click on the layer that this rectangle is in (it should be ABOVE the layer with the photos) and choose Mask.

This is how your layer should be set up.

7. Now everything should be on the stage. Click on the dogMC MovieClip and hit F9. Add the following ActionScript:

MovieClip ActionScript (Attached to dogMC)

onClipEvent (load) { top = _y; left = _x; right = _x +240; bottom = _y; } onClipEvent (enterFrame) { if (drag == true) { _root.photos._x = (150-((_root.dogMC._x -36) *2)); } }

Understanding the ActionScript

onClipEvent (load) {

top = _y; (This is the top y coordinate. which is where the MC is on the stage as it sits.)
left = _x; (This is the left x coordinate..)
right = _X +240: (This is how far we want the dogMC button to move to the right.)
bottom = _y; (This is the bottom coordinate..)

The second part of the ActionScript is where all the action takes place. To make it look right, you'll need to know some numbers to place into the command. The 150 refers to the registration point of the photos - its relation to the stage. The _root.dogMC._x refers to the placement of the dogMC as it is drug across the stage. Honestly, I had to play around with the (-36) number until it finally looked right in the movie when I tested it.