Работа с шаблонами в Adobe Flash. Обратный отсчет даты.

Воскресенье, 09 Июня 2013 г. 00:03 + в цитатник

Цитата сообщения novprospekt

Прочитать целиком В свой цитатник или сообщество!

Работа с шаблонами в Adobe Flash. Обратный отсчет даты.

Хотя программа Adobe Flash и является профессиональным инструментом веб программистов и дизайнеров, но содержащиеся в ней готовые шаблоны и проекты позволяют многим пользователям сети, с минимальными познаниями флеш приложений, создавать интерактивный контент для своих веб страничек. Таким очень полезным шаблоном является проект - шаблон "Обратный отсчет даты".
Рассмотрим подробно работу с этим шаблоном
Работаем в Adobe Flash CS6. Прочитать о программе и скачать ее можно здесь Adobe Flash CS6 Portable.

До начала работы с шаблоном я предлагаю вам создать рабочую папку проекта, можно прямо на рабочем столе. Назовите ее, например "Шаблон таймера". В эту папку, в процессе работы с шаблоном, периодически сохраняйте проект в формате *.fla, родном формате Adobe Flash(Файл - Сохранить как). Это очень удобно, потому что всегда можно вернутся к доработке проекта. Кроме того созданный в Adobe Flash и скомпилированный в swf - файл нельзя будет открыть в этой программе для редактирования.

Вот теперь, используя шаблон "Обратный отсчет даты", создадим таймер обратного отсчета до 4 часов утра 22 июня 2013 года.

Открываем программу и в списке проектов в разделе "Создать по шаблону" выбираем пункт "Образцы файлов".

Работа с шаблонами в Adobe Flash. Обратный отсчет даты1

В открывшемся диалоговом окне выбираем шаблон "Обратный отсчет даты".

Работа с шаблонами в Adobe Flash. Обратный отсчет даты2

На рабочем столе, после открытия проекта, вы увидите фон с двумя текстовыми полями - "Текст даты" и "Текст отсчета"
На временной шкале вы увидите 3 слоя
1. Фон 2. Текстовые поля 3. Действия.

Работа с шаблонами в Adobe Flash. Обратный отсчет даты3

Для начала рассмотрим код, который обеспечивает работу этого шаблона и отредактируем его в соответствии с необходимой нам датой, до которой будет производиться отсчет.
Для этого, выделяем на временной шкале третий слой "Действия" и откроем одноименное окно (вкладку) программы - "Действия" (F9)

Работа с шаблонами в Adobe Flash. Обратный отсчет даты4

В открывшемся окне "Действия" видим код для флеш ролика "Обратный отсчет даты".
Код частично скрыт.

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

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

Для того, чтобы получить доступ ко всему коду необходимо дважды щелкнуть по контенеру "var star..."

После этого действия код откроется полностью и можно будет ввести все необходимые изменения.

Особое внимание обратите на строку 9 кода. По умолчанию эта строчка выглядит следующим образом:

*var static_date:Date = new Date(countdownYear, countdownMonth-1, countdownDay, 0, 0, 0, 0);

Здесь - 0, 0, 0, 0 - это параметры времени час, минуты, секунды, миллисекунды.

Работа с шаблонами в Adobe Flash. Обратный отсчет даты6

Например, если вы захотите ввести значение до 5 часов утра 59 мин. 59 сек., то это будет выглядеть:

*var static_date:Date = new Date(countdownYear, countdownMonth-1, countdownDay, 5, 59, 59, 0);

Работа с шаблонами в Adobe Flash. Обратный отсчет даты7

В нашем же случае мы указываем до 4 часов утра и это будет выглядеть следующим образом:

*var static_date:Date = new Date(countdownYear, countdownMonth-1, countdownDay, 4, 0, 0, 0);

Работа с шаблонами в Adobe Flash. Обратный отсчет даты8

Следующим шагом редактируем строку 21
По умолчанию она выглядит так:

*countdown_txt.text = Math.floor(dayTill)+"days "+Math.floor(hoursTill)+"hrs "+Math.floor(minTill)+"min "+Math.floor(secTill)+"sec";

Работа с шаблонами в Adobe Flash. Обратный отсчет даты9

Заменяем название параметров времени. Английские названия меняем на русские.
Теперь строка 21 выглядит так:

*countdown_txt.text = Math.floor(dayTill)+"дней "+Math.floor(hoursTill)+"час "+Math.floor(minTill)+"мин "+Math.floor(secTill)+"сек";

Работа с шаблонами в Adobe Flash. Обратный отсчет даты10

Полный отредактированный код будет таким:

Работа с шаблонами в Adobe Flash. Обратный отсчет даты5

Или можете открыть текстовый файл кода

Вложение: 22_iyunya.txt

Все. Код отредактирован и мы переходим на вкладку "Временная шкала". На Временной шкале выделяем Слой 2 - "Текстовые поля", а на панели инструментов выбираем инструмент "Текст".

Работа с шаблонами в Adobe Flash. Обратный отсчет даты11

Работаем с первым текстовым полем. Здесь будет отображаться информация о дате, до которой будет вестись отсчет. Саму дату вводить не надо. Она имеется в коде и будет выводится автоматически при запуске флеш ролика. Инструментом текст выделите в первом текстовом поле надпись"Текст даты".
после этого обратимся к панели "Свойства".
В этой панели в разделе "Символ" вы сможете, при необходимости, поменять шрифт текста и его размер. Но самое главное!!! - вы должны обязательно внедрить шрифт в ролик. Без внедрения шрифта этот шаблон работать не будет.

Работа с шаблонами в Adobe Flash. Обратный отсчет даты12

Теперь кратко о настройки параметров внедрения шрифтов.
На панели "Свойства" нажимаем кнопочку "Внедрить" (Embed):

Работа с шаблонами в Adobe Flash. Обратный отсчет даты13

В появившемся окне, не вкладке параметры, выбираем диапазон символов, который нам нужен.
Встает вопрос - "А какой нужен?". Здесь есть два варианта:
1 Внедрить все элементы(глифы) выбранного шрифта.

Работа с шаблонами в Adobe Flash. Обратный отсчет даты14

2 Внедрить только те элементы шрифта, которые используются в проекте.
У нас в данном примере используются цифры от 0 до 9, используется пунктуация и в названии параметров времени используется кириллица (дней, час... и т.д.).
Соответственно, ставим галочки в чекбоксах только для данных элементов.

Работа с шаблонами в Adobe Flash. Обратный отсчет даты15

Работа с шаблонами в Adobe Flash. Обратный отсчет даты15

Нажимаем "ОК" и наш шрифт появится в библиотеке. Теперь, кстати, с текстом можно производить любую трансформацию (наклон, поворот, масштаб и т.д.).

Переходим ко второму текстовому полю - "Текст отсчета". Если будете использовать тот же шрифт, то все можно оставить как есть и ничего с этим текстовым полем не делать. Если будете в этом поле использовать другой шрифт, то его также надо будет внедрить(!!!).
После того как полностью отредактирован код и выбраны и внедрены шрифты можно произвести тестирование ролика. Нажимаем Ctrl+Enter и смотрим как работает наш шаблон.

Работа с шаблонами в Adobe Flash. Обратный отсчет даты.

Если все работает нормально, поработаем еще над нашим шаблоном и придадим ему более информативный и законченный вид.(хотя если вас устраивает такой вариант таймера можете на этом этапе
сохранить флеш ролик - Файл - Экспорт - Экспортировать ролик.
Также советую в созданную папку для проекта периодически сохранять файл проекта в формате *.fla. Файл - Сохранить как.
Продолжаем работать над завершением проекта.
Добавим еще один текстовый слой и введем на нем текст "До 4 часов утра" Для этого выше второго слоя "Текстовые поля" создаем новый слой и называем его "Дополнительный текст"
Создаем новый слой

Добавляем дополнительный текст и внедряем его.

Также выше слоя "Фон" можно создать несколько дополнительных слоев и разместить на них клипарт соответствующей тематики.
К текстам можно применить фильтры из арсенала программы - фаска, тень, свечение и т. д.

По окончанию всех действий над проектом протестировать его и если все устраивает сохранить как проект и как флеш файл.

Серия сообщений "флеш-информеры,часики":

Часть 1 - Ура, я научилась делать часики.
Часть 2 - Как правильно записать код флешки или видео в рамочку для кодов.
...
Часть 38 - Флешки для эпиграфов с календариком часиками и радио.
Часть 39 - Весенние флеш плееры.
Часть 40 - Работа с шаблонами в Adobe Flash. Обратный отсчет даты.

Серия сообщений "Программмы для создания флеш":

Часть 1 - Часики для страничек дневника.
Часть 2 - Часики для дневника "Арбузные"
...
Часть 4 - Adobe Flash CS6 Portable.
Часть 5 - Эффект колышущейся картинки с помощью маски. Урок для Sothink SWF Quicker.
Часть 6 - Работа с шаблонами в Adobe Flash. Обратный отсчет даты.

Серия сообщений "CS 6":
Часть 1 - Adobe Photoshop CS6 v13.0 Pre Release. Первое впечатление.
Часть 2 - Как установить настройки Фотошоп для его быстрой работы.
Часть 3 - Работа с шаблонами в Adobe Flash. Обратный отсчет даты.

Серия сообщений "Флешки1":
Часть 1 - До Нового года осталось...
Часть 2 - Флешка"Гадание Жозефины"
...
Часть 7 - Флеш-часики
Часть 8 - Флеш-часики
Часть 9 - Работа с шаблонами в Adobe Flash. Обратный отсчет даты.
Часть 10 - Как пользоваться ссылками на флешку...
Часть 11 - О, счастливчик... - флеш-игра
Часть 12 - Новый Год на рабочем столе