Я расскажу, как решить одну из самых частых проблем — градиентная заливка для текста.
Существует два способа решить проблему: правильный и неправильный.
Неправильный способ заключается в том, чтобы нужный текст с помощью команды Break Apart, а потом каждой букве выставить градиентную заливку и угол заливки градиента. Можете попробовать сделать хотя бы одно слово градиентом, и вы поймете, почему этот способ неправильный. К тому же, если в баннер будут вносить правки (а их будут вносить обязательно), то прийдется помучаться с изменениями.

Я же предлагаю правильный способ. Он очень простой. У нас есть образец текста, который нам нужно анимировать:

Что нам для этого нужно, так это два слоя. В первом (верхнем) слое будет текст, во втором слое будет прямоугольник с градиентной заливкой, который можно нарисовать с помощью инструмента Rectangle Tool. Заливка будет именно такой, какая нам нужна. Далее настраиваем расположение слоев так, чтобы тект был строго в рамке и делаем текст маской для прямоугольника с градиентом. Смотрим на картинку:

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

Результат:

(Please open the article to see the flash file or player.)

Я дам простой способ, как останавливать баннер на определенный промежуток времени с помощью Action Script 2.

Единственное, что нам требуется, так это в определенном кадре на временной шкале, момент которого мы хотим остановить, прописать следующий код:
stop();
var id:Number = setInterval( function ()
{
clearInterval(id);
play();
}, 4000);


Разберем его.

1. stop(); останавливаем проигрывание флеш. Будьте внимательны, остановится только те действия, которые происходят в конкретном MovieClip, если у вас на сцене есть клипы с анимацией, то для них надо отдельно делать остановку.

2. Далее определяем переменную id и задаем ей метод setInterval() , внутри которого будет работать функция. Задача функции, в данном случае, отключить действие переменной id и запустить проигрывание ролика дальше. Вообще, в этой функции могут происходить любые действия. И данный пример, лишь условность.

3. Собственнно, в самом конце мы указываем необъодимую нам задержку. В примере выставлена пауза на 4 секунды. То есть 3500 – это будет три с половиной секунды.  И так далее.

(Please open the article to see the flash file or player.)

Как всё происходит. У нас есть три слоя. Первый слой – код (всегда ставлю его наверх, чтобы проще было редактировать). Второй слой – это MovieClip [mask_mc] с маской.  Но маска не простая, в ней находится некая фигура, которая редактируется в зависимости от потребностей дизайна. Но с обязательной градиентной заливкой и наличием цвета заливки с нулевой прозрачностью. В моем примере это выглядит так:

Третий слой –  это MovieClip [topPicture_mc] с нашим изображением. Сама по себе маска не сработает так, как нам нужно. По-этому в первом кадре слоя с кодом пишем следующее:

this.topPicture_mc.cacheAsBitmap = true;
this.mask_mc.cacheAsBitmap = true;
this.topPicture_mc.setMask(mask_mc);

Разберем по порядку.

В первой и второй строчке мы приказываем картинке и маске закешироваться в bitmap.

В третьей строчке мы объявляем клип [ mask_mc ] маской клипа [ topPicture_mc ].

Теперь над клипом с маской можно проводить различные модификации и анимировать, как захочется. Будьте аккуратны, вручную маску для клипа с картинкой делать не надо.

Исходник флешки прилагаю, так как в нем более наглядно показан принцип и использование такой анимации.

Скачать исходник.

Но что делать, если нам прислали макет, где баннер требует изображения с прозрачными краями? А это каждый второй баннер, как показывает опыт. Разница между png без прозрачных элементов и с прозрачными очевидна.

(Please open the article to see the flash file or player.)

В данном случае у нас разница в 2 Кб. Для примера этого достаточно. Но картинки бывают разные, и порой разница увеличивается до 30-40 Кб.

Так вот существует несколько вариантов развития событий.

Первый (и самый простой) вариант годен при условии, что в технических требованиях у нас нет ограничений на вес баннера. В этом случае мы вставляем png с прозрачными элементами в флеш и анимируем, как простую картинку. Вес баннера будет больше, чем вариант использования png без прозрачности или jpg. Но в данном контексте это нас устраивает.

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

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

В результате получаем  одинаковых Тигров.

(Please open the article to see the flash file or player.)

Если первые два способа не подходят, то наступает момент для использования третьего варианта. В данном случае, нам предстоит самое сложное и нелюбимое мною занятие: создание маски для объекта. Идея проста: надо отделить Тигру от белого фона с помощью наложения маски по контуру объекта. Для этого я создаю новый слой над слоем с изображением, использую инструмент Pen Tool для создания контура, после этого выбираю заливку любого цвета и создаю из верхнего слоя маску для нижнего.

Результат на лицо.

(Please open the article to see the flash file or player.)

Второй и третий способ можно объединить. В данном случае Тигра потерял усы. Чтобы их вернуть, в маску нужно внести изменения, захватив усы, и клипу с Тигрой добавить Multyply, тогда усы будут на фоне без белых пятен.

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

Для начала ставим условие, что у нас нет ограничений на вес баннера, и фон у нас одноцветный, так что прибегать к прозрачности мы не станем. Файл jpg я сохраняю с 100% сохранением качества. И теперь смотрим, что получится, если взять две картинки разных форматов и поместить их в флеш:

(Please open the article to see the flash file or player.)

Какие результаты мы получаем?

На первый взгляд, может показаться, что png выгоднее, так как оригинальный размер файла на 2 Кб меньше, чем аналогичный у jpg. Но в итоге, после компрессии в среде флеш, вес файлов сравнялся на отметке в 15,5 Кб. Полагаю, что 0,1 Кб — это несущественный момент в сравнении.

Таким образом у нас ничья. Оба формата при равных условиях дали одинаковый вес изображения. Так что использование png либо jpg остается за вашими личными предпочтениями.

P.S.

Уменьшив качество картинок до 10% средствами флеша, мы получаем одинаковые искажения картинок.

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

Так вот, чтобы активировать сглаживание картинки, необходимо в библиотеке символов, клипов и изображений с помощью выпадающего контекстного меню (кликаем правой кнопкой по нужной картинке, кто не знает вдруг) войти в свойства картинки (Properties, на англ.) и поставить галочку напротив allow smoothing. Выглядит вот так:

Теперь смотрим пример, на нем прекрасно видно, как с помощью нехитрой операции баннер становится качественнее.

(Please open the article to see the flash file or player.)

Подводя итоги, скажу, что я стараюсь для каждого изображения сразу активировать allow smoothing. На размеры баннера это никак не повлияет. Современные ПК легко справляются с такой нагрузкой при дополнительной обработке изображения.

Так что сглаживанию картинок быть!

P.S.

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

Первая мысль, которая возникает при создании рамки у баннера размером, к примеру, 240 на 400 пикселей, создать прямоугольник соответствующего размера без заливки и с рамкой в 1 пиксель. Но как только баннер публикуется, видно, что этот вариант отпадает, потому что правая и нижняя рамки пропадают, а точнее, скрываются за областью видимости.

Тогда возникает второй вариант — уменьшить размер прямоугольника на один пиксель по высоте и ширине. Получаем рамку 239 на 399 пикселей. И вот, всё работает. Но нет. Посмотрим пример:

(Please open the article to see the flash file or player.)

Заметили неприятный момент в нижнем правом углу? Присмотритесь. Угол слегка искажен, в отличии от остальных углов. А на увеличенном фрагменте видно, как некрасиво размещается рамка.

И тогда мы применяем тайный прием кунг-фу и позиционируем нашу рамку следующим образом: ось x: 0.5 px, ось y: 0.5 px. То есть сдвигаем нашу рамку на 0,5 пикселя по высоте и ширине.

(Please open the article to see the flash file or player.)

Теперь результат радует глаз.

В будущих постах я обязательно расскажу, как правильно делать рамки у баннеров-растяжек, которые меняют шиниру и высоту в зависимости от окна браузера.

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

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

P.S.

Информация в этом блоге основывается на моем личном опыте и, возможно, она будет отличаться от вашего опыта.