[flash=420,465,//img1.liveinternet.ru/images/attach/c/9//4073/4073960_taymer_d_ng1.swf]

В уроке "Создаем таймер обратного отсчета в программе 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 страницы с таймером, вы увидите, что наш таймер снова принялся отсчитывать время до указанного события. но только уже в следующим году. И так из года в год.
Мы с вами сделали таймер в котором вся информация и сам таймер расположены горизонтально. Вы же можете располагать и временные категории таймера, и информационные тексты, как вам нужно. Ведь все текстовые поля мы сделали отдельно и независимыми друг от друга. Например, еще один классический способ расположения таймера - это когда временные категории расположены одна над другой (в столбик), а подписи расположены рядом с соответствующими им временными категориями.


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


[flash=600,500,//img0.liveinternet.ru/images/attach/c/9//4074/4074816_urok_vechnuyy_taymer1a.swf]

Серия сообщений "Уроки Flash":

уроки в разных флешпрограммах, авторские уроки flash

Часть 1 - Делаем элементарные часики.Начинаем учиться созданию flash.
Часть 2 - Как правильно записать код флешки или видео в рамочку для кодов.
...
Часть 16 - Программная анимация в Adobe Flash.
Часть 17 - Уроки Flash. Падающий снег. Классы AS3.
Часть 18 - Вечный таймер обратного отсчета в программе Sothink SWF Quicker. AS2 .
Часть 19 - Делаем «Вечный таймер обратного отсчета» в Adobe Flash. AS3
Часть 20 - Плеер кнопка из анимашки. Урок для Sothink SWF Quicker.
...
Часть 39 - Снежок «funkSnow». Урок для Adobe Flash CS6.
Часть 40 - Дополнение к уроку Снежок «funkSnow».
Часть 41 - Программное вращение 3-d во флеш. Action Script 3.

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

Часть 1 - Флешинформер "До Нового Года осталось..."
Часть 2 - Создаем флешки в программе Aleo Flash Intro Banner Maker.Часть первая.
...
Часть 9 - Флеш часики "Поздравительные" или С Новым Годом, здравствуйте !
Часть 10 - Флеш часики, информер и флеш плеер «Старое кафе».
Часть 11 - Вечный таймер обратного отсчета в программе Sothink SWF Quicker. AS2 .
Часть 12 - Приветствие с часиками и календарем.
Часть 13 - Флеш календарики с часиками в новогоднем дизайне.
...
Часть 20 - Снежок «funkSnow». Урок для Adobe Flash CS6.
Часть 21 - Дополнение к уроку Снежок «funkSnow».
Часть 22 - Программное вращение 3-d во флеш. Action Script 3.