Создание флеш-баннера с обратным отсчетом
Использовать будем Adobe Flash CS3 Pro и
соответственно Action Script 2.0.
1. Создадим новый документ и зададим размеры будущего баннера.
 [показать]
Чтобы задать размеры и скорость будущего ролика, выбираем меню «Modify->Document» b вписываем необходимые значения.
[показать]
В нашем примере мы установим нестандартные размеры:
[показать]
2. На первом слое флеш-баннера создадим текстовое поле с текстом «00:00:00:00», настроим шрифт, размер. Это поле в итоге будет отображать главную информацию нашего флеш-баннера — количество дней, часов, минут и секунд до нужной даты.
[показать]
Необходимо установить тип текстового поля в «Dynamic Text» и удалить напечатанный текст с нулями, поскольку это поле будет отображать информацию генерируемую скриптом Action Script.
[показать]
После удаления текста из нулей должно остаться пустое динамическое поле с настроенными параметрами шрифта.
[показать]
3. Далее созданному текстовому полю необходимо присвоить «Имя экземпляра» (Instance name) для взаимодействия поля со скриптом. Другими словами, для того чтобы переменная Action Script вписывала в данное поле создаваемые значения.
[показать]
В поле Instance name вписываем time_txt
[показать]
4. В новый слой вставляем следующий Action Script:
01.//onEnterFrame allows for a function to be called every tick
02.this.onEnterFrame = function()
03.{
04.//Stores the current date
05.var today:Date = new Date();
06.//Stores the Current Year
07.var currentYear = today.getFullYear();
08.//Stores the Current Time
09.var currentTime = today.getTime();
10.//Creates and stores the target date
11.var targetDate:Date = new Date(currentYear,11,31);
12.var targetTime = targetDate.getTime();
13.//Determines how much time is left. Note: Leaves time in milliseconds
14.var timeLeft = targetTime - currentTime;
15.var sec = Math.floor(timeLeft/1000);
16.var min = Math.floor(sec/60);
17.var hours = Math.floor(min/60);
18.var days = Math.floor(hours/24);
19.//Takes results of var remaining value. Also converts "sec" into a string
20.sec = String(sec % 60);
21.//Once a string, you can check the values length and see whether it has been reduced below 2.
22.//If so, add a "0" for visual purposes.
23.if(sec.length < 2){
24.sec = "0" + sec;
25.}
26.min = String(min % 60);
27.if(min.length < 2){
28.min = "0" + min;
29.}
30.hours = String(hours % 24);
31.if(hours.length < 2){ hours = "0" + hours; } days = String(days); if(timeLeft > 0 ){
32.//Joins all values into one string value
33.var counter:String = days + ":" + hours + ":" + min + ":" + sec;
34.time_txt.text = counter;
35.}else{
36.trace("TIME'S UP");
37.var newTime:String = "00:00:00:00";
38.time_txt.text = newTime;
39.delete (this.onEnterFrame);
40.}
41.}
5. Создаем но новом слое пояснения к полям обратного отсчета, чтобы было понятно где что. Запускаем ролик.
[показать]
Готово. Отсчет работает. Далее в баннер можно добавить графики и анимации.
Чтобы изменить дату, до наступления которой осуществляется отсчет, необходимо подкорректировать 11 строку кода. В ней указывается дата события в формате (currentYear,11,31), где currentYear— текущий год, 11-сколько пропустить месяце, 31-дата следующего месяца, после 11-го. В данном случае, это 31-е декабря.
Если необходимо поменять дату, например на 8-е марта, то меняем значения на следующие: (currentYear,2,7).
[показать]
 [показать] |
|
|
|
|
|
|
|