Аналоговые часы

Создаём аналоговые часы

На этом уроке я научу делать аналоговые часы (то есть часы со стрелками)
Их сделать совсем не сложно, что под силу любому начинающему.
Для начала нарисуйте в фотошопе циферблат часов (или можно найти в интернете),
размером примерно 400х400 пикселов. Можно также нарисовать фигурные стрелки.
Стрелки нужно сохранить на прозрачном фоне в формате PNG. Конечно стрелки
можно и нарисовать простыми линиями инструментом «Линия» в самой программе.
Когда это подготовите, откроем Flash и создадим новый документ на ActionScript 3.0
На первом слое поместим свой рисунок циферблата, затем создадим ещё слой для
стрелок (но лучше сделать три слоя для каждой стрелки отдельно) и слой для скрипта.
Должно выглядеть примерно так:

Заходим на слой "hour" и нарисуем часовую стрелку (или вставим готовое изображение),
выделим её и переведём в муви клип (или клавиша F8) и называем "hour"
Важно: при переводе всех стрелок в муви клип ставьте точку регистрации в центре
сверху (смотреть внимательно рисунок)

Не забудьте в панели свойств прописать instance name «hour»
Перейдём на слой "min" и нарисуем минутную стрелку,также переводим в муви клип,
давая instance name «min»
Перейдём на слой "sec" и нарисуем секундную стрелку. Её можно выделить другим
цветом в отличие от часовой и минутной. Снова переводим в муви клип, давая
instance name «sec»
Далее важный момент все стрелки поместите от центра вниз к цифре 6 (посмотрите
внимательно рисунок)

И последний шаг в создании часов: перейдите на слой для скрипта и откройте панель
скриптов (или клавиша F9) и вставьте следующий код:

import flash.utils.Timer;
import flash.events.TimerEvent;

var now: Date;
var ct:Timer = new Timer(1000);
ct.addEventListener(TimerEvent.TIMER, onTick);
ct.start();
function onTick (event:TimerEvent):void {
    now = new Date();

    var s:uint = now.getSeconds();
    var m:uint = now.getMinutes();
    var h:uint = now.getHours();

    sec.rotation = 180 + (s * 6);
    min.rotation = 180 + (m * 6);
    hour.rotation = 180 + (h * 30) + (m * .5);
}

Сохраните свою работу и протестируйте ролик.

Вот пример моих часов:

В другом примере секундная стрелка помещена на отдельный циферблат секундомера.

Поиск

Друзья сайта