Техника Web-дизайна для студента
Создание GIF-анимации
На основе конкретных примеров в разделе будут рассмотрены общие приемы и способы создания GIF-анимации для НТТР - документов.
Имитация вращения объекта вокруг вертикальной оси
□ Для создания нового изображения воспользуемся командой меню File | New (Файл | Создать). В открывшемся диалоговом
Окне New (Создать) введем размеры изображения 100 х 100 рх. Выберем цветовую модель изображения (Color Mode) — RGB Color, глубину цвета изображения — 8 bit, а содержимое фона (Background Contents) — Transparent (Прозрачный фон).
О Из группы векторных инструментов выберем Custom Shape (Готовая форма). На панели параметров, нажав кнопку Shape Layers (Слои формы), установим соответствующий режим рисования.
О Из раскрывающегося списка Shape (Форма) на панели параметров выберем нужную форму. Построим изображение формы в площади рисунка, растягивая его при нажатой клавише мыши и удерживая клавишу <Shift>, что позволит получить изображение правильной формы. Размеры формы и ее положение на этом этапе построения значения не имеют. Цвет заливки формы соответствует цвету, установленному в поле Color (Цвет) на панели параметров.
О Выберем инструмент Move Tool (Перемещение) на панели инструментов и установим флажок Show Bounding Box (Показать маркеры) на панели параметров. Вокруг изображения формы появятся маркеры, позволяющие изменять размеры вручную. Гораздо точнее и удобнее это можно сделать с помощью панели параметров, которая появится после щелчка мышью по любому маркеру (после появления двухсторонней стрелки). Прежде чем приступить к изменению параметров, нужно убедиться, что все они заданы в пикселях (рх) и если это не так, щелкнуть правой кнопкой по соответствующему полю и в раскрывшемся списке выбрать pixels (пиксели). Далее в поля X и Y вводим значения координат центра формы (50 рх), а в поля W и Н — ширину и высоту формы (100 рх). Завершается изменение параметров щелчком по кнопке Commit Transform (Завершить преобразование) в правой части панели параметров или нажатием клавиши <Enter>.
О Откроем палитру Layers (Слои) и убедимся, что появился слой формы Shape 1. Слева от названия слоя формы располагаются две миниатюры. Первая из них — закрашенный прямоугольник. Двукратный щелчок по нему откроет диалоговое окно Color Picker (Выбор цвета), в котором можно выбрать новый цвет заливки формы. Вторая миниатюра содержит
изображение контура формы без заливки. В нижней части палитры нажмем кнопку Add a layer style (Добавить эффект слоя) и выберем эффект Bevel and Emboss (Фаска и рельеф). На рис. 3.30 показана палитра Layers (Слои) после всех описанных действий.
|
Рис. 3.30. Палитра Layers после создания векторной формы и применения к ней эффекта Bevel and Emboss |
|
Рис. 3.31. Изображение, подготовленное к имитации вращения вокруг вертикальной оси |
|
Нарис. 3.31 показан внешний вид созданного изображения. |
Сделаем запись о форме в палитре Layers более компактной, спрятав сведения о примененном эффекте. Для этого нужно щелкнуть по треугольной стрелке правее имени формы Shape 1.
О Создадим копию слоя Shape 1, для чего щелкнем по имени слоя правой кнопкой мыши и в открывшемся меню выберем
Duplicate Layer (Копировать слой). В открывшемся диалоговом окне будет предложено имя нового слоя Shape 1 сору, с чем можно согласиться, чтобы не тратить время на переименование. Далее, находясь на новом слое (запись о нем в палитре Layers выделена), нужно воспользоваться панелью параметров и уменьшить ширину формы до 90 рх.
□ Повторим действия, создавая каждый раз копию только что полученной копии и уменьшая ширину формы на 10 рх. После проделанных действий изображение будет выглядеть, как показано на рис. 3.32.
|
Рис. 3.32. Изображение после создания нескольких слоев, с копиями, уменьшенными по ширине |
О Теперь можно было бы повторить действия по созданию копий слоев, постепенно увеличивая ширину формы. Но так как у нас уже имеются такие слои, то достаточно создать копии уже имеющихся слоев и переместить их на новые места в соответствии с номерами. Для этого начнем создавать копии слоев, начиная со слоя Shape 1 сору 8. Его копия получит имя Shape 1 сору 10 и расположится над слоем Shape 1 сору 8, копия слоя Shape 1 сору 7 получит имя Shape 1 сору 11 и т. д. до слоя Shape 1 сору 18, который расположится над слоем Shape 1. После описанных преобразований палитра Layers (Слои) должна иметь вид, как на рис. 3.33.
□ Остается расположить копии слоев в соответствии с номерами и подготовка изображения к созданию GIF-анимации будет завершена. Перемещение слоев в палитре осуществляется перетаскиванием при нажатой клавише мыши. Слой Shape 1 сору 9 следует расположить выше слоя Shape 1 сору 8, над ним слой Shape 1 сору 10 и т. д.
|
Рис. 3.33. Палитра Layers после создания всех копий слоев |
□ Для создания GIF-анимации перейдем в программу Adobe ImageReady, нажав кнопку Edit in ImageReady (Редактирование в программе ImageReady) в нижней части панели инструментов. После загрузки программы ImageReady мы увидим перешедшее в нее из программы Photoshop, только что созданное нами изображение. Если палитра AnimaTion (Анимация) не установлена, то ее нужно установить через меню Window (Окно). В меню палитры AnimaTion (Анимация) выберем команду Make Frames From Layers (Создать кадры из слоев), после чего каждый слой изображения формы станет кадром анимационного изображения. Палитра AnimaTion (Анимация) с первыми семью кадрами показана на рис. 3.34.
|
Рис. 3.34. Палитра Animation после создания кадров из слоев изображения |
□ Убедившись в том, что созданы все 19 кадров, можно приступать к воспроизведению анимации. В нижней части палитры AnimaTion (Анимация) имеется кнопка в виде треугольной стрелки Plays/stops animation (Проигрывание/остановка анимации), нажатие на которую позволит начать воспроизведение, а повторное нажатие остановит его. В одну группу с этой кнопкой входят еще три: Selects previous frame (Выделить предыдущий кадр), Selects next frame (Выделить следующий кадр) и Selects first frame (Выделить первый кадр). Под первым кадром располагается список выбора числа повторных воспроизведений анимации: Forever — непрерывно, Once — однократно, Other — другая. Выбор последнего режима воспроизведения подразумевает открытие диалогового окна Set Loop Count (Установка числа повторов) для задания числа повторов (от 1 до 30 ООО).
Для каждого кадра имеется возможность задания времени его демонстрации (задержки перехода к следующему кадру), которое располагается в нижней части кадра и по умолчанию равно 0 с. Щелчок по установленному значению раскрывает список, позволяющий выбрать задержку в секундах или вариант Other (Другая), при котором в открывающемся диалоговом окне задается произвольная задержка от 0 до 240 с. Если требуется изменить задержку сразу нескольких кадров, то они предварительно должны быть выделены. Для выделения идущих подряд кадров нужно выделить первый из них и, удерживая клавишу <Shift>, щелкнуть на последнем кадре. Выделение кадров в произвольном порядке осуществляется при нажатой клавише <Ctrl>. Выделение всех кадров осуществляется командой меню палитры Select all frames (Выделить все кадры).
При выборе числа повторов и времени задержки кадров следует помнить, что изменяющиеся с большой скоростью и в течение длительного времени изображения могут раздражать посетителей вашей страницы и вынудят их покинуть ее раньше времени. В некоторых случаях будет вполне достаточно повторить анимацию два-три раза. Возможно, также, сохранив большое число повторов, задать большую задержку на один из кадров (например первый кадр) и это сделает анимацию более спокойной. Для нашего примера рекомендуется установить задержку первого кадра 2 с и посмотреть результат.
О Сохранение анимации осуществляется командой File | Save Optimized As (Файл | Сохранить оптимизированное изображение как) меню программы ImageReady. В диалоговом окне Save Optimized As (Сохранить оптимизированное изображение как) в строке Тип файла следует выбрать, будет ли сохраняться только анимированный рисунок — Images Only (*.gif), готовый HTML-документ вместе с рисунком — HTML and Images (*.html) или только HTML-документ — HTML-Only (*.html). Если анимация создается для конкретного документа, то достаточно сохранить только один рисунок, вариант сохранения вместе с HTML-документом можно рекомендовать для предварительного просмотра анимации в окне браузера.
Имитация вращения объекта в плоскости вокруг центра
В предыдущем примере мы рассмотрели способ создания имитации вращения объекта вокруг вертикальной оси. Теперь рассмотрим имитацию вращения объекта вокруг центра.
□ Повторим в программе Photoshop действия по созданию нового изображения, описанные в предыдущем примере, сохранив те же размеры изображения 100 х 100 рх, но выберем другую форму (рис. 3.35).
□ К полученному изображению применим эффект градиентной заливки, для чего обратимся к палитре Layers (Слои). Щелкнем по левой кнопке в нижней части палитры — Add a layer style (Добавить эффект слоя) и в раскрывшемся меню выберем эффект Gradient Overlay (Градиентная заливка). В диалоговом окне Layer Style (Эффект слоя) можно изменить параметры эффекта. В частности из раскрывающегося списка Gradient (Градиент) можно выбрать многоцветную заливку по своему вкусу, а из списка Style (Стиль) — Radial (Радиальная заливка) Результат выполненных действий показан на рис. 3.35.
|
Рис. 3.35. Форма для имитации вращения с радиальной заливкой |
О Как и в предыдущем примере создадим копию слоя Shape 1, для чего щелкнем по имени слоя правой кнопкой мыши и в контекстном меню выберем Duplicate Layer (Копировать слой). Согласимся с тем, чтобы новый слой назывался Shape
1 сору. Далее, убедившись, что запись о новом слое в палитре Layers (Слои) выделена, нужно щелкнуть мышкой по любому маркеру вокруг изображения и на панели параметров инструмента Move Tool (Перемещение) в поле Set rotation (Установка поворота) установить угол поворота формы 5°.
|
Рис. 3.36. Результат создания пяти копий слоев формы и поворота каждой на 5° относительно предыдущего слоя |
О Повторим предыдущие действия еще 4 раза, создавая каждый раз копию только что полученной копии слоя и устанавливая угол поворота равным 5°. После всех описанных действий изображение будет выглядеть, как показано на рис. 3.36.
□ Теперь можно переходить к преобразованию полученного многослойного изображения в GIF-анимацию, в точности повторяя действия, описанные в последних пунктах предыдущего примера, а именно:
• переход в программу ImageReady и создание кадров из слоев изображения;
• воспроизведение полученной анимации и при желании изменение параметров воспроизведения (например числа повторных воспроизведений);
• сохранение анимации.
В HTML-документах часто применяют анимацию, в котором объект изменяет свой цвет. Рассмотрим порядок действий над созданием данного эффекта.
□
|
О Используя палитру Layers (Слои), создадим копию слоя Shape 1. Изменим цвет заливки формы копии слоя. Двукрат- |
В программе Photoshop повторим действия, описанные в предыдущих примерах, по созданию нового изображения. Установим те же размеры изображения 100 х 100 рх и выберем одну из готовых векторных форм. Пусть, например, форма будет красного цвета (рис. 3.37).
|
|
|
- □ х |
|
Рис. 3.37. Форма для имитации изменения цвета |
Ным щелчком по цветному прямоугольнику в соответствующей строке палитры Layers (Слои) откроем диалоговое окно Color Picker (Выбор цвета), в котором выберем синий цвет. Палитра Layers (Слои) после всех преобразований будет выглядеть, как показано на рис. 3.38.
|
|
□ 
|
Рис. 3.38. Палитра Layers после создания двух слоев формы разного цвета |
Перейдем в программу ImageReady. В палитре AnimaTion (Анимация) на первом кадре будет изображение формы синего цвета, так как копия слоя Shape 1 сору синего цвета. Щелкнем по кнопке с изображением глаза в левой части верхнего слоя Shape 1 сору палитры Layers (Слои). Этот слой станет невидимым, а изображение формы на первом кадре станет красным.
О В нижней части палитры Animation (Анимация) нажмем на вторую справа кнопку Duplicates current frame (Копировать текущий кадр), после чего появится новый кадр, являющийся точной копией первого кадра. Выполним повторный щелчок по кнопке с изображением глаза в левой части слоя Shape 1 сору палитры Layers (Слои), после чего слой снова станет видимым, а изображение формы на втором кадре станет синим.
□ Создадим третий кадр, являющийся копией второго и сделаем невидимым слой Shape 1 сору. Изображение третьего кадра станет красным. После этого палитра AnimaTion (Анимация) примет вид, показанный на рис. 3.39.
|
Рис. 3.39. Палитра Animation после создания трех кадров |
□ Между первым и вторым кадрами необходимо поместить промежуточные кадры, на которых цвет первого кадра будет постепенно становиться прозрачным. Таким образом, под первым кадром будет проявляться цвет второго кадра, в результате чего будет создаваться иллюзия плавного перехода от одного цвета к другому. Программа ImageReady позволяет автоматизировать процесс создания промежуточных кадров, для чего в нижней части палитры AnimaTion (Анимация) имеется кнопка Tween (Промежуток), нажатие на которую открывает одноименное диалоговое окно (рис. 3.40).
|
Рис. 3.40. Диалоговое окно Tween |
Второй кадр нужно предварительно выделить, щелкнув по нему мышью. В списке Tween With (Заполнить кадрами) можно выбрать: Selection (Между выделенными кадрами), First Frame (Начиная с первого кадра), Previous Frame (Начиная с предыдущего кадра). В нашем случае нужно выбрать Previous Frame (Начиная с предыдущего кадра). В поле Frames to Add (Добавить кадры) необходимо указать число промежуточных кадров, например 5. Переключатель Layers (Слои) нужно установить в положение All Layers (Все слои), а в группе Parameters (Параметры) установить флажок Opacity (Непрозрачность), сняв остальные флажки. После нажатия кнопки OK промежуток между первым и вторым кадрами будет заполнен пятью новыми кадрами. Выделим последний кадр (теперь он стал восьмым) и заполним промежуток между ним и предыдущим кадром также пятью новыми кадрами;
□ Анимация готова, ее можно просмотреть и сохранить.
Рассмотрим способ создания анимации с изменением эффектов изображения.
О В программе Photoshop проделаем уже известные операции по созданию нового изображения размером 100 х 100 рх, с прозрачным фоном. Построим готовую векторную форму в виде сердца красного цвета.
О Перейдем в программу ImageReady и откроем палитру Animation (Анимация). Используя кнопку Add a layer style (Добавить эффект слоя), в нижней части палитры Layers (Слои) раскроем список эффектов слоя, выберем Bevel and Emboss (Фаска и рельеф) и установим следующие параметры:
• В списке Style (Эффект) — Inner Bevel;
• В списке Technique (Техника) — Smooth;
• Переключатель Direction (Направление) в положение Up;
• В поле Depth (Глубина фаски) — 100 %;
• В поле Size (Размер теневой области) — 5;
• В поле Soften (смягчение границ) — 10.
Значения остальных параметров можно не менять.
□ Создадим еще две копии первого кадра в палитре AnimaTion (Анимация). Выделим средний кадр и в диалоговом окне Bevel and Emboss (Фаска и рельеф) изменим значение параметра Size на 25. После этого палитра AnimaTion (Анимация) будет иметь следующий вид (рис. 3.41).
|
Рис. 3.41. Палитра Animation после создания трех кадров с применением эффекта Bevel and Emboss |
□ Убедившись, что выделен средний кадр, поместим между первым и вторым кадрами промежуточные кадры, используя кнопку Tween (Промежуток) палитры AnimaTion (Анимация). В диалоговом окне Tween (Промежуток) из списка Tween with (Заполнить кадрами) выберем Previous Frame (Начиная с предыдущего кадра). Установим число промежуточных кадров 3, переключатель Layers (Слои) в положение All Layers (Все слои), а в группе Parameters (Параметры) установим флажок Effects (Эффекты), сняв остальные флажки. Выделим последний кадр, который теперь стал шестым, и также поместим между ним и предыдущим кадром три промежуточных кадра. Можно изменить время задержки среднего кадра, установив 0,5 с, что сделает анимацию более спокойной.
□ Полученную анимацию можно воспроизвести и при желании сохранить.
Для анимации часто применяют перемещение объекта, создавая иллюзию движения.
Прежде всего, необходимо найти подходящий по содержанию рисунок и подготовить его для использования в анимации. Подготовка может заключаться в создании прозрачного фона и уменьшении его размеров, если они велики. Обычно размеры рисунка не должны превышать нескольких десятков пикселей, в противном случае даже при небольшом числе кадров размер файла с анимацией будет достаточно большим, что затруднит его практическое использование. Предположим, что такой рисунок имеется (рис. 3.42) и находится в файле bus. gif, тогда его можно открыть непосредственно в программе ImageReady, используя команду File | Open (Файл | Открыть).
|
Рис. 3.42. Рисунок, подготовленный к имитации движения (размеры 100 х 39 рх) и открытый в программе ImageReady |
О В программе ImageReady создадим новое изображение, которое по высоте будет соответствовать высоте приведенного выше рисунка, а по ширине будет превышать его в два раза. Очевидно, что принципиального значения ширина рисунка не имеет. При большей ширине можно будет дольше наблюдать движение объекта, но при этом потребуется и больше кадров. Используя команду File | New (Файл | Создать), откроем диалоговое окно New Document (Создать документ) и введем значение поля Width (Ширина) — 200 рх, поля Height (Высота) — 39 рх. Переключатель Contents of First Layer (Заполнение первого слоя) необходимо установить в положение Transparent (Прозрачный). Назовем это изображение pic5.
О Сделаем активным рисунок bus. gif. Откроем палитру Layers (Слои), подведем указатель мыши к названию слоя Layer 1, нажмем левую кнопку и, не отпуская ее, поместим указатель над изображением pic5, после чего отпустим кнопку мыши. В палитре Layers (Слои) изображения pic5 должен появится новый слой — копия слоя изображения bus. gif.
Выбрав инструмент Move Tool (Перемещение), можно переместить слой таким образом, чтобы он занял правильное положение по вертикали в границах изображения pic5. При включенном инструменте Move Tool (Перемещение) слой можно перемещать не только мышью, но и клавишами управления курсором. При нажатой клавише <Shift> шаг перемещения возрастает с 1 до 10 рх.
□ Откроем палитру AnimaTion (Анимация) и убедимся, что на первом кадре находится изображение pic5. Клавишей управления курсором переместим изображение влево до того момента, когда исчезнут последние пиксели его правой части. Создадим копию первого кадра и клавишей управления курсором переместим изображение вправо также до момента исчезновения последних пикселей, но уже левой части изображения. После этого палитра AnimaTion (Анимация) будет содержать два кадра, на которых не будет ничего, кроме прозрачного фона.
|
Рис. 3.43. Несколько промежуточных кадров палитры Animation, имитирующих движение объекта |
О При выделенном втором кадре нажмем кнопку Tween (Промежуток) в нижней части палитры AnimaTion (Анимация) и откроем диалоговое окно Tween (Промежуток). Теперь нам предстоит уже известная операция по размещению между первым и вторым кадрами промежуточных кадров. В диалоговом окне Tween (Промежуток) установим число кадров 25, а в группе Parameters (Параметры) установим флажок Position (Положение), сняв другие флажки. После нажатия кнопки ОК в палитре AnimaTion (Анимация) появятся 25 промежуточных кадров, демонстрирующих перемещение изображения автобуса слева направо. Кадры с 4 по 8 показаны на рис. 3.43.
□ После воспроизведения анимации ее при желании можно сохранить.
