Этапы выполнения работы

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

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

Надо заранее разработать дизайн часов, как они будут выглядеть. В нашем случае они будут не электронные, а со стрелками, иметь голубые тона (под дизайн сайта). Фон под тему вышивки с цветами. Стрелки будут иметь вид «палок» .

Flash-часы будут созданы в программе Flash Macromedia 8. Выбрав тип будущего документа: flash document, начинать приступать к работе.

Надо поменять стандартные свойства документа: сделать размер 200*200рх, оставить частоту кадра 12.

Рис. 2.1. Свойства документа

Далее разработать фон для часов, здесь поможет программа Adobe Photoshop, той же фирмы Adobe. Подобрав в интернете необходимый циферблат, изображённый на рисунке 2.2, сделать поля прозрачными, изменить контраст и подогнать по размеру для будущих часов в соответствии с техническим заданием.

Рис. 2.2. Циферблат часов

С подготовленным циферблатом приступить к созданию всех необходимых элементов на часах, и для каждого создать свой слой, такие как «Фон», «Стрелки», «Центр», «ActionScript» .

На соответствующий слой добавить элементы. На слое «Фон» вставляем наш подготовленный заранее циферблат. На слой «Стрелки» используя инструмент «линия» добавить три стрелки разных по величине и цвету, соответствующие секундам, минутам и часам. Нельзя стрелки накладывать друг на друга, так как элементы объединяются в один элемент «сращиваясь» между собой. На слой «Центр» с помощью инструмента «овал» нарисовать центральный круг, который будет закрывать группировку всех стрелок. При помощи этого центра работа будет выглядеть аккуратнее и красивее.

Дизайн будущих часов, готов (рис. 2.3).

Далее приступить к технической работе. Необходимо преобразовать нарисованные стрелки в символ: тип MovieClip (фрагмент фильма или клип), registration (регистрация) обязательно должна быть расположена внизу по центру, относительно этой точки будут двигаться элементы. Обязательно должны быть прописаны Instance Name (Имя экземпляра): arrow_sec (секундная), arrow_min (минутная), arrow_hour (часовая). Это необходимо, так как в дальнейшем ActionScript будет ссылаться на эти элементы.

Рис 2.3. Готовый дизайн часов

На шкале времени (Timeline) каждому слою добавить по кадру, то есть у каждого слоя должно быть 2 кадра. Скопировать все элементы на второй кадр.

Приступить к написанию Action Script и методов класса Date. Перейти на слой «ActionScript», созданный для этого, и прописать скрипт с соответствующими формулами (Приложение 1).

Рис. 2.4. ActionScript часов

Класс Date представляет сведения о дате и времени. Экземпляр класса Date представляет определенный момент времени, для которого можно запросить или изменить такие свойства как месяц, день, часы и секунды. Класс Date позволяет извлекать значения даты и времени или местного времени, которое определяется по настройке местного часового пояса в той операционной системе, где запущен Flash Player. Методы класса Date не являются статическими.

Чтобы воспользоваться классом Date и иметь возможность обращения к его методам, необходимо создать экземпляр Date с помощью оператора new в первом кадре слоя.

После создать переменные для секунд, минут и часов, присваивая соответствующий метод.

Метод getSeconds () — возвращает из объекта Date число секунд по местному времени (целое число от 0 до 59). Местное время определяется операционной системой, в которой запущена среда выполнения Flash. В моём примере создается новый объект Date now без параметров. Затем вызывается метод getSeconds (), который извлекает из объекта Date now.

Метод getMinutes () — возвращает из объекта Date число минут по местному времени (целое число от 0 до 59). Местное время определяется операционной системой, в которой запущена среда выполнения Flash.

Метод getHours () — Возвращает час (целое число от 0 до 23) дня, относящегося к объекту Date, по местному времени. Местное время определяется операционной системой, в которой запущена среда выполнения Flash.

В результате получены некоторые целые числа, которые взяты с местного времени.

Чтобы стрелки у часов повернулись на соответствующий угол, надо получить доступ к элементам. Для этого надо воспользоваться свойством _root и свойством _rotation.

Свойство _root представляет собой глобальное свойство, которое позволяет адресовать основной объект MovieClip из любой временной шкалы.

Свойство _rotation указывает поворот элемента относительно его исходной регистрации (в градусах). Значения от 0 до 180 задают поворот по часовой стрелке. Значения от 0 до -180 задают поворот против часовой стрелки. Значения за пределами этого диапазона добавляются или вычитаются из 360 для получения допустимого значения.

Исходя от свойства _rotation необходимо вычислить угол поворота стрелок. Для этого секунды и минуты надо умножить на 6, а вычислить угол часов сложнее, поэтому существует готовая схема, которой можно воспользоваться: (час + (минута / 60)) *30.

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

_root это обращение к основной монтажной линейке, gotoAndPlay (1) — переход и проигрывание с кадра, который указан, в нашем случае это первый.

В конце провести тестирование ролика, чтобы убедиться в его работоспособности.

В связи с перемещением элементов во время технических работ, необходимо их выровнять и расположить в положенном месте.

Часы готовы. Для внедрения их в сайт необходимо сохранить в формате swf.

Сохранить с расширением fla, а потом программа Macromedia Flash автоматически компилирует в понимаемый для Flash Player формат swf.

В процессе тестирования была выявлена следующая ошибка: часы во Flash не соответствовали времени, установленному в операционной системе. К исправлению этой ошибки были применены такие действия: была изменена формула часовой стрелки путём проб.

Так как сайт создан на CMS uCoz, надо загрузить готовые часы в файловый менеджер (рис. 2.5).

Рис. 2.5. Файловый менеджер сайта «My Biser»

Запустить «Конструктор» и в его режиме добавить новый блок для бокового контейнера. В этом блоке прописать html-код (Приложение 2).

Рис. 2.6. Html-код в блоке сайта «My Biser»

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

Wmode — это параметр, который отвечает за отображение flash на HTML-странице. Transparent — прозрачный фон. Этот режим отлично подходит, если плеер скруглен по краям и под плеером находится неоднородный фон.

Атрибут type сообщает браузеру о типе объекта, который указан. Браузер может использовать эту информацию, чтобы подготовить необходимые ресурсы для воспроизведения файла.

После этой процедуры сохранить «Конструктор» .

Всё, часы отображаются правильно. Работа закончена.

Рис. 2.7. Сайт «My Biser»