Отривин Море

В конце 2009 года по заказу

мы разработали проект, рекламирующий средство от насморка «Отривин Море». Saatchi & Saatchi предоставили нам креатив и все материалы. Созданный проект состоит из двух частей: завлекающий баннер и целевой мини-сайт (landing page), на который должен был перейти заинтересованный пользователь, нажав на баннер.

Интерактивный баннер предлагает стереть душный город и вдохнуть целебный морской воздух. Пользователь сам может это сделать, с помощью спрея «Отривин Море».
Если насморк у пользователя отнял все силы настолько, что он не может пошевелить ни рукой, ни мышью, то лечебный спрей через 10 секунд сам активирует действие баннера и подарит вам картину моря.

Технология потоковой загрузки видео без кэширования, была выбрана не случайно. Первоначальная версия баннера полностью загружала видео-ролик моря, а потом проигрывала его при наведении на баннер. Индикатором загрузки служил контур бутылочки Отривина, которая заполнялась цветом.




Но нужно было реализовать интерактивность, чтобы пользователь сам мог стереть душный город и увидеть море. Рассматривался вариант показа пользователю картинки моря, пока видео не загрузилось. Но этот вариант был отклонен, т. к. на некоторых площадках вес баннера-контейнера не должен был превышать 25 Кб. Баннер итак был перегружен графикой, которая сжималась, дополнительная картинка моря никак не помещалась в это ограничение.

Причем, пользователь мог навести курсор сразу же после загрузки баннера на сайт, либо через любой промежуток времени. Т. е. определить время кэша видео была невозможно, нужно было показывать первую порцию загруженного видео-ролика.
Оптимальным решением оказалось следующее: потоковая загрузка видео без кэша. Пользователи с любой скоростью интернета практически мгновенно смогут стереть город (воспользоваться интерактивом). У пользователей с низкой скоростью интернета, при этом, видео моря будет подтормаживать. Если скорость интернета нормальная — пользователь не заметит процесса загрузки.

4 секунды мы посчитали оптимальной длительностью видео-ролика для его зацикливания (чтобы переход в месте склеивания был не столь резким) и быстрой загрузки.

Клик по баннеру ведет на landing page — целевую страницу. Вариант с фулл-флешевой страницей — не подходил, т. к. нужна была индексация поисковиками. Как выход, было решено сделать видеофон на флеше с использованием звука.

Конечный результат получился следующим: сначала пользователь видит на фоне картинку моря, а через некоторое время картинка плавно заменяется на видео моря. Звук — шум прибоя — можно отключить с помощью специальной кнопки (причем, звук исчезает не резко, а постепенно затихает).

Анимация переключения разделов на странице сделана на javascript. Сама страница выполнена с использованием html + css + js + флеш + видео.

С помощью интерактива мы наглядно продемонстрировали действие лекарства: придали рекламному посланию эмоциональную окраску и помогли пользователю почувствовать живительную силу моря. Дыши морем, Хабрачеловек! :)