Hands-On Stuff - Page 3

For this somewhat straight forward example we are going to create a dragable movie clip that can be used in games, navigation bars and other areas. This will help to motivate you with some ideas to create fun things in the future. A dragable movie clip works when a user moves their mouse over an object, clicks on it to begin moving it then releases the mouse button to stop moving it. To begin we create a Movie Clip and call it 'movingObject', then make a very simple button and place it in the first frame of the first layer in the Movie Clip. The button could easily be the only thing inside of the movie clip, and have been created with a symbol from the library of what we want the dragable object to look like. Now return to the main Stage of the movie and place the movie clip that we have just created on the Stage by selecting it from the library and dragging it out on to the stage. With it selected, open the Instance Panel (using [Ctrl]+I), and type 'movingObject' in the Name text field and press enter. This assigns the name to the Movie Clip so that it can be referred to as 'movingObject' by the startDrag action.

Now we want to return to the editing of the object by just double-clicking on it. Select the button that we created again and open the Actions Panel (making sure that you are in the Normal Mode). We want to select the Actions tab that will be shown on the left side and from there we want to choose the startDrag option. In the parameter area that is shown at the bottom of the Actions Panel type _root.movingObject. The Target option specifies which Movie Clip should begin dragging when the startDrag action is executed. The '_root' tells Flash to go back to the Stage of the movie and then find an instance name called movingObject, which is in fact the movie clip itself where the button is located.

Now we want the Movie Clip to move when the user clicks on it. We need to change the button's Event Handler from 'on release' to 'on press' by deselecting Release and then selecting Press in the Event Handler menu. To change the the Event Handler just click on the line with the 'on (on release) {' and you will be given options at the bottom to choose from. So, we now have the Movie Clip with the ability to be moved around once the user presses on the Movie using the button inside. However we obviously want to tell the Movie Clip to stop moving once the user lets go of the mouse button. Choose the stopDrag option from the Actions menu with the button selected (you will see the startDrag option above it). As we know the default Event Handler is on release, so that is all that we have to do. This will stop the current dragging Movie Clip from following the mouse pointer.

Now, go back to the Stage of the movie and use the Publish command to publish it or simply test the movie by hitting [Ctrl]+[Enter] on the keyboard which will allow you to click and drag the movie clip. Hopefully, this will help you to add some beginning interactive features to your Flash movies and encourage you to learn more interesting things!

Demonstration

This file was created using the principles that we learned in the tutorial itself. Below is a "fla" (source) file. It is a "learning tool" that can be downloaded and then opened in your Flash program, providing you with the opportunity to better understand how they are created.

Additional Features - Page 2
Flash 5 Tutorial: Part 1
Beginning to Use ActionScript