Часы обратного отсчета во флеше

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

Вы можете сделать свои часики и свою дату, например дату своего дня рождения. Это делается очень просто:

Шаг 1.

Создадим четыре динамических текстовых поля для отсчёта дней, часов, минут и секунд. Назначимим Instance name countD, countH, countMиcountS соответственно. Между ними поставим точечки разделители. Если вы используете несистемный шрифт для часов, как в нашем случае, то для корректного отображения надписи на сайте, шрифт нужно внедрить во флеш.

Шаг 2.

Обратим всё это в символ (выделение – F8) и назначим ему имя c_countdown.

 

Шаг 3.

Добавляем вспомогательный текстовые подсказки (дни, часы, мин. и т.д.). Вот так должно получиться:

Шаг 4.

Добавляем новый слой и на нём пишем код:

  1. var now:Date = newDate(); // поточная дата
  2. var endDate:Date = newDate(now.getFullYear()+1,0,1); // дата события
  3. var countdownTimer:Timer = newTimer(1000); // таймер
  4.  
  5. countdownTimer.addEventListener(TimerEvent.TIMER, updateTime);
  6. countdownTimer.start();
  7.  
  8. function updateTime(e:TimerEvent):void {
  9.      now = newDate(); // обновляем поточную дату
  10.      if(now.getTime()>endDate.getTime()){ // если сейчас дата больше за дату события
  11.           //c_countdoun.count.text = "00:00:00:00"; // уррра новый год)))
  12.           c_countdoun.countD.text = "000";
  13.           c_countdoun.countH.text = "00";
  14.           c_countdoun.countM.text = "00";
  15.           c_countdoun.countS.text = "00";
  16.           countdownTimer.stop();
  17.           return;
  18.      }
  19.      var timeLeft:Number = endDate.getTime() - now.getTime();// общее время в милисекундах
  20.      var seconds:Number = Math.floor(timeLeft / 1000); // секунды
  21.      var minutes:Number = Math.floor(seconds / 60); // минуты
  22.      var hours:Number = Math.floor(minutes / 60);  // часы
  23.      var days:Number = Math.floor(hours / 24); //дни
  24.      seconds %= 60; // % - это остача от деления
  25.      minutes %= 60;
  26.      hours %= 24;
  27.  
  28.      var sec:String = seconds.toString();
  29.      var min:String = minutes.toString();
  30.      var hrs:String = hours.toString();
  31.      var day:String = days.toString();
  32.  
  33.      // если число одноцифровое то добавляем 0 спереди
  34.      if (sec.length< 2) {
  35.                sec = "0" + sec;
  36.      }
  37.      if (min.length< 2) {
  38.                min = "0" + min;
  39.      }
  40.      if (hrs.length< 2) {
  41.                hrs = "0" + hrs;
  42.      }
  43.      if (day.length< 2) {
  44.                day = "0" + day;
  45.      }
  46.  
  47.      // выводим результаты как одну строчку или по отдельности
  48.      //var time:String = day + ":" + hrs + ":" + min + ":" + sec;
  49.      //c_countdoun.count.text = time;
  50.      c_countdoun.countD.text = day;
  51.      c_countdoun.countH.text = hrs;
  52.      c_countdoun.countM.text = min;
  53.      c_countdoun.countS.text = sec;
  54. }

В Date мы используем метод now.getFullYear(), который возвращает текущий год. Таким образом код не придется менять к следующему новому году. Нам нужно датой указать первое января следующего года, поэтому к текущему значению года добавляем единичку. Дальше указываем номер месяца - 0, так как месяцы в as3 (и во многих других языках программирования) нумеруется от 0 до 11. Ну и число - 1-е, - тут всё интуитивно.

Дальше создаём новый таймер и указываем значение шага 1000 миллисекунд (1 секунда). В обработчике каждый раз (каждую секунду) обновляем значение now, то есть текущую дату. Проверяем условие, не наступила ли долгожданная дата и если наступила, то текст меняем на нули. Дальше идёт математика. Вычисляем значения, которые нам надо, переводим их в строковый формат и если получили не двух цифровое число, добавляем нолик спереди, для эстетического удовлетворения.   Все значения, которые выводятся отдельно можно выводить в одну строку. Для этого нужно создать всего одно текстовое поле, назвав его, скажем, count и разкомментировать три строчки, которые сейчас в коде закомментированны. Этот способ быстрее, но так текст сложнее ровнять в соответствии с подписями. Особенно, если выбрать шрифты, у которых ширина букв имеет разную ширину. Надпись иногда дёргается и съезжает.

Вот и всё! Теперь все заветные даты не нужно держать в голове!))

Исходник (Cs5)

Автор урока – Андрей Барвинко

Flash-animated.com

Комментарии
Аватар пользователя Гость

Если есть кто живой, подскажите как после окончания отсчета вывести картинку!?

Аватар пользователя Bit

time=new Date();
var seconds = time.getSeconds();
var date = time.getDate();
var month = time.getMonth();
var year = time.getYear();
if (date == 6 && month == 1) gotoAndPlay(2);
if (year == 2015) gotoAndPlay(2);
else {
if (month >= 6) gotoAndStop(1);
if (month <= 4) gotoAndStop(1);
if (date >= 20) gotoAndStop(1);
if (date <= 15) gotoAndStop(1);
if (date == 9 && month == 1) gotoAndStop(1);

date перекрывает встроенный объект "Date"
помогите пожалуй100

Аватар пользователя Denis

Супер урок. Все вышло, все классно. Есть одно но. 1. Сделал трекинг текста вывел нули как положено на фоне. При выводе теряет трекинг и ставит в свой прежний вид. А второе, подскажите где прописать именно до конкретных часов. Например 2014.01.23 до 10 утра. Буду очень благодарен.

Аватар пользователя Ольга

Делала очень простой таймер обратного отсчета. Цель, пока не пройдет время, дети выполняют задание. Таймер создан в виде клипа. Таймер работает при щелчке на нем. Но при нескольких щелчках он не показывает время в секундах, а лихорадочно скачет. Программа выдает ошибку:
TypeError: Error #1009: Не удается вызвать свойство или метод со
ссылкой на объект "null".
at _fla::timers_1/tymerF()
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()
Помогите пожалуйста. Сама никак не разберусь...
Это код щелчка на таймере:
timers.addEventListener(MouseEvent.MOUSE_DOWN,onClick_timer);
//timers.addEventListener(MouseEvent.MOUSE_UP,up_timer);
function onClick_timer(event:MouseEvent):void
{
(timers.currentFrame == 1) ? timers.gotoAndPlay(2) : timers.gotoAndStop(1);
}

А это, во втором кадре таймера:
stop();
import flash.utils.Timer;
import flash.events.TimerEvent;

var count:Number=5;

var timer:Timer=new Timer(1000,count+1);

timer.addEventListener(TimerEvent.TIMER, tymerF);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, completeF);

function tymerF(event:TimerEvent):void {
second_txt.text=String(count--);

}

function completeF(event:TimerEvent):void {
gotoAndStop(3);
}

timer.start();
Спасибо!

Аватар пользователя Silenter

Спасибо автору за такой прекрасный урок.
Возник только один вопрос: как не кручусь, не получается у меня вывести ещё одно поле с миллисекундами. Не подскажете как?

Аватар пользователя Гость

Помогите пожалуйста. Как сделать чтобы к текущей дате прибавлялось три месяца, и в последствии отмечалось время до получившейся даты?

P.S. Отличный урок, спасибо!

Аватар пользователя flahhi

Просто укажите нужную дату в объект endDate. Например 3 месяца от сегодняшнего дня var endDate:Date = newDate(2013, 8, 28);
Остальное останется как есть)

Аватар пользователя Гость

Не совсем. С такой задачей я бы сам справился. Но проблема в следующем: есть кнопка и текстовое поле. После нажатия кнопки к сегодняшней дате должно прибавится 100 дней. Впоследствии в текстовом поле будет отображаться оставшееся количество дней, но повторное нажатие кнопки стирает старую дату и устанавливает новую.
Мда. Сумбурное объяснение. Буду сам пытаться что ничуть сделать, но от любой помощи не откажусь.
Спасибо за внимание. Smile

Аватар пользователя flahhi

Ну тогда можно как-то так: newDate(now.getFullYear(), now.getMonth() + 3, now.getDate());

Аватар пользователя Гость

Все получилось! Огромное спасибо!
Smile

Аватар пользователя flahhi

Поздравляю, рад, что урок оказался полезным Smile

Аватар пользователя Гость

Сделайте лучше видео-урок, по тексту ничего не понятно!!!!

Аватар пользователя e.artem.volga

Напишите свой e-mail, я вас проконсультирую по данному уроку.

NiTRoEx

Аватар пользователя e.artem.volga

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

NiTRoEx

Аватар пользователя flahhi

Ответ есть ниже в комментариях. Нужно изменить вторую строчку в коде.
Например таймер до завтрашнего дня:
var endDate:Date = newDate(2013, 1, 4);

Аватар пользователя e.artem.volga

При изменении 2 строчки кода на следующий вид:
var endDate:Date = newDate(2013, 2, 4)
счётчик показывает результат 28 дней(((

NiTRoEx

Аватар пользователя flahhi

А должен что показывать? Вы указали дату 04.03.2013. Не забывайте - месяцы в as3 нумеруются с нуля.

Аватар пользователя e.artem.volga

Даже при исправлении даты в самом исходном коде даже этого урока, до выбранной даты (2013,03,18) показывает в счётчике 71 день.

NiTRoEx

Аватар пользователя flahhi

Так вроде бы всё правильно. Вы, на языке as3 ввели дату которая соответствует 18.04.2013. До её наступления как раз 71 день. Или я чего-то не понимаю?

Аватар пользователя e.artem.volga

Какие даты не ставь, всё равно некорректное отображение. Ошибка где-то далее по коду

NiTRoEx

Аватар пользователя Oksana

вы смотрели исходник? может, попробуйте там поменять даты и посмотреть, что получится?

или сбросьте сюда код, который в вашей флешке выдает ошибки.

Аватар пользователя e.artem.volga

Исходник смотрел. Его же и редактировал (изменил лишь вторую строчку кода на дату 2013,02,10). Результат на выходе 30 дней на счёткике до завтрашего дня =(
Вот код:
var now:Date = new Date(); // поточная дата
var endDate:Date = new Date(2013,02,10); // дата события
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";
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;
}

NiTRoEx

Аватар пользователя Oksana

посмотрите этот исходник. здесь дата установлена на 10 число февраля. то есть по идее нужно написать 2013.02.10 , но  месяцы в as3 с нуля начинаются (0-январь, 1-февраль и т.д.) то нужно писать   2013.01.10  (и это будет 10-е февраля).

Аватар пользователя Валерий

Оксана, подскажите, пожалуйста, куда в счетчике внести изменения, чтобы он отсчитывал не полные дни, а время до определенного часа?

Аватар пользователя e.artem.volga

Спасибо, всё получилось и отлично работает=) Не знал об особенности нумерации месяцев в AS3

NiTRoEx

Аватар пользователя Oksana

flahhi вам выше об этом говорил, будьте внимательней)

Аватар пользователя e.artem.volga

В следующий раз буду внимательнее читать комментарии участников сайта. Спасибо за интересный урок=)

NiTRoEx

Аватар пользователя e.artem.volga

Подскажите, двоеточие делается тоже динамическим шрифтом?

NiTRoEx

Аватар пользователя flahhi

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

  1. //var time:String = day + ":" + hrs + ":" + min + ":" + sec;
  2. //c_countdoun.count.text = time;

Аватар пользователя e.artem.volga

то есть получается 4 динамических поля для (дней,часов,минут и секунд) + ещё 3 двоеточия статическим текстом. И все эти два вида текста оборачиваем в мувиклип c_countdoun ?

NiTRoEx

Аватар пользователя flahhi

Да, всё верно. Не забудьте также назначить динамическим полям instance name countD, countH, countM и countS.

Аватар пользователя e.artem.volga

Спасибо за информацию=)

NiTRoEx

Аватар пользователя Прохожий

Исходник не открывается...((

Аватар пользователя Oksana

попробуйте сейчас, нужен флеш cs5 и выше для открытия

Аватар пользователя Прохожий

я пытался это сделать через Macromedia Flash 8 Portable. При попытке открыть исходник прога пишет: Unexpected file format... Но видимо нужен все таки Adobe Flash CS5...

Аватар пользователя Oksana

да

Аватар пользователя Ernest

Помогите плиз как сделать дату ну типо игра выходит 5,03,2013 и чтобы он обратный отсчёт делал по дням

Аватар пользователя flahhi

Нужно ознакомиться с этим уроком и немножко его изменить: поправить дату на нужную вам - var endDate:Date = newDate(2013, 2, 5);
и если не нужны часы, минуты, секунды - убрать соответствующие строчки кода.
К стати, в коде не хватает пробелов после var, так что лучше брать код с исходника.

Аватар пользователя Гость

помогите пожалуйста, как сделать чтоб не год и месяц считало а часы! мне допустим надо три часа отсчитать, а потом что скинулось и заново три часа? на этом же скрипте чтоб работало?? пожалуйста

Аватар пользователя Oksana

пробелы поставила, проверьте пож-та, может что еще не так в коде?

Аватар пользователя flahhi

Ещё пробел после function. А так вроде бы всё правильно.

Аватар пользователя LeeTovetz

Класный урок. Супер.

моя радость тут ))) http://leetovetz.deviantart.com/gallery/

Пожалуйста, оставьте ваш комментарий. Спасибо!
Содержимое этого поля является приватным и не будет отображаться публично.
CAPTCHA
Вопрос для проверки
Заполните поле проверки