Создание анимации в программе Adobe ImageReady
На рисунке 1.131 видно, что ImageReady - это почти то же самое, что Photo shop с некоторыми небольшими отличиями. Самое важное для нас отличие - палитра Animation (анимация) в нижней части окна. Каждый кадр анимации будет представлен на ней отдельным эскизиком.
Рис. 1.131. ImageReady 7.0
Самый простой способ создать анимацию - превратить слои рисунка в кадры будущего мультика.
Предположим, мы заготовили такой многослойный рисунок, в каждом слое которого находится одна из стадий движения некоего объекта, изменение его раскраски или формы (сам объект может быть неподвижен, но может меняться его вид). Надо преобразовать слои в анимацию.
Щелкнем по круглой кнопке-стрелочке в правом верхнем углу палитры и выберем в меню палитры строку Make Frames From Layers (создать анимацию из слоев). Теперь каждому слою на палитре соответствует собственный кадр (см. рис. 1.132): самый нижний слой стал первым, самый верхний - последним в цепочке.
Останется только нажать кнопочку Play/Stop animation в самом низу этой панели и просмотреть результат в главном окне программы.
Рис. 1.132. На панели анимации три кадра
Просто щелкая мышкой по кадрам, мы сможем внимательно рассмотреть, как выглядит каждый из них, нет ли каких изъянов.
Для каждого кадра можно изменить время, на которое он задерживается на экране. Обратите внимание на надпись 0 sec и крошечную стрелочку возле нее. Если по стрелочке щелкнуть, то можно выбрать из списка любое другое время задержки.
Я бы советовал проставить время в каждом кадре (пусть минимальное - 0,1 с). Если оставить здесь нули, то разные модели браузеров начнут прокручивать вашу анимацию с разной скоростью, причем некоторые настолько быстро, что рассмотреть ее станет просто невозможно. Если скорость проставлена, то мультик будет выглядеть одинаково и в Internet Explorer, и в Opera, и в Mozilla, и в каком-нибудь Netscape Navigator.
В самом левом выпадающем списке (на рисунке 1.132 здесь написано Forever) задаете, сколько раз должна прокручиваться ваша анимация: бесконечно (как раз Forever), один раз (Once) или некоторое фиксированное количество раз (Other). В последнем случае вас еще попросят указать, сколько именно раз она должна проиграться.
Кадры можно перетаскивать по панели, меняя тем самым порядок их следования, а также выкидывать ненужные, утаскивая их в мусорный бачок.
Если что-то было сделано неправильно и требуется все радикально переделать, в меню палитры есть команда Delete Animation, которая удалит все кадры, и вы сможете создать их снова.
Хочу, кстати, обратить ваше внимание на то, как ведет себя панель слоев, когда мы выбираем мышкой созданные таким способом кадры. В каждом кадре глазок стоит ровно в одном слое. (Но это не значит, что мы не можем в это дело вмешаться: какие слои пометим, те и будут показываться - хоть два, хоть пять...)
Отсюда всего один шаг для следующего способа создания анимации - покадрового рисования.
Рисовать в ImageReady можно практически так же, как в Фотошопе. Кто-то добавит «так же неудобно». Но ведь никто не помешает вам сделать рисунок в векторном редакторе, вроде CorelDRAW или Adobe Illustrator, а потом просто скопировать рисунок в буфер и вставить в ImageReady.
Причем вы не обязаны вставлять его сразу же в файл с анимацией. Можете сначала вставить его в другой документ, подобрать размеры и местоположение, что-нибудь в нем поправить. А потом просто перетащите рисунок в окошко с анимацией или же сделаете копирование-вставку.
В нашем распоряжении есть также команда Place (поместить) в меню File, которая позволит взять рисунок с диска и положить на новый слой данного файла.
Есть еще один способ создания анимации из заранее заготовленных картинок - импорт в ImageReady целой папки с рисунками. Делается это командой File > Import t Folder As Frames. Надо будет указать программе адрес папки и нажать ОК. Каждый рисунок станет, во-первых, отдельным слоем, а во-вторых - отдельным кадром новой анимации.
Геометрические размеры создаваемого файла, а также разрешение и параметры цвета программа берет у первого из файлов (по алфавиту). Понятно, что наилучшие результаты импорта будут, когда все файлы имеют одинаковые размер и разрешение. А самые удивительные - когда все файлы разные.
Чтобы не пришлось потом перетасовывать кадры анимации, лучше сразу дайте файлам в папке имена в алфавитном порядке. Или даже просто в виде чисел - по возрастанию.
Еще один способ создания анимации - полуавтоматический - применяется, когда у вас есть изображения начальной и конечной точки анимации и вы хотели бы, чтобы программа сама достроила промежуточные кадры.
Скажем, сделан рисунок всего с двумя слоями, как раз и отражающими начальное и конечно положение (или состояние) объекта. Выполнив команду Make Frames From Layer, мы получим всего два кадра, и это мало будет напоминать настоящую анимацию.
Рис. 1.133. Достраиваем переходы между кадрами
Но теперь приходит время включиться нашему аниматору и заняться своим прямым делом - анимацией. Для этого на панели палитры Animations есть кнопка Tweens animation frame («анимировать кадр с помощью кадров-близнецов»), которая и даст приказ достроить промежуточные кадры. Но придется объяснить программе, что и как она должна сделать.
В диалоговом окне Tween (см. рис. 1.133) вы должны выбрать, сколько кадров-близнецов должно быть вставлено (список Frames to Add). В списке Tween With -- указать, к какому из имеющихся кадров (следующему Next Frame, предыдущему Previous Frame, первому или последнему) программа должна строить переход. Переход строится всегда между двумя кадрами (причем непременно смежными) - первым и вторым, вторым и третьим, последним и первым.
А в секции Parameters задаете, какие именно характеристики рисунка программа должна
менять при построении близнецов: положение (Position), прозрачность (Opacity), примененные эффекты (Effects). Но если переходы прозрачности выполняются вполне ожидаемым образом (в параметрах обоих слоев.значения непрозрачности Opacity меняются навстречу друг другу), то выстраивать переходы по эффектам и по местоположению объектов на разных слоях программа скорее не умеет, чем умеет. А если так, то и пользоваться ими скорее не надо, чем надо.
Создавая анимацию, которая будет закольцована, позаботьтесь о том, чтобы плавными были не только переходы от первого кадра ко второму, от второго к третьему и т. д., но и от последнего к первому! При покадровом рисовании надо это сделать вручную, а при полуавтоматическом - просто не забыть создать переход от последнего кадра к первому.
Все, о чем мы говорили выше, касается ситуации, когда каждый кадр лежит в отдельном слое. Те, кто пользуется покадровым рисованием, как профессиональные художники-аниматоры, идут на это сознательно, а некоторые рядовые пользователи попадают в эту ситуацию случайно, например, поставив в меню палитры галочку в строке Create Layer for Each New Frame (создавать новый слой для каждого нового кадра) и забыв потом ее снять.
Но у нас есть принципиально иная возможность: мы можем строить анимацию, не создавая новых слоев! Более того, именно в таком режиме программа правильно строит переходы не только по прозрачности, но также по местоположению объектов (Position) и эффектам (Effects).
Итак, имеется рисунок, состоящий из одного-единственного слоя. Создаем новый кадр. При этом новый слой не возникает (см. выше), а если возникает, то немедленно и убивается.
Берем рисунок во втором кадре и тащим куда-нибудь (меняем местоположение) или же создаем на нем эффекты этой кнопочкой:
К сожалению, Image Ready не построит вам близнецов, если вы захотите повернуть, наклонить или уменьшить объект во втором кадре (применив любую из команд трансформации), как-то иначе отредактировать его форму, перекрасить, применить какие-нибудь команды для изменения яркости-контраста или насыщенности. Изменения коснутся не только второго кадра, но и первого, и всех остальных (если они были).
А вот еще один вариант анимации: вы хотите, чтобы некий предмет двигался на неподвижном фоне, вроде как актер на фоне декораций. Как это сделать?
В нижний слой своего файла помещаете рисунок с этими самыми декорациями, а выше кладете изображения предмета (на прозрачном фоне, конечно!) в разных фазах движения. Тогда в каждом кадре вы пометите по два слоя - нижний и один из верхних.
Впрочем, неподвижными могут быть не только «декорации», но и часть самого анимированного объекта. Допустим, мельница стоит, а вертятся только ее крылья. Тогда сам домик можно спокойно опускать на нижний, постоянно видимый слой, а поворачивать одни только крылышки. Из чего следует, что крылья должны быть нарисованы отдельно от здания мельницы и размещены на другом слое, иначе их потом будет не оторвать.
Да и неподвижный предмет тоже не обязан лежать непременно на самом нижнем слое. К примеру, вы хотите изобразить каплю воды, падающую из крана. Создаете три слоя: в первом - раковина и кухня, в третьем - кран, а между ними, во втором слое будет у вас ползать капля. Причем вам не придется делать ее покадровую анимацию, достаточно будет создать серию кадров-близнецов, благодаря чему она будет просто выползать из-под крана.
Готовую анимацию для интернета сохраняют в файлах формата GIF, тогда она будет нормально показана в любых браузерах. Лучше всего воспользоваться для этого командой Save Optimized As. А перед этим обязательно перейти в окне документа на страницу Optimized, 2-Up или 4-Up и с помощью панели Optimize подобрать параметры оптимизации: выбрать тип файла (строка GIF), выбрать количество цветов в нем (цвета, которых в вашем изображении на самом Деле нет, вполне можно будет из палитры файла удалить без потери качества) и кое-что еще по мелочи.
Если же оптимизации не делать, размеры файла могут оказаться слишком большими, чтобы ими можно было пользоваться в интернете.
Кстати, советовал бы вам попробовать, как Image Ready выполняет оптимизацию gif-файлов (и не только анимированных, но и самых обычных). Притом, что настройки все те же, что и в аналогичных фотошоповских окнах и палитрах, результаты зачастую получаются более качественными - файлы выходят поменьше, а выглядят получше.
А вот фотографии анимировать не стоит и пытаться. Фотографии в gif-файлах либо плохо выглядят, либо оказываются слишком большими. Либо и то и другое вместе.
И последний совет. Если вы сделали очень хорошую анимацию (ну просто очень хорошую!), да только, вот беда, файл получается большой (ну просто очень большой!) и никак далее не сжимается без потери качества, попробуйте выкинуть каждый второй кадр и посмотрите, устроит ли вас результат. Чаще всего устраивает.
