1. Code
  2. ActionScript

Create an Analog Clock Screensaver with Screentime for Flash


In this tutorial, I'll show you how to build a stylish Analog Clock using ActionScript 3.0. We'll use the resulting swf movie with Screentime for Flash to create a fully functional screensaver. Time for some fun..

Step 1: Brief Overview

Using the Date object and its properties, we'll get the day, hours, minutes and seconds and use simple Math to display the obtained data in an Analog Clock. The updates will be handled by a Timer.

Also, you can add a Digital Clock to the Screensaver by following this FlashTuts+ Tutorial.

Step 2: Starting

Open Flash and create a new Flash File (ActionScript 3).

flash clock analog

Set the stage size to 640x400 and add a gray linear background (#DBDBDD, #B3B2B7). Screentime will automatically scale the movie to fullscreen so we don't have to set the stage in the full resolution.

flash clock analog

Step 3: Clock Backgrounds

We'll begin by creating the clock background.

Select the Oval Tool (O) and draw a 250x250 px circle and add a black linear background (#313131, #000000). Use the Gradient Transform Tool (F) to rotate the gradient to look like the following image:

flash clock analog

Create another circle, this time 248x248, with this linear gradient (#595959, #000000). Again, use the Gradient Transform Tool to rotate and adjust the gradient.

flash clock analog

Step 4: Numbers

Now let's add numbers to our clock.

Select the Text Tool (T), pick a font of your choice and an appropriate size for the clock. I used Myriad Pro Regular, 22 Pt, #DDDDDD.

Write the numbers in one TextField for each and align them to the clock, this can be a little difficult without a reference, check the guides in the images.


flash clock analog


flash clock analog

Step 5: Clock Hands

Time to create the clock hands.

Select the Poly Star Tool (click and hold in the Rectangle Tool Button), then in the Properties Panel click the Options button in the Tool Settings section. Change the number of sides to 3.

flash clock analog

Create a white 20x70 px triangle, convert it to a MovieClip and name it "hourHand".

flash clock analog

Repeat this process for the minute hand, but change the height to 110 px. Remember to set the instance name to "minuteHand".

flash clock analog

Select the Oval Tool and create a 26x26 px circle, convert it to a MovieClip and apply a filter as follows:

flash clock analog

For the second hand combine a 8x8 px circle and a 2x116 px rectangle. Fill them with this color #C90303.

flash clock analog

Step 6: ActionScript

Create a new ActionScript Document and save it as "Analog".

flash clock analog

Step 7: Required Classes

These are the classes we will need:

Step 8: Extending the Class

We're going to use Sprite specific methods and properties so we extend using the Sprite Class.

Step 9: Variables

These are the variables we will use, explained in the comments.

Step 10: Main Function

This function is executed when the class is loaded.

Step 11: Update Function

This is the function that handles the Clock. It's the same code from the first functions, just executed every second by the timer.

Step 12: Document Class

Go back to the .fla file and in the Properties Panel add "AnalogClock" in the Class field to make this the Document Class.

flash clock analog

Step 13: Screentime for Flash

Screentime for Flash is a Screensaver creator tool, it's fast and easy to use. You can get a trial version from the website. The demos are fully functional, except the screen savers they build expire one week after they are created. In this tutorial I'm using the Mac version so the Screensaver will be mac-only.

Step 14: Screensaver

Open Screentime and in the Content tab, select your file by clicking in the "..." button and browsing to the swf. Enter a name for your screensaver.

flash clock analog

Leave the Properties and Installer tabs as default and in the Publish tab name the installer, choose the options you need and click Build.

flash clock analog

When the build is complete, open the installer app and click install. Now you can choose your flashy screensaver from System Preferences.


You just learn how easy is to convert flash movies or applications to screensavers, explore the Screentime application and create your own!

Thanks for reading :)

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.