Creating A Key Pad

Keypad buttons make nice additions to movies. People know how to use them, whether they have arrows or numbers on them. This is a drawing and button lesson.

1. Open a new movie. Save the movie as keypad.

2. Click insert New symbol. Call it key and give it the behavior of a button.
Click view=> grid=> Show grid

3. Select your rectangle tool. Set the option for corner radius to 8.

Set your fill color to gray, #999999, and your stroke to no stroke. Using the grid as your guide draw a rounded rectangle around the registration point.

4. Select your lasso tool and lasso from the upper left corner to the lower right corner to select half of the rectangle, on the diagonal. Use the properties inspector to change the color of this to light gray, #CCCCCC

5. Use your lasso tool to Lasso from the top right corner to the bottom left. Switch to your arrow tool and while holding the shift key down, click on bottom left dark gray color selection to deselect that area. Change the color on the property inspector to reflect Darker grey #666666 for the right hand triangle.

6. Use the lasso tool to select the same area, going from the top right corner to the bottom left. Switch to your arrow tool and while holding the shift key down, click on the right dark gray color selection to deselect that area. Change the color of the current triangluar selection to an even darker gray, #333333. Click Edit=> Deselect all.

7. Open your color mixer. Set the color mixer to a linear gradient. Set the left color to Light gray, #CCCCCC, and set the right color to a darker gray, #999999. Use the paint bucket with the lock deselected in the options to paint each triangle separately. You can now use the transform tool to adjust each of the gradients. Lock this layer.

8. Add a New layer. Using No stroke and the linear gradient as fill, draw a rounded rectangle inside the current one. You may need to turn snap off for this under view snap to pixels and snap to objects. Use the Gradient fill transform tool to rotate the gradient. Lock this layer.

9. Insert a layer. name this layer highlights. Select your Brush tool. Set the fill on the color mixer to radial blur. Set the left to white, alpha 30%. Set the left slider to white, alpha 0%.

10. Zoom in and select a smallish brush. Draw on the highlights layer. on the edges of the button to highlight the edge. Lock the layer when you are please.

11. Insert a new layer. Call it shadow. Drag the shadow layer from the current position to the bottom of the layers palette for the key button.

Right click on the layer1 up frame and select copy frame. Turn the eye off on layer 1, layer2 and highlights.

Right click on the new shadow layer up frame and paste frame. Go to your properties inspector and select color as black. On the color mixer, set it to alpha 50%

Click Modify=> Shape=> Soften Fill Edges. Set to distance of 10 pixels, steps 20, Expand. Turn the eye on on the other layers. While it remains highlighted select your arrow tool, and use your arrow key on the keyboard to nudge the shadow down so you barely see it above the other layers.

12. Click in over frame of the shadow layer and hit F5. Click drag in the down frame of the highlight, layer2, and layer1 layers to highlight them. Click F5 to extend their frames through down. Lock all layers.

13. Click on the top layer, highlight, and insert a layer above it. Rename the layer Direction.

14. Select your text tool. Set the font to WingDings,  24, dark gray, #666666. Hold your alt key and type 234 on your keypad on the right of your keyboard. release the alt key to display a down arrow. Use your move tool to position this at the bottom of the button surface.

15. Click back on scene 1. Open your library. Right click on your key symbol in the library and select duplicate symbol. Name the symbol right. Duplicate the symbol again and call it left. Duplicate again and name up.

16. Double click the button called left. Highlight the direction layer keyframe. Click Modify=>? transform=> Rotate 90 degrees clockwise( CW). Use your move tool to postion the arrow so that it is in the center right. side of the top of the button. Click back on scene 1.

17, Do the same thing with the right button, but rotate 90- degrees counter clockwise (CCW). Repeat the procedure for the up button as well but instead of rotating the text, choose flip vertical. Position it at the center top of the button surface. Click back on scene 1.

18. Drag the buttons out onto the stage and position them like they appear on a keyboard. They are ready to script. Save and publish your move.

Variation:

To Make The buttons react in the over state, you will need to remove the over state of the shadow layer.