Create a digital alarm clock with lcd screen following this tutorial. It will
be a clock which enables the user to set the alarm for a certain time and then
turn it on or off.
Check out the example below to see the clock. Turn the speakers on to hear
the alarm. You can see the explanation on using this clock at the end
of this page.
Designing the metal frame and the LCD screen
1. Open a new flash document. Using the Rectangle tool
(R), draw a 350 by 45 pixel borderless rectangle on stage. The
color is unimportant now.
2. Pull on each side of the rectangle with the Selection
tool (V), to get the rounded effect.
3. Go to the Color Mixer panel (Window > Color
Mixer). Select the Fill color and choose Linear as type. Add more
colors (the small squares) by clicking between the existing ones.
You must have a total of 8 squares. Their colors are as follows (from left to
right in the image above):
After putting in the color codes, adjust the squares so that their distances
match the ones on the image above. Just click on a square and drag it.
4. Select the Paint Bucket tool (K) and
fill the rectangle you drew with the linear gradient, top to bottom.
You'll certainly notice that the edges on my shape are a little different
from yours. I did that to make the metal bar more real. I am letting you
discover how to do it - it is easy, a little bit cut and paste work, combined
with the Gradient Transform tool.
5. Call this layer metal bar and lock it.
6. Create a new layer and call it lcd screen.
7. Choose the Rectangle tool (R) again. In
the Properties panel, set the edge to hairline. Set the Fill color to #7CC5C9.
This is a nice LCD screen color.
Draw a 103 by 24 pixel rectangle. Select its left and upper edges and select
black as stroke color. Then select the rectangle's right and down edges and put
the stroke color to #CCCCCC. This is done in order to give the impression that
the LCD screen is inset in the metal bar.
Install this font on your machine and restart Flash so that it appears in its
font list.
Putting the text fields in place
9. Make a new layer and call it faded numbers.
Select the Text tool (T).
In the Properties panel, select Quartz as font, of course, set the size to 26
and choose Static Text as type. Set the color to #438A92 and put its alpha to
41%.
Click on the screen so that the text field begins on LCD screen's left side.
Write in the text field "88:88". Without the quotation marks, of course. Also,
make sure that the text field's coordinates are set to round numbers in the
Properties panel.
Now, that looks like nice, doesn't it? This is necessary so that you have a
realistic digital clock. The portions of the numbers that aren't lighted up
always have this faded appearance.
10. Still on this layer, select the text field by clicking
on it once, if it isn't selected yet. Copy the text field
(CTRL+C on a PC, Command+C on a Mac).
11. Lock the faded numbers layer and create a new
layer. Call the new layer numbers. Paste in place (Edit >
Paste in Place) the text field.
In the Properties panel, change the type to Dynamic Text. Below that menu,
enter the Instance name for this text field: lcdScreen. On the panel's
right side, click the Embed button. Select Numerals and also enter the semicolon
":" and a blank space (pressing the space bar) in the "Include these characters"
field. Change the text field's color to black (yes, the famous #000000).
This new text field will be used to show the current time via actionscript,
so: erase the characters in the text field, while keeping its width. Copy the
text field and lock ze layer. :)
12. Make a new layer and call it alarm text field.
Paste in place the text field here and give it the instance name
alarmScreen. Lock zis layer, too. :)
Zi...er, this text field will be used for setting the alarm time. Check that
this text field has a black font color, too!
13. Create a new layer and call it on/off/set
faded. Here, you will create the faded versions of LCD text that will
inform the user if the alarm is turned on or off and if it is in the state of
being set up.
Select Arial as font. You can find yourself a pixel font, but I find Arial is
ok because it mimics perfectly these kinds of markings usually found on a
digital clock.
Put the font size to 6, and the color back to #438A92 with its alpha set to
41%. Also, make it bold. Change the text field type to Static Text. Create three
separate text fields. Type in them: ON, OFF and SET.
Put the first two fields in the same row, with the third one beneath them.
Put all of them on the right side of the LCD screen.
Check that each field is positioned on round number coordinates in the
Properties panel.
IMPORTANT When drawing precise layouts like this
one, always check that every single object on your stage is positioned to round
number coordinates. If you want everything to look smooth and sleek, this is
what you should always check. Make this a habit. Do this for every new text
field and drawn shape until the end of this tutorial and, I recommend, every
other project you make too.
14. Select all three text fields and copy them. Lock ze...
lock da laya! Create a new layer and call it on/off/set black. Paste in
place the fields here.
Change the fields' color to black. Unselect them by clicking on the
stage.
You will now have to convert each of these text fields into a movie clip if
you want to be able to turn them on and off later. So, select the first one,
choose Modify > Convert to Symbol, choose movie clip as type
and call it alarm on sign.
Convert the other two and call them alarm off sign and set alarm
sign. Now, to be able to control them dynamically later, you should also
give them Instance names.
Give the "ON" sign the instance name alarmOnSign, the "OFF" sign
alarmOffSign and the "SET" setAlarmSign. Lock the layer.
Setting up the clock's buttons
15. Create a new layer and call it labels. It is
here that you will place the labels for the buttons that enable the user to
interact with the clock.
16. Select the Text tool. Choose a nice pixel font like
Fixed_v01 from OrgDot fonts download
page. Set the size to 8 and the type to Static Text. Choose white as color.
Type in the following (since these are only labels, you don't need to put each
label in a separate text field):
ALARM: ON OFF SET MIN HRS
Notice that the text field on the image above is placed in the middle of the
metal bar. This is necessary in order to achieve the chiseled metal letters look
you are about to create in the next step.
17. Copy the text field and paste it in place (you don't
neeed to create a new layer for this). Change this new text field's color to
black.
Now, using the arrow keys, move the text field 1 pixel up and 1 pixel to the
left. Do this by pressing each key only once.
Test your movie (Control > Test Movie). If you did
everything right, you should have the result looking like the one on the picture
below.
Now isn't that nice, looking like the letters were incised in the metal? If
you have blurry letters, check if your text fields are positioned on full pixels
like they should be.
Lock this layer.
18. Create a new layer and call it buttons. Zoom in
on the labels you just wrote to work more easily.
Create an invisble button over the "ON" label. Do this by drawing a rectangle
over it with the Rectangle tool (R).
Select the rectangle you just draw and press F8 to convert
it to a symbol. Be sure to select button as type in the Convert to Symbol dialog
window. Call the button invisible button.
19. Double-click on the button you just created. You will
now be inside the button's timeline.
Click on the Up keyframe and drag it to the Hit keyframe.
You just created an invisible button. Click on the "Scene 1" link to return
to the main scene or just double-click outside the button to achieve the same
thing. The invisible button is represented by a semi-transparent indigo hue on
the stage.
20. Copy the button and paste it four times so that you have
a button for each label the user will click on. That is, you should have a
button for the labels ON, OFF, SET, MIN and HRS. Use the Free Transform tool
(Q) to adjust the width for each button.
21. Click on each button once and give them all an instance
name. Give them the following Instance names, left to right: alarmOn,
alarmOff, setAlarm, setMins, setHrs.
It doesn't matter what instance names you gave your buttons. What's important
is that you put these same names in the actionscript later and that you don't
give the same name to two symbols. Each instance name
must be unique.
Lock this layer. This is it. Ze design is finished! :) Now you can proceed to
import an alarm sound and make the clock tick by writing some actionscript code.
Cool! Move on.
Importing the alarm sound for the clock
To have a realistic digital alarm lcd clock, you should have an adequate
alarm sound. You can't put in a classic analog ringing alarm sound. You can,
sure, but it isn't a sound that is usually associated with a digital alarm
clock.
So download
the alarm sound I prepared for you. Unpack it and put it somewhere you'll
find it easily. Hey, save your work if you haven't already! :)
22. Back in Flash, select File > Import >
Import to Library. Find the alarm.wav you just downloaded and
unzipped and click Open.
Open the Library (Window > Library). You will find your
sound inside. Click on it and in the preview pane on top of the library, you'll
see the waveform of the sound. You can click on the small play button in the top
right corner of the preview pane to hear the sound.
23. Now, right-click on the alarm.wav in the
library and select Linkage. In the Linkage Properties dialog that will appear,
check the "Export for ActionScript" box.
The "Export in first frame" will be checked automatically. You can leave this
checked if you want your sound to load before any other object in your movie has
been loaded (this means the screen will be blank until the sound loads
completely).Now, if your sound is small in filesize like this one
(alarm.wav) you can leave it checked. Or, even if it's a bigger file,
you can also leave this checked if the resulting SWF will be loaded into another
one which has a preloader.
Before clicking OK, give the sound an Identifier. This is the name by which
you will use this sound with actionscript. Call it digitalAlarm and
click OK.
24. Right-click on the alarm.wav in the library
again and select Export Settings. Choose MP3 as compression type, set the Bit
rate to 16 kbps and the Quality to Medium. Click OK. If you want a better
quality you can choose Best and set the Bit rate to 48 kbps or higher, but your
final SWF file size will increase also.
Writing the ActionScript that powers the alarm clock
After doing this nice design part, there always comes the nice ActionScript
part.
25. Create a new layer on top of all the layers and call it
actions. Lock it because you can write the actionscript code without
having to have the layer unlocked.
Click on the action layer's first keyframe and select Window
> Actions. Type in the following code:
Quite a piece of code, huh? Nearly 100 lines of it! So, I will now explain
you what does all this code mean. The code in the source FLA found at the end of
this page will be easy to understand because I put really a lot of comments
inside to make everything as clear to you as possible.
The ActionScript code explained
The variables are initialized. The alarmState variable set to
false tells Flash that the alarm is not turned on. The
settingAlarmNow variable value set to false, too,
tells flash that the user is not in the process of setting the alarm time now.
The minutesAlarm and the hoursAlarm are the variables
that store the values for the alarm time minutes and hours. The signs that show
that the alarm is turned on and that the user is in setting the alarm time are
made invisible (alarmOnSign and setAlarmSign). The
text field which is used for the setting of the alarm time
(alarmScreen) has an inital value of "00:00" and is made invisible.
At the end, the information if the alarm sound has started playing is set to
false (soundHasStarted).
Next, the sound object is created. The alarm.wav sound from the
library is attached to it thanks to its identifier (digitalAlarm) which
you put in earlier.
alarmSound = new
Sound(); alarmSound.attachSound("digitalAlarm");
The interface buttons' functionality is defined here:
The buttons that set on or off the alarm state and tell flash the condition
of the current alarm state.
Next comes the button which starts or closes the state for entering the alarm
time. It displays or makes invisible the text field used for defining the alarm
time. At the same time, it hides or makes visible the text field which displays
the current time.
These two are the buttons used for setting the minutes and hours of the alarm
time, respectively. The minutes' button also makes sure that the value for the
minutes stays between 0 and 59, as it should. The similar check is there for the
hours, making sure that they are between 0 and 23 (this is a 24 hour digital
clock).
At the end of code for both buttons, the displayAlarmTime()
function is invoked, which, it is clear, displays the alarm time.
This function displays the alarm time (which is based on user input). It also
makes sure that when the minutes and/or hours have values which are less than
10, are displayed with a 0 in front of them. Example: it is 8 minutes, so the
minutes will be displayed as "08" and not "8".
At the end of the function, the alarm time set by the user is stored in the
alarmTime variable for later use.
Here comes the onEnterFrame function that makes the clock
work.
this.onEnterFrame = function() {
Inside the function, the first thing that is defined is the Date object, and
the information on current minutes and hours is stored in variables.
clockDate = new
Date(); minutes =
clockDate.getMinutes(); hours = clockDate.getHours();
Next, if the hours and/or minutes for the current time have values that are
less than 10, they have a zero appended in front of them.
if (hours<10)
{ hours =
"0"+hours; } if (minutes<10)
{ minutes =
"0"+minutes; }
If the alarm state is present (it is set to true when the user has clicked on
the "ON" button), two if statements follow.
if (alarmState == true) {
The first one checks if the alarm time (set by the user) is equal to the
current time.
if (lcdScreen.text ==
alarmTime) {
If the previous condition has been fulfilled, there is the second
if statement which is being evaluated. Has the sound started? If it
hasn't (that is, if the value of the soundHasStarted variable is
false), the sound will begin playing.
This check is necessary, otherwise, the sound will start playing each time
the onEnterFrame function is executed (that means as many times per
second as is the value of fps in the Document properties). If that were to
happen, you would get the same sound playing and overlapping itself over and
over again, which would result in muffled and broken sound.
if
(soundHasStarted == false) {
The command that makes the sound play has two parameters. The first one is
the offset, which is set to 0, which means the sound will play from the
beginning.
The second one is the number of loops you want the sound to go through -
i.e., how many times it has to repeat itself. It is set to 16. Why? Well, the
sound has to play during one minute the alarm time is equal to the current time.
If you right-click the alarm.wav sound in the library you'll see that
it is 3.8 seconds long. So, you could say it is roughly 4 seconds long. 60
seconds (1 minute the alarm is supposed to play) divided by 4 equals 16. So
that's why there are 16 loops.
The soundHasStarted variable's value is put to
true, so that the next time the onEnterFrame function
is executed, the sound won't start playing over itself.
This else statement is executed if the alarm time does not equal
the current time. It stops the sound from playing and puts back the
soundHasStarted variable's value to false.
This line says that if the user isn't setting the alarm time, the current
time will be displayed.
if (settingAlarmNow == false)
{ lcdScreen.text =
hours+":"+minutes; }
End of function.
};
Voila'! That's it! Any questions? Everything clear? Excellent! Now let me
tell you a few things about using this clock.
Using the alarm clock
The alarm ON and OFF buttons are used to set the alarm state on or off.
The SET button starts the process of setting the alarm time and displays the
alarm time. It also turns it off and puts the clock back into the standard,
current time mode.
The MIN and HRS buttons work only if the alarm state heas been turned on by
clicking the SET button.
Now, perhaps there could have been some other sets of buttons, like only the
set button, with two buttons similar to up and down arrows which would work
together with the set button. Maybe the clock would blink when the alarm is
about to be set. There are a myriad of possibilities here, like there are as
many alarm clock in the real world.
Every clock comes with a manual, which can be made in the web world with no
problem. This is a question of usability, which is a subject on its own, over
which many books have been written. This tutorial is here to make you realize
how an alarm clock can be set up, which are the mechanisms that make it function
and how to create a design that is appealing. You can download the source FLA
file for this clock below.
Download the zipped
source FLA file. I put a lot of comments throughout the code so it is easy
to follow.
