Загрузка данных

 Тема 13. Анимация в Image Ready

--------------------------------------------------------------------------------

Введение 
Анимация по слоям 
Ручная настройка кадров 
Промежуточные кадры 
Реакция на события мыши 

--------------------------------------------------------------------------------

1. Введение
Вместе с программой Photoshop поставляется вторая программа — Image Ready, которая специально разработана для подготовки иллюстраций, размещаемых в Интернете. Когда мы сохраняли рисунки на прошлом уроке, мы использовали именно ее возможности. 
Две программы очень хорошо взаимодействуют между собой и понимают формат PSD. Работая с изображением, можно быстро переключаться из Photoshop а Image Ready и обратно, нажав на клавиши Ctrl+Shift+M (или через меню Файл — Редактировать в Image Ready). 

Программа Image Ready позволяет создавать анимированные ("оживленные") рисунки. Они строятся по очень простому принципу: в файле хранятся несколько изображений одинакового размера. Они сменяют друг друга через заданные промежутки времени. За счет этого можно показывать движение объектов. 

Надо учитывать, что для того, чтобы движение было более плавным, нужно увеличивать количество кадров, но при этом обязательно увеличивается и размер файла. Так что на практике необходим компромисс между качеством анимации и размером файла. 

к началу   

  

2. Анимация по слоям
Анимация в Image Ready основана на использовании многослойной структуры документа. В простейшем случае надо построить многослойный рисунок, в котором каждый слой будет соответствовать кадру. 
  Запустите программу Image Ready и откройте файл flags.psd в папке PRACTICE/13. Вызовите палитру Слои (клавиша F7).  




Изображение в этом файле имеет 4 слоя, которые показывают различные положения рук матроса-сигнальщика, передающего сообщение с помощью флажного семафора. 
  Проверьте, видима ли палитра Анимация. Если нет, выберите пункт меню Окно — Анимация или нажмите клавишу F11.  




В этой палитре отображаются кадры и настраиваются их свойства. Сейчас есть всего один кадр, то есть никакой анимации нет. 
  Щелкните по кнопке  на палитре Анимация и выберите команду Создать кадры из слоев (Make Frames from Layers).  




  Для просмотра анимации нажмите на кнопку  на панели Анимация.  


В основном окне документа сейчас можно увидеть, что матрос очень быстро двигает руками, так что невозможно что-либо понять. Дело в том, что по умолчанию устанавливается нулевое время смены кадров, то есть компьютер меняет кадры с максимальной скоростью. 

  Остановите просмотр, щелкнув по кнопке . Выделите все кадры. Для этого надо щелкнуть на первом кадре и затем, удерживая клавишу Shift, на последнем (как в Проводнике!).  


Можно также добавлять и исключать из выделения отдельные кадры, щелкая по ним в палитре Анимация при нажатой клавише Ctrl. Для перехода по кадрам служат кнопки  (назад) и  (вперед). Кнопка  позволяет перейти к первому кадру. 

  Щелкните мышкой ниже любого выделенного кадра в той области, где показано время отображения кадра и выберите время 1 секунда (для всех выделенных кадров). Снова запустите анимацию и сравните результат с тем, что было.  


Для каждого кадра можно установить собственное время. 

  Выделите щелчком последний кадр (паузу) и установите время 2 секунды. Проверьте, что изменилось.  


Кадры можно менять местами, перетаскивая их мышкой в палитре Анимация. Если перетащить кадр на кнопку , он удаляется. 

  Измените порядок кадров так, чтобы матрос передал сообщение "Мир" вместо "Рим".  


В левой части палитры Анимация можно выбрать варианты Всегда (анимация работает постоянно) или Один раз. 


Анимация может быть сохранена в нескольких форматах. Для размещения на Web-страницах чаще всего используют формат GIF, поддеживающий анимацию (Файл — Сохранить оптимизированный как...), или формат Macromedia Flash (SWF) (Файл — Экспортировать — Macromedia Flash). Для того, чтобы задать параметры сохраняемого изображения (количество цветов, дизеринг) используют палитру Оптимизация (Окно — Оптимизация), где можно установите все те же свойства, как и при сохранении файлов для Интернет из программы Photoshop. 
Вместе с основным файлом можно сохранить и простейшую Web-страницу в формате HTML, которая позволит просмотреть анимацию в браузере. Для этого в окне сохранения в списке Тип файла надо выбрать HTML and Images. 

  Сохраните файл в формате GIF. Посмотрите, как будет выглядеть файл на Web-странице, выбрав команду Файл — Предварительный просмотр в — iexplore (клавиши Ctrl+Alt+P).  


к началу   

  

3. Ручная настройка кадров
Как мы видели, в простейшем случае каждый слой соответствует одному кадру анимации. Однако в Image Ready для каждого кадра можно можно выбрать несколько слоев, которые видимы в данный момент. 
  Откройте в программе Image Ready файл house.psd из папки PRACTICE/13. Вызовите на экран палтиру Слои (клавиша F7).  


В этом файле несколько слоев: фон и части дома (фундамент, стены, ...). Мы построим анимацию, изображающую строительство. Сначала появляется фундамент, через некоторое время — стены и т.д. 

  Перейдите к палитре Анимация (F11) и создайте 5 новых кадров, щелкая по кнопке .  


Уже знакомая нам кнопка  удаляет выделенные слои. 

  Выберите первый кадр и отмените в палитре Слои видимость всех слоев, кроме фона.  


На всех остальных слоях также остался только фон. Теперь мы подключим нужные слои для каждого кадра. 

  Выделите второй кадр и подключите слой Фундамент. Для третьего кадра надо сделать видимым еще слой Стены и т.д.  


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


  Проверьте, как работает анимация, и сохраните файл в формате GIF.  




Программа Image Ready может напрямую редактировать анимированные файлы формата GIF. 

  Закройте рабочий документ и откройте только что сохраненный файл house.gif.  


Обратите внимание на палитру Слои — при сохранении в формате GIF все видимые слои для каждого кадра были объединены, так что теперь каждый кадр соответствует отдельному слою. 

к началу   

  

4. Промежуточные кадры
В программе Image Ready есть возможность построить автоматически промежуточные кадры между существующими для создания более плавной анимации. При этом надо учитывать, что добавление новых кадров увеличивает размер файла. 
  Запустите Photoshop и откройте файл valaam.jpg в папке PRACTICE/13 и сохраните его в формате PSD. С помощью инструмента Текст  добавьте в нижней части надпись «Валаам». Щелкнув по кнопке  в палитре Слои, установите эффекты слоя на ваш вкус.  




  Перейдите в программу Image Ready, щелкнув по кнопке  в нижней части палитры инструментов или выбрав пункт Файл — Редактировать в Image Ready (клавиши Shift+Ctrl+M).  


В палитре Анимация один кадр. Анимация, которую мы хотим построить, заключается в том, что надпись "Валаам" постепенно появляется, перемещаясь от линии горизонта вниз. 

  Передвиньте надпись «Валаам» на линию горизонта. Создайте новый кадр, щелкнув по кнопке  в палитре Анимация.  


Каждый кадр можно настраивать отдельно от других. Настройка состоит в том, что можно сделать видимыми любые слои (а не только один, как раньше) и настроить их свойства, например, положение текста, прозрачность и эффекты. 

  Выделите первый кадр. Перейдите в палитру Слои и сделайте надпись прозрачной, установив непрозрачность (Opacity) 0%.  


  Выделите второй кадр и установив непрозрачность текстового слоя 100%. Передвиньте текст в нижнюю часть рисунка.  


  Выделите оба кадра и установите время показа 0,2 секунды. Посмотрите, как работает анимация.  


Теперь добавим промежуточные кадры. 

  Выделите первый кадр и щелкните по кнопке  в палитре Анимация. В списке Начинать с (который неверно переведен, должно быть Анимация до) выберите вариант Следующий кадр, а в поле Добавить кадров введите нужное количество промежуточных кадров (например, 5).  


Программа автоматически строит 5 промежуточных кадров, меняя все свойства текстового слоя, в данном случае — положение и прозрачность. Однако, в конце анимации есть неприятное мигание — резкий переход с последнего кадра на первый — и нет времени прочитать надпись. 

  Выделите последний кадр и установите для него время показа 2 секунды. Сохраните окончательный результат в виде файла PSD (Файл — Сохранить) и готовый ролик в виде файла формата GIF (Файл — Сохранить оптимизированный как...).  




к началу   

  

5. Реакция на события мыши
  Запустите Image Ready и откройте файл worker.psd.  


В этом файле три слоя. Верхние 2 слоя изображают разные стадии работы, а самый нижний — отдыхающего человечка. Мы сделаем кнопку, которая реагирует на наведение мыши. В нормальном состоянии человечек сидит, а при наведении мыши работает. 

  Найдите на экране палитру Web-содержимое. Если ее нет, откройте ее через меню (Окно — Web-содержимое).  




Видно, что у этого рисунка одно состояние — нормальное. Это значит, что он не реагирует на движение мыши. 
  Щелкните по кнопке  в палитре Web-содержимое, чтобы создать новое состояние.  




Как следует из названия Курсор наведен, это новое состояние автоматически включается при наведении мыши (событие Mouse Over). 
  Щелкните дважды справа от надписи worker_01, чтобы настроить свойства рисунка на Web-странице. Измените название файла на worker, в поле Alt введите текст всплывающей подсказки «Рабочий Вася Пупкин».  


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

  Нажав Ctrl+Alt+P, просмотрите рисунок в браузере. Пока при наведении мыши появляется только всплывающая подсказка, а рисунок не меняется.  




  Выделите состояние Нормальный в палитре Web-содержимое. Затем в палитре Слои сделайте видимым только слой Отдых. Теперь выделите состояние Курсор наведен и сделайте видимым только слой Работа 1. Посмотрите, что получилось.  




Программа сохраняет на диске два рисунка: worker.gif (он загружается в самом начале) и worker_над.gif. Если посмотреть в код Web-страницы, можно увидеть, что при наведении мыши загружается второй рисунок, worker_над.gif, а после ухода мыши — снова worker.gif. 

   Из-за того, что в имени файла worker_над.gif есть русские буквы (ошибка перевода), вы увидите предупреждение Некоторые имена файлов включают специальные символы... Здесь нужно ответить ОК, однако при подготовке изображений для реального Web-сайта нужно переименовать файлы, чтобы русских букв не было.  


Каждый из этих рисунков может содержать анимацию. Сделаем так, чтобы при наведении мыши человечек работал, то есть, попеременно менялись состояния Работа 1 и Работа 2. Для этого надо добавить анимацию во второй файл, который загружается при наведении мыши. 

  Выделите состояние Курсор наведен. Создайте новый кадр в палитре Анимация и сделайте видимым только слой Работа 2. Установите для обоих кадров время показа 0,2 секунды и проверьте, что получилось. Сохраните окончательный результат в виде файла PSD (Файл — Сохранить) и Web-страницу (Файл — Сохранить оптимизированный как...). Откройте Web-cтраницу в браузере.  




Существуют и другие состояния рисунка, например, состояния при нажатии и отпускании левой кнопки мыши, но они очень редко используются. Для того, чтобы добавить эти состояния, надо щелкнуть по кнопке  в палитре Web-содержимое. 



--------------------------------------------------------------------------------
    
 Иллюстрации для Интернета    Векторная графика в Photoshop 



--------------------------------------------------------------------------------

© 2005-2007  К. Поляков 

--------------------------------------------------------------------------------