>>> Перейти на мобильный размер сайта >>>

Онлайн учебник по работе
с программой ImageReady

Создание графики для сайта

       

Постепенное исчезновение или появление картинки

Если вы хотите, чтобы картинка исчезала или появлялась с одновременным перемещением по Web-странице или без него, необходимо отрегулировать непрозрачность изображения вместе с корректировкой его расположения или без этого. Следуйте инструкциям, которые изложены в разделе «Перемещение элемента изображения с помощью анимации», но при выполнении шага 4 выберите начальное значение непрозрачности слоя (рис. 23.134). Затем при выполнении шага 7 выберите конечное значение непрозрачности (рис. 23.135). Убедитесь, что установлен флажок Opacity (Непрозрачность) в диалоговом окне Tween (Промежуточные кадры) - см. рис. 23.136.

Удаление кадров из анимации

Для того чтобы удалить кадр, щелкните по нему, затем выполните команду Delete Frame (Удалить кадр) в меню палитры Animation (Анимация), либо перетащите кадр на кнопку Delete (Удалить), расположенную на палитре (это действие может быть отменено). Если вы хотите удалить все кадры анимации, за исключением первого, в меню палитры Animation воспользуйтесь командой Delete Animation (Удалить анимацию) и щелкните по кнопке Delete (Удалить).

Установка значения

Рис. 23.134. Установка значения в поле Opacity для первого кадра анимации

Установка значения

Рис. 23.135. Установка значения в поле Opacity для второго кадра анимации

Построение промежуточных кадров

Построение промежуточных кадров

Рис. 23.136. После построения промежуточных кадров рубанок перемещается влево, и постепенно появляется слово «Plane»

Опции воспроизведения анимации

Рис. 23.137. Опции воспроизведения анимации

Не переходите к другой программе и не открывайте ее, а также не выбирайте команду Preview in [browser] (Предварительный просмотр в [браузер]) во время воспроизведения анимации. Дело в том, что воспроизведение будет продолжаться в фоновом режиме и отнимать время у того приложения, в которое вы перешли.

Выбор параметров воспроизведения анимации

Из всплывающего меню, расположенного в нижнем левом углу палитры Animation (Анимация), выберите режим воспроизведения, указывающий, как будет воспроизводиться анимация: Once (Однократно) или Forever (Непрерывно в цикле) -см. рис. 23.137. Либо включите опцию Other (Иначе), чтобы указать определенное количество воспроизведений анимации, а затем щелкните по кнопке ОК. Старайтесь не создавать анимацию, воспроизводимую до бесконечности - это может не понравиться человеку, просматривающему Web-страницу.

Чтобы определить длительность показа отдельного выделенного кадра в процессе воспроизведения, выберите значение времени задержки (delay value) из всплывающего меню Select frame delay time (Выбрать время задержки кадра), расположенного под кадром на палитре Animation (Анимация) - см. рис. 23.137. Для каждого кадра может быть установлено свое время задержки. Опция No delay (Без задержки) эквивалентна нулевой задержке. Также можно выбрать опцию Other (Другое) и указать время задержки (от 0 до 240 сек), а затем щелкнуть по кнопке ОК.

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

Параметры, которые можно изменять при создании промежуточных кадров

В анимацию можно включить изменение расположения элемента слоя, изменение прозрачности слоя либо переход от одного эффекта слоя к другому (за исключением эффекта Gradient/Pattern (Градиент/Узор), который нельзя использовать в сочетании с командой Tween (Промежуточные кадры)). Либо можно просто создавать промежуточные кадры между моментами включения и выключения эффекта слоя. Так как все эти преобразования задаются с помощью палитры Layers (Слои), то они никак не влияют на настоящие точки слоя. (Анимационный эффект, рассмотренный далее в разделе «Анимация покачивания предметов», влияет на пикселы слоя.)

Предварительный просмотр анимации

Осуществим предварительный просмотр анимации.

  1. В основном окне выберите вкладку Original (Исходное изображение) или Optimized (Оптимизированное изображение).
  2. Если первый кадр не выделен, то в нижней части палитры Animation (Анимация) щелкните по кнопке Select first frame (Выделить первый кадр) - см. рис. 23.138.

Кнопки управления воспроизведением

Рис. 23.138. Кнопки управления воспроизведением на палитре Animation

Дублирование кадра анимации

Рис. 23.139. Дублирование кадра анимации

  1. Щелкните по кнопке Play (Проиграть) -см. рис. 23.138. Анимация будет воспроизводиться чуть медленнее, чем должна. (Предварительный просмотр в программе ImageReady происходит медленнее, чем в браузере.)
  2. Щелкните по кнопке Stop (Остановить), которая имеет вид квадрата, чтобы приостановить воспроизведение (рис. 23.138).
  3. Сохраните файл, затем щелкните по кнопке Default Browser (Предварительный просмотр в браузере по умолчанию), расположенной на панели инструментов. Щелкните по кнопке Back (Назад), чтобы вернуться в программу ImageReady, когда просмотр будет закончен. Если анимация не воспроизводится в браузере, следуйте инструкциям, которые даны в разделах «Кадрирование изображения» и «Уменьшение размера изображения».

Анимация покачивания предметов

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

Создадим анимацию, в которой объект будет перемещаться в определенном направлении и обратно.

  1. Откройте изображение и палитру Animation (Анимация).
  2. В нижней части палитры Animation щелкните по кнопке Duplicate current frame (Дублировать текущий кадр) - см. рис. 23.139. Теперь будет выделен дубликат кадра.
  3. На палитре Animation щелкните по кнопке Tween (Промежуточные кадры), а затем поставьте переключатель Layers (Слои) в положение All Layers (Все слой), введите число кадров в поле Frames to Add (Добавить кадры), чтобы создать анимацию, и щелкните по кнопке ОК.
  4. Щелкните по кадру, в котором должно начаться покачивание.
  5. На палитре Layers (Слои) создайте дубликат того слоя, изображение которого будет двигаться.
  6. Отредактируйте дубликат слоя (например, чуть поверните, добавьте немного мазков кистью, подкорректируйте цвет или измените его другим способом). Спрячьте исходный слой, чтобы увидеть внесенные изменения. На рис. 23.140 виден отредактированный слой receiver left tilt, в то время как исходный слой receiver спрятан. Трубка телефона наклонена влево (рис. 23.140). Изменения отразятся в выделенном кадре на палитре Animation.
  7. Щелкните по следующему кадру (либо по кнопке Next Frame (Следующий кадр) в нижней части палитры Layers (Слои)). Сделайте исходный слой receiver видимым и спрячьте его отредактированный дубликат receiver left tilt (рис. 23.141).
  8. Щелкните по следующему кадру. Теперь покажите отредактированный дубликат слоя и спрячьте исходный слой.
  9. Так попеременно показывайте/прячьте слои для оставшихся кадров анимации.

Слои изображения на палитре

Слои изображения на палитре

Рис. 23.140. Телефон с наклоненной влево трубкой и слои изображения на палитре Layers

Слои изображения на палитре

Слои изображения на палитре

Рис. 23.141. Телефон в исходном положении и слои изображения на палитре Layers

Очередность кадров анимации

Очередность кадров анимации

Очередность кадров анимации

Рис. 23.142. Очередность кадров анимации

Три слоя

Рис. 23.143. Три слоя на палитре Layers

Дополнительное редактирование

Если необходимо еще раз изменить исходный элемент слоя, то создайте еще один дубликат и отредактируйте его. Затем в одном кадре анимации сделайте видимым исходный слой и спрячьте дубликаты. В следующем кадре отобразите первый дубликат слоя и спрячьте второй и исходный слои. В третьем кадре покажите второй дубликат и спрячьте исходный слой вместе с первым дубликатом и т.д. Приведенные рисунки иллюстрируют эти действия. На рис. 23.142а виден слой receiver left tilt (телефонная трубка наклонена влево), на рис. 23.142б виден слой receiver (телефонная трубка расположена горизонтально) и, наконец, на рис. 23.142в виден слой receiver right tilt (телефонная трубка наклонена вправо). Слои, используемые в анимации, показаны на рис. 23.143.

 

Top.Mail.Ru
Top.Mail.Ru