Блог одиноко стоящего игрока вспышки

Баннер, хочешь похудеть? Спроси меня – как.

апреля 28, 2008

В баннеростроении есть особая прелесть — оптимизация. Для меня эта задача сродни с хорошей логической игрушкой.
Сегодня в очередной раз меня спросили об изготовлении баннеров, — редкий случай, когда заказчик интересуется заранее – а разве вообще можно в такие размеры вписать что то приемлемое. Низкий поклон и моя благодарность. Такой интерес – это редкость.

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

Баннер – особый жанр. Его основа – лаконичность и эффектность (с посылом в эффективность) И горе флеш-разработчику, если о лаконичности не позаботилась ни креативная команда, ни дизайнер. Зачастую заказчик не знает, да и не должен знать с какими трудностями и ограничениями приходится сталкиваться, ему нужен результат. Но задача исполнителя проекта (креативная кманда/дизайнер/менеджер/флешер в конце концов) – зная подводные камни предложить заказчику такое решение задачи, при котором все будут довольны – будет красиво блестеть и прыгать, продажи клиента вырастут до небесных чертогов, а количество матерных слов сказанных флеш-разрабочиком сведется к нулю.

Из чего состоит флеш-баннер? Из картинок и буковок. И все это движется и меняет свои размеры и цвет.
Исходя из этих нехитрых нужд выводим основных потребителей драгоценных килобайт:

1. Растры.
   Не стоит думать, что если растр большой (я имею в виду геометрические размеры – ширину и высоту), то он заранее плох для баннера. Конечно это важно, но не стоит и забывать о том, что сложный растр, с большим количеством мелких деталей также опасен непомерным весом. А при оптимизации (компрессии) эти детали все равно теряются или искажаются до безобразия. Лично я не люблю жестко скомпрессированый грязный растр. Он портит картинку, дешевит ее. Растр должен присутствовать в разумных количествах. Логично использовать небольшие растры в тех местах, где нельзя обойтись вектором, или когда аналогичный вектор весит больше растра.
   ХИТРОСТИ ДЛЯ РАЗРАБОТЧИКОВ:
   - для облаков можно использовать небольшие растры, увеличивать их в баннере (облако все равно расплывчатое, лишний блюр не повредит), и можно компрессировать такой растр достаточно жестко (вплоть до 15 – 20%) после чего не забыть на клип с таким облаком повесить эффект brightness = 100. Все погрешности компрессии скроются и мы получим милое растровое облако при минимуме веса
   - если какой-то большой кусок растра кадрируется (обрезается) и при любых движениях никогда целиком не входит в кадр – смело режьте те участки, которых никогда не будет видно. Нам не нужны лишние килобайты, не участвующие в процессе.
2. Векторные картинки.
   Они тоже имеют свой вес – каждая ключевая точка – плюс к общему весу. Кривая весит больше прямой – обычная математика. Для описания одного отрезка используется две точки, для описания одной кривой – три, как минимум. Сложный, неоптимизированый вектор часто бывает даже тяжелее растра. Учитывая рендер флешовой картинки некоторые мелкие детали стоит сразу исключать или упрощать, ибо они все равно будут смазаны, вес увеличится, а красоты и гармонии не прибавит. Если борьба с весом идет не на жизнь, а на смерть — в ход идет все, убираем все лишние опорные точки, где можно меняем кривые на прямые, участки близкие по цвету упрощаем или вообще объединяем, градиенты сбрасываем на свалку истории. Не забывайте, зачастую картинка находится в кадре очень мало, и на мелкие детали зритель просто не успевает обратить внимание.
   Вот перед вами весы. Слева – красивые, детально отрисованные – их вес 4 килобайта. Справа – давайте без придирок, ни чуть не хуже. Немного не такие, но не хуже. 1,8 килобайт.
   
   Теперь прокликайте по сцене и сравните их в увеличенном состоянии. Ужасающее зрелище. Но во время ролика, эти весы присутствуют на сцене менее секунды, при этом треть времени фейдятся из белого. И зачем мне более 2-х лишних килобайт когда лимит – 15?
   ХИТРОСТИ ДЛЯ РАЗРАБОТЧИКОВ
   - Используйте символы. Два одинаковых рисунка отнимут больше килобайт, чем два символа.
3. Тексты.
   Тексты бывают сглаженные и не сглаженные. С последними очень просто иметь дело – с ними ничего нельзя сделать, да и не нужно. Весь вес уходит только на строку, которую вы пишете. Сглаженные шрифты требуют внедрения глифов (это, кто не в курсе – векторное изображение буквы). К счастью, внедряются не все буквы по отдельности, а только те, которые участвуют в ролике. Для слова МАМА нужно всего два глифа. Конечно, если вы создали динамическое поле и внедрили в него все буквы русского алфавита, то тут уже сами виноваты. Для слова МАМА весь алфавит и не нужен.
   ХИТРОСТИ ДЛЯ РАЗРАБОТЧИКОВ:
   - Если уже совсем невмоготу и вы не знаете откуда брать эти несчастные десятые килобайта – вспомните, что некоторые латинские буквы равны русским.
   - В некоторых случаях помогает злобный ход. Допустим тексты использованы в графике как элемент. Причем элемент достаточно мелкий. Такой, что в общем то детально буквы нельзя разобрать. Я в этих случаях выбираю три четыре буквы, которые наиболее обобщенно представляют весь алфавит и заменяю ими текст. Белиберда получается страшная, но в итоге этого никто не видит.
   Вот посмотрите. Страница слева весит 5.8 кб, справа 3.1 кб
   
4. Анимация.
   Основные пожиратели драгоценных килобайт …. ключевые кадры и твины. Парадоксально, но именно с удаления лишних твинов и ключевых кадров нужно начинать оптимизацию. Почему? Потому что это результат труда флеш-разработчика, о котором никто не знает и не должен знать – мы видим анимацию а не количество кадров. И именно ляпы с лишними кадрами могут отнять драгоценные пару килобайт от качества картинки, кропотливо созданной дизайнером.
   За годы борьбы с баннерами я разработал тактику максимального уменьшения веса анимации и эта тактика – программная анимация. В самом страшном случае, можно свалить все символы на сцену и завести всего два слоя – для графики – один большой кадр, и для кода, на ключевых кадрах которого мы и будет прописывать когда показать или спрятать, и куда привести клип. Конечно это затрудняет разработку, но увы – таковы правила игры – баннер должен вписаться в лимиты размеров.
   Более того. Сейчас я сдам вам нехитрый кусок кода, на котором я строю все свои баннеры. Он, конечно, неоптимален. В нем не реализованы анимации цвета (пока было без надобности), но это работает и спасает мне килобайты. Если вам по душе такая идея – модифицируйте скрипт, пишите свой собственный – боритесь за свои килобайты !!! 

   //всего три функции для анимации.
   // animate - линейное движение от знаения к значению
   // easeOut - плавное прибытие в точку
   // easeIn - плавный уход со сцены
   // испольование:
   // Перед тем как применить одну из функций к клипу,
   // создается соответсвующий объект, в котором указывается
   // какие свойства клипа надо анимировать -
   // альфу, _x или _y, _xscale и т.д
   // animate. Пример использования
   //анимация _x с шагом 0.3
   // анимация _alpha с шагом 1
   // mc.animate = {_x:0.3,_alpha:1};
   // animate(mc);
    
   function animate(mc)
   {
   	mc.onEnterFrame = function ()
   	{
   		if(!_paused)
   		{
   			for (var props in this.animate)
   			{
   				this[props] += this.animate[props];
   			}
   		}
   	}
   }
    
   // обычно используется для того чтобы клип плавно
   // приехал в нужную точку. Начально положение задается
   // или скриптом, или в среде разработки - куда положим
   // оттуда и приедет.
   //mc.easeout = {_x: 20,_y:20};
   //easeOut(mc);
    
   easeOut(prize0);
    
   function easeOut(mc)
   {
   	mc.onEnterFrame = function ()
   	{
   		if(!_paused)
   		{
   			for (var props in this.easeout)
   			{
   				var delta = this.easeout[props] - this[props];
    
   				this[props] += delta/3;// 3 - скорость передвижения
   			}
   		}
   	}
   }
    
   //эту функцию я использую чтобы плавно выкинуть клип со сцены
   // поэтому обекту easein я передаю начальный шаг,
   // а не конечную точку.
   // с каждым кадром шаг перемножается на 2, что дает
   // прирост в скорости. Когда значения выходит за рамки
   // -3000 3000, анимация останавливается.
   // ПРИМЕР:
   // mc.easein = {_x:0.5,_alpha:-1};
   // easeIn(mc);
   function easeIn(mc)
   {
    
   	mc.onEnterFrame = function ()
   	{
   		if(!_paused)
   		{
   			for (var props in this.easein)
   			{
    
   				this[props] += this.easein[props];
   				this.easein[props] *= 2;
   				if(Math.abs(this[props])>3000) this.easein[props] = 0;
   			}
   		}
   	}
   }
    
   //// А ВОТ ТУТ ВНИМАНИЕ!
   // Существет плавило, по которому пользователь имеет право
   // остановить баннер кликнув на stop в контекстном меню.
   // Чтобы наша программная анимация соображала когда ее
   // остановили - существует постоянная проверка на равенство
   // текущего кадра предидущему.
   var _paused = false;
   var cf;
   onEnterFrame = function()
   {
   	if(_currentframe == cf) _paused = true; else _paused= false;
    
   	cf = _currentframe;
   }

Вот пожалуй и все, что я пока хотел сказать о баннерах.
Если вам известны какие-то хитрости и способы по борьбе с лишним весом – комментируйте, делитесь )))

Popularity: 18% [?]

Entry Filed under: ActionScript,fx,анимация,Полезное