Комментарии 65
Очень круто. Спасибо.
Разработать визуальный редактор с временной шкалой, слоями, фильтрами и вытеснить Флеш из веба.Смело и похвально. Но одновременно очень долго и трудно, если вообще осуществимо… Да и флеш так просто вытеснить не получится, уж больно велика его популярность/доступность и широки возможности. Разве что малость потеснить :)
Очень хочется обобщить, сказав: «Ветряные мельницы опасносте!»
Красным курсивом традиционно выделяется ирония ;)
Я догадывался))) Но идея тем не менее, все равно интересная
Милая реализация.
Надо будет написать и о наших велосипедах — например онебольшом баннере для Renault.
Надо будет написать и о наших велосипедах — например о
Сразу бросилось в глаза, что если развернуть спрайт с колесами на 90˚, картинка теряет в весе 100Кб. Если еще немного постеризовать и оптимизировать, получится 75Кб. Исходная весила 270.
kittyhug.ru/renault/last6/img/wheels.png
habrastorage.org/storage/2162343d/4b49751e/4324044c/5554da17.png
kittyhug.ru/renault/last6/img/wheels.png
habrastorage.org/storage/2162343d/4b49751e/4324044c/5554da17.png
Так, самое интересное — cars2.png.
Ищите визуальные отличия:
Исходное: kittyhug.ru/renault/last6/img/cars2.png (1,2 Мб)
Конечное: habreffect.ru/files/b2a/1c4c4267f/cars2_o.png (1,6 Мб)
Постеризовывал по кусочкам.
Ищите визуальные отличия:
Исходное: kittyhug.ru/renault/last6/img/cars2.png (1,2 Мб)
Конечное: habreffect.ru/files/b2a/1c4c4267f/cars2_o.png (1,6 Мб)
Постеризовывал по кусочкам.
Подписи не там поставил, конечно, исходное 1,6 Мб.
обновил last6 на горизонтальный колёсный спрайт и вычищенную машинку — феноменально. размер стал чуть-чуть отличаться от размера flash версии баннера.
спасибо
спасибо
На картинке 6 одинаковых колес, которые есть в спрайте с колесами ;)
> Да и флеш так просто вытеснить не получится, уж больно велика его популярность/доступность и широки возможности.
Добавление CANVAS в HTML5 помоему уже сделало свое дело. Теперь можно частично отказываться от простых Flash компонентов (графиков и т.п.).
Опять же учить еще один ActionScript и делать связи между Js и Flash на мой взгляд лишние какие-то действия и не очевидные. Куда проще все делать на одном JavaScript.
Ну если конечно не нужны «широкие возможности», а кстати какие это возможности? (ну кроме того что во всех обозревателях Flash одинаково работает)
Добавление CANVAS в HTML5 помоему уже сделало свое дело. Теперь можно частично отказываться от простых Flash компонентов (графиков и т.п.).
Опять же учить еще один ActionScript и делать связи между Js и Flash на мой взгляд лишние какие-то действия и не очевидные. Куда проще все делать на одном JavaScript.
Ну если конечно не нужны «широкие возможности», а кстати какие это возможности? (ну кроме того что во всех обозревателях Flash одинаково работает)
Прикольно :)
я вот тоже сделал библиотечку www.kigorw.com/articles/banny — концепция приблизительно такая же (дерево сцен), только у меня заточка под цсс-аннимации.
я вот тоже сделал библиотечку www.kigorw.com/articles/banny — концепция приблизительно такая же (дерево сцен), только у меня заточка под цсс-аннимации.
Забавный тест производительности браузеров :)
Давайте уж поскорее вытесняйте гадский флеш из баннеростроения. Чтобы весь негатив о баннерах не отражался на мнение о технологии для браузерных приложений.
А в чем плюсы javascript баннера?
Думаю, негатив останется.
Думаю, негатив останется.
не работает на айфонах/айпадах, а также на большинстве мобильных устройств
Ну айфонов/айпадов сейчас не так уж и много, чтобы на них такую серьезную поправку делать. А что касается остальных мобильных устройств — я с трудом представляю, как они будут справляться с чем-то похожим на баннер, который ты показывал выше. Еще и про трафик не надо забывать.
На мой взгляд, в этом нет ни острой необходимости, ни толковой возможности :) По крайней мере, пока…
На мой взгляд, в этом нет ни острой необходимости, ни толковой возможности :) По крайней мере, пока…
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
что на счет загрузки ЦП / ОЗУ этих примером во сравнению с флеш аналогами?
не хотите привести сводную таблицу?
не хотите привести сводную таблицу?
Анимированные баннеры — это ужасно.
Но подход интересный.
Но подход интересный.
мужик!
Оказывается, на этом уже бизнес делают. javascriptads.com/
Как-то Firefox не правильно работает, если еuj не перезагружать раз в день, то JS подвисает раз в пять секунд на пол секунды.
Молодец, здорово смотрится.
www.sencha.com/products/animator/demos/
и если мне не изменяет память
То где-то была такая штука для raphaelJs animations написанная на томже extJS
и если мне не изменяет память
То где-то была такая штука для raphaelJs animations написанная на томже extJS
Хорошо, но по сравнению с чистым animate чуууть-чуть подлагивает ракета, когда по оси Y движется :)
Замечательная статья. Спасибо.
А все равно, за анимированне баннеры надо руки отрывать
НЛО прилетело и опубликовало эту надпись здесь
>> Разработать визуальный редактор с временной шкалой, слоями, фильтрами и вытеснить Флеш из веба.
Поздняк метаться — на Adobe MAX была представлена новая фича CS5.
Поздняк метаться — на Adobe MAX была представлена новая фича CS5.
Хоть и на флеше тоже самое делается в 100 раз быстрее и в векторе, респект за подробное руководство, буду использовать, только не в баннерах.
Кто-то по всем вашим комментарием прошёлся с минусатором. За что?
НЛО прилетело и опубликовало эту надпись здесь
homm, если Вы сделаете это: «визуальный редактор с временной шкалой, слоями, фильтрами и вытеснить Флеш из веба.», то это будет просто потрясающее решние.
Видел топик на хабре на такую-же тему — всё замечательно, а редактора нет. а вручную всё описывать слишком уж сложно.
Видел топик на хабре на такую-же тему — всё замечательно, а редактора нет. а вручную всё описывать слишком уж сложно.
Извините, но версия на Scenario у меня тормозит, в отличие от версии на jQuery. А именно, во время «прищуривания» не происходит обновления картинки. Почему — догадываюсь, но наверняка не уверен, проверьте, не закопана ли какая бяка где.
Может вы поделитесь своими соображениями, раз они у вас уже есть?
Какая у вас ОС и браузер?
Какая у вас ОС и браузер?
Соображения такие, что оно что-то очень активно лопатит, не делая setTimeout/return, или же делая, но на очень короткий промежуток времени. Браузер Iceweasel 3.6.12 на Debian.
Кстати, жкверевский вариант тоже иногда подтормаживает, но в самом конце ролика, когда обе ракеты уже почти улетели. Вариант на Scenario тормозит всегда, как только левый товарищ начинает прищуриваться.
Кстати, жкверевский вариант тоже иногда подтормаживает, но в самом конце ролика, когда обе ракеты уже почти улетели. Вариант на Scenario тормозит всегда, как только левый товарищ начинает прищуриваться.
Нет, оно ничего не лопает, разрешение таймера по-умолчанию 33мс. Вы можете сами поиграться с ним во втором примере.
Мне кажется, проблема все же на вашей стороне. Например, Фаерфокс от долго работы решает именно в этот момент запустить сборку мусора. Посмотрите на загрузку процессора, нет ли там пика в момент, когда тормозит.
Мне кажется, проблема все же на вашей стороне. Например, Фаерфокс от долго работы решает именно в этот момент запустить сборку мусора. Посмотрите на загрузку процессора, нет ли там пика в момент, когда тормозит.
Не надо вытеснять флеш! Оставьте фанатизм! Флеш блокируется как нефиг делать, и нет баннеров!
В IE6 только с PNG проблемы, а, если fixPNG, применить, мне кажется, будут тормоза.
Хоть это и гадость, но она жива на 10% рынка (((
Хоть это и гадость, но она жива на 10% рынка (((
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Анимированные баннеры на Javascript — это просто*