Flash Explained

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):

#575861, #E1E3EF, #FFFFFF, #FFFFFF, #D9DEE6, #596069, #9D9EA3, #2A2B30.

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.

Lock this layer.

8 Now go and download the quartz font found on fonts101 site which features some cool fonts!

Install this font on your machine and restart Flash so that it appears in its font list.

Top of page

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.

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.

Top of page

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.

Top of page

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.

Top of page

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:

alarmState = false;
settingAlarmNow = false;
minutesAlarm = 0;
hoursAlarm = 0;
alarmOnSign._visible = false;
setAlarmSign._visible = false;
alarmScreen.text = "00:00";
alarmScreen._visible = false;
soundHasStarted = false;
alarmSound = new Sound();
alarmSound.attachSound("digitalAlarm");
alarmOn.onPress = function() {
alarmState = true;
alarmOnSign._visible = true;
alarmOffSign._visible = false;
};
alarmOff.onPress = function() {
alarmState = false;
alarmOnSign._visible = false;
alarmOffSign._visible = true;
};
setAlarm.onPress = function() {
if (settingAlarmNow == false) {
settingAlarmNow = true;
setAlarmSign._visible = true;
alarmScreen._visible = true;
lcdScreen._visible = false;
} else {
settingAlarmNow = false;
setAlarmSign._visible = false;
alarmScreen._visible = false;
lcdScreen._visible = true;
}
};
setMins.onPress = function() {
if (settingAlarmNow == true) {
if (minutesAlarm<59) {
minutesAlarm += 1;
} else {
minutesAlarm = 0;
}
displayAlarmTime();
}
};
setHrs.onPress = function() {
if (settingAlarmNow == true) {
if (hoursAlarm<23) {
hoursAlarm += 1;
} else {
hoursAlarm = 0;
}
displayAlarmTime();
}
};
function displayAlarmTime() {
if (minutesAlarm<10 && hoursAlarm>=10) {
alarmScreen.text = hoursAlarm+":0"+minutesAlarm;
} else if (hoursAlarm<10 && minutesAlarm>=10) {
alarmScreen.text = "0"+hoursAlarm+":"+minutesAlarm;
} else if (hoursAlarm<10 && minutesAlarm<10) {
alarmScreen.text = "0"+hoursAlarm+":0"+minutesAlarm;
} else {
alarmScreen.text = hoursAlarm+":"+minutesAlarm;
}
alarmTime = alarmScreen.text;
}
this.onEnterFrame = function() {
clockDate = new Date();
minutes = clockDate.getMinutes();
hours = clockDate.getHours();
if (hours<10) {
hours = "0"+hours;
}
if (minutes<10) {
minutes = "0"+minutes;
}
if (alarmState == true) {
if (lcdScreen.text == alarmTime) {
if (soundHasStarted == false) {
alarmSound.start(0, 16);
soundHasStarted = true;
}
}
} else {
alarmSound.stop();
soundHasStarted = false;
}
if (settingAlarmNow == false) {
lcdScreen.text = hours+":"+minutes;
}
};

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.

Top of page

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).

alarmState = false;
settingAlarmNow = false;
minutesAlarm = 0;
hoursAlarm = 0;
alarmOnSign._visible = false;
setAlarmSign._visible = false;
alarmScreen.text = "00:00";
alarmScreen._visible = false;
soundHasStarted = false;

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.

alarmOn.onPress = function() {
alarmState = true;
alarmOnSign._visible = true;
alarmOffSign._visible = false;
};
alarmOff.onPress = function() {
alarmState = false;
alarmOnSign._visible = false;
alarmOffSign._visible = true;
};

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.

setAlarm.onPress = function() {
if (settingAlarmNow == false) {
settingAlarmNow = true;
setAlarmSign._visible = true;
alarmScreen._visible = true;
lcdScreen._visible = false;
} else {
settingAlarmNow = false;
setAlarmSign._visible = false;
alarmScreen._visible = false;
lcdScreen._visible = true;
}
};

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.

setMins.onPress = function() {
if (settingAlarmNow == true) {
if (minutesAlarm<59) {
minutesAlarm += 1;
} else {
minutesAlarm = 0;
}
displayAlarmTime();
}
};
setHrs.onPress = function() {
if (settingAlarmNow == true) {
if (hoursAlarm<23) {
hoursAlarm += 1;
} else {
hoursAlarm = 0;
}
displayAlarmTime();
}
};

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.

function displayAlarmTime() {
if (minutesAlarm<10 && hoursAlarm>=10) {
alarmScreen.text = hoursAlarm+":0"+minutesAlarm;
} else if (hoursAlarm<10 && minutesAlarm>=10) {
alarmScreen.text = "0"+hoursAlarm+":"+minutesAlarm;
} else if (hoursAlarm<10 && minutesAlarm<10) {
alarmScreen.text = "0"+hoursAlarm+":0"+minutesAlarm;
} else {
alarmScreen.text = hoursAlarm+":"+minutesAlarm;
}
alarmTime = alarmScreen.text;
}

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.

alarmSound.start(0, 16);
soundHasStarted = true;
}
}

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.

} else {
alarmSound.stop();
soundHasStarted = 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.

Top of page

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.

Download the zipped source FLA file. I put a lot of comments throughout the code so it is easy to follow.

Comments

Submit a comment