Флеш-баннеры. Детали. Уроки. Нюансы.Флеш-баннеры: детали, уроки, нюансы.
  • блог
  • Портфолио
  • Контактная информация
Текущая страница: Флеш-баннеры. Детали. Уроки. Нюансы. » Детали » Градиентная маска

Градиентная маска

Опубликовано в Вторник, Ноябрь 15, 2011. Категория: Детали  метки: gradient, mask, градинет, градиентная маска, маска  

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

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash 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 ].

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

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

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

Прочитал сам, поделись с другими.

Опубликовать в Facebook
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Одноклассники
Опубликовать в Twitter
Опубликовать в Яндекс
« Прозрачность для изображения
Пауза для сцены баннера »
  • Рубрики
    • Уроки
    • Детали
  • Метки
    allow smoothing border gradient jpg mask opacity png setInterval smothing stop swfobject text бордер вставка флеша градиент градиентная маска градинет интервал маска оптимизация остановка пауза прозрачность рамка сглаживание картинки текст
  • Архивы
    • Ноябрь 2011
  • Ссылки
    • Универсальный декодер кодировок
    • Портфолио автора
Флеш-баннеры: детали, уроки, нюансы.
По всем интересующим вопросам пишите на dan@s-22.com.ua
Copyright © 2012