Using Visibility in ActionScript


For this week’s tutorial, I will show you how to make objects that you place on the stage visible and invisible using the visibility properties in ActionScript. As an example of this, I will be using the idea of turning a light switch on and off.

To start this tutorial, create a new Flash document with the default stage properties of 550 pixels wide by 400 pixels high.

Step 1: Importing the objects into Flash:

After you have created the new Flash document, we are ready to import the images that we will be using as a light switch. For this example, I will be using the images displayed below; however, you are more than welcome to use your own images.

To import these images into Flash after you have them saved to your computer, click on the File menu, and then select the Import to Library option from this menu. This will load an “Import to Library” window (looking similar to an “Open” window) that will let you select the files that you have downloaded. When you have chosen the files, click on the “Open” button, and the files will automatically be loaded into your Flash document’s library.

(If the Library is not open for you by default, you can open it manually by opening the Window menu, and then selecting the “Library” option.)

Step 2: Placing items on the stage:

To place both of the images that you have just imported onto the stage, individually drag the name of the files from the Library onto the stage itself. You do not need to worry about exact placement yet, so you can place the images where you would like for the present.

After both of the items have been placed on the stage, we will need to convert them to buttons for them to easily interact with the ActionScript that will be working with later. To do this, select one of the images that you just placed on the stage and then press the F8 key on your keyboard. This will open the “Convert to Symbol” window (as shown below). Within this window, please assign the following parameters:

    (For the light on)

  • Name: Light On
  • Behavior: Button

For the light off conversation, make sure that the behavior is set to “Graphic,” but just set the name to “Light Off.”

Now that both images have been converted to buttons, we will need to assign an “Instance Name” to them so that we can refer to them in the ActionScript code. To do this, select the first image, and then enter a one-word name associated with the image that you would like to use within the “Instance Name” field in the Properties Inspector. For example, the “Light Off” image will be named “lightoff” (without quotes). Repeat this step for the image with the switch turned on.

Step 3: Applying the ActionScript:

We are now ready to apply the ActionScript to “visually” turn the light switch on and off; however, to make this effect, we will be toggling each image’s visibilty.

To apply ActionScript to the buttons, click on the button that you have assigned “Light On” and then open the Actions Inspector. With the image selected and the Actions Inspector open, insert the following ActionScript code:

on (release) {
	_root.lighton._visible = false;
	_root.lightoff._visible = true;

This ActionScript code tells the Flash animation that when you release the mouse button, you would like the object you just clicked (lighton) to not be visible and to turn the visibility of the light on switch off.

We will be placing similar ActionScript code for the “Light Off” object. To do this, select the “Light Off” object on the stage, and in the Actions Inspector, insert the following ActionScript code:

on (release) {
	_root.lighton._visible = true;
	_root.lightoff._visible = false;

Step 4: Finishing Up the Flash Animation:

Now that the ActionScript code has been implemented, we are now ready to make the Light Switch animation more realistic. With your mouse or cursor keys, drag the “Light Off” object on top of the “Light On” object. This will make the light switch visually appear as one object (as shown below).

You are now ready to test your Flash animation. To do this, click on the Control drop-down menu and select the “Test Movie” option. When testing the movie, click on the light switch, and it should toggle between the two light switch objects that you have been working with. I have provided a sample of what the finished product should look like below:

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