Главная » Adobe Photoshop CS2 » Создание кадров


Создание кадров

Создание кадров
Изображение подготовлено. Теперь займемся созданием кадров анимации. Для начала организуем два кадра — первый и последний. При этом мы применим небольшой трюк, основанный на том, что ImageReady, как и Photoshop, хранит информацию об объекте на слое, перевешенном за пределы документа.
1. Выберите инструмент Move (Перемещение) и переместите слой с изображением самолета за левую границу документа. Чтобы передвигать слой точно по горизонтали, удерживайте при этом клавишу . He бойтесь, изображение самолета не пропадет!
2. Откройте палитру Rollover (Ролловер) и выберите в ее меню команду Match Layer Across All Rollovers (Установить состояние слоя для всех ролловеров). Этим вы сделаете текущее состояние слоя с самолетом одинаковым для всех ролловеров. Иными словами, как бы вы ни перемещали курсор мыши по ролловерам, самолета все равно не будет видно.
3. Выделите в палитре Layers (Слои) слой с текстом и снова выберите команду Match Layer Across All Rollovers (Установить состояние слоя для всех ролловеров). В отличие от самолета, текст должен быть всегда виден.
4. Сделайте слой с текстом полностью прозрачным.
Итак, перед вами начальное состояние анимационного ролика: самолёт и текст не видны. Создадим кадр с заключительным состоянием ролика.
1. Откройте палитру Animation (Анимация) командой Show Animation (Показать анимацию) из меню Window (Окно), если ее нет на экране.
2. Текущее состояние документа принимается как первая фаза анимации. Ему соответствует миниатюра первой фазы анимации.
3. Создайте еще одну фазу, нажав кнопку с изображением листа бумаги в нижней части палитры или выбрав команду New Frame (Новый кадр) из меню палитры. Рядом с миниатюрой первой фазы анимации в палитре Animation (Анимация) появится еще одна. Пока обе фазы идентичны.
4. Щелкните мышью на миниатюре второй фазы.
5. Выберите инструмент Move (Перемещение) на панели инструментов. Переместите слой с изображением самолета вправо так, чтобы самолет оказался за правым краем документа
.
6. Сделайте слой с текстом "Welcome to Adventure!" полностью непрозрачным. Активная миниатюра в палитре Animation отразит новое состояние документа.
Расчет промежуточных фаз
Мы определили начальную и конечную фазы анимации. В первой фазе самолет еще не "прилетел" и рекламная надпись не видна, а в последней, — самолет уже "улетел" и рекламная надпись появилась. А теперь почти фокус:
1. Выделите в палитре Animation (Анимация) миниатюры обеих фаз, щелкнув на каждой из них и нажав клавишу Ctrl.
2. Выберите команду Tween (Промежуточные кадры) из меню палитры Animation (Анимация) или нажмите одноименную кнопку на панели палитры. Она открывает одноименное диалоговое окно, изображенное. Переключатель Layers (Слои) переведите в положение All Layers (Все слои), в группе Parameters (Параметры) установите только флажок Position (Размещение), в поле Frames to Add (Добавить кадров) введите число 10.
3. Нажмите кнопку ОК. ImageReady автоматически построит промежуточные кадры между двумя выделенными.
4. Теперь можно и полюбоваться на готовую мультипликацию. Нажмите кнопку проигрывания анимации (треугольная стрелка вправо) в нижней части палитры Animation (Анимация) и посмотрите на результат в окне документа. Вокруг кнопки проигрывания находятся еще четыре кнопки управления просмотром анимации, аналогичных тем, что вы видели на пульте управления проигрывателем компакт-дисков. Это (левее) кнопка остановки, перехода к предыдущему кадру и к первому кадру. Справа располагаются кнопки перехода к следующему и к последнему кадру;
Как вы видите, программа "догадалась" о ваших манипуляциях с перемещением слоя и построила промежуточные стадии его движения. Впрочем, вы сами указали на это в диалоговом окне Tween (Промежуточные кадры). Рассмотрим его подробнее.
Переключатель Layers (Слои) определяет, какие слои изображения следует учитывать: все или только текущий, выделенный в палитре Layers (Слои). Группа флажков Parameters (Параметры) задает параметры, которые изменяются от кадра к кадру: положение слоя (Position (Размещение)), его прозрачность (Opacity (Непрозрачность)) или параметры эффектов (Effects (Эффекты)). Список Tween with (Переход между) определяет, между какими кадрами следует строить промежуточные. Если в палитре Animation (Анимация) выделены два или более кадра, то доступен только вариант Selection (Выделенными), говорящий о том, что промежуточные кадры надо делать, исходя из выделенных. Если в палитре выделен один кадр, то в списке доступны два варианта: предыдущий кадр (Previous Frame (Предыдущий кадр)) или следующий (Next Frame (Следующий кадр)). Следующим для последнего кадра является первый. И наконец, поле Frames to Add (Добавить кадров) задает количество промежуточных кадров.
1. Нажмите клавиши Ctrl + Z или выберите команду Undo (Отмена) из меню Edit (Редактирование). Это отменит последнюю команду Tween (Промежуточные кадры) и мы опробуем ее с новыми установками.
2. Выделите оба кадра в палитре Animation (Анимация) и выберите команду Tween (Промежуточные кадры) в ее меню.
3. В диалоговом окне Tween (Промежуточные кадры) установите флажок у параметра Opacity (Непрозрачность).
4. Нажмите кнопку ОК.
Просмотрите получившуюся анимацию. Надпись "Welcome to Adventure!" теперь как бы "проявляется" постепенно, изменяя прозрачность от 100% до 0%.
Время демонстрации (тайминг)
Для каждого кадра анимации вы можете задать произвольное время демонстрации.
1. Нажмите кнопку перехода к последнему кадру.
2. Щелкните на маленькой треугольной стрелке, расположенной ниже миниатюры кадра. Рядом с ней выводится текущее время демонстрации кадра — 0,00 сек.
3. В открывшемся списке выберите 2 сек. Теперь рекламная надпись будет находиться на экране дольше.
Учтите, что при демонстрации анимации в ImageReady время демонстрации кадров не соблюдается. Для того чтобы просмотреть анимацию с реальным таймингом, воспользуйтесь просмотром в браузере при помощи кнопки Preview in Default Browser (Просмотр в браузере по умолчанию) на панели инструментов.
Оптимизация анимации
Для GIF-анимации исключительно важна оптимизация, поскольку это, фактически, несколько изображений в одинаковом формате. Если анимация долго загружается в браузере пользователя, то она скорее его не привлечет, а оттолкнет.
Для всех кадров анимации используются одинаковые параметры оптимизации, включая индексированную палитру. Параметры оптимизации устанавливаются в палитре Optimize (Оптимизация).
1. Перейдите на вкладку Optimized (Оптимизированное) в окне документа, чтобы следить за результатом оптимизации.
2. В палитре Optimize установите формат GIF, ведь формат JPEG, для которого оптимизирована остальная часть изображения, не позволяет хранить анимацию. Таким образом, один фрагмент (анимационный) изображения будет сохранен в формате GIF, а остальные — в JPEG.
3. Выберите в списке Color reduction algorithm (Алгоритм сокращения количества цветов) палитру Selective (Селективная). Достаточным количеством цветов будет 16. Установите его в списке Colors (Цвета).
4. Отмените сглаживание, выбрав в списке Dithering Algorithm (Алгоритм сглаживания) вариант No Dither (Без сглаживания). Это сделает файл более компактным и совсем не ухудшит качества изображения.
Мы задали достаточно жесткий режим оптимизации, но он вполне оправдан. Исходное изображение самолета само по себе содержит совсем немного цветов и плавных цветовых переходов.
Для GIF-анимации существуют и особые алгоритмы оптимизации.
1. Командой Optimize Animation (Оптимизировать анимацию) из меню палитры Animation (Анимация) откройте одноименное диалоговое окно, предлагающее два направления оптимизации. Первое состоит в автоматической обрезке каждого кадра изображения, чтобы в нем оставались только изменившиеся области. Второй путь заключается в удалении всех пикселов, которые не изменяются от кадра к кадру. Оба способа оптимизации в большинстве случаев приносят очень существенный выигрыш и мы рекомендуем их использовать.
2. Нажмите кнопку ОК. Анимация оптимизирована.

Comments are closed.