Zegarek cyfrowy

Pokazuje aktualną datę i czas w animacji flash.

Otwórz program Flash Designer i utwórz nowy dokument
Ustaw rozmiar ramki na 300 x 100 ("Ramka" > "Rozmiar Ramki"). Możesz ustawić kolor tła ramki, np. #FFFF87 ("Ramka" > "Kolor tła")
Stwórz 2 pola edycji narzędziem "Pole edycji" (powinny się one nazywać 'Edit1' i 'Edit2', jeśli jednak nie bedą, to należy zmienić ich nazwy w następujący sposób: podwójnie kliknij na polu i zmień nazwę w polu "Nazwa zmiennej")
Zmień czas ramki na 0.05 sekundy ("Ramka" > "Czas Ramki" i ustaw wartości "Czas": 0.05 i "Ilość ramek": 1)

Wybierz z menu "Ramka" > "ActionScript" i wklej poniższy kod:

// pobiera aktualną datę i czas
today_date = new Date();
 
// utworzenie tablic z nazwami miesięcy
var monthname = new Array();
monthname[0] = "stycznia";
monthname[1] = "lutego";
monthname[2] = "marca";
monthname[3] = "kwietnia";
monthname[4] = "maja";
monthname[5] = "czerwca";
monthname[6] = "lipca";
monthname[7] = "sierpnia";
monthname[8] = "wrze&#347;nia";
monthname[9] = "pa&#378;dziernika";
monthname[10] = "listopada";
monthname[11] = "grudnia";
 
// pobranie nazwy miesiąca
mon = monthname[today_date.getMonth()];

// pobranie aktualnej daty
d = today_date.getDate();

// pobranie aktualnego roku w formacie 4-cyfrowym
y = today_date.getFullYear();

// pobranie aktualnej daty
h = today_date.getHours();

// pobranie minut
min = today_date.getMinutes();

// pobranie sekund
s = today_date.getSeconds();

// ustawienie wyświetalnia godziny w formacie zawsze 2 cyfr
if (h<10) {h="0"+h;};

// analogicznie z sekundami - format zawsze wyświetlania 2 cyfr
if (s<10) {s="0"+s;};

// identycznie z minutami
if (min<10) {min="0"+min;}

// wpisanie aktualnego czasu do pola o nazwie Edit1
Edit1 = h + ":" + min + ":" + s;

// wpisanie aktualnej daty do pola o nazwie Edit2
Edit2 = d + " " + mon + " " + y;

Kliknij OK i wciśnij klawisz F9 aby zobaczyć działanie swojego zegarka pokazującego płynnie aktualny czas i datę. Wciśnij "Alt+F4" aby wyjść z podglądu.

Możesz potrzebować zmienić wielkość pól edycji gdy data lub czas nie mieszczą się w nich.

Aby dostosować pole edycji kliknij dwukrotnie na nim i odznacz opcję "Kontur". Zaznacz "Definicja układu" i ustaw wyrównanie na "Środek". Kliknij OK. Powtórz czynność dla pola Edit2.

Aby zmienić czcionkę pól edycji zaznacz je i wybierz: "Obiekt" > "Czcionka", np. odpowiednio 22 i 16, a aby zmienić kolor czcionki wybierz z menu "Obiekt" > "Kolor tekstu", np. kolor #FF8000.

Aby stworzyć plik wynikowy zegarka wybierz z menu "Plik" > "Eksport strony HTML".

Możesz pobrać gotowy projekt t1046.zip (2 KB)

Zegarek cyfrowy

Chcesz skomentować ten tutorial?