Урок № 10.

Стрелочные часики

Сегодня мы сделаем стрелочные часики. Подобные элементы нередко используют на своих страницах и профессиональные web - дизайнеры.Динамические информационные элементы (даже если это всего лишь часы и особой нужды в них нет) оживляют (профессионалы иногда говорят: актуализируют) страницы.

1. Нарисуем циферблат.

1.1. Нарисуем круг, зададим его размеры (W:100;H:100) и координаты (X:100;Y:100) относительно левого верхнего края (далее все координаты даются относительно левого верхнего края).
1.2. Разметим циферблат. Посредством инструмента Text Tool сделаем надписи "12", "3", "6", "9" и расставим их, как показано на рисунке.
2. Нарисуем стрелки.
2.1. Нарисуем прямую, параллельную оси OY, и преобразуем её в символ Movie Clip с именем "Strelka Seconds".
2.2. Внутри символа выберем прямую, зададим её размеры (0;50) и координаты (0;-50). Выберем тип прямой Hairline и чёрный цвет.

2.3. Вернёмся обратно в главную сцену, выберем символ "Strelka Seconds" и зададим ему координаты (150;100). Определим также его скриптовое имя ssec (в поле Instance).
2.4. Займёмся минутной стрелкой. Откроем окно библиотеки Library и сделаем дубликат символа "Strelka Seconds" с именем "Strelka Minutes". Для этого нажмём правой кнопкой мыши на символ "Strelka
Seconds" и выберем Duplicate.
2.5. Внутри символа "Strelka Minutes" изменим стиль линии на точечный (Dots) и укажем размер "2".
2.6. Скопируем из библиотеки символ "Strelka Minutes", зададим ему скриптовое имя smin и координаты (150;100).
2.7. Теперь займёмся часовой стрелкой. Нарисуем чёрный квалрат со стилем линии контура Hairline и повернём его на 45 градусов. Нам требуется модифицировать контур квадрата.
Так же, как в CorelDraw, в Macromedia Flash контуры состоят из четырёх основных элементов.
2.9. Выберем мышкой нижнюю точку и удалим её, нажав кнопку  [Delete].
В результате у вас получится равнобедренный треугольник.
2.10. Выделим треугольник с помощью инструмента Arrow Tool и зададим размеры (5;50).
2.11. Преобразуем треугольник в символ Movie Clip с именем "Strelka Hours" и зададим ему скриптовое имя shour. Внутри символа зададим координаты для треугольника (-2,5;-50). Вернёмся в главную сцену и зададим координаты символа "Strelka Hours" (147,5;100).
3. Напишем скрипт движения стрелок.
3.1. В главной сцене создадим новый слой и разместим его выше всех.
3.2. Во второй кадр вставим 2ключевой кадр2.
3.3. Выберем первый кадр и откроем окно Action. Поместим в него следующий скрипт (внимание: строки скрипта пронумерованы лишь для удобства разбора!):


1.mydate = new Date ( ) ;
2.sec = mydate . getSeconds ( ) ;
3.min = mydate . getMinutes ( ) ;
4.hour = mydate . getHours ( ) ;
5.setProperty ("_root.ssec", _rotation, (360/60*sec));
6.setProperty ("_root.smin", _rotation, (360/60*min));
7.setProperty ("_root.shour",_rotation, (360/12*hour));


В первой строке создаётся объект с именем mydate типа Date. Функциями (методами) этого объекта являются getSeconds ( ),getMinutes ( ) и getHours ( ). В следующих трёх строках переменным sec,min и hour присваиваются значения текущих секунд, минут и часов соответственно. (Отмечу, что эти функции вернут значения, установленные на компьютере пользователя.) Затем я последовательно изменяю положение объектов - стрелок. Для этого используется функция setProperty. Она имеет три параметра: имя объекта, свойства которого изменяются, имя изменяемого свойства и новое значение этого свойства.
Со скриптом для первого кадра мы закончили.
3.4.Выберите второй кадр и откройте окно Actions. В нём надо написать короткий скрипт:
prevFame ( );
play ( );
В первой строке мы переходим к предыдущему (в данном случае - первому) кадру и снова проигрываем его.
Вот и всё. Часики готовы. Не забудьте сохранить свою работу.