Keyless Entry Module
Learner Level
1 - Construction
Estimated Completion Time
2 – 3 hours
Module Information
In Level 1 of the Keyless Entry module, we will import the image, create the opening fade-in, add
a dynamic text box, and create the buttons for future implementation.
Figure 1 - The Keyless Entry Keypad
Set Up the Flash Document
To begin, we will set up the Flash document to be used in this module.
1.
Press Ctrl+N to bring up the New Document window. Under the General tab, select New
Document, select Flash Document, and click OK.
2.
Save your new Flash document as “keypad1.fla” by pressing Ctrl+Shift+S. Save the file
in a folder or location that can be easily accessed and is consistent with your naming
convention needs.
Development Note
As with any design or development software, you should regularly save your Flash projects at all
functional and design milestones. Also, save numerous versions of your work. This will allow you
to revert to saved versions of your work if necessary.
Next, we’ll set up the movie properties for the module by activating the Document Properties
dialog box.
3.
Press Ctrl+J
Keyless Entry Module: Learner Level 1
Page 1 of 9
The Document Properties dialog box should appear.
4.
Select the following properties:
Size: 200 (width) x 300 (height)
Background color: #FFFFFF
5.
Click OK
6.
Double-click on the Layer 1 name and change it to Keypad:
Figure 2 - Renaming a layer
7.
Click on Frame 1 of the Keypad layer.
8.
If necessary, open the Library by pressing F11. You may wish to drag it to the right side
of the screen so it is visible but not blocking your view of the items on the stage.
9.
Select File…Import…Import to Library. If necessary, navigate to the folder containing
the image of the door entry keypad. Select the image keypad.jpg by double-clicking on
it.
The keypad.jpg image should now appear in the Library. We’ll first position it on the Stage, then
convert it to a movie clip symbol.
10. Drag a copy of keypad.jpg from the Library onto the stage.
To maintain proper alignment of the keypad throughout the animation, we’ll change its X and
Y positions on the stage to 0.0,0.0. This can be done by first selecting the object, then
setting the X and Y positions via the Properties panel near the bottom of the screen.
11. Click on the Select tool in the Tools palatte
12. Click on the keypad image to select it. Its properties should now be displayed in the
Properties panel.
Keyless Entry Module: Learner Level 1
Page 2 of 9
13. Set the X and Y positions to 0.0,0.0:
Figure 3 - Changing the X & Y Positions
Our next step will be to create two symbols to represent the red and green states of the keypad
light. The light will appear red when the door is armed, and change to green when the correct
code is entered.
14. Click on the Oval tool to select it.
15. Change the color Stroke to No Stroke and the Fill to red.
16. Draw a circle that is approximately the same size as the “light” (the white circle above the
1 key on the keypad):
Figure 4 - Red Oval properties
17. Click on the red oval to select it, and then press F8 to convert it to a symbol. Call it
redLight and make sure the Movie Clip radio button is selected. Then click OK.
18. Repeat steps 14 – 16 to create a green oval of the same dimensions. Select the green
oval and press F8 to convert it to a movie clip symbol. Call it greenLight.
19. Make sure the green oval is selected on the Stage and delete it. Don’t worry; a copy of
the symbol is safely stored in the library for future use.
20. Drag the red oval on top of the “light” on the keypad. Position it carefully. Use the cursor
arrow keys to move the selected oval in small increments. The X and Y coordinates for
the oval should be about 39 (X) and 59 (Y).
Keyless Entry Module: Learner Level 1
Page 3 of 9
Create the Opening Animation
Now that the keypad image and red oval have been combined and saved as symbols, we’ll create
the opening “fade-in” effect. This must be done on the main timeline so that the animation
appears when the user first invokes the program.
21. Make sure that main timeline (Scene 1) is selected:
Figure 5 - Navigating to the main timeline
22. Rename the layer Keypad
23. Drag a copy of the keypadImage movie clip from the Library onto the stage
24. Use the Selection tool to click on the image. Then set the X and Y positions to 0.0,0.0.
25. Give the image an instance name of Keypad:
Figure 6 - Creating an Instance name
26. Click on Frame 20 of the timeline.
27. Press F5 to insert a frame.
28. Right-click on any frame between 1 and 20 and select Create Motion Tween from the
menu
29. Click on Frame 20 to select it and press F6 to create a keyframe
The dashed line between Frames 1 and 20 should change to a solid line to indicate that a motion
tween has successfully been created.
30. Rename the layer from Layer 1 to Fade In.
Next, we need to change the Alpha setting of the image in Frame 1 to 0%. This will cause it to
disappear. As the frames are executed, the alpha value will incrementally change to 100%,
causing the keypad to appear as the animation ends.
Keyless Entry Module: Learner Level 1
Page 4 of 9
31. Click on Frame 1 of the Fade In layer. Then click on the keypad image so its properties
are displayed at the bottom of the screen.
Figure 7 - Changing the Keypad Alpha Value
32. Click in the Color drop-down box and select Alpha.
33. Change the Alpha value to 0%:
Figure 8 - Changing the Alpha Value to 0%
The keypad image should disappear from Frame 1.
34. Test the animation by pressing Ctrl+Enter.
The keypad should gradually fade into view. However, it repeats the process over and over. We
need to add an ActionScript to the last frame so that the animation occurs only once.
35. Exit from the swf file and make sure the main timeline is active.
36. Click on Frame 20 of the Keypad layer.
37. Invoke the Actions panel by pressing F9.
38. Type this brief command:
stop();
39. Test the movie again. This time, the keypad should fade in and remain.
Keyless Entry Module: Learner Level 1
Page 5 of 9
Create the Keypad Buttons
Now that the animation is working properly, let’s convert the keypad buttons to Flash buttons.
The buttons will actually be Flash symbols overlaying the image buttons. In Module 2, we will
program the buttons using ActionScript to perform specific tasks.
40. If necessary, close the ActionScript panel by clicking on its title:
Figure 9 - Closing the Action Panel
41. Add a new layer to the main timeline and rename it Buttons:
Figure 10 - Add the Buttons layer
42. Make sure the Buttons layer is selected
43. Click on the Rectangle tool
44. Change the Stroke value to No Stroke
45. Select any Fill color. The choice is not important, because the Alpha value will be set to
0% so the rectangle does not appear. The effect will be an invisible button symbol to
which we can assign various useful functions and attributes.
46. Turn off the Snap to Objects function so that you can create a freehand rectangle
47. Draw a small rectangle that is approximately the same size as the buttons on the keypad
image. The size will be approximately 23 (W) x 15 (H).
Because we are going to add a tone to each of the keys, we’ll create 12 separate button symbols.
This will make it easy to embed the desired tone in each. To speed up the production of the
symbols, let’s first make 11 clones of the rectangle.
48. Click on the Select tool, then click on the red rectangle to select it.
49. While holding down the Ctrl key, drag a copy of the rectangle to clone it.
50. Repeat this process until you have a total of 12 rectangles.
51. Click on the first new rectangle and press F8 to bring up the Convert to Symbol dialog
box. Assign the symbol the name one and select the Button radio button, then click OK.
Keyless Entry Module: Learner Level 1
Page 6 of 9
52. Drag the symbol on top of the 1 key on the keypad image.
53. Change the Alpha value of the symbol to 0%.
54. Assign it an Instance name of one
55. Click on the next rectangle and press F8. Assign it the name two and make sure it is a
button symbol.
56. Drag it on top of the 2 key on the keypad image.
57. Change the Alpha value to 0% and assign it an Instance name of two.
58. Continue in this way to convert the rest of the rectangles to symbols, drag each to a key,
change the Alpha value to 0% and assign each an appropriate Instance name. Note:
Assign the symbol for the 0 key the name (and Instance) “zero”. Assign the symbol for
the * key the name and Instance “asterisk”. Assign the symbol for the # key the name
and Instance “pound”.
59. Click on the Buttons layer. When you do, you should see a symbol outline around each
of the 12 keypad buttons.
60. Test the results by pressing Ctrl+Enter
61. Move your mouse over each of the keys. The mouse pointer should change to a pointing
hand to indicate that it is detecting a button. Although not yet functional, they will be
assigned to specific tasks in the next Module.
62. Save this version of “keypad1.fla”.
Create a Dynamic Textbox
Our final task in Module 1 will be to create an LED-type display in the white rectangle below the
keypad. In the next Module, we will use this to display codes entered by users as well as other
messages.
63. Click on the Text tool.
64. Drag a rectangle inside the white box of the keypad:
Figure 11 - Creating the Message box
65. If necessary, use the tiny sizing box in the lower right corner of the textbox to adjust the
size.
66. When satisfied, make sure the text box is selected so its properties appear in the
Properties panel at the bottom of the screen.
Keyless Entry Module: Learner Level 1
Page 7 of 9
67. If necessary, change the text type to Dynamic Text. Set the font face to Arial and the
size to something appropriate, such as 20. Set the font color to black. Make sure the
Selectable button is NOT selected, to prevent users from selecting the text when running
the program. Make sure the Show Border Around Text button is also disabled.
68. Assign the text box the Var(iable) name of message. This is important, as we will be
referring frequently to this textbox when writing ActionScripts in subsequent Modules:
Figure 12 - Setting up the Message box properties
69. Finally, click on the Character… button. Select the Uppercase, Lowercase, Numerals
and Punctuation settings (the display varies from Flash MX to Flash 2004):
Figure 13 - Specifying embedded characters
This action assures that the fonts you use when creating the animation are properly displayed on
the user’s PC. Not all computers will have your fonts installed, so embedding them will prevent
inappropriate fonts from being substituted.
70. Click Done (or OK) when finished.
71. Save this version of keypad1.fla.
Keyless Entry Module: Learner Level 1
Page 8 of 9
Congratulations! You have finished Level 1 of the Keyless Entry Module. In Level 2 we will
begin assigning functions to the 12 buttons.
Notes for Module Extension (Level 1)
The following extensions are intended to expand your understanding of the principles that were
covered in this module. You may also develop your own ideas for module extension. Good luck!
1. Find a different keyless entry keypad by searching Google or using a digital camera. If
necessary, use a graphics program to add a light and a message box.
2. Change the opening animation effect. Instead of a fade-in, try spinning the keypad or
having it fly onto the screen.
3. Change the font or font color in the text box.
Keyless Entry Module: Learner Level 1
Page 9 of 9