How To Create a “LIVE” Count-Up

How To Create a Realistic Water Text Effect

Introduction
In this tutorial we will be creating a realistic water text effect that is sure to catch someones eyes. This tutorial requires some basic knowledge of Photoshop and how to work in it’s environment. For …

Read the full story »

Creative Corner

A series of in depth and heavily inspiring Graphic, Web and Logo Designer and Developer interviews.

Designer Apps

A resource vault of applications that would serve any Designer or Developer well to have in their arsenal.

Freelance Hub

A storage full of tips and tricks for every freelance Designer or Developer that wants to progress their business.

Geek Things

Every once in a while we’ll post a new geeky thing that might inspire you to go through the day with a laugh or a second thought.

Website Filter

A collection of websites that is sure to bring you creative inspiration and keep you on the edge of design.

Home » Flash

How To Create a “LIVE” Count-Up

Submitted by Richard Darell30,951 Views | 54 Comments

Introduction

I have gotten some great reviews for my latest tutorial “How To Create a “LIVE” Visitor Counter” and I have been requested by many to make a tutorial of my “Count Up” application featured here on my site. So I thought, why not! Let’s give them what they want. Isn’t that what freemiums are all about?

This tutorial requires, as my previous tutorials, nothing more than the basic knowledge of Flash and ActionScript. Some basic knowledge of FTP and HTML is also required, however this is mostly a copy and paste situation so if you don’t possess this knowledge I am sure you are able to follow this tutorial with flying colors anyways. It’s pretty straight forward and I believe anyone could read this and be able to create their own count-up. With a little bit of focus and bit of patience it should be all good. Let’s start.

Step 1

Just like in my previous tutorial, mentioned in the introduction, we need a background. To make it easy I have chosen to take the same background as in the Live Visitor Counter tutorial. But of course you can go ahead and create your very own background in whatever size or shape that you want it to have. For this one however I have once again chose the 200*38 size with two layers creating that depth effect. Here’s my flattened layer consisting of two layers:

Once again, when creating your own background and are using layers, to create the depth effect, make sure you separate the “on top” layers from the “background layers to be able to put the text in between.

Step 2

OK, we have our background. Time to setup our project in Flash. Open up a new project and make it in ActionScript2.0. First thing we’re going to do is to set the Document Properties so we get the right size and speed of the application. So, open up “Document Properties” (Ctrl+J) and set the width to 200 and the height to 38. Also change the FPS (frames per second) from 12 to 30. This is to make sure we get an even second for each second. Also set the background to black black (#000000) as it’s mostly much easier to see if you’ve made any mistakes in your aligning later on. Don’t forget to name your project. I have chosen to name it “Live Count-Up”. Now you should have something similar to this:

Project Settings

Step 3

It’s time to set up our layers for the project. Create 4 (four) new layers making it a total of 5 (five) layers. Name them, from the bottom up, “background”, “labels”, “textfields”, “shine” and “actions”. Your setup should now look something like this:

Layer Setup

Step 4

The first layer to get some content is actually our “actions” layer. Open up “Actions” view by selecting the first frame of the “actions” layer and right click on it. Choose “Actions” at the bottom of the list. Now, input this:

this.onEnterFrame = function() {

var trueday:Date = new Date();
var trueYear = trueday.getFullYear();
var trueTime = trueday.getTime();

var startDate:Date = new Date(2008,11,12);
var startTime = startDate.getTime();

var timeLeft = trueTime – startTime;

var sec = Math.floor(timeLeft/1000);
var min = Math.floor(sec/60);
var hrs = Math.floor(min/60);
var days = Math.floor(hrs/24);

sec = string(sec % 60);
if (sec.length < 2) {
sec = “0″ + sec;
}
min = string(min % 60);
if (min.length < 2) {
min = “0″ + min;
}
hrs = string(hrs % 24);
if (hrs.length < 2) {
hrs = “0″ + hrs;
}
days = string(days);

var countup:String = days+ “:” + hrs + “:” + min + “:” + sec;
countprnt.text = countup;
}

Now you’re thinking. Wow, that’s a lot of code and he said it was to be basic. No worries. I will try and explain the basics of the code line by line so you know what it does.

Line 1

this.onEnterFrame = function() {

This line opens up our script each time we the cycle hits this frame. What it means is that everytime our flash movie enters his frame it executes the ActionScript.

Line 2

var trueday:Date = new Date();

This line creates a variable for us to store the current date. The updated date so to say.

Line 3

var trueYear = trueday.getFullYear();

This line stores the current year in a variable named trueYear.

Line 4

var trueTime = trueday.getTime();

This line stores the current time in a variable named trueTime.

Line 5

var startDate:Date = new Date(2008,11,12);

This line is the only one you have to pay close attention to really. This line stores the date that you want the counter to start it’s count-up from. Also, this line has some more explaining to do. The layout of the date within the parentecies is Year, Month, Date. But, one thing that is really important here is the months only goes to 11. Meaning December is 11. It is like this because the computer counts January as month number 0. This is important when you add your date here.

Line 6

var startTime = startDate.getTime();

This line stores the startDate’s time. Meaning if you have entered it it will also include it down to the second.

Line 7

var timeLeft = trueTime – startTime;

Here is the calculation that calculates how many days, hours, minutes and seconds has passed since the start.

Line 8

var sec = Math.floor(timeLeft/1000);

This line calculates the milliseconds into the number of seconds.

Line 9

var min = Math.floor(sec/60);

This line calculates the seconds into the number of minutes.

Line 10

var hrs = Math.floor(min/60);

This line calculates the minutes into the number of hours.

Line 11

var days = Math.floor(hrs/24);

This line calculates the hours into the number of days.

Line 12

sec = string(sec % 60);

This line calculates the total number of seconds that have passed.

Line 13

if (sec.length < 2) {
sec = “0″ + sec;
}

These lines adds a zero (0) in front of the seconds if the total number of seconds are less than 10. We do this to make sure we always have a two digit print out on our count-up.

Line 14

min = string(min % 60);

This line calculates the total number of minutes that have passed.

Line 15

if (min.length < 2) {
min = “0″ + min;
}

These lines adds a zero (0) in front of the minutes if the total number of minutes are less than 10. We do this to make sure we always have a two digit print out on our count-up. Just like in the seconds.

Line 16

hrs = string(hrs % 24);

This line calculates the total number of hours that have passed.

Line 17

if (hrs.length < 2) {
hrs = “0″ + hrs;
}

These lines ads a zero (0) in front of the hours if the total number of hours are less then 10. We do this to make sure we always have a two digit print out on our count-up. Just like in the seconds and the minutes.

Line 18

days = string(days);

This line stores the total number of days that have passed.

Line 19

var countup:String = days+ “:” + hrs + “:” + min + “:” + sec;

This line stores our print out in the right order. It combines all of our calculated variables and stitches it into one string variable ready for prin out.

Line 20

countprnt.text = countup;

This line prints our string to countprnt.text which will be our dynamic text field where we see our count-up progress.

Line 21

}

This line just closes our script.

Step 5

OK, now we’re done with the ActionScript. Time to add the visible’s to the counter. Let’s add the background. Choose “File -> Import -> Import To Stage…“. Pick your background and click ok. If all is ok it should align itself to your workspace. It should now look something like this:

Background Layout

Step 6

Our background is in place and we need to insert our labels. The labels that will tell the viewer what he/she is looking at. Let’s start with the title. Let’s add “SINCE LAUNCH” title to the count-up in the upper right corner in the first frame of the “labels” layer. I have chosen the font “Trebuchet MS” size 7 to make it clean and tidy. You can go ahead and use whatever font you feel fits your needs. Now we have something looking like this:

Title Label

I have chosen not to add the bottom labels yet as we want to make sure first where they go. This we do by inserting the actual counter.

Step 7

Time to insert the core of the count-up. The count-up itself. In the first frame of the “textfields” layer let’s add a dynamic text field with the text “000:00:00:00″ indicating where the digits will go. I have chosen Arial as font and 18 as size. I also picked Bold to give it more body. I gave it a slight bright gray to make it stand out a bit from the titles pure white color.

Before we enter the next step we need to give our text field and instance name so that our ActionScript can push it’s data to it. So, click the newly created dynamic text field with out zeros in it and give it an instance name of “countprnt” which you will also find in our script. ALSO, make sure you widen the text field all the way to the left to give it more room for more digits.

IMPORTANT: Make sure you have right aligned the text in the dynamic text field so that the increment always looks the same. You should now have something looking like this:

Readout Layout

Step 8

There. Now we can go ahead and add the last labels to the count-up as we have the guide now to align them. We’ll need to add 4 different static text fields to do this. Under the far right zero’s you type “SEC”, then “MIN”, “HRS” and “DAYS”. I have used the same font and size as in the title label. Same color and everything. You should now have something looking like this:

Label Layout

Step 9

That’s almost everything as far as our application. The only thing we need to do right now is to add the “shine” layer to it to create that extra depth to the count-up. Once again add the Shine image (which is a semi transparent layer saved as a PNG in Photoshop) by Importing it to the stage on the first frame of the “shine” layer. After doing this, if it’s not aligned already, align it by using the “Align X” commands found on your right in the Flash workspace.

Now we have something looking like this:

Shine Layer

Step 10

Well, what do you know. Our count-up is done and what we need to do right now is to save it and publish it. So go ahead and save your newly created online application. Name it “Live Count-Up”. After saving it open up “Publish Settings…” and make sure that ActionScript is set to ActionScript2.0 and that JPEG quality is set to 100. Now go ahead and publish your new application. All your new files are now in the same folder and it’s time to dig through the HTML to find the flash object tags so we can add them to your site.

Step 11

Upload your new application flash movie to a directory of your choice on your server host, but make sure you remember the path to it. The shorter the better. The file you should upload is “Live Count-Up.swf”.

Step 12

After uploading your file to your server the only thing we need to do right now is to incorporate the object code to your website/blog. This is the code you should use. Place it anywhere on your web site’s html code and bang, there it is!

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0″ width=”200″ height=”38″ id=”Live Count-Up” align=”middle”>

<param name=”allowScriptAccess” value=”sameDomain” />

<param name=”allowFullScreen” value=”false” />

<param name=”movie” value=”Live Count-Up.swf” />

<param name=”quality” value=”high” />

<param name=”bgcolor” value=”#000000″ />

<embed src=”Live Count-Up.swf” quality=”high” bgcolor=”#000000″ width=”200″ height=”38″ name=”Live Count-Up” align=”middle” allowScriptAccess=”sameDomain” allowFullScreen=”false” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />
</object>

This code is looking for the flash movie in the root directory. If you put it in another directory just use “directory\Live Count-Up.swf” and it should all good.

That should be pretty much it! Now go ahead and test your new count-up on your own site or blog or you can check out this example to see how it works:

Round Up

Well, all should be working now there are plenty of areas this could be used within. For example you could stick one of these onto each and every post you make if you want to be sure everyone knows exactly how long ago you posted your blog post. Or, why not combine my “Live Visitor Counter” with this one to showcase your hit count during a certain amount of time. Should be pretty cool to watch for anyone!

Whatever you use this for it’s only your imagination that sets the limit. You are welcome to use this technology in whatever way you see fit. But, make sure of one thing. Have fun with it!

I hope you have enjoyed this tutorial and that you will check out my other tutorials on this site. I would very much like to see you return for future tutorials as well. Leave a comment or send me an email. If you have any questions don’t hesitate to contact me (which reminds me, I haven’t set up my contact page yet. Dang it! – 02/02/09).

It’s been great fun creating this tutorial and I hope I will hear from you soon!

Thank you!

54 Comments »

Eremeeff said:

Hey, Webmaster.
Can I use a photo from your blog?
Of course, i will place a link to source.
Thanks.
Yours Eremeeff

How To Create a “LIVE” Count-Up

Introduction

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Round Up

54 Comments »

Leave a comment!

Friends & Partners

Random Posts

Latest Video Post

Recent Posts

Most Commented

Most Popular