How to Make a Lite-Brite in AS3

Difficulty: Easy


Concepts Used: for loops, switch case, goToAndPlay, currentTarget, addChild, event handlers

For this project we use a forloop to create all of the lightbulbs, and each one can be controlled individually using the same event handler. Each circle is a movieclip. When clicked, that movieclip advances to another frame, where another color is displayed.

Instructions: 
1. Open up a new document in Flash, make sure you're using Actionscript 3.0. Right click on the grey area around the stage and select "Document Properties". Set the dimensions to 560 x 440 (if you want to make a bigger Lite-Brite, you can change this later) and the background color to black.

2. Download the image files at the bottom of this tutorial. (Download them, don't just copy and paste or you'll get white backgrounds.) There are nine images total, including a white one (second from the bottom) that you can't see on this white background. Import the image files to your library.

3. From the top menu, select Insert -> New Symbol. Name the symbol "lite". Create three layers in the timeline and name them "Labels, "Actions", and "Colors". Select frame 45 in all three layers, right click and select "Insert Frame" from the menu that pops up. Select frame 5 in all three layers, right click, and select "Insert Keyframe" from the popup menu. Create keyframes in all three layers for frames 10, 15, 20, and so on until frame 40.

4. (This step is optional, but it's a good idea to get into the habit of using frame labels.) Select frame 1 in the "Labels" layer. In the properties inspector, find where it says "Name" under "Labels" and type in "black". You should now see the word "black" in the "Labels" layer of the timeline. Using the same process, label the following frames:

5: blue
10: green
15: orange
20: pink
25: purple
30: red
35: white
40: yellow

5. Select frame 5 in the "Colors" layer. Drag "blue.png" from the library to the stage. Use the align menu to center the image both horizontally and vertically. That little cross should be right in the center of the image. Select frame 10, drag "green.png" to the stage, center it, and so on until you have placed all of the colors in their respective frames.

6. Go back to the mainframe of the movie by clicking "Scene 1" in the top left corner. Change the name of "Layer 1" to "Actions". Open the Actions window and paste in the following code:

/*The number of rows and columns we will have*/
var rows:Number = 16;
var columns:Number = 42;

/*Store the image width and height (40x40)*/
var imageWidth:Number = 10;
var imageHeight:Number = 10;

/*Padding between the images*/
var padding:Number = 1.3;

/*Left edge space*/
var left:Number = 8;

/*place the holes on the stage*/
for (var i = 0; i < rows; i++)
{
/*setting the even rows*/
for (var j = 0; j < columns; j++)
{
var newLiteOdd:lite = new lite();

/* Setting the X and Y position*/
newLiteOdd.x = left + j * imageWidth * padding;
newLiteOdd.y = 20 + i * 2 * imageHeight * padding;
this.addChild(newLiteOdd);

// add an eventlistener so the lite changes color when clicked
newLiteOdd.addEventListener(MouseEvent.CLICK, changeColor);
}

for (var k = 0; k < columns; k++)
{
/*setting the odd rows*/
var newLiteEven:lite = new lite();

/* Setting the X and Y position*/
newLiteEven.x = left + 7 + k * imageWidth * padding;
newLiteEven.y = 33 + i * 2 * imageHeight * padding;
this.addChild(newLiteEven);

/* add an eventlistener so the lite changes color when clicked*/
newLiteEven.addEventListener(MouseEvent.CLICK, changeColor);
}
}

/*when a lightbulb is clicked this function is called*/
function changeColor(event:MouseEvent):void
{
/*a switch case can be a more efficient alternative to using several if/else statements*/
switch (event.currentTarget.currentFrame)
{
case 1:
event.currentTarget.gotoAndPlay(5);
break;

case 5:
event.currentTarget.gotoAndPlay(10);
break;

case 10:
event.currentTarget.gotoAndPlay(15);
break;

case 15:
event.currentTarget.gotoAndPlay(20);
break;

case 20:
event.currentTarget.gotoAndPlay(25);
break;

case 25:
event.currentTarget.gotoAndPlay(30);
break;

case 30:
event.currentTarget.gotoAndPlay(35);
break;

case 35:
event.currentTarget.gotoAndPlay(40);
break;

case 40:
event.currentTarget.gotoAndPlay(1);
break;

default:
event.currentTarget.gotoAndPlay(1);
}
}

This code does a few things. First, it creates variables that will control how many rows and columns will be created, how much spacing there will be on the left side of the stage, how large the images are, and how much space there should be between the images. This way it will be easy to go back and change these values later, if necessary, without combing through all of the code.

Two forloops are used to create the odd and even rows. I did it this way because the even rows needed to be placed farther to the right, and this was easier than coming up with a fancy equation to determine if it was an even or odd row.

Then, an eventlistener calls the function "changeColor" whenever a lite is clicked. Each lite is a movie clip that is stopped at frame 1. When clicked, the movieclip advances to frames 5, 10, and so on until it returns back to the 1. I could also have used the frame labels and said "gotoAndPlay("blue"), but this way was easier. When you click a lite, only the lite you clicked will change color, the others will stay the same. This is because we use event.currentTarget to only affect the lite whose evenlistener was triggered.  (Note: Somewhere along the way, I got in the habit of using "event:MouseEvent" to define a function. A lot of people use "e:MouseEvent" or even "evt:MouseEvent". These will all work, but whatever you use, use consistently. If I used "e" to define the function, but then referred to "event.currentTarget" in the switch case, I would have received an error that said "access of undefined property event".)

You're done! Test your movie by hitting Ctrl + Enter. Make sure the holes are lined up properly and each lite changes color when you click it. If you want to make a bigger Lite-Brite, change the size of your document and then increase the number of rows and columns as needed.


Download the Image Files: