Анимированные баннеры на Javascript — это просто*

[fireton]

Очень круто. Спасибо.

[beavis_1]

Разработать визуальный редактор с временной шкалой, слоями, фильтрами и вытеснить Флеш из веба.

Смело и похвально. Но одновременно очень долго и трудно, если вообще осуществимо… Да и флеш так просто вытеснить не получится, уж больно велика его популярность/доступность и широки возможности. Разве что малость потеснить :)

Очень хочется обобщить, сказав: «Ветряные мельницы опасносте!»

[homm]

Красным курсивом традиционно выделяется ирония ;)

[beavis_1]

Я догадывался))) Но идея тем не менее, все равно интересная

[dmitrek]

Милая реализация.
Надо будет написать и о наших велосипедах — например о небольшом баннере для Renault.

[homm]

Сразу бросилось в глаза, что если развернуть спрайт с колесами на 90˚, картинка теряет в весе 100Кб. Если еще немного постеризовать и оптимизировать, получится 75Кб. Исходная весила 270.

kittyhug.ru/renault/last6/img/wheels.png
habrastorage.org/storage/2162343d/4b49751e/4324044c/5554da17.png

[dmitrek]

ничего себе! я её и png-крашил и чего только не делал со всей этой конструкцией. век живи — век учись.

[radist2s]

У Чикуенка, да и в техногрете у Лебедева есть, пожалуй, лучшая статья по оптимизации пнг.

[dmitrek]

видимо я как-то недостаточно внимательно её прочитал, странно.

[homm]

Так, самое интересное — cars2.png.

Ищите визуальные отличия:
Исходное: kittyhug.ru/renault/last6/img/cars2.png (1,2 Мб)
Конечное: habreffect.ru/files/b2a/1c4c4267f/cars2_o.png (1,6 Мб)

Постеризовывал по кусочкам.

[homm]

Подписи не там поставил, конечно, исходное 1,6 Мб.

[dmitrek]

обновил last6 на горизонтальный колёсный спрайт и вычищенную машинку — феноменально. размер стал чуть-чуть отличаться от размера flash версии баннера.
спасибо

[homm]

Что-то с колесами не все так просто. Я всю картинку повернул, а нужно видимо переставить их горизонтально не поварачивая. Сейчас колеса вытянуты и это сильно видно когда первая машина стартует.

[dmitrek]

да и суппорты(а?) уехали, совсем забыл об этом

[dmitrek]

колёса долго переделывать в горизонтальный вид, так что их вернул. но в любом случае за подсказку спасибо.

[simpel]

Если анимировать только диск, поверх спрайта покрышка+суппорты, то можно очень крепко сэкономить.

[simpel]

На картинке 6 одинаковых колес, которые есть в спрайте с колесами ;)

[homm]

И то верно :)

[vit1251]

> Да и флеш так просто вытеснить не получится, уж больно велика его популярность/доступность и широки возможности.

Добавление CANVAS в HTML5 помоему уже сделало свое дело. Теперь можно частично отказываться от простых Flash компонентов (графиков и т.п.).

Опять же учить еще один ActionScript и делать связи между Js и Flash на мой взгляд лишние какие-то действия и не очевидные. Куда проще все делать на одном JavaScript.

Ну если конечно не нужны «широкие возможности», а кстати какие это возможности? (ну кроме того что во всех обозревателях Flash одинаково работает)

[aleksandro]

Иногда нужно RTMP, но пока что только Flash.

[Kigorw]

Прикольно :)
я вот тоже сделал библиотечку www.kigorw.com/articles/banny — концепция приблизительно такая же (дерево сцен), только у меня заточка под цсс-аннимации.

[easyman]

Забавный тест производительности браузеров :)

[homm]

На самом деле от ускоренного воспроизведения нагрузка не повышается. Это для нас объекты движутся быстрее, браузеру все едино. Какие-то объекты изменяют координаты, потом перерисовываются. Нагрузка создается только частотой кадров.

[easyman]

Я смотрел на показания task manager во время выполнения скрипта.
Наверное, в process xp или в чем-нибудь подобном можно более точную оценку производительности получить.

[AlexanderSergeyev]

Давайте уж поскорее вытесняйте гадский флеш из баннеростроения. Чтобы весь негатив о баннерах не отражался на мнение о технологии для браузерных приложений.

[easyman]

А в чем плюсы javascript баннера?
Думаю, негатив останется.

[dmitrek]

не работает на айфонах/айпадах, а также на большинстве мобильных устройств

[beavis_1]

Ну айфонов/айпадов сейчас не так уж и много, чтобы на них такую серьезную поправку делать. А что касается остальных мобильных устройств — я с трудом представляю, как они будут справляться с чем-то похожим на баннер, который ты показывал выше. Еще и про трафик не надо забывать.

На мой взгляд, в этом нет ни острой необходимости, ни толковой возможности :) По крайней мере, пока…

[homm]

Вижу 10-15 кадров у анимации из примера. Кроме того, давно известно, что если что-то делать чисто под iOS, нужно использовать webkit-анимацию и transitions.

[rapida]

что на счет загрузки ЦП / ОЗУ этих примером во сравнению с флеш аналогами?
не хотите привести сводную таблицу?

[dmitrek]

а смысл? в самом чистом сравнении у вас есть js баннер, который работает везде и flash баннер, который работает не везде. понятно что сегодня flash будет и плавнее и экономнее по ресурсам, но js оптимизация ещё подтянется. плюс, родное взаимодействие со всеми другими скриптами на странице.

[zw0rk]

у меня в lynx не работает тот, который работает везде :(

[Die_Gelassenheit]

Анимированные баннеры — это ужасно.
Но подход интересный.

[homm]

Если это промо-баннер, а не рекламный, и у него есть кнопка «старт», то нет ничего ужасного.

[dmitrek]

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

[humbug]

мужик!

[easyman]

Оказывается, на этом уже бизнес делают. javascriptads.com/

[dmitrek]

сомнительный бизнес
там кажется о другом

[dasty]

Как-то Firefox не правильно работает, если еuj не перезагружать раз в день, то JS подвисает раз в пять секунд на пол секунды.

[SwampRunner]

Молодец, здорово смотрится.

[mrorbita]

www.sencha.com/products/animator/demos/
и если мне не изменяет память
То где-то была такая штука для raphaelJs animations написанная на томже extJS

[homm]

Ну вы же понимаете, что animator — это совсем про другое.

[mrorbita]

>Разработать визуальный редактор с временной шкалой, слоями, фильтрами и вытеснить Флеш из веба

Это я к тому, что эта штука уже реализована и доступна в исходных кода. Нужно только поискать

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

[NeX]

Аниматор сенчи — работает только под WebKit

[stroncium]

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

[PycBouH]

Хорошо, но по сравнению с чистым animate чуууть-чуть подлагивает ракета, когда по оси Y движется :)

[Kyborg2011]

Замечательная статья. Спасибо.

[klubben]

А все равно, за анимированне баннеры надо руки отрывать

[Vitality]

[FlashManiac]

>> Разработать визуальный редактор с временной шкалой, слоями, фильтрами и вытеснить Флеш из веба.

Поздняк метаться — на Adobe MAX была представлена новая фича CS5.

[kuzenru]

Хоть и на флеше тоже самое делается в 100 раз быстрее и в векторе, респект за подробное руководство, буду использовать, только не в баннерах.

[dmitrek]

Кто-то по всем вашим комментарием прошёлся с минусатором. За что?

[homm]

Не знаю. Главное, чтобы тому, кто это делает уже вторую неделю подряд, это приносило удовлетворение. Как у Будды.

[WayBe]

homm, если Вы сделаете это: «визуальный редактор с временной шкалой, слоями, фильтрами и вытеснить Флеш из веба.», то это будет просто потрясающее решние.
Видел топик на хабре на такую-же тему — всё замечательно, а редактора нет. а вручную всё описывать слишком уж сложно.

[FlashManiac]

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

[andrewsh]

Извините, но версия на Scenario у меня тормозит, в отличие от версии на jQuery. А именно, во время «прищуривания» не происходит обновления картинки. Почему — догадываюсь, но наверняка не уверен, проверьте, не закопана ли какая бяка где.

[homm]

Может вы поделитесь своими соображениями, раз они у вас уже есть?
Какая у вас ОС и браузер?

[andrewsh]

Соображения такие, что оно что-то очень активно лопатит, не делая setTimeout/return, или же делая, но на очень короткий промежуток времени. Браузер Iceweasel 3.6.12 на Debian.

Кстати, жкверевский вариант тоже иногда подтормаживает, но в самом конце ролика, когда обе ракеты уже почти улетели. Вариант на Scenario тормозит всегда, как только левый товарищ начинает прищуриваться.

[homm]

Нет, оно ничего не лопает, разрешение таймера по-умолчанию 33мс. Вы можете сами поиграться с ним во втором примере.

Мне кажется, проблема все же на вашей стороне. Например, Фаерфокс от долго работы решает именно в этот момент запустить сборку мусора. Посмотрите на загрузку процессора, нет ли там пика в момент, когда тормозит.

[glazs]

Не надо вытеснять флеш! Оставьте фанатизм! Флеш блокируется как нефиг делать, и нет баннеров!

[art008]

В IE6 только с PNG проблемы, а, если fixPNG, применить, мне кажется, будут тормоза.

Хоть это и гадость, но она жива на 10% рынка (((