Делаем часы
Автор: Nikitar
Сайт: Rusforumz.com
Наверняка вы видели flash-часы, как цифровые, так и механические, а возможно вам даже предлагали сделать часы за кругленькую сумму. Молодцы, что отказались, потому что сейчас я вас научу как делать часы в flash'e. Сразу же научимся делать и цифровые часы, и механические. Как это будет выглядеть, вы можете увидеть внизу этой страницы.
1. Создайте новый документ в программе Macromedia Flash и задайте ему fps 25, а размеры произвольные.
2. Создаём текстовое поле с помощью соответствующего инструмента на панели инструментов. Растягиваем его примерно так чтобы поместилось 8 символов, в принципе можно и длинее на всякий случай. Тип поля меняем с Static Text(Статический текст) на Dynamic Text (Динамический текст) (смотрите скриншот, который над этим текстом). В поле var пишем clock. Выбираем шрифт для текстового поля. Это у нас будут цифровые часы. Например, я выбрал стандартный Arial. Но дело в том, что даже такой шрифт не является встроенным в Flash (всего 3 встроенных шрифта sans, serif, typewriter). Поэтому его надо встроить. Нажмите на кнопку Embed (Встроить) и выделите Numerals (Цифры) и Punctuation (Знаки препинания). Теперь наше текстовое поле может отображать цифры и знаки препинания, а для часов нам больше ничего и не надо.
3. Создаём новый слой, новый кадр и пишем в него следующий код
1.this.onEnterFrame=function(){
2.newDate=new Date();
3.hh=newDate.getHours();
4.small._rotation=hh*30
5.if(hh<10){
6. hh="0"+newDate.getHours();
7.}
8.mm=newDate.getMinutes();
9.big._rotation=mm*6
10.if(mm<10){
11. mm="0"+newDate.getMinutes();
12.}
13.ss=newDate.getSeconds();
14.if(ss<10){
15. ss="0"+newDate.getSeconds();
16.}
17.clock=hh+":"+mm+":"+ss;
18.}
Разберём вкратце код. Первая и последняя строчки - это функция onEnterFrame, которая позволяет обновлять код, заключённый в неё каждые 1/25 секунды. Так как наши часы должны обновляться, то мы и используем эту функцию. Далее. Вводи м новый объект - объект Даты, так как Дата требует объявления заранее. Затем мы устанавливаем значения переменным hh, mm, ss, которые соответствуют часам, минутам и секундам, взятым с компьютера пользователя. Но так как они даются в формате "1,2,3..20", то мы потом искусственно ставим ноль перед числом. 4-я и 9-я строчки нужны для механических часов, которые мы будем делать в следующем пункте. И наконец все переменные у нас складываются в часы в 17-й строчке, а между данными часов, минут и секунд, мы вставляем двоеточие, чтобы не путались цифры.
4. Теперь будем делать механические часы. Перед этим вы можете нажать ctrl+Enter и посмотреть на цифровые часы. Для механических часов создайте новый слой и нарисуйте на нём в первом кадре круг. Чтобы круг получился кругом, а не овалом зажмите Shift при рисовании круга. Это будет циферблат часов.
5. Создайте слой выше циферблата и нарисуйте большую стрелку часов, как это нарисовано на скриншоте выше. Затем выделите эту стрелку и нажмите F8 в открывшемся окне выберите такие параметры точки регистрации, которые показаны на скриншоте ниже. То есть самая нижняя левая точка. Это очень важно. И от этого зависит поворот стрелки в ваших часах.
6. Сделали мувиклип, в instance name (имя экземпляра) введите big. Теперь делаем маленькую стрелку. Повторяем 5-й пункт только для маленькой стрелки. И в instance name (имя экземпляра) вводим small. Поздравляю наши часы готовы. Вы спросите, а какой код двигает эти стрелки. Я отвечу. 4-я и 9-я строчка в основном коде. Разберём их.
Они оба отвечают за вращение стрелок, поэтому и используется параметр _rotation, но вот вопрос на сколько градусов вращать. А ответ мы находим в математике. Возьмём часы сначала. Сколько градусов обходит маленькая стрелка за 24 часа? Правильно 720. А теперь 720 разделите на 24, вот и получаем 30. Также и с минутами, только там надо 360 градусов разделить на 60, и получаем 6. Вот и весь секрет.
7. Всё должно работать. Жмём ctrl+Enter, и должно получиться нечто, что находится внизу этой страницы.
