ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

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

Анимация формы и растровый рисунок. Использование стандартных эффектов Flash

Анимация формы

К обычным растровым рисункам применима только анимация типа Движение. Но если разбить растровое изображение с помощью комбинации клавиш Ctrl>+<B>, то на слое с растровым рисунком можно осуществить анимацию типа Форма.

Анимация Форма на растровом рисунке

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

    Купол

  2. С помощью комбинации клавиш <Ctrl>+<B> разобьем растровый рисунок.
  3. Нажмем клавишу <F6> и создадим ключевой кадр на 25 фрейме. Зададим на панели Свойства анимацию Форма.
  4. На первом ключевом кадре с помощью инструмента Прямоугольник нарисуем вне сцены прямоугольник без контура.
    Примечание. Как только мы помещаем фигуру на разбитый растровый рисунок, она сразу же становится его частью. И с дальнейшей трансформацией и перемещением прямоугольника растровый рисунок искажается.
  5. Создадим четыре копии прямоугольника и разместим их на фотографии, как показано на рисунке.

    Панель клипа town3

    Протестируем клип.

    В окне веб-браузера это будет выглядеть ТАК.

  6. Создадим новый слой круг. И реализуем аналогичную анимацию Форма, но в качестве активной формы воспользумся фигурой приведенной на рисунке.

    Панель клипа с кругом

Протестируем ролик.

В окне веб-браузера это будет выглядеть ТАК.

А теперь создадим анимацию формы для векторного слоя, находящегося над слоем с растровым изображением.

  1. В новый документ town5 импортируем изображение купол.
  2. Создадим над слоем с растровым изображением новый слой и нарисуем прямоугольник.
  3. Создадим последовательность анимации Форма в соответствии с рисунком.
  4. Для второго и третьего ключевых кадров, поместим окружность иного чем прямоугольник цвета. Затем удалим ее, образовав в прямоугольнике дыру.
  5. Для последней анимации (45, 55, 70 фреймы) сделаем изменение прозрачности Альфа от 20 до 100%.

    Панель клипа town5

Протестируем ролик.

В окне веб-браузера это будет выглядеть ТАК.

Использование стандартных эффектов Flash. Эффект Размытие на растре

Кроме эффекта Размытие, во Flash существует также фильтр Размытие. Не стоит их путать. Эффект работает с динамикой, размывая края изображения путем последовательного добавления в новые кадры увеличенных копий объектов с меньши значением параметра Альфа. Фильтр работает со статикой и размывает изображение наподобие команды Размытие в растровой графике. Применяя фильтр размытию подвергается все изображение.

  1. Создадим новый документ blur, и импортируем в него изображение. Создадим символ типа Фрагмент ролика.

    Одуванчики

  2. Нажмем клавишу <F6> на десятом кадре, выделите изображение данного фрейма и используя меню Вставить -> Эффекты монтажной линейки -> Эффекты, выбираем пункт Размытие. В появившемся диалоговом окне Размытие осуществим настройку параметров эффекта как показано на рисунке.

    Настройка диалогового окна Размытие

Протестируем ролик.

В окне веб-браузера это будет выглядеть ТАК.

Редактирование эффекта

Для редактирования эффекта выделим изображение, содержащее эффект, нажать правую кнопку мыши и в контекстном меню выбрать пункт Редактировать. Появится предупреждение.

Диалоговое окно

Нажмем ОК.

Панель символа

Как видите, Flash самосгенерировал массу слоев, на каждом из которых используется один и тот же прием —изменение размера и прозрачности базового рисунка.

Дополнительные эффекты

Как известно, компьютеры работают с цветовой схемой RGB (Red, Green, Blue), содержащей в своей основе три цветовых канала: красный, зеленый и синий. Их значения можно варьировать при создании эффектов.

Легче всего понять метод работы с Дополнительным эффектом на черно-белой фотографии.

  1. Создадим новый документ town6 и импортируем в него изображение.
  2. Выделим изображение и нажмем клавишу <F8>, и преобразуем его символ типа Графика.
  3. Выделим символ и в списке Цвет панели Свойства выберем пункт Дополнительно.
  4. Справа от выбранного пункта находится кнопка Параметры, нажмем ее.
  5. Откроется диалоговое окно Расширенный эффект.
  6. Введем параметры изображенные на рисунке.

    Черно-белое изображение

  7. Таким образом, мы избавились от красного и зеленого цветов и ввели добавочное значение для зеленого цвета (изображение позеленело).
  8. Создадим анимацию Движение и реализуем переход от черно-белого изображения к цветному и обратно.

Протестируем ролик.

В окне веб-браузера это будет выглядеть ТАК.

Эффект гравюры

  1. Создадим новый документ town7 и импортируем в него изображение.
  2. Преобразуем изображение в символ типа Графика и вызовем диалоговое окно Расширенный эффект.
  3. Настроим параметры так как показано на рисунке. Удалим значения красного и зеленого цвета, вписав вместо них 0. Значение синего цвета увеличим до 500. Добавочное значение установим -200.

    Настройка параметров Расширенный эффект

  4. Создадим анимацию Движение.

Протестируем ролик.

В окне веб-браузера это будет выглядеть ТАК.

Негатив фотографии

Эффект достигается за счет использования полной инверсии цветов.

  1. Создадим новый документ town8 и импортируем в него изображение.
  2. Преобразуем изображение в символ типа Графика и вызовем диалоговое окно Расширенный эффект.
  3. Настроим параметры так как показано на рисунке. С одной стороны мы полностью убираем каналы (значение -100%), а с другой, прибавляем им добавочное значение (+255). На канале Синий устанавливаем значение 205, добавив изображению оттенок.
  4. Создадим анимацию Движение, осуществляющее переход от негатива к цветной фотографии.

    Настройка параметров для негатива

Протестируем ролик.

В окне веб-браузера это будет выглядеть ТАК.

Повышение контраста

  1. Создадим новый документ town9 и импортируем в него изображение.
  2. Преобразуем изображение в символ типа Графика и вызовем диалоговое окно Расширенный эффект.
  3. Настроим параметры так как показано на рисунке. Мы значительно увеличиваем процент использования всех каналов, но особенно красного делая его значение равным 800%.
  4. Создадим анимацию Движение.

    Настройка параметров для придания контрастности

Протестируем ролик.

В окне веб-браузера это будет выглядеть ТАК.