Using Movie Clips and ActionScript to Explain Definitions

a5aaa50ffeb87d6078578452ef869aa2

Instead of attaching a database to your Flash document to show different parts of an image that you will be using, if the data you want to show is minimal, you can use an embedded movie clip symbol to display the information that you want to communicate. I will show you how to do this in this tutorial.

In this tutorial, I will be using the example of the different parts of a human hand, and explaining the different parts using a movie clip symbol.

Step 1: Importing the image into your Flash document:

Different from the other tutorials that I have posted here, you do not need to change the dimensions of your Flash document. We will need as much space as we can get, so do not change the width or height of your newly created Flash document.

After you have created a new Flash document, we are ready to import the image that we will be using in our Flash document. For this tutorial, I will be using the image shown below; however, you are more than welcome to use a different image that suits your interest.

To import the image above into your Flash document, from the File menu, click on the “Import to Library” option. This will load a window that looks similar to Open / Save. From the “Import to Library” window, select the file that you would like to use as the focal point / thesis of your Flash document.

Step 2: Introducing the Library:

After you have imported the image into your Flash document, we are ready to utilize it. To do this, we will need the Library open. To open the Library (if it is not already open), from the Window menu near the top of the Flash window, select the “Library” option, and then Library window will automatically appear for you, showing the image that you imported.

To place the image that exists within the Library (in this tutorial, the hand image), click and drag the name of the image from the Library and place it on the stage. After you have dragged the image name to the stage, the actual image will be visible on the stage itself.

After the image has been placed on the stage, you can use the mouse or your keyboard cursor keys to nudge and position the hand image to where you would like it to be on the stage.

Step 3: Layering and Creating Buttons:

To make the buttons that we create appear on top of the image that we imported, we will need to create a new layer. To do this, click on the “Insert New Layer” button on the Timeline, and a new layer (called “Layer 2″ by default) will automatically be created for you.

With Layer 2 selected in the Timeline, we are now ready to create buttons. To do this, click on the Oval Tool from the Toolbox, and draw small ovals on the places where you would like to have buttons placed. In this tutorial, I will be placing them on the tips of the fingers (as shown below).

After the ovals have been made on the fingertips of your image, we will need to individually convert them to buttons. To do this, select the first oval that you would like to convert to a button and press the F8 key, which will open the “Convert to Symbol” window. Within the “Convert to Symbol” window, use the following parameters:

  • Name: Thumb button
  • Behavior: Button

Press the “OK” button after you have designated the parameters above, and convert the rest of the ovals that you have created to button symbols as well using the “Convert to Symbol” window by pressing F8.

Step 4: Creating the Movie Clip:

In this step, we will be creating the Movie Clip element that will explain the different parts of the hand. To create a plain Movie Clip element, from the Insert menu at the top of the Flash window, click on the “Create New Symbol” option. This will load a “Create New Symbol” window that appears just like the “Convert to Symbol” window. Within the “Create New Symbol” window, enter the following parameters:

  • Name: Meanings
  • Behavior: Movie Clip

After the above parameters have been made in the “Create New Symbol” window, press the “OK” button, and you will be instantly taken inside the new movie clip that you just created. You also notice the Timeline is plain as well.

For better effect when we display the movie clip “Meanings” on the stage, we will want to the first keyframe blank and frozen. To apply this, open the Actions Inspector and enter the following ActionScript code:

stop ();

After the ActionScript code above has been entered in the Actions Inspector for keyframe 1 of the “Meanings” movie clip, we will need to create a new blank keyframe. From the Insert menu, click on the “Blank keyframe” option, and a new blank keyframe will be automatically inserted into the Timeline for the “Meanings” movie clip.

Within this new blank keyframe, enter the information you would like to be displayed near the crosshair on the Movie Clip’s stage. You can use the Text Tool from the Toolbar to enter your information.

For this blank keyframe, I will be placing the text of “Thumb” on the stage. For accuracy, be sure to place the text that you create in the center of the crosshair. To do this, you can use your mouse or nudge the text object around with the arrows on your keyboard.

For the frame to stay frozen when it accessed by the button it is assigned to, we will need to enter ActionScript to freeze it. To do so, within the Properties Inspector, enter the following code:

stop ();

You are now ready to finish the movie clip by creating the rest of the keyframes. To do this, create a blank keyframe and place the text you would like visible by every button within it. Be sure to also include the “stop” ActionScript in each frame as well.

After you have entered all the information you need in the “Meanings” movie clip, you are now ready to return back to the main stage. To do this, click on the “Scene 1″ link under the Timeline, and you will be automatically redirected back to the main stage.

Step 5: Accessing the Movie Clip:

Now that we have created the “Meanings” movie clip, we will need to place it on the stage. To do this, drag the name of the Movie Clip “Meanings” from the Library and place the object where you would like it on the stage (similar to Step 2).

For the ActionScript we will be adding later to recognize the “Meanings” movie clip, we will need to give it an “Instance Name.” To assign an “Instance Name” to the “Meanings” movie clip, select the “Meanings” movie clip on the stage, and in the Properties Inspector at the bottom of your Flash window, insert the name “meanings” (without quotes) in the Instance Name field.

Step 6: Applying Code to The Buttons:

To access the part of the “Meanings” movie clip that you would like associated to its specific button, we will need to assign ActionScript to them. For the first button, I will be assigning ActionScript to the thumb in this tutorial. To do this, click once on the button you created for the thumb and then open the Actions Inspector and insert the following code:

on (release) {
	_root.meanings.gotoAndPlay(2);
	}

The ActionScript that you entered above communicates to Flash that when you release your mouse button from the thumb button you clicked, you would like the second frame of the “Meanings” flash clip to be displayed. Since we entered “stop ();” within the code of the second frame (and all other frames) of the “Meanings” video clip, the second frame will stop and not continue onto the others that we created.

Now that we have the ActionScript code assigned to the thumb, we are ready to assign ActionScript code to the rest of the fingers. To do this, select the next button (the index finger) and insert the code above into the Actions Inspector. After you have entered the ActionScript code from above, change the number 2 to 3. This will make the ActionScript call the 3rd frame from the “Meanings” flash clip.

Repeat this step for the rest of the other fingers on the hand that you have created. Always remember to change the number between the ( ) for gotoAndPlay to the frame number of “Meanings” that you would like to call. After all of the finger button have the ActionScript code above inserted into them, your Flash presentation is now ready to be viewed, and should act like the demonstration that I have provided below.

About the Author:
Chad Sweely is a staff writer and Flash Designer for FlashNewz.