ActionScript Tutorial: Using _visible To Create a Functional Traffic Light

In this tutorial, we will be creating a functional traffic light that you can use on your website. This is something interactive that you can use on your website, and can be greatly utilized if your website needs something to direct a call to action. To make the traffic light function, we will be using code called ActionScript, but we will get to that later. To create the traffic light, follow the steps that I have provided below.

Step 1: Creating the Flash document

After you have opened your version of Flash (Adobe/Macromedia), create a new document. After your new document has been created, we will need to resize the document to a manageable size of 400×400 pixels. To do this, click on the 550 x 400 button located in the Properties Inspector down at the bottom of your Flash window. This will load the Document Properties window (shown below). Within the Document Properties window, change the width and the height to 400.

Step 2: Import the traffic light image

After the document has been resized, we are ready to bring the traffic light image into our Flash document. You can use any traffic light image you desire; however, for this tutorial, I will be using the image displayed below.

To import the image above into the Flash document that we are working with, from the File menu, click on the Import to Library menu item. This will load a window similar to an “Open” window that will let you choose a file. From this window, choose the graphic file of the traffic light that you would like to use.

After you have chosen the traffic light graphic file that you want to use, we will need to open the Library. The Library is where all objects (imported or created within the Flash document) are stored. To open the Library, from the Window menu, click on the Library list item. The Library will now appear (as shown below).

After the Library has been opened, you are now ready to place to the traffic light image onto the Stage (the area within the Flash document that we will work with). To do this, drag and drop the name of the image from the library to the stage, and your traffic light will now visually appear for you. You may use your mouse or keyboard cursor keys to help position the traffic light image where you would like it placed.

Step 3: Creating the lights

In this step, we will be creating the colorful lights to be utilized with the traffic light. To make sure that the traffic lights we create go on top of the traffic light image, we will need to create a new layer. To achieve this, on the Timeline near the top of the Flash window, click on the Insert Layer button. This button will look like a piece of paper with a + sign. After this button has been pressed, a new layer will appear in the Timeline (as shown below). Make sure that “Layer 2” is selected.

To manually draw the lights, we will be using the Oval Tool from the Toolbox.

After you have the oval tool selected, draw a small circle on the stage outside of the traffic light image, but about the same size as the plain light of the traffic light. If the color of the oval is not red, yellow, or green, don’t worry – we will be changing this later.

When the circle has been drawn, select the Arrow Tool from the Toolbox and click the outer-most part of the circle that you can. This will highlight the outline of the circles, and you will see this designed as a dotted line arond the circle that you created. When the outline of the circle has been highlighted, press the delete key. Removing the outline of the circle will save a lot of headaches down the road.

To apply a (different) color to the circle that you have created, click once on the circle, and down in the Properties Inspector, change the fill color to red. This can be achieved by clicking on the color box next to the paint can in the Properties Inspector.

After the first light has been created, you can use your mouse or keyboard arrow/cursor keys to move the light into its respective place on the traffic light image.

Repeat this step two more times (without creating new layers) so that you can create the lights of yellow and green. Your traffic light should now look realistic and like the image shown below.

Step 4: Converting Lights to Symbols

For the code we will be implementing soon to recognize the lights, we will need to convert them to symbols. To achieve this, click once on one of the lights, and then press your F8 key. A new window titled “Convert to Symbol” will appear. Within the “Convert to Symbol” window, enter a name for the light you have selected (e.g. Red Light), select “Movie Clip” for the Behavior option, and then press “OK.”

Repeat this step for the other 2 lights. You will also see your new symbols within the Library of your Flash document.

After all of these lights have been converted to movie clips, we will need to assign Instance Names to them. To achieve this, individually select each one, and in the Properties Inspector near the bottom of your Flash window, assign a one-word name to the light by entering it in the Instance Name field. In this tutorial, I will be using (color)light. Perform this for each light that you created, so that you have: redlight, yellowlight, greenlight as the Instance Names.

Step 5: Creating the buttons

To turn each of the lights on and off, we will need to create buttons to toggle their visibility. To achieve this, select the Text Tool from the Toolbox, and create three text areas that you will use as buttons for the light operations. In this tutorial, I will be using: Stop, Caution, and Go. You can use your mouse or keyboard cursor/arrow keys to position the text areas where you would like them placed.

After you have created the text areas that will display its respective light, we will need to convert these to buttons. To achieve this, individually select the text area labels that you have created, and then press the F8 key. This will make the “Convert to Symbol” window appear again (previously mentioned in Step 4). Within the “Convert to Symbol” window, enter “(Color) Button” as the name (without quotes), and then select “Button” from the Behavior list. After these values have been set, press the “OK” button, and repeat this step for the other text areas that you have created.

Step 6: Applying the code

After all of the text areas have been converted to buttons, we are now ready to insert the ActionScript code. To start doing this, click on the top button you created (in this tutorial: “Stop”), and open the Actions Inspector. Within the Actions Inspector for the stop button, insert the following code below:

I have also provided the code for both of the buttons that control the yellow and green lights below.

Yellow Button:

on (release) {
	// This is the code for the YELLOW button.
	redlight._visible = false;
	yellowlight._visible = true;
	greenlight._visible = false;

Green Button:

on (release) {
	// This is the code for the GREEN button.
	redlight._visible = false;
	yellowlight._visible = false;
	greenlight._visible = true;

For effect, we will also need to enter code to disable the visibility of ALL lights when the Flash document loads. To achieve this, click any available white space on the Stage, and in the Actions Inspector, enter the following code:

// This disables ALL lights.
redlight._visible = false;
yellowlight._visible = false;
greenlight._visible = false;

After you have entered all of the ActionScript code provided above, you are now ready to test your traffic light. To do this, from the Control menu, select the Test Movie option, and you will be able to check the functionality of the traffic light that you have just created by clicking on the respective buttons. I have provided an example of the finish product below.

Please be sure to leave any comments or questions about this tutorial in this post’s comments section.

Categorized as Tutorials

By Chad Sweely

Chad Sweely is a staff writer and Flash Designer for FlashNewz.

Leave a comment