Time based Tutorial
1. First ensure that you have installed the flashTimer component using Macromedia Extension Manager.
2. You have the option of reading the current GMT time from your web server. If you choose not to use this option, the time will be calculated based on the users' current workstation time, which may not always be accurate. If, for example, you plan to make a special announcement when the timer has completed, if the time is taken from the users' local machine, the user can set their time to a future time in order to see the end result. We therefore highly recommend using the server time option.
There are three files included with your download in a folder called "server files". The files are named: servertime.php, servertime.php3 and servertime.asp. Upload one of these files to a location on your web server that is accessible through a browser, for example, the same folder where your HTML files reside. If you have PHP 4 or 5 installed on your web server, you would upload servertime.php . For PHP 3 you would upload servertime.php3 and for ASP you would upload servertime.asp.
3. Place a dynamic textfield on the stage which will be used for the timer output. You can do this by creating a textfield using the Text Tool in Flash and setting the textfield to be "Dynamic Text".
4. Give the textfield that you just created an instance name. For example: counterTxt
5. Set the desired font, font size and color in the textfield properties.
6. Drag and drop the flashTimer component from the components panel onto the stage. You may place this component anywhere that is convenient, as the component icon will become invisible when viewed. You must ensure that the component is placed on the same timeline as the textfield. For example, if the textfield exists inside a movie clip, the flashTimer component should also be inside the same movie clip.
7. Click on the flashTimer component that you just dragged onto the stage in order to view its parameters in the properties panel. The parameters should set using the component inspector. If you view the properties panel, you will see a "Launch Component Inspector" button. Press this button in order to open the component inspector.
Note: You may need to expand the component inspector panel in order to view the entire panel.
8. Enter the following parameters in the component inspector panel:
PROPERTY |
EXAMPLE |
DESCRIPTION |
| Non-Time based | Select this option to use the non-time based timer. | |
| Count Down | Select "Count Down" to display the time remaining until the end date and time and select "Count Down" if a "start counting from" date and time have been entered and you would like to display the increasing time that has elapsed since the start date and time. | |
| Server File | http://www.yourdomain.com/servertime.php | If you decide to get the current GTM time from your web server (as explained in step 2 above), then you should enter the URL of the servertime file that you uploaded. Leave this value blank if you prefer to get the time based on the users' local time. Note: Please see the section on Flash Player Security for important information. |
| View Server Time | Press this button to view the current server time in GMT, provided that you entered the URL of the servertime script in the "Server Time" property. | |
| GMT Offset | -5 |
Enter the time zone (relative to GMT) to relate to when displaying the timer. For example, for EST you would enter -5 (or -4 during daylight savings). |
| Counter Textfield | counterTxt |
The instance name of the textfield in which the timer should appear. |
| Time Format | %YEARS% years, %MONTHS% months, %DAYS% days, %H%:%MM%:%SS% | The format in which the counter text should appear in the textfield. Use %YEARS% to represent the years, %MONTHS% to represent the months, %D% to represent the days, %H% to represent the hours, %MM% to represent the minutes, %SS% to represent the seconds and %HS% to represent the hundredths of a second. Note: If you omit, for example, the %YEARS% value, the number of years will be converted and added to the months value. If both the %YEARS% and the %MONTHS% values are omitted, the total years and months will be converted and added to the days value. |
| Buffer Zeros | Yes |
A "Yes" or "No" option specifying whether the add a zero before the minutes and second values when the values become single digits. For example, set this property to "Yes" in order to display: 8:07 instead of 8:7 |
| End Date | 2004-12-20 |
Enter the target date for the timer to reach. This should be entered in the format: YYYY-MM-DD. |
| End Time | 15:30:00 |
Enter the target time for the timer to reach. This should be entered in the format: HH:MM:SS Note: The time should be in 24 hour format. |
| Text to appear when timer has completed | Completed |
The text that should appear in the textfield once the target time has been reached. |
| Start Counting From Date | 2004-10-01 |
Enter the date from which the timer should start counting from. This should be entered in the format: YYYY-MM-DD. This value is only used when "Count Up" is selected. |
| Start Counting From Time | 08:00:00 |
Enter the time from which the timer should start counting from. This should be entered in the format: HH:MM:SS. This value is only used when "Count Up" is selected.
Note: The time should be in 24 hour format. |
| Delayed Start Timer Date | 2004-10-01 |
Enter the date to start either the count down or count up. You would use this in the event that the timer should only start counting down from a specific date. While waiting for the timer to start, the text entered in the "Start Text" value will be displayed. This should be entered in the format: YYYY-MM-DD. |
| Delayed Start Timer Time | 08:00:00 |
Enter the time to start either the count down or count up. You would use this in the event that the timer should only start counting down from a specific time. While waiting for the timer to start, the text entered in the "Start Text" value will be displayed. This should be entered in the format: HH:MM:SS. Note: The time should be in 24 hour format. |
| Text to appear while waiting for timer to start | Wait for counter to start... |
The text to display in the textfield before the timer begins counting. This value is used in the event that the timer is set to only start counting at a future date or time. |
The timer will now work correctly. We will now add some code to tell the timer to load a new SWF when the target time has been reached.
9. Give the flashTimer component an instance name, for example: myCounter
10. Click on the timeline and press F9 to open the Actions Panel. If you are using Flash MX, you must ensure that you set your Actions Panel to "expert" mode.
11. Add the following code in the Actions Panel:
myCounter.onEndCounter = function() {
loadMovie("movie2.swf", _level1);
};
The code above tells the flashTimer component, with the instance name of myCounter, to load a movie called "movie2.swf" into level1, once the target time has been reached. You may wish to use this event to perform any action that you wish. For example, getURL.
For examples of advanced functionality, please see the advanced section as well as the ActionScript reference.