Аналоговые часы во Flash Часть первая – программно-рисованные часы

Источник: http://flash.seovologda.ru

Аналоговые часы – очень занимательная штука… Особенно, если их хорошо вписать в тематику дизайна, тем более если они показывают реальное время пользователя.

Что нужно:

- Flash;

- Редактор ActionScript2;

- Руки;

- Желание разобраться;

- Мозк(опционально).

Разбить…Есть два варианта создания аналоговых часов. Первый – наиболее простой, если нужно сделать часы всего один раз. Второй – посложнее, зато его можно будет использовать очень часто. В данной статье мы рассмотрим первый вариант.

Итак, вариант номер 1. Много рисуем, немного программируем.

Для начала создаем новый проект. Затем рисуем циферблат, жмем «F8»(или меню «Modify-Convert to Symbol…»), чтобы создать MovieClip для удобства позиционирования. MovieClip можно и не создавать, если у вас циферблат уже позиционирован. В настройках, при создании MovieClip я указал имя – ciferblat, позиционирование – по центру, соответственно точка отсчета координат у меня теперь в центре. Затем, выделив его, на вкладке свойств указываю instance name – ciferblat_mc, так как приставка _mc говорит нам, да и самой программе о том что это MovieClip. (смотри рисунок 1).

циферблат с instance name

Рисунок 1. Циферблат от часов. Красным отмечено instance name.

Теперь беремся за стрелки. Собственно процедура создания – почти такая же, как и циферблата, вот только точку позиционирования надо брать с левого края, т.к. точка отсчета координат должна быть с краю для того, чтобы стрелки часов поворацивались относительно своего края, а не центра. Название часовой стрелки – hour_arrow, instance name – hour_arrow_mc. Соответственно, минутной – minutes_arrow, а секундной – seconds_arrow.

clock1.jpg

Рисунок 2. Создание Муви клипа с часовой стрелкой. Задание позиционирования.

Собственно, процесс рисования закончен. Начнем программировать.

Создаем дополнительный слой, называем его Actions. Открываем панель Actions и пишем туда следующий код:

  1. //Задаем центр циферблата, а также начала стрелок ровно по центру
  2.  
  3. ciferblat_mc._x=_root._x/2;
  4.  
  5. ciferblat_mc._y=_root._y/2;
  6.  
  7. hours_arrow_mc._x=_root._x/2;
  8.  
  9. hours_arrow_mc._y=_root._y/2;
  10.  
  11. minutes_arrow_mc._x=_root._x/2;
  12.  
  13. minutes_arrow_mc._y=_root._y/2;
  14.  
  15. seconds_arrow_mc._x=_root._x/2;
  16.  
  17. seconds_arrow_mc._y=_root._y/2;
  18.  
  19. /*Теперь создаем функцию - обработчик, которая будет отвечать за
  20.  
  21. получение времени и поворот стрелок*/
  22.  
  23. function time():Void{
  24.  
  25.     var date:Date=new Date();
  26.  
  27.     hours_arrow_mc._rotation=((date.getHours()-3)/12*360);
  28.  
  29.     minutes_arrow_mc._rotation=(date.getMinutes()-15)/60*360;
  30.  
  31.     seconds_arrow_mc._rotation=(date.getSeconds()-15)/60*360;
  32.  
  33. };
  34.  
  35. //Задаем интервал для работы этой функции
  36.  
  37. setInterval(this,"time",1000);
  38.  
  39. /*Вызываем эту функцию, можно и без вызова... Просто так пройдет
  40.  
  41. некоторый период времени прежде, чем она сработает*/
  42.  
  43. time();

Вот и все… эти простенькие часы готовы. Надеюсь, все понятно, если нет – жду на форуме=)



Опубликовал admin
24 Сен, Понедельник 2007г.



Программирование для чайников.