-Поиск по дневнику

Поиск сообщений в ol7ua

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 26.05.2014
Записей: 17089
Комментариев: 639
Написано: 17745


ВЕЧНЫЙ ТАЙМЕР ОБРАТНОГО ОТСЧЕТА В ПРОГРАММЕ SOTHINK SWF QUICKER. AS2 .

Понедельник, 26 Октября 2015 г. 21:45 + в цитатник
Цитата сообщения novprospekt Вечный таймер обратного отсчета в программе Sothink SWF Quicker. AS2 .







В уроке "Создаем таймер обратного отсчета в программе Sothink SWF Quicker"

мы с вами учились делать самый простой таймер обратного отсчета до определенной даты. Таймер вёл обратный отсчет дней, часов, минут и когда наступало время X(00 00 00 00), то таймер останавливался и выводил надпись поздравления или оповещения о наступившем событии. Вся организация работы такого таймера регулировалась скриптом. Нам же надо было создать только два текстовых поля - одно информационное (статическим текстом), для того, чтобы видно было до какого события ведется отсчет и, второе текстовое поле - (динамическое) - сам таймер, а по совместительству строка вывода конечного текста.
Теперь мы усложним наш таймер и сделаем его "вечным".
Суть этого в том, что есть праздники и события, которые наступают ежегодно в одно и то же время. И нам хотелось бы, чтобы по окончании отсчета с наступлением события в текущем году наш таймер продолжил обратный отсчет времени по новой, до наступления этого же события в следующем году и так далее. Вот такой таймер мы и будем создавать. Он будет вести обратный отсчет до заданной даты, затем в момент наступления события будет выведен текст поздравления, а затем после перезагрузки страницы отсчет пойдет снова.
Основные моменты теории о статическом и динамическом текстах смотрим в уроке на который я ссылаюсь выше. А мы продолжим делать таймер с новыми возможностями.
Открываем программу Sothink SWF Quicker. Устанавливаем размер рабочего поля, исходя и размеров картинки- фона. В моем случае размер картинки 580x480 пикс. и размер рабочего поля я устанавливаю 600x500 пикс.
Вечный таймер обратного отсчета.

На самый первый, и пока единственный, слой импортируем фон-картинку. Файл - Импорт
Вечный таймер обратного отсчета.

Переименовываем слой, назвав его "фон"
Вечный таймер обратного отсчета.


Выравниваем картинку - фон по центру. В моем случае размеры Рабочего поля 600x500 пикс. и, следовательно, для того, чтобы картинку поместить в центр, мы эту картинку выделяем, щелкнув по ней инструментом "Выбор"(черная стрелка), а в панели "Трансформация" выставляем параметры для координат X и Y - X=300; Y=250
Вечный таймер обратного отсчета.

Теперь нам надо создать дополнительные слои на которых будут располагаться таймер, скрипт, дополнительная информация и слой для текста, который будет выведен по окончании.
Я создала следующие слои (сверху вниз)
1 Слой "Скрипт". На этом слое будет скрипт для нашего таймера.
2. Слой "Текст информация". На этом слое будет располагаться статический текст с информацией о событии до которого ведется отсчет. В нашем случае "До Нового Года..."
3. Слой "Таймер" на котором будут располагаться динамические текстовые поля для таймера обратного отсчета.
4.Слой "время" тоже является информационным и содержит статический текст, который будет пояснять по каким категориям времени ведется отсчет, то есть это надписи под (вверху или рядом) таймером - "дней", "часов", "минут", "секунд".
5. Слой "Текст в X". На этом слое по окончании отсчета до заданного события будет выведен текст, который будет задан в скрипте. Например, "С Новым Годом!".
6. Слой "фон", который мы уже создали.
Со Слоем "фон" мы больше работать не будем и поэтому его можно закрепить, для того чтобы не сместить его непроизвольно и, чтобы он не мешал нам работать с остальными слоями. Для того, чтобы закрепить слой, щелкните в клетку рядом с глазком этого слоя и в этой клетке появится иконка замочка. Чтобы слой при необходимости разблокировать и замочек снять надо щелкнуть по иконке замочка и иконка исчезнет, а слой снова будет доступен для редактирования.
Вечный таймер обратного отсчета.

Итого нам надо создать еще пять дополнительных слоев и переименовать их.
Вечный таймер обратного отсчета.

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

Идем во вкладку "Свойства". Текст на слое "Текст информация" должен быть выделен инструментом "Выбор" (черная стрелочка). Во вкладке "Свойства" выставляем все параметры для текста - шрифт, размер шрифта, выравнивание. Тип текста должен быть "Статический". Следите за тем, чтобы при изменении параметров шрифта ваш текст умещался в созданном текстовом поле. При необходимости увеличьте размеры текстового поля или уменьшите размеры шрифта. Шрифт для Статического текста встраивать не надо.
Вечный таймер обратного отсчета.

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

Когда информационный текст полностью готов, то слой "Текст информация" также можно закрепить.
Выделяем слой "таймер" и приступаем к созданию текстовых полей для таймера обратного отсчета. Напоминаю что для таймера тип текста должен быть "Динамический". Для каждой категории времени мы создадим отдельное текстовое поле и, так как наш таймер показывает количество дней, часов , минут и секунд до наступления события, нам необходимо создать 4 динамических текстовых поля. Как правило, наибольшую трудность доставляет создание нескольких текстовых полей на одном слое. Причем эти текстовые поля должны быть правильно выравнены.
Учитывая все это, предлагаю воспользоваться "Линейками" и "Направляющими". Во вкладке меню "Вид" проставьте галочки около соответствующих инструментов.
Вечный таймер обратного отсчета.

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

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

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

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

После того как текстовое поле "дней" создано, щелкните по нему инструментом "Выбор"(черная стрелка) и во вкладке "Свойства" в графе "Имя" введите имя для этого текстового поля
days
Проверьте, что тип текста указан как "Динамичный" и затем встройте шрифт. Процедура встраивания шрифта обязательна и должна быть выполнена для каждого созданного текстового поля всех категорий времени.
Нажимаем кнопку встроить шрифт и, в открывшемся диалоговом окне помечаем галочками все чекбоксы, а также нажимаем кнопку "Вставить используемый". Жмем OK.
Вечный таймер обратного отсчета.

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

Используя для ориентира созданную разметку из направляющих, создаем остальные текстовые поля.
Инструментом "Текст" создаем второе текстовое поле - "часов". Вводим в созданное текстовое поле двузначное число, например - "00". Щелкаем по нему инструментом "Выбор". Во вкладке "Свойства", в графе "Имя" вписываем
hours
Встраиваем шрифт.
Вечный таймер обратного отсчета.

Снова выбираем инструмент "Текст". По направляющим растягиваем третье текстовое поле - "минут". Вводим в созданное текстовое поле двузначное число, например - "00". Щелкаем по нему инструментом "Выбор". Во вкладке "Свойства", в графе "Имя" вписываем
minutes
Встраиваем шрифт.
Вечный таймер обратного отсчета.

Опять выбираем инструмент "Текст". По направляющим растягиваем четвертое текстовое поле - "секунд". Вводим в созданное текстовое поле двузначное число, например - "00". Щелкаем по нему инструментом "Выбор". Во вкладке "Свойства", в графе "Имя" вписываем
seconds
Встраиваем шрифт.
Вечный таймер обратного отсчета.

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

Созданное текстовое поле разделитель с ":" нам понадобиться еще дважды и поэтому его надо размножить.
Щелкаем по текстовому полю ":" инструментом "Выбор" (черная стрелка) и после того, как появиться синий квадратик выделения, щелкните правой кнопкой мыши внутри этого выделения и в выпавшем контекстном меню выберите пункт "Копировать".
Вечный таймер обратного отсчета.

Теперь вне рабочего поля щелкните правой кнопкой мыши и в контекстном меню выберите пункт "Вставить на месте".
Вечный таймер обратного отсчета.

Над выделенным текстовым полем теперь появилась копия текста с ":". Щелкните по выделению, чтобы разделить копии. Снова щелкните по верхнему текстовому полю с ":", выделив его, а затем стрелкой "вправо" с компьютера поместите разделитель ":" между динамическими текстовыми полями "минут" и "секунд". Снова щелкните по этому выделенному разделителю и создайте еще одну копию, и еще раз щелкните вне рабочего поля правой кнопкой мыши. Выполните команду "Вставить на месте". Стрелкой "влево" с компьютера поместите вновь созданный разделитель ":" между динамическими текстовыми полями "часов" и "минут".
Все тексты для нашего таймера готовы и можно приступить к оформлению следующего слоя. Это слой "время". Для этого слой "время" должен быть выделен.
Слой этот информационный и надписи, которые будут расположены на нем комментируют временные категории таймера. И поэтому нам необходимо будет создать четыре статических текста - "дней", "часов", "минут", "секунд".
Во вкладке "Свойства" для данных текстов в параметрах следует указать тип текста "Статический", а размер шрифта выбрать значительно меньше чем для самого таймера. Встраивать эти шрифты не надо.
Вечный таймер обратного отсчета.

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

Вечный таймер обратного отсчета.

Осталось оформить последний слой. Это слой "Текст в X". На этом слое по окончании времени отсчета до заданной даты должен быть выведен текст поздравления или извещения о наступлении события. Для вывода текста достаточно создать динамическое текстовое поле по размерам такое, чтобы в него вместился текст указанный в скрипте. Сам текст в принципе вписывать в текстовое поле не надо. Но, чтобы быть полностью уверенным в том что весь текст уместится в созданное динамическое текстовое поле и для подбора необходимых параметров шрифта, предлагаю текст все таки ввести, установить все его параметры во вкладке "Свойства", а потом выделить в текстовом поле и удалить. Заметьте, удалить необходимо не текстовое поле, а только текст в нем. Это текстовое поле остается пустым.
Вот приблизительные параметры вкладки "Свойства" для этого динамического текстового поля". И так, тип текста обязательно должен быть "Динамический" и шрифт обязательно встроен. Остальные параметры шрифта выбираем исходя из дизайна всей работы. В графе "Имя" должно быть вписано
timetxt
В поле ввода "var"
time_txt
Эти два поля ввода становятся доступными тогда, когда текстовое поле выделено инструментом "Выбор".
Вечный таймер обратного отсчета.

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

code:

myDate = new Date();
a = myDate.getFullYear() + 1;
getDate = new Date(a, 0, 1);
getDateMsec = getDate.getTime();
timer = function ()
{
nowDate = new Date();
nowDateMsec = nowDate.getTime();
var p4 = getDateMsec - nowDateMsec;
if (p4 <= 0)
{
timetxt.text = "С Новым Годом!";
clearInterval(interval);
return;
} // end if
var sR = Math.floor(p4 / 1000);
var mR = Math.floor(sR / 60);
var hR = Math.floor(mR / 60);
var dR = Math.floor(hR / 24);
sR = sR % 60;
mR = mR % 60;
hR = hR % 24;
if (sR < 10)
{
sR = "0" + sR;
} // end if
if (mR < 10)
{
mR = "0" + mR;
} // end if
if (hR < 10)
{
hR = "0" + hR;
} // end if
if (dR < 10)
{
dR = "0" + dR;
} // end if
days.text = dR;
hours.text = hR;
minutes.text = mR;
seconds.text = sR;
};
interval = setInterval(timer, 1000);
timer();



Смотреть Скрипт для "Вечного" таймера обратного отсчета

В третьей строчке скрипта - getDate = new Date(a, 0, 1); вводим дату до которой будет идти отсчет. Так как наш таймер "вечный", то, если вы создаете таймер в текущем году с датой на следующий год, как например в нашем случае, то год вводить не надо. Год заменяет функция "а", которая к текущему году всегда добавляет +1, за счет этого таймер и остается вечным. Если же вы делаете таймер с датой текущего года, то вместо "а" вводим цифру текущего года (например, 2013, 11, 25 - дата католического рождества в 2013), но тогда уже таймер "Вечным" не будет.
Не забываем, что месяцы в кодировке скрипта начинаются с "0"! - 0 - январь...11 - декабрь.
Например, дата "до 1 января 2014 года осталось" будет выглядеть следующим образом: (a, 0, 1). Дата до 23 февраля 2014 соответственно - (a, 1, 23).
В двенадцатой строчке скрипта вводим текст поздравления или оповещения. В нашем примере это - "С Новым Годом!"
Вечный таймер обратного отсчета.

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

Нажимаем ОК и кнопочку "Предварительный просмотр" на панели меню. Видим результат.
Вечный таймер обратного отсчета.

Если все устраивает, сохраняем полученную флешку в формате .swf. Файл - Экспорт - Экспорт фильма.


А так будет выглядеть ваш таймер, когда и наступит событие, в нашем случае Новый год.
Вечный таймер обратного отсчета.

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

Можно придумать и более креативное расположение текстовых полей таймера. Например, по диагонали








Серия сообщений "Флешки Новогодние":

Часть 1 - Флешинформер "До Нового Года осталось..."
Часть 2 - Создаем флешки в программе Aleo Flash Intro Banner Maker.Часть первая.
...
Часть 9 - Флеш часики "Поздравительные" или С Новым Годом, здравствуйте !
Часть 10 - Флеш часики, информер и флеш плеер «Старое кафе».
Часть 11 - Вечный таймер обратного отсчета в программе Sothink SWF Quicker. AS2 .
Часть 12 - Приветствие с часиками и календарем.
Часть 13 - Флеш календарики с часиками в новогоднем дизайне.
...
Часть 25 - Флеш поздравления с Новым Годом.
Часть 26 - Флеш открытка «2015».
Часть 27 - С Новым Годом!


Рубрики:  Новый год
обучение
Метки:  

 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку