Developing a clock in Flash with AS3

Ok guys, this time we won´t do any php. This time it will all be about Flash and Actionscript 3.0. As I told you in some of the tutorials before I am working for a German ISP at the moment which is on it´s way to launch a new portal. This portal website will also hold some widgets that will provide the users with some basic functionality.

This tutorial will cover the alarm clock that comes with two layouts, analog and digital. To make it more fun the project manager covering this widget wanted to have the following options for configuration:

The user should have the possibility to choose between the layouts on the fly.

There should be an option to set the date and the alarm time, as well as message displayed

The digital clock comes with 7 different themes of which the user can choose

First thing I had to evaluate was if we can do this kind of thing in javascript, because this way it could have been displayed on mobile devices as well. To make a long story short, I found a way that worked in almost any browser, except our old friend the Internet Explorer up to 7 . Up to this version the Iex simply does not have the possibility to work with rotating canvas. With a share at the ISPs website of about 30% for this version downwards this was the deal breaker. So we had to go for flash.

Like almost every designer I have a little addiction to flash, but unlike most of my colleagues I also know how to code AS3. I have to admit that coming from another language, and coding that one oop style has made it a little easier, and knowing some Java was also a little help. But coming from php and knowing some Java also places some traps on my way to a running clock.swf. To code the widget I used the Flashbuilder 4, which I will definitely buy at its release. This incredible piece of software from Adobe has made my life a lot easier.

First question every good coder asks himself at the beginning of a project is what do I need:

First of all I will need a controller class which will decide whether to display the digital or analog version of the clock, and also set the alarm

I will need a clock model that provides me with some basic functionality like getting the current time and drawing it

I will also need child models of that clock model for digital and analog clock

I will need an Alarm model that covers the basic functionality of an alarm

last I will need several different views for analog and digital clock as well as for the alarm message displayed

So what have we done here ? Basically we have set up a clock class that inherits MovieClip. The constructor has set a timer event that will call the method ontick every single second after the clock has been loaded. It also has initiated the alarm, and dispatched the alarm event. Afterwards you see a setter method for the alarm time, which checks if the alarm is in the future, and if so sets the time for the alarm to be displayed. Last, like I said, some very basic getters and setters for the time, and a empty draw method. This one is empty because it will be overwritten by the child classes anyways, it is there just to make sure there is a draw method in any case, otherwise we might get an fatal error at compiling.

Lets go on. Now that we have our basic clock model that will draw the clock each second, as well as fire the alarm, we need the models of the analog and the digital clock.
Because it was the easier one lets start with the analog clock:

As you can see for the analog clock we import the clock model since the analog clock inherits from this model. The fancy part is the constructor we are looking at. Normally you will have to import another class before you can create a instance of it, but in this case I decided to place the view for the analog clock in the same folder as the analog clock model. this way, thanks to the flash API, the class is loaded automatically while i create the instance. Since we got only one view and one model for the analog clock to my mind it made perfectly sense to place ’em in the same folder.

But lets take a closer look. What the constructor basically does is to create an instance of the view called AnalogClockFace, give the width of the analog clock, and since I got a fancy analog clock with a shadow and all that stuff I also needed the possibility to correct the starting point for the clock hands. Afterwards the view is initiated and its draw method called to get the clock rendered. Last but not least we add this child to the analog clock so that it is displayed.

You will notice that there is also the draw method that we already know from the parent clock model. Like in Java and unlike php, to override the parents method we have to declare this method with the param override, otherwise you will get a fatal error at compiling our clock. What it does is quite simple, it just calls the public draw method of the view over and over again each time it is called to redraw the clock so that the current time is shown.

Now lets take a look at the digital clock model. As you might imagine it is quite the same, but with some slight differences.

We also got our constructor that creates a instance of the view (this time DigitalClockFace) and adds it to the parent class stage, and we also got our override draw method that will set the time for the digital clock. The only major difference is the param theme that is passed through. This is simply a string holding the name of the current clock theme, so that the view knows witch theme to apply.

By now we have all the basic models we need for the clock. Lets go on to the views so we get something displayed.
First we will start with the analog clock again.

First thing you might notice is the import statement “import com.DynamicMovie.DynamicMovie;”, this was the first trap I ran into while coding the clock, and it took me quite a while to find the solution for that a uncle googles. I learned that it is impossible to set the registration point of a MovieClip object by actionscript, but we need the registration point to be set to let the clock hands move in a nice round circle. The DynamicMovie class is the solution to that problem, it is a simple workaround provided by Oscar Trelles you can download on his website.

All the other stuff is pretty basic coding. We create a clock, load its images, and let the clockhands rotate the amount that is needed to diplay the correct time. The only difference you might notice to basic AS3 code are two methods that are new here and where provided by the DynamicMovie class. First is setRegistration at the onImageLoad eventhandler which simply sets the registrationpoint x and y coordinates. The second method that is new is rotation2 which provides you with a rotation method that simply takes registrationpoint into count for the rotation to perfom.

Analog clock is done lets move on to the digital clock and all of its traps Actionscript has for us.

By reading this view class you might notice “import com.clock.loader.ImageLoader;” this is simply a imageloader method I created to avoid redoing the basic imageload method over and over again. The next new thing is far more interesting “… = new DigitContainer()”. This is the solution I came up with because of one of the most anoying “features” of Flash I ever came accross. It is simply impossible to assign the same instance of a DisplayObject to different parent DisplayObject, which means that you have to create n 100% equal instances of the same object if you want to use it n times in your flash movie. That´s why I had to come up with the helper class for the digits to put ’em into a container that provides me with a way to show the digitis of the current time.

So here we go digital clock also ready to run. Last we have to build the model for the alarm as well as the view for the alarm that should be displayed. First we will need the alarm model to handle the alarm event.

The alarm model is basically a event so the alarm inherits from the event class. As you can see it is pretty basic stuff. The view model is a little bit more complicated. thought the alarms to display look a little bit different.

As you can see this is also pretty basic stuff, some imageloading and a sound that is loaded. A pretty anoying beep. And there is a little thing you might notice : “ExternalInterface.call(‘getAlarmTime’);”. This is the nice way to communicate with the hosting html page. Basically what this does is to call a javascript function and get its
return value. In this case the getAlarmTime method calls a json on the server to get the alarmtime out of the db via Java.

So here we are, we got the clock, the analog and the digital clock face as well as the alarm. Last thing missing is the start, the controller.
Even this is easy if you know what you are doing: