Урок 16

Создание анимированных изображений для Web

Содержание урока

1. Создание многослойного изображения как базиса для анимации.

2. Совместное использование палитр Layers и Animation для создания анимированных последовательностей

3. Изменение отдельных фреймов, нескольких фреймов, анимации в целом.

4. Использование команды Tween для создания плавных переходов между различными установками прозрачности слоёв и расположения.

5. Просмотр анимации в ImageReady и в браузере.

6. Оптимизация анимации при помощи палитры Optimize.

Создание анимаций в ImageReady

Анимация создаётся из единичного изображения с помощью анимированных GIF-файлов. Анимированный GIF – это последовательность изображений, или кадров (фреймов). Каждый последующий фрейм слегка отличается от предыдущего, создавая при быстром просмотрое иллюзию движения. Анимацию можно создать несколькими путями: используя кнопку дублирования текущего кадра (duplicate current frame) в палитре Animation, а затем – палитру слоёв, чтобы назначить состояние изображения, связанное с каждым фреймом; используя функцию Tween для быстрого создания новых фреймов с целью искривления текста, изменения прозрачности слоя, расположения объектов, появления, исчезновения или движения элементов изображения; посредством открытия многослойного файла Photoshop для анимации. когда каждый слой становится фреймом. Создавая анимационную последовательность, рекомендуется находиться в режиме просмотра Original, чтобы ImageReady не пыталась реоптимизировать картинку во время редактирования содержимого фреймов. Файлы анимации имеют выходной формат GIF или QuickTime. Анимацию в формате JPEG или PNG создать нельзя.

Работа со слоями в анимациях для WEB

Работа со слоями – необходимая часть создания анимаций в ImageReady. Помещая каждый элемент анимации на собственный слой позволяет менять его положение и внешний вид в последовательности фреймов. Эти изменения могут быть специфическими для конкретных фреймов (Frame-specific changes) или глобальными (Global changes). Первые воздействуют только на активный фрейм. По умолчанию изменения, произведенные в слоях с помощью палитры Layers – включая прозрачность слоя, характер смешения, видимость, расположение, стиль, являются специфическими для активного фрейма. Хотя можно назначить изменения слоя для всех фреймов анимации с помощью кнопок unity в палитре слоёв.

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

В этом уроке мы создадим анимацию для фирмы, выпускающей соки. Откроем web-браузер и выполним команду File>Open>Jus.html. Просмотрим готовый файл и закроем браузер. Затем откроем ImageReady. Создадим рабочее пространство специально для решения наших задач. Для этого закроем группу палитр Color и Rollovers. Изменим размер палитры Layers так, чтобы она позволяла показать по крайней мере пять слоёв и разместим ее ниже палитры Optimize, оставив между двумя палитрами пустое пространство около 1 см для последующего растягивания палитры Optimize. Сохраним рабочее пространство: Window > Workspace > Save Workspace> Animation_16. Теперь его можно вызвать в любое время.

Анимация методом скрытия и показа слоёв

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