- Selection
- Task: Keypad Lock
- Dragging
- Drag and Drop
- Task: Matching Game
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Task: Keypad Lock
Now let's put your knowledge of selectable movie clips to use. In this example, we'll create a movie that acts like a keypad lock. The screen looks like Figure 8.1, a simple numeric keypad. Each one of these keys, 12 in all, is a movie clip instance.
){kind=link}
Figure 8.1 This keypad is made up of 12 instances of the same movie clip, plus a layer of numbers on top.
In the example movie 08keypad-noscripts.fla, you'll find all the movie clip instances in place but no scripts there yet. You will also see a layer that contains the 10 digits and the * and # characters. I placed these on top of the movie clips so that I didn't have to build 12 different but similar movie clips. Instead, I could reuse the same movie clip and make it appear different by placing a different number on top of it.
-
Start with the movie 08keypad-noscripts.fla. Or, you can create your own movie with 12 instances of the same movie clip.
-
These movie clips should all have two frames. The first frame is the off state of the key. It looks like all the keys in Figure 8.1. The second frame is similar, but you can tell that the key is lit up, or somehow highlighted.
-
Place a stop(); command on frame 1 of the movie clip. This prevents it from animating when the movie starts. We want it to stay at frame 1 and wait.
-
Each movie clip instance must have a name. Name the 10 numbers one, two, three, and so on. Name the other two movie clips asterisk and pound.
-
Start with the movie clip at the upper-left corner. In Figure 8.1. It has the number 7 on top of it. It should be named seven. Place the following script on it:
-
Place the exact same movie clip script on all 10 number keys. Do not place it on the asterisk or pound keys.
-
Test the movie. You should be able to click on any number key and see it light up. Click on it again and see it turn off. Test all 10 number keys. If it does not work, go back and double-check your work. Make sure that the right scripts are in the right places. You can use the example movie 08keypad.fla to see how this should work.
-
Place this script on the asterisk key:
-
Place this script on the pound key:
-
In the main timeline, on the first and only key frame, add this script:
-
Add this function to the same key frame script as the previous function. They should come one after the other in the same script.
onClipEvent (mouseUp) {
if (this.hitTest(_root._xmouse, _root._ymouse)) {
if (this._currentFrame == 1) {
this.gotoAndStop(2);
} else {
this.gotoAndStop(1);
}
}
}
This is exactly the same script that we used in the previous example. It determines whether a mouse click took place with the mouse over this movie clip and sends it either to frame 2 or frame 1, depending on where it is now.
onClipEvent (mouseUp) {
if (this.hitTest(_root._xmouse, _root._ymouse)) {
_parent.clearAll();
}
}
Instead of sending the movie clip to frame 1 or 2, this script calls a function named clearAll that is one level up from this movie clip. One level up is the root level; we will have to make a function at the root level named clearAll. We'll get to that in a minute.
onClipEvent (mouseUp) {
if (this.hitTest(_root._xmouse, _root._ymouse)) {
_parent.checkCode();
}
}
}
This is a similar script except that it calls checkCode instead. Next, let's create these two functions.
function clearAll() {
one.gotoAndStop(1);
two.gotoAndStop(1);
three.gotoAndStop(1);
four.gotoAndStop(1);
five.gotoAndStop(1);
six.gotoAndStop(1);
seven.gotoAndStop(1);
eight.gotoAndStop(1);
nine.gotoAndStop(1);
zero.gotoAndStop(1);
}
The clearAll function tells each numbered movie clip to go to its off frame. This essentially resets the keypad. You can test the movie again at this point if you want. Try clicking a few keys, and then click the asterisk key to clear them all. Check the 08keypad.fla movie if you are unsure about where this script goes.
function checkCode() {
var correct = true;
if (zero._currentFrame == 2) correct = false;
if (one._currentFrame == 1) correct = false;
if (two._currentFrame == 1) correct = false;
if (three._currentFrame == 2) correct = false;
if (four._currentFrame == 2) correct = false;
if (five._currentFrame == 2) correct = false;
if (six._currentFrame == 2) correct = false;
if (seven._currentFrame == 1) correct = false;
if (eight._currentFrame == 2) correct = false;
if (nine._currentFrame == 2) correct = false;
if (correct) {
trace("Correct Code!");
} else {
trace("Wrong Code!");
}
}This function checks each of the numeric keys and determines whether the correct code has been entered. In this case, the code is 1, 2, and 7. It starts by setting the local variable correct to true, assuming from the start that the code has been entered.
It then checks the _currentFrame of each numeric key. If the frame is 2, the user has turned on the key. If it is 1, the key is off. If key 1, 2, or 7 is off, the code must be wrong. If key 0, 3, 4, 5, 6, 8 or 9 is on, the code is wrong as well. If none of these conditions are met, the code is correct because keys 1, 2, and 7 are on, and the rest are off.
Test the movie. Select 1, 2, and 7; then press the pound key. Now try it with 1, 2, 4, and 7. How about 5, 8, and 9?
In this example, the only thing that happens is that a message is placed in the Output window. However, you could place a stop(); command in the frame script—the same frame script with the two functions. Then have the movie gotoAndStop a certain frame if the code is wrong, or gotoAndStop another frame if the code is right.