«Механические» часы на ActionScript 3.0

Я уже писал урок про создание механических флеш-часиков на языке ActionScript 2.0, но сейчас расскажу, как такие часы можно создать на языке AS 3.0.

Для данного урока нам понадобится среда разработки Adobe Flash CS4 или Adobe Flash CS5. Скорее всего, урок можно будет повторить и в среде CS3, но я этого не проверял.

Итак, приступим...

Первым делом мы создаём новый проект под ActionScript 3.0 и задаём размеры 200 на 200 px.

Почти все элементы наших флеш-часиков будут создаваться динамически, то есть через код. Но исключение составит циферблат наших будущих часов, который нам предстоит нарисовать. Можно, конечно, воспользоваться инструментами из панели инструментов программы и самим нарисовать циферблат часов. Но я выбрал более простой путь и взял уже готовый рисунок размером 200 на 200 px:

механические флеш-часы

Вы можете поступить также и позаимствовать рисунок часов из векторного клипарта (найти подобный клипарт в сети проблем не составит).

Готовый циферблат мы должны превратить в MovieClip. Для этого выделяем рисунок и нажимаем F8 на клавиатуре. Появляется примерно такое окно настроек (для CS5):

окно создания MovieClip

Здесь надо указать имя ("ClockTablo"), обязательно поставить галочку у пункта "Экспортировать для ActionScript" и в поле ввода "Класс" прописать "ClockTablo". После этого вы можете удалить мувик-циферблат со сцены (он сохранится в библиотеке флеш-ролика, откуда мы и будем его в дальнейшем извлекать через код).

Туда же, в библиотеку, нам надо поместить звук для секундной стрелки. Когда вы поместите звуковой файл в библиотеку флеш-ролика, вам надо будет вызвать контекстное меню этого файла (наведите курсор мышки на звуковой файл и нажмите правую клавишу мышки). В контекстном меню выбираем пункт "Свойства". Открывается окошко настроек, похожее на то, с которым работали при создании мувика. В этом окошке ставим галочку "Экспортировать для ActionScript", а в поле ввода "Класс" вводим "SoundSec". На этом работа со звуком окончена.

Теперь будем писать код. Код будем писать на главной временной шкале.

Код ActionScript 3.0

/* далее расположены основные настройки, которые можно редактировать */ const diametr:int=200;// диаметр циферблата const COLH:int=0x333333;// цвет часовой стрелки const COLM:int=0x333333;// цвет минутной стрелки const COLS:int=0x333333;// цвет секундной стрелки const WH:int=30;// длина часовой стрелки const WM:int=35;// длина минутной стрелки const WS:int=35;// длина секундной стрелки const HH:int=4;// толщина часовой стрелки const HM:int=3;// толщина минутной стрелки const HS:int=1;// толщина секундной стрелки /* создаём табло для часов и добавляем на сцену */ var clockTablo:ClockTablo=new ClockTablo(); addChild(clockTablo); /* создаём часовую стрелку */ var clockH:Sprite=new Sprite(); clockTablo.addChild(clockH); clockH.graphics.lineStyle(HH,COLH,1); clockH.graphics.moveTo(0,0); clockH.graphics.lineTo(0,-(WH)); clockH.x=diametr/2; clockH.y=diametr/2; /* создаём минутную стрелку */ var clockM:Sprite=new Sprite(); clockTablo.addChild(clockM); clockM.graphics.lineStyle(HM,COLM,1); clockM.graphics.moveTo(0,0); clockM.graphics.lineTo(0,-(WM)); clockM.x=diametr/2; clockM.y=diametr/2; /* создаём секундную стрелку */ var clockS:Sprite=new Sprite(); clockTablo.addChild(clockS); clockS.graphics.lineStyle(HS,COLS,1); clockS.graphics.moveTo(0,0); clockS.graphics.lineTo(0,-(WS)); clockS.x=diametr/2; clockS.y=diametr/2; /* на центр табло накладываем маленький круг, который выполняет исключительно декоративную роль - закрывает стык стрелок */ var clockT:Sprite=new Sprite(); clockTablo.addChild(clockT); clockT.graphics.beginFill(COLH,1); clockT.graphics.drawCircle(0,0,HH); clockT.graphics.endFill(); clockT.x=diametr/2; clockT.y=diametr/2; /* создаём и запускаем таймер, который и будет управлять стрелками */ var tTimer:Timer=new Timer(1000,0); tTimer.addEventListener(TimerEvent.TIMER, onTimer); tTimer.start(); function onTimer(event:TimerEvent):void { tic(); } function tic() { /* создаём экземпляр класса Date */ var now:Date=new Date(); /* получаем текущее время в часах */ var h:Number=now.getHours(); /* получаем текущее время в минутах */ var m:Number=now.getMinutes(); /* получаем текущее время в секундах */ var s:Number=now.getSeconds(); /* рассчитываем поворот стрелок */ var hAngle:Number=(360*h/12)+(0.5*m); var mAngle:Number=360*m/60; var sAngle:Number=360*s/60; /* меняем поворот стрелок */ clockH.rotation=hAngle; clockM.rotation=mAngle; clockS.rotation=sAngle; /* далее идёт конструкция, которая озвучивает ход секундной стрелки и начало новой минуты */ var intervalFlag:Boolean=true; if (volumeClickFlag) { if (intervalFlag&&s==0) { intervalFlag=false; var sndSoundSec1:SoundSec=new SoundSec(); var trans1:SoundTransform=new SoundTransform(1,0); var sndSoundSecChannel1:SoundChannel=sndSoundSec1.play(0,1,trans1); } if (s>0) { intervalFlag=true; var sndSoundSec2:SoundSec=new SoundSec(); var trans2:SoundTransform=new SoundTransform(0.1,0); var sndSoundSecChannel2:SoundChannel=sndSoundSec2.play(0,1,trans2); } } } /* включаем и отключаем все звуки часов при клике по флешке */ var volumeClickFlag:Boolean=true; stage.addEventListener(MouseEvent.CLICK, volumeClick); function volumeClick(event:MouseEvent):void { if (volumeClickFlag) { volumeClickFlag=false; } else { volumeClickFlag=true; } }

Вот такие часики получились у меня:

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

Скачать исходник

Автор: admin

Дата добавления: 2011-07-13

Просмотров: 8571

Рейтинг поста: +12-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2015-01-03
Пожалуйста
Комментатор
Комментарий добавил(а): Татьяна
Дата добавления: 2015-01-03
Здравствуйте! Все получилось! Спасибо за подсказки.
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-12-26
Татьяна, ответил вам на почту.
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-12-25
> Вопрос: как лучше расположить в слоях? Первый слой часики, а второй фон или наоборот? В одном случае у меня получается на фоне двое часов.

Татьяна, откуда двое часов? Покажите исходник.
Комментатор
Комментарий добавил(а): Татьяна
Дата добавления: 2014-12-25
Спасибо! Часики получились, по размеру подобрала и место расположения определила. Вопрос: как лучше расположить в слоях? Первый слой часики, а второй фон или наоборот? В одном случае у меня получается на фоне двое часов. Конечно выбрала вариант с одними часами. Флешка работает. Спасибо!
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2014-12-25
> Здравствуйте! Подскажите, пожалуйста, как сместить часики по оси X, или Y ?

Часики размещаются в мувике clockTablo. Сместите clockTablo в нужные вам координаты:

clockTablo.x = 100;
clockTablo.y = 100;

> Можно ли уменьшить размер готовых часиков?

Скалируйте всё тот-же мувиклип clockTablo:

clockTablo.scaleX = 0.5;
clockTablo.scaleY = 0.5;
Комментатор
Комментарий добавил(а): Татьяна
Дата добавления: 2014-12-25
Здравствуйте! Подскажите, пожалуйста, как сместить часики по оси X, или Y ? Можно ли уменьшить размер готовых часиков? Спасибо!
Комментатор
Комментарий добавил(а): $vetL@n@
Дата добавления: 2012-05-20
Отличный урок!Спасибо-всё получилось с первого раза.Вы молодчина!
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика