Adobe Flash. Создание аркад, головоломок и других игр с помощью ActionScript - Гэри Розенцвейг

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

Исходный файл: Simpleclock.fla, Betterclock.fla

Одной из возможностей использования ActionScript является отображение даты и текущего времени на компьютере пользователя. Это осуществляется благодаря объекту Date. Этот объект может использоваться различными способами, простейшим из них является создание анимированных аналоговых часов.

Задача проекта

Время, запрограммированное в компьютере пользователя, должно отображаться в виде настенных или наручных часов. Часы должны иметь часовую, минутную и секундную стрелки. Лучше сделать часы необычными и в качестве стрелок использовать не простые линии, а какой-нибудь клип.

Подход

Прежде чем создавать часы, необходимо научиться работать с объектом Date. Именно он содержит текущее время, доступное для отображения.

Использование объекта Date

Объект Date можно представить как небольшой массив, содержащий некоторую информацию о текущем моменте времени. При создании объекта Date за основу берется текущее время, установленное на компьютере пользователя.

...

Внимание!

Не стоит полагаться на точность времени, установленного на компьютере пользователя. Вы удивитесь тому, сколько людей имеют неточные часы. Тем не менее я обычно не задумываясь использую эти часы, особенно для игр. Если неправильно указано время отправки электронного письма, это может привести к проблемам, для flash-ролика точность времени не так важна.

Объект Date включает следующие элементы: число, месяц, год, часы, минуты и секунды. Для вывода любого из них необходимо использовать соответствующую функцию: getDate(). Приводимая ниже программа обработки содержит все функции, которые используются для получения информации из объекта Date:

on (release) {

now = new Date();

trace("toString:" + now.toString());

trace("getDate:" + now.getDate());

trace("getDay:" + now.getDay());

trace("getFullYear:" + now.getFullYear());

trace("getHours:" + now.getHours());

trace("getMilliseconds:" + now.getMilliseconds());

trace("getMinutes:" + now.getMinutes());

trace("getMonth:" + now.getMonth());

trace(getSeconds:" + now.getSeconds());

trace("getTime:" + now.getTime());

trace("getTimezoneOffset:" + now.getTimezoneOffset());

trace("getYear:" + now.getYear());

trace("getUTCDate:" + now.getUTCDate());

trace("getUTCDay:" + now.getUTCDay());

trace("getUTCFullYear:" + now.getUTCFullYear());

trace("getUTCHours:" + now.getUTCHoursO);

trace("getUTCMilliseconds:" + now.getUTCMilliseconds());

trace("getUTCMinutes:" + now.getUTCMinutes());

trace("getUTCMonth:" + now.getUTCMonth());

trace("getUTCSeconds:" + now.getUTCSeconds());

}

Следует обратить внимание на несколько моментов. Все функции UTC подразумевают, что система пользователя настроена на соответствующую временную зону. Для того чтобы получить всеобщее (по Гринвичу) время, необходимо добавить или вычесть определенное количество часов. Результатом выполнения функции getTime будет количество миллисекунд с 1 января 1970 года. Функция day обозначает день недели и задается числом от 0 до 6. Месяц представляет собой число от 0 до 11. Число выбирается из диапазона от 1 до 31. Возможно, все это трудно для понимания и запоминания, однако данные функции аналогичным образом задаются и в других языках программирования, например C и JavaScript. Вот результат выполнения всех функций trace:

toString:Sat Oct 14 18:47:06 GMT-0600 2000

getDate:14

getDay:6

getFullYear:2000

getHours:18

getMilliseconds:0

getMinutes:44

getMonth:9

getSeconds:7

getTime:971570647000

getTimezoneOffset:360

getYear:100

getUTCDate:15

getUTCDay:0

getUTCFullYear:2000

getUTCHours:0

getUTCMilliseconds:0

getUTCMinutes:44

getUTCMonth:9

getUTCSeconds:7

Вы можете задать любой элемент объекта Date. Каждая функция, начинающаяся с get, имеет соответствующую ей функцию, начинающуюся с set. К примеру, для установки часа используется функция setHour(newHour). Имейте в виду, что это приведет к изменению только объекта Date, к которому вы обратились, а не системных часов пользователя. При создании нового объекта Date время в нем будет установлено в соответствии с системными часами.

Подготовка ролика

При помощи объекта Date можно создать интересные часы. Переводя значения часов, минут и секунд текущего времени в градусы, вы можете задать параметр _rotation трех различных клипов таким образом, чтобы они двигались, как стрелки часов.

На рис. 6.10 показан внешний вид таких часов. Короткая рука обозначает часовую, длинная – минутную, а хвост – секундную стрелки.

Рисунок 6.10 . Часы показывают 9 часов 20 минут 35 секунд

На рисунке не видно, что руки (и хвост) часов двигаются подобно стрелкам настоящих часов. Эти действия выполняются в три этапа. Вначале полученное значение текущего времени помещается в переменные hour, minute и second. Затем значения этих переменных преобразуются в значения углов. Далее полученные значения используются для задания параметра _rotation трех клипов, представляющих руки и хвост.

Создание кода

Код, который выполняет все вышеописанные действия, – это сценарий onClipEvent (enterFrame), помещаемый в клип. Код можно посмотреть в файле Simpleclock.fla на Web-сайте.

onClipEvent (enterFrame) {

// Узнаем текущее время.

now = new Date();

hour = now.getHours();

minute = now.getMinutes();

second = now.getSeconds();

// Конвертируем в значение для 12-часового дня.

if (hour > 12) {

hour -= 12;

}

// Рассчитываем углы для поворота стрелок.

hourAngle = 360*hour/12;

minuteAngle = 360*minute/60

secondAngle = 360*second/60;

// Поворачиваем сами ролики.

_root["hour hand"]._rotation = hourAngle;

_root[ "minute hand"]._rotation = minuteAngle;

_root[ "second hand"]._rotation = secondAngle;

}

Чтобы определить значение углов, значение времени делится на наибольшее возможное значение и умножается на 360. Например, значение минут делится на 60, в результате чего получается значение между 0 и 1, а затем умножается на 360, что дает значение угла между 0° и 360°. Чтобы стрелка была 12-, а не 24-часовой, из значения часов вычитается 12.

Результатом каждой операции является угол от 0° до 360°. 0° обозначает 0 (или 12) часов, 0 минут, 0 секунд. В данном случае изображения всех трех клипов, представляющих стрелки часов, будут указывать вверх (рис. 6.11). Затем, после задания параметра _rotation, стрелки будут указывать на соответствующее место.

Рисунок 6.11. Руки и хвост (то есть стрелки часов), направленные четко вверх, соответствуют 12:00:00. Когда вы зададите параметр _ rotation, стрелки будут указывать в соответствующем направлении

Проблема состоит в том, что устройство будет работать не совсем как обычные часы. Например, на рис. 6.10 часовая стрелка указывает на 9 часов. Она будет продолжать указывать на отметку 9, даже когда будет 9:59, а затем в 10:00 сразу передвинется на отметку 10. В настоящих часах часовая стрелка будет в течение часа постепенно передвигаться, пока не достигнет отметки 10 в 10 часов. Для того чтобы получить такой результат, необходимо немного увеличивать угол часовой стрелки каждую минуту и угол минутной стрелки каждую секунду. Приведем соответствующий код:

// Задаем угол поворота для минутной и секундной стрелки.

hourAngle += minute/2;

minuteAngle += second/10;

Минута делится на 2, что дает вам дополнительно 30° для поворота часовой стрелки каждый час. Секунда делится на 10, благодаря чему вы получаете 6 дополнительных градусов для промежуточных поворотов минутной стрелки. Выполним вычисления: в 9:59 угол будет составлять 9*30 + 59/2 = 270 + 29.5 = 299.5. В 10:00 угол составит 10*30 + 0/2 = = 300 + 0 = 300.

Подобным образом, в 20 минут 59 секунд угол минутной стрелки составит 20*6 + 59/10 = 120 + 5.9 = 125.9. Еще через секунду угол будет равен 21*6 + 0/10 = 126 + 0 = 126.

На рис. 6.12 показаны часы, в код которых добавлена эта часть кода. Сравнив его с рис. 6.10, вы увидите, что положение часовой и минутной стрелок стало более точным.

Рисунок 6.12. В результате изменения кода часовая и минутная стрелки часов стали указывать время более точно

Файл Betterclock.fla содержит дополнительный код, сглаживающий движение стрелок. Обратите внимание, что с изменением времени минутная стрелка понемногу передвигается.

Другие возможности

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

Еще одной интересной возможностью будет создание часов, стрелки которых двигаются в обратном направлении. Такие часы можно иногда встретить в магазинах и ресторанах. Вы также можете добавить звук, который будет воспроизводиться каждый час или каждые 15 минут.

Лавовая лампа

Исходный файл: Lavalamp.fla

Этот ролик воссоздает классическую лавовую лампу. На компьютерах и в сети можно увидеть множество подобных объектов. Многие из них представляют собой простые Flash-анимации, создаваемые без написания кода.

Но в этом случае после окончания анимации узор повторяется, а интереснее сделать такую лавовую лампу, узор которой в каждый момент был бы разным.

Задача проекта

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

Подход

Для создания лавовой лампы, работающей по принципу случайности (рис. 6.13), необходимо использовать ActionScript. Вначале необходимо создать 20 клипов, представляющих пузырьки лавовой лампы. Затем надо задать постоянный вызов функции, перемещающей пузырьки вверх и вниз по экрану.