www.swish-designs.co.uk

Site menu:

Home Tutorials | Shop | Downloads | My Blog | Swish Templates | Forum | Contact

SwishMax Tutorials And Resources
Where Imagination Is The Creation

 

Welcome To Swish-Designs.co.uk Have a Nice Tuesday

Time & Date Tutorial - Swishmax

Learn how to sisplay different syles of the time and date with this swishmax tutorial.

Instructions

To set the alarm, click on the set button, use the hours and the minutes button to set the time you wish the alarm to sound, once you have reached you desired time, click on the set buttonagain then click the On button to activate the alarm, click off to turn the alarm off.
Please note you can only set the hours and minutes whilst you are in the set mode use the set button to toggle between the set time and the real time.

First Of All

Their are many different ways to display time and dates, in this tutorial i will try to show you and explain to you as many different ways to display the time and date on screen and different ways you can achieve this. in the above example we have a 12 hour clock digital style with full date below. To start with any display date or time needs a dynamic text box to be displayed in.

Step.1

Ok slect the text tool and create a dynamic text box, for this first tutorial i am just going to show you how to get the hours from the system time of a users computer. name the dynamic text box you have just create Hours. the font i will be using in this tutorial will be DS-Digital get it Here , once you have got the font you wish to use select it from the font dropdown box see fig.1 below.

Important! make sure that the target box is not checked, it needs to be empty

Fig.1

ok now on Scene_1 of your movie add the following code.

you should now have a display like in fig.1a below when run in player press Ctrl+t To test in player now.

Code Explained:
onEnterFrame() This Event Handler Function is called at the start of each frame of display
If "includingFirstFrame" is specified, then the actions will be processed on all frames of display starting from and including the very first frame that the object is placed.
new Date() used to create a new Date Object based on the current Local Time, or it can be used to create a reference Date Object based on the arguments assigned to it.
mydate is the variable name used to store the new Date() data.
mydate.getHours(); returns an integer (from 0 to 2, 0 being midnight, 23 being 11:00pm) representing the current hour of the Date Object according to Local Time.
Hours finaly displays the hour shown in the computers system clock which is set to show Local Time.

Step.2

Now to add more stuff like minutes and seconds. so create another dynamic text box and this time call it Minutes this time add the following code to the existing code.


so your full code at this time is.



you should have something looking like fig.2 below.

Code Explained:
Minutes is exactly like Hours previously explained, it gathers the information from the variable mydate and displays it.
if (Minutes<10) {
Minutes = "0"+Minutes;
} the if statement checks the Minutes dynamic text box to see if the number displayed in that box is less than the value of 10, if so it tells the Minutes dynamic text box to place a zero in front of the number so if the Minutes text box says 3 the output display will be 03. after 10 is reached the minutes will display corectly as is.

Step.3

Now we need a Seconds display box, so again using the text tool create a dynamic text box this time call it Seconds and add the following code to the existing code.

so your full code at this time is.


You should no have something looking like Fig.5 below.

Code Explained:
Seconds is exactly like Minutes previously explained, it gathers the information from the variable mydate and displays it.
if (Seconds<10) {
Seconds = "0"+Seconds;
} the if statement checks the Seconds dynamic text box to see if the number displayed in that box is less than the value of 10, if so it tells the Seconds dynamic text box to place a zero in front of the number so if the Seconds text box says 3 the output display will be 03. after 10 is reached the Seconds will display corectly as is.

Step.4 - Flashing Dots

Now at this stage you have a fully functional 24 hour digital display. all you need to add now are the flashing dots which actualy also represent the seconds counting on a digital display they disapear and re-apear thus being one second counted, So create the dots using the text tool select a static text box and type the colon (:) in the box. see fig.4 below.



place this at the right hand side of the hour display, now duplicate this text file and place the duplicate file at the right hand side of the minutes text box. when you have done so select both the text boxe by pressing and holding down the Ctrl ket and clicking on the shape in the outline panel or on the stage, and group them both together as a shape. name the shape dots see fig.4a below.



now group the the shape as a sprite and name the sprite dots.
your display should look something like fig.4b below.



rename the Seconds text to now, add the following code to the dots sprite.


now create a blank sprite and name it control and add the following code to the the control sprite


you should now have a working flashing dots like like fig.4c below.


Great, now you are realy learning lots about how to display the time function, you can vertualt do anything you want with this time function including using custom made graphics to show the time, this is very usefull if you want it to fit in to a particular part of a website or presentation. so lets now take a look at using graphics to display the time.

Step.5 - Graphics Display

Great, now you are realy learning lots about how to display the time function, you can vertualt do anything you want with this time function including using custom made graphics to show the time, this is very usefull if you want it to fit in to a particular part of a website or presentation. so lets now take a look at using graphics to display the time. I will just be using the seconds in this short look at using graphics with the time function. click on the link below to download the seconds strip.

Download the image strip

once you have downloaded the graphic strip you will need to open another swishmax movie, as we are going to start a fresh with the graphics tutorial.

Step.6

Using the text tool to create a dynamic text box name it hours and then create another dynamic text and name it minutes, ok now you have your hours and minutes boxes set up, you want to create a static text box with 2 colons in the box name it dots space these to fit each side of the hours and minutes text boxes , now add the following code to Scene_1.


this will load the coresponding times into the relevent text boxes that you have just created
the only issue here is that it will not have a zero in front of the minutes if the minutes are 0 - 9
so now add the following code directly underneath the current code you have just done.


you could try to simplify the above code by adding the following instead.


the above code does exactly as the code before and is the code i have used myself in the sample belowt, it checks the minutes text box to see if the number displayed inside it is less that 10 and if so it simply attatches a zero befor the number.

So if you now press Ctrl+T to test what you have in you player you should have something looking like fig.1 below.



Ok now you have the hours and the minutes set we need to add the graphical seconds strip that you downloaded at the begining of this section.
Here is is how we incorporate the seconds strip into our movie.

Using the rectangle tool create a rectangle about 42 x 29 pixels this may vary, it just needs to be wider than the numbers in the strip. now import the seconds graphic strip. and place the 01 in the middle of the rectangle shape you created earlier. Now group the graphics strip and the rectangle shape as a sprite and name the sprite seconds. and select use bottom object as mask Ok you should now have something looking like fig.2 below.



this is where the tedious job starts, but just imagine what results you could come up with knowing how to use graphics to display the time.
Ok now you have your seconds sprite set up, you need to work on the timeline and start adding actions to it, so on frame one of the seconds sprite timeline add a stop action by click insert-->script-->movie control-->stop. Now at the side of the time_seconds.png on the timeline add a move action over 5 frames highlight the image and using the arrow keys press the up arrow to move the number 02 into place, imediatly anfer the move action place another stop action. on frame 2 you need to set a label called 02. here is the code to set the label and the stop actions you will have to manually move the image up to fit no2 into place add the following code to the seconds sprite.



you need to repeat this action all the way untill you have 60 actions see fig.3 below



if you do everything corectly your last action should finish on frame3 62 with the following code.

ignore the seconds text in the timeline you do not need it. .



Ok now create an empty sprite called control now add the following code to that sprite.


on the onFrame (1) { the actions need to go all the way up to 59 no so you next code added to the above would be
else if (Count=="3") {
_root.seconds.gotoAndPlay("_3");
}
i dont want to suply all the code because this gives you a better understanding on how the script works and what does what. if you execute this corectly you will have something looking like fig.4 below.



Thats it for adding graphics to time display.
i think i have covered all i can think of on the digital display clock function now for the analog. display clock functions.

Step.7 - Analog Clock

Using the Elipse tool and whilst holding down the Shift key on your keyboard drag out a circle to the size you wish you clock to be. see fig.1 below



their is no way to explain how to creat a clock just make your own design up, working on the same basis as in the figure above just build up the clock shape using the Elipse tool untill you are hapy with a design you wish to use for your final clock. you can see my final clock design below in fig.2.



You may copy and paste my image into swishmax and use it if you wish, the original was created with swishmax as a vector image. once you have your clock shape that you are happy with just add the numbers, again you are welcome to use my image just copy and paste it into your movie. see the image below.



Ok using the rectangle tool or the pen tool create three hands of your design, a second hand, a minute hand and an hour hand. place them in the center of the clock and group them all together as a sprite, make sure you name the hands as seconds, minutes and hours then name the sprite workings and set the transform bottom center. and add the following code to the workings sprite.

you should now end up with a fully working analog clock when you press Ctrl+T
see my end result below.

Step.8 - Displaying The Date

Ok lets start a new swishmax movie, as we are going to start a new with the displaying time tutorials.
lets start by learning the code to display the date then we can have a look at the different ways that the date can be displayed.

Create a dynamic text box and name it display, then add the following code to Scene_1

 

This will output a date like the following


now lets say you did not want the date to display as full year example 4 digits 2007 etc but rather you wanted it to display as 2 digits eg 07 then replace with the code below


then the output would look like fig.2 below.


Now lets say you wanted to display your date like 5th September, 2007. you would use the following code.


then your display would be like fig.3 below.

thats most of the common controls covered in the time and date scripts tutorial, i hope this has helped you in some way. with this knowledge you may go on to produce something like in the picture below



this and many more can be found Here

Thank you for reading have fun!..................................

 

More information:

Here are some of my personal links, that you may find interesting or usefull.

Loweonline.co.uk | Design By Ewa | S'algarDiving.com | www.deviantart.com | sposatoettore.it | Swishzone.com

---

Advertisments

Advertise Here Contact Me

---

Credit Counseling - Credit Card Consolidation - Debt Consolidation - United Specialties-->

---

---

---

FaceBook Group

---

Random Tutorial:

Random Vector:

Random Quote:

Site Statistics:

TOTAL: 24758744
UNIQUE: 15668499
TODAY: 14682

Recomend Site:

Recommend to a friend

Make A Donation:

If anything on this website has been of help or assistance to you, please show your appreciation by leaving a small donation, Thanks.

Bookmark Me

Copyright © 2007- www.swish-designs.co.uk.