Уроки Flash: Создаем часы

Хотите украсить свою страничку или flash-ролик симпатичными часиками? Если ДА, то этот урок будет полезен для вас, а если НЕТ - все равно в будущем пригодиться. Итак, начнем.

Цифровые часы

Сейчас мы научимся делать простейшие цифровые часы, которые будут отображать часы, минуты и секунды.

Сначала создайте на главной сцене динамическое текстовое поле и назовите его "tpole".

Затем добавьте первому кадру такой скрипт:

time = new Date();
s = time.getSeconds();
m = time.getMinutes();
h = time.getHours();
if (s<10) {
s = "0"+s;
}
if (m<10) {
m = "0"+m;
}
if (h<10) {
h = "0"+h;
}
tpole = h+":"+m+":"+s;

В первой строчке мы создаем новый объект "time" с использованием конструктора new. После выполнения данной строки из нового объекта "time" можно вернуть значение года, месяца, даты, часов, минут, секунд и миллисекунд. В следующих строчках мы присваеваем переменым "s", "m" и "h" соответственно значение секунд, минут и часов с использованием метода "get" из недавно созданного нами оъекта "time". Далее с помощью оператора "if" мы задаем условие каждой переменной, что если её значение меньше 10, то перед ней должен ставиться нуль, иначе может получиться следующее: 10:25:9 или 9:2:4. А это не совсем красиво. Ну а в последней строчке мы выводим все полученные значения в динамическое текстовое поле "tpole", причем знак ":", чтобы разделять часы с минутами, а минуты с секундами, мы должны поставить в кавычках, как обычный текст.

Для обновления данных мы должны на 2-ом кадре нажать F5.

Все! Цифровые часы готовы. Видите, как легко! А сколько пользы они могут принести....

Циферблатные часы

А сейчас мы создадим часы, у которых будет часовая, минутная и секундная стрелочки, как это бывает у обычных и необычных циферблатных часов.

Нарисуйте окружность, которя будет являться циферблатом ваших часов. По желанию, можно поставить деления, чтобы было точно понятно какое время.

Затем создайте еще один слой (под слоями кнопка с плюсом). Нарисуйте в нем часовую, минутную и секундную стрелки. Конвертируйте каждую из них в мувиклип с помощью клавиша F8. В панели "Instance"[Ctrl+I] часовую стрелку назовите "hour", минутную - "min", а секундную - "sec". Расположите каждую стрелку вертикально вверх, так чтобы её низ находился в самом центре нарисованного циферблата.

Первому кадру любого слоя добавьте этот скрипт:

time = new Date();
s = time.getSeconds();
m = time.getMinutes();
h = time.getHours();
setProperty ("min", _rotation, m*6+s*0.1);
setProperty ("sec", _rotation, s*6);
setProperty ("hour", _rotation, h*30+m*0.5);

Первые четыре строчки я уже пояснил (см. цифровые часы). Давайте разберемся с тремя последнеми.
Третья снизу строчка, поворачивает вашу минутную стрелочку с помощью функции "_rotation" на градусы, значение которых вычисляется выражением "m*6+s*0.1", где m - минуты, а s - секунды. Вторая снизу строчка поворачивает вашу секундную стрелку на градусы, значение которых вычисляется выражением "s*6", где s - секунды. Ну а последняя строчка поворачивает вашу часовую стрелку на значение выражения "h*30+m*0.5".

Для обновления данных нажмите в верхнем и нижнем слое клавишу F5.

В создании циферблатных часов тоже ничего сложного нет, как и в создании цифровых.