Робимо флеш банер із зворотним відліком

Веб-банери ефективний маркетинговий інструмент, який використовується на сайтах різної тематики. Переваги анімаційного банера очевидні. За період показу банер здатний донести набагато більше інформації, ніж статичний. У цій статті розглянемо процес створення банера зі зворотним відліком на прикладі банера « До Нового Року залишилося ... ».

Використовувати будемо 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:

// onEnterFrame allows for a function to be called every tick this.onEnterFrame = function () {// Stores the current date var today: Date = new Date (); // Stores the Current Year var currentYear = today.getFullYear (); // Stores the Current Time var currentTime = today.getTime (); // Creates and stores the target date var targetDate: Date = new Date (currentYear, 11,31); var targetTime = targetDate.getTime (); // Determines how much time is left. Note: Leaves time in milliseconds var timeLeft = targetTime - currentTime; var sec = Math.floor (timeLeft / 1000); var min = Math.floor (sec / 60); var hours = Math.floor (min / 60); var days = Math.floor (hours / 24); // Takes results of var remaining value. Also converts "sec" into a string sec = String (sec% 60); // Once a string, you can check the values length and see whether it has been reduced below 2. // If so, add a "0" for visual purposes. if (sec.length <2) {sec = "0" + sec; } Min = String (min% 60); if (min.length <2) {min = "0" + min; } Hours = String (hours% 24); if (hours.length <2) {hours = "0" + hours; } Days = String (days); if (timeLeft> 0) {// Joins all values into one string value var counter: String = days + ":" + hours + ":" + min + ":" + sec; time_txt.text = counter; } Else {trace ( "TIME'S UP"); var newTime: String = "00: 00: 00: 00"; time_txt.text = newTime; delete (this.onEnterFrame); }}

5. Створюємо але новому шарі пояснення до полів зворотного відліку, щоб було зрозуміло де що. Запускаємо ролик.

Готово. Відлік працює. Далі в банер можна додати графіки та анімації.

Варіант, який був зроблений для інтернет-магазину подарунків, напередодні настання року кролика.

Щоб змінити дату, до настання якої здійснюється відлік, необхідно підкоригувати 11 рядок коду. У ній вказується дата події в форматі (currentYear, 11,31), де currentYear- поточний рік, 11-скільки пропустити місяці, 31-дата наступного місяця, після 11-го. В даному випадку, це 31-е грудня.

Якщо необхідно поміняти дату, наприклад на 8-е березня, то міняємо значення на наступні: (currentYear, 2,7).

Статьи

Робимо флеш банер із зворотним відліком

З тієї ж теми:

Новости