How to use flash clock widget

This tutorial will explain how to use xorbin.com flash clock widgets for users who have very limited knowledge of web development. For this tutorial all you need is just very basic understanding of HTML.

Step 1 – downloading widget from xorbin.com

First of all you need to download flash clock widget from http://www.xorbin.com/widgets.  Just select digital or analog flash clock widget you want to download and press “Download the widget”. Save file to location is comfortable for you.
After download process is finished you should get zip file named something like devAnalogClock-v1.x.zip or devDigitalClock-v1.x.zip. Unzip it. You should get these files and folders system from the archive:

  • js folder
    • swfobject.js – JavaScript file for an easy-to-use and standards-friendly embedding flash content;
  • media folder
    • skins folder – various flash clock skins (.png, .gif and .jpg files);
    • bg-transparent.gif – image for transparent background;
    • devAnalogClock.swf or devDigitalClock.swf – flash file for clock (the widget itself);
    • expressInstall.swf – flash file for Macromedia Flash plug-in installation for user’s browsers if he doesn’t have one.
    • screen.css – CSS stylesheet file for examples HTML (we won’t be using this file);
  • index.html – html file which demonstrates flash widget;
  • analog-clock-example6.php or digital-clock-example6.php – PHP file for demonstrating UTC/GMT feature of flash clock widget – you can try this example only if you are using PHP server;
  • licence.txt – you can read widget license here;
  • readme.txt – you can read about flash clock widget here;

Step 2 – copying necessary files

To embed xorbin.com flash clock you will need these files and folders:

  • js/swfobject.js
  • media/skins folder
  • media/devAnalogClock.swf or media/devDigitalClock.swf
  • media/expressInstall.swf

Open folder where you keep your websites index.html file, create js and media folders and upload these files to correspond folders.

Step 3 – putting necessary code in your HTML document

Open your HTML file for editing in which you want to embed flash clock. Usually you have these structure of HTML document:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
    <head>
        <title>Your site title</title>
        <link rel="stylesheet" type="text/css" href=" style.css" />
    </head>

    <body>
        …………………………………………
        Your website content
        …………………………………………
    </body>

</html>

First you need to insert JavaScript swfobject.js file which will handle showing flash clock in your webpage. Since you have copied swfobject.js file into js folder – insert this code in your HTML header (between <header></header> tags):

1
<script type="text/javascript" src="js/swfobject.js"></script>

Second you have to create div container in your HTML body (between <body></body> tags) with unique id where you want your flash clock to appear. For example:

1
<div id="devAnalogClock"></div>

So now your HTML file looks something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
    <head>
        <title>Your site title</title>
        <link rel="stylesheet" type="text/css" href=" style.css" />
        <script type="text/javascript" src="js/swfobject.js"></script>
    </head>

    <body>
        <div id="devAnalogClock"></div>

        …………………………………………
        Your website content
        …………………………………………

    </body>

</html>

Step 4 – writing JavaScript code for flash clock embedding and customization.

Don’t worry you actually won’t be writing any JavaScript code, what you will be doing is just changing some values to customize your flash clock. So you have a basic JavaScript code like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
            var flashvars = {
                clockSkin: 'media/skins/skin002.png',
                arrowSkin: '1',
                arrowColor: '666666'
            };
            swfobject.embedSWF(
                'media/devAnalogClock.swf',
                'devAnalogClock',
                '200',
                '200',
                '8',
                'media/expressInstall.swf',
                flashvars,
                {scale: 'noscale', wmode: 'transparent'}
            );
</script>

Change or add these parameters, to configure flash clock style:

  • clockSkin: [*.png, *.gif, *.jpg] (path to external image)
  • arrowSkin: [1..12] (defines one of 12 built-in arrow types)
  • arrowScale: [10..500] (defines arrow scale by percentage (100 is default))
  • arrowColor: [000000..FFFFFF] (sets color for all arrows)
  • arrowHColor: [000000..FFFFFF] (sets color only for hour arrow)
  • arrowMColor: [000000..FFFFFF] (sets color only for minute arrow)
  • arrowSColor: [000000..FFFFFF] (sets color only for second arrow)
  • showSeconds: [yes/no] (displays or hides seconds (yes is default))
  • widgetUrl: [http://*] (sets link on the widget)
  • UTCTime: [hh:mm:ss] (sets UTC time)
  • timeOffset: [-x..x] (sets timezone offset in seconds)

You can add values you want here:

1
2
3
4
5
6
var flashvars = {
                clockSkin: 'media/skins/skin002.png',
                arrowSkin: '1',
                arrowColor: '666666',
                arrowSkin: '2'
            };

For example here is added arrowSkin parameter, it’s simple, just remember not to put separator after last parameter, because IE browser will throw an error.

In the second part of the code, you can set parameters of flash movie (in this case flash clock):

1
2
3
4
5
6
7
8
9
10
swfobject.embedSWF(
    'media/devAnalogClock.swf', // path to the widget
    'devAnalogClock', //containers id where widget will appear
    '200', // width of the widget
    '200', // height of the widget
    '8', // flash version (it’s recommend not to change this)
    'media/expressInstall.swf', //file’s expressInstall.swf path
    flashvars,
    {scale: 'noscale', wmode: 'transparent'}
);

Above you can  read what every parameter stands for, if you copied widget’s files correctly and created container with id “devAnalogClock” you don’t have to change anything.

Step 5 – adding JavaScript code for flash clock in your HTML file

After you have done all customizations you want, or if you want to test how does it look, you have to put this code to your HTML body right after the container you have created for a widget in this case code looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
    <head>
        <title>Your site title</title>
        <link rel="stylesheet" type="text/css" href=" style.css" />
        <script type="text/javascript" src="js/swfobject.js"></script>
    </head>

    <body>
        <div id="devAnalogClock"></div>
<script type="text/javascript">
            var flashvars = {
                clockSkin: 'media/skins/skin002.png',
                arrowSkin: '1',
                arrowColor: '666666'
            };
            swfobject.embedSWF(
                'media/devAnalogClock.swf',            
                                'devAnalogClock',
                '200',
                '200',
                '8',
                'media/expressInstall.swf',
                flashvars,
                {scale: 'noscale', wmode: 'transparent'}
            );
</script>


        …………………………………………
        Your website content
        …………………………………………

    </body>

</html>

Step 6 – testing flash clock widget in your website

After you have done all 5 steps of this tutorial. You can try if everything is working. So now you have to open your HTML file with browser you are using. And if everything is okey, you should see flash clock ticking in your website.

If not, try this:

  • check if paths to the files from step 2 are correct and that files are in places;
  • if you are testing with IE and you get a JavaScript error, check if you haven’t put separator after last parameter;
  • if you get browser message that you need to install Macromedia Flash plug-in, go ahead and do it, because you won’t be able to use flash clock widget in other case.



Guide to Cosmos