Будем делать "Вечный таймер обратного отсчета" в Adobe Flash в среде программирования ActionScript3.
Так как меня просили также рассказать как загружать готовую gif - анимацию в Adobe Flash, то для фона таймера я выбрала анимированную картинку.
Итак открываем программу Adobe Flash и создаем документ, в нашем случае это файл ActionScript3.
Файл - Создать.
[700x]

Далее, для нашей загружаемой анимационной картинки создаем своеобразный контейнер - фрагмент ролика (мувиклип).
Вставка - Создать символ (Ctrl+F8).
[574x278]

В открывшемся диалоговом окне указываем имя символа и задаем тип символа. Это обязательно должен быть "Фрагмент ролика"
[436x191]


После того как мы нажмем "Ок", у нас откроется окно редактирования символа, я назвала этот символ "анимашка".
Находясь в окне редактирования ролика "анимашка" вызываем команду
Файл -Импорт - Импортировать в рабочую область.
Указываем путь к анимашке на компьютере и открываем ее.
После того как все кадры загрузятся, то мы сможем увидеть их на Временной шкале, а в Библиотеки программы будет находится наш созданный фрагмент ролика "анимашка", все кадры нашей анимашки отдельно картинками и картинка gif полностью.
Можно просмотреть загруженную анимашку внутри ролика "анимашка", нажав на кнопку воспроизведения под Временной шкалой или вручную, сдвигая ползунок шкалы покадрово.
[700x]

Просматривать загруженную анимацию обязательно, так как она иногда загружается не совсем корректно. Вот и в моем случае, последние пять кадров анимации загрузились с дефектами, и поэтому я их выделяю и удаляю. С зажатой клавишей Shift щелкаю по первому из кадров, из числа тех, которые хочу удалить и затем по последнему из этого же числа. Когда бракованные кадры выделены, щелкаем внутри выделения правой кнопкой мыши и, вызвав контекстное меню, нажимаем команду "Удалить кадры" в верхней части списка команд этого контекстного меню.
[700x]

После того как анимация отредактирована, переключаемся на вкладку основного рабочего поля Монтажный кадр 1.
[761x371]

В открывшемся рабочем поле "Монтажный кадр 1" из Библиотеки на него инструментом "Стрелка" (Черная стрелка на панели Инструменты) перетаскиваем наш фрагмент ролика "анимашка". Ролик выравниваем, если это надо по центру рабочего поля или так как необходимо по дизайну. Если надо, то переходим на инструмент "Свободное преобразование" и трансформируем наш ролик "анимашка". Так же если необходимо уменьшаем или увеличиваем размеры рабочего поля и опять же выравниваем относительно него наш ролик.
[700x]

[684x396]

Анимация в качестве фона добавлена в рабочий проект, расположена согласно сюжета будущего флеш ролика и можно тестировать как все это будет смотреться в готовой флешке. Нажимаем сочетание клавиш Ctrl+Enter и просматриваем заготовку фона для будущего флеш ролика. Если все устраивает, то сохраните проект в формате FLA.
Файл - Сохранить как
В дальнейшем периодически нажимайте Сохранить для постоянного обновления проекта (файла FLA).
У меня к моей картинке - фону добавлены еще слой с маской и слой с декором. Я эти слои закрываю на замочек и пока к ним больше не обращаюсь.
С картинкой для фона закончили. Теперь будем создавать сам таймер.
Таймер будет действовать аналогично "вечному" таймеру, создание которого очень подробно описано здесь
Вечный таймер обратного отсчета в программе Sothink SWF Quicker. AS2
Поэтому, если что-то непонятно, то внимательно читаем этот урок.
Напомню только сценарий по которому будет работать наш таймер.
Таймер отсчитывает в обратном порядке количество дней, часов, минут и секунд до заданного нами в скрипте события. В момент окончания работы таймера, то есть в "000" дней. "00" часов, "00" минут, "00" секунд, наш таймер обнулится и будет выведен текст, который введен нами в скрипте. После перезагрузки страницы таймер вновь начнет отсчет до указанной в скрипте даты, но прибавит год.
Итак, поскольку у меня загруженная картинка - фон романтического характера, то я буду делать таймер до 14 февраля - Дня всех влюбленных.
Для организации работы таймера и его информационной наглядности создадим ещё 4 слоя (кроме фона). Смотрим снизу вверх.
1.Слой "время" на котором расположим поясняющие надписи для категорий времени - дней, часов, минут, секунд.
2. Слой "таймер" на котором будут располагаться текстовые поля таймера, текстовое поле надписи, которая появится в момент наступления события, текстовые поля с разделителями.
3. Слой "информация" на котором будет располагаться информация о событии до которого ведется отсчет.
4. Слой "скрипт" на котором будет располагаться собственно скрипт для таймера AS3.
Далее смотрим поясняющие картинки. Картинки даны для двух проектов - для "До Дня Всех Влюбленных..." и для "До Нового Года..." Результат выполнения этих проектов можно посмотреть в конце урока.
[700x]


Выделяем слой "таймер", выбираем инструмент текст и во вкладке "Свойства" настраиваем параметры для шрифта которым будем создавать текстовые поля таймера. Я использую шрифт Lobster. Шрифт Lobster можно скачать по ссылке на архив с материалами к уроку в конце данного сообщения.
[329x500]


После того как параметры шрифта настроены, создаем поочередно на слое "таймер" четыре текстовых поля для отсчета времени.
Сначала создадим текстовое поле для категории времени - "дней". Для этого инструментом Текст растягиваем текстовое поле по размерам шрифта для трехзначного числа и вводим любые три цифры. После того как мы создадим это текстовое поле во вкладке "Свойства" становится доступным для редактирования поле "Назначить имя экземпляру". В это поле мы вводим для переменной "дней" имя -
countD
[309x275]


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

[686x550]


Текстовое поле для отсчета часов - countH;

[303x283]


Текстовое поле для отсчета минут - countM;

[279x187]


Текстовое поле для отсчета секунд - countS;

[700x]


Между полями отсчета создаем текстовые поля для разделителей (в моем примере это двоеточие, но можно задействовать и другие символы). На слое "таймер" создаем текстовое поле, вводим туда с клавиатуры двоеточие и выделяем это текстовое поле инструментом Стрелка. Далее, зажав клавиши Ctrl+Alt, вытягиваем из этого выделения ещё две копии текстовых полей с двоеточием.
[699x556]

Созданные текстовые поля выравниваем или располагаем так как вам необходимо .
[643x256]


На слое "таймер", по сценарию, у нас также находится текстовое поле в котором в момент наступления события (т.е. когда таймер покажет 000 00 00 000) будет выведена надпись с приветствием, поздравлением или какой-то другой информацией.
Нам также это поле надо создать и присвоить этому текстовому полю регистрационное имя.
Во вкладке "Свойства" настраиваем параметры шрифта для этого поля. Шрифт берем немного меньше чем для текстовых полей таймера.
[330x570]


Я располагаю это поле ниже текстовых полей таймера и ввожу в это поле надпись "Я тебя люблю" Вписываем регистрационное имя для этого поля
timetxt
[700x429]


После этого введенный текст необходимо удалить.
[700x650]


Теперь необходимо все созданные на слое "таймер" текстовые поля объединить выделением. Для этого, поочередно щелкаем инструментом Стрелка по каждому текстовому полю, присоединяя их к друг другу, один за одним.
[700x]


После того как будет создано общее выделение, идем в меню Модификация - Преобразовать в символ(F8)
Символу присваиваем имя
countdoun
[700x]


Во вкладке "Свойства" назначаем имя экземпляру этого символа
с_ countdoun
[700x]


[699x556]

К созданному символу фрагмента ролика countdoun можно также применить какой либо из фильтров. В моем случае это эффект "Тень".

[699x556]


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

Выполняем подписи и переходим на слой "информация". Здесь также Статическим типом текста выполняем надпись - информацию о том до какого события ведется отсчет.
[775x663]

[показать]

Переходим на слой "скрипт" и открываем вкладку "Действия"
Вводим скопированный скрипт и нажимаем сочетание клавиш Ctrl+Enter для тестирования флеш ролика.

[699x556]

code:


var now:Date = new Date(); // поточная дата

var endDate:Date = new Date(now.getFullYear(),1,14); // дата события 14 февраля

var countdownTimer:Timer = new Timer(1000); // таймер



countdownTimer.addEventListener(TimerEvent.TIMER, updateTime);

countdownTimer.start();

 

function updateTime(e:TimerEvent):void {

	now = new Date(); // обновляем поточную дату

	if(now.getTime()>endDate.getTime()){ // если сейчас дата больше за дату события

		//c_countdoun.count.text = "00:00:00:00"; 

		c_countdoun.countD.text = "000";

		c_countdoun.countH.text = "00";

		c_countdoun.countM.text = "00";

		c_countdoun.countS.text = "00";

		c_countdoun.timetxt.text = "Я тебя люблю!";//любой текст для события

		countdownTimer.stop();

		return;

	}

	var timeLeft:Number = endDate.getTime() - now.getTime();// общее время в милисекундах

	var seconds:Number = Math.floor(timeLeft / 1000); // секунды

	var minutes:Number = Math.floor(seconds / 60); // минуты

	var hours:Number = Math.floor(minutes / 60);  // часы

	var days:Number = Math.floor(hours / 24); //дни

	seconds %= 60; // % - это остача от деления

	minutes %= 60;

	hours %= 24;

	

	var sec:String = seconds.toString();

	var min:String = minutes.toString();

	var hrs:String = hours.toString();

	var day:String = days.toString();

	

	// если число одноцифровое то добавляем 0 спереди

	if (sec.length < 2) {

			sec = "0" + sec;

	}

	if (min.length < 2) {

			min = "0" + min;

	}

	if (hrs.length < 2) {

			hrs = "0" + hrs;

	}

	if (day.length < 2) {

			day = "0" + day;

	}

	

	// выводим результаты как одну строчку или по отдельности

	//var time:String = day + ":" + hrs + ":" + min + ":" + sec;

	//c_countdoun.count.text = time;

	c_countdoun.countD.text = day;

	c_countdoun.countH.text = hrs;

	c_countdoun.countM.text = min;

	c_countdoun.countS.text = sec;

}

Или копируем текст скрипта из вложения.

Вложение: 4076531_skript_dlya_vechnuyy_taymer_obratnogo_otscheta_v_adobe_flash.txt

Пояснение к скрипту

[700x]

Тестируем ролик Ctrl+Enter
Если все устраивает, то сохраняем как проект в формате FLA - Файл - Сохранить как и как флеш ролик Файл - Экспорт - Экспортировать ролик





Материалы к уроку можно скачать по ссылке
таймер обратного отсчета AS3
В архиве находится файл проекта FLA, шрифт Lobster и текстовый файл скрипта. Перед открытием проекта в Adobe Flash желательно, чтобы шрифт Lobster уже был установлен на вашем компьютере. Иначе текстовые поля будут отображаться некорректно. Но стоит помнить, что используя проект, внедрять шрифты также обязательно. Лучше всего, применив какой - то шрифт, для проверки нажимать кнопку "Внедрить" на панели Свойства и убеждаться, что галочки проставлены во всех чекбоксах.
Еще на слое фон или на специально созданном слое можно сделать свою кликабельную подпись
[699x556]