Анимация для Интернет

Анимация из нескольких изображений

Рисунок 1.35. Анимация из нескольких изображений

1. Запускаем Ulead GIF Animator и в окне Startup Wizard (Мастер запуска) выбираем самостоятельное создание анимации (Blank animation).

2. Выбором команды Layer > Add Images (Слой > Добавить изображения) либо щелчком на одноименной кнопке стандартной панели инструментов открываем окно, в котором можно выбрать сразу несколько файлов. После щелчка на кнопке Open (Открыть) окна Add Images (Добавление изображений) они расположатся в алфавитном порядке на панели кадров.

3. Порядок кадров можно изменять с помощью кнопок Move Layer Up (Переместить вверх) и Move Layer Down (Переместить вниз) или одноименных команд меню Layer (Слой). Еще проще задать нужный порядок кадров, перетаскивая их файлы из окна Проводника Windows на рабочую область окна GIF Animator.

4. Переходим на вкладку Preview (Предварительный просмотр) для просмотра анимации, после чего вновь возвращаемся на вкладку Compose (Композиция).

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

6. Переходим на вкладку Optimize (Оптимизация) и в раскрывающемся списке Preset (Установки) выбираем значение GIF Optimized 32. Щелчком на кнопке Optimize Now (Оптимизировать сейчас) выполняем оптимизацию файла. Командой File > Save (Файл > Сохранить) или с помощью щелчка на одноименной кнопке сохраняем оптимизированную анимацию в требуемой папке.

Упражнение 1.2. Создание анимации из видеофайла

1. Запускаем Ulead GIF Animator и в окне Startup Wizard (Мастер запуска) выбираем Open an existing video file (Создание анимации из видеофайла). В окне выбора видеофайла можно воспользоваться кнопкой Browse (Обзор), чтобы выполнить просмотр содержимого папок

2. Для выделенного файла в окне Add video (Добавить видео) в полях Subject (Тема) и Description (Описание) указываются краткие сведения о файле.

3. Щелчком на кнопке Duration (Длительность) открываем одноименное окно. Щелкая на кнопках последовательного просмотра кадров, находим начальный и отмечаем его с помощью кнопки Mark-In (Отметка начала). Продолжая просмотр, находим конечный кадр и отмечаем его щелчком на кнопке Mark-Out (Отметка конца). Щелчок на кнопке ОК возвращает в окно Add video (Добавить видео). (Если вставляется видеофайл целиком, то окно Duration (Длительность) можно не открывать.)

4. В окне Add video (Добавить видео) щелкаем на кнопке Open (Открыть), и все выделенные кадры видеофайла последовательно располагаются на панели кадров.

5.Используя инструменты GIF Animator, добавляем к анимации титры и эффекты.

6. Чтобы сохранить результат в формате AVI-файла, выбираем команду File > Export > As Video File (Файл > Экспорт > Как видеофайл) и указываем имя файла и папку, в которой он будет размещаться. В этом же окне можно ввести информацию в поля Subject (Тема) и Description (Описание). Щелчок на кнопке Save (Сохранить) сохраняет файл.

В GIF Animator каждый кадр

Интерфейс Ulead GIF Animator 4

В GIF Animator каждый кадр именуется слоем (layer), что отличает терминологию этой программы от терминологии программных продуктов других фирм. Создать последовательность кадров можно, вставляя изображения вручную, импортируя последовательность файлов или содержимое целой папки, а также используя оцифрованную видеопоследовательность.

В окне программы GIF Animator представлены следующие основные области: Menu bar (Строка меню), Toolbar (Панель инструментов), Attributes toolbar (Панель атрибутов) с информацией об установках каждого кадра (слоя), Central workspace (Рабочая область), слева от нее Layer panel (Панель кадров) с перечислением всех изображений, входящих в анимацию, и расположенная внизу Palette toolbar (Палитра цветов).

Окно Add Effect

Рисунок 1.26. Окно Add Effect

GIF Animator содержит также специальный эффект, который создает иллюзию вращающегося куба. По команде Layer > Add Effect (Слой > Добавить эффект ) открывается одноименное диалоговое окно, в котором можно указать два кадра и способ создания иллюзии вращающегося куба, заменяя одно изображение другим в выбранном направлении (раскрывающийся список Direction) и с заданной задержкой (поле Delay time). Параметры Perspective (Перспектива) и Contrast (Контраст) позволяют усилить эффект. Выбор фонового кадра в списке Source image (Исходное изображение) позволяет создать эффект преобразования фона в изображение. Для обратного эффекта фоновый кадр следует указать в списке Destination image (Результирующее изображение).

Окно Duration для выбора группы кадров видеофайла

Рисунок 1.8. Окно Duration для выбора группы кадров видеофайла

Выбор кнопки Animation Wizard (Мастер анимации) в окне Startup Wizard (Мастер запуска) или команды File > Animation Wizard (Файл > Мастер анимации) запускает Мастер анимации, в трех последовательных окнах которого вводится информация, необходимая для ее создания. В первом окне с помощью кнопок Add Image (Добавить рисунок) и Add Video (Добавить видео) можно добавить в анимацию файлы, содержащие рисунки или видеопоследовательности. Во втором окне указывается тип источника, содержащего текст и графику или фотографическое изображение, что определяет необходимость сглаживания переходов для передачи оттенков цвета. В третьем окне задается число кадров в секунду и соответственно время задержки в сотых долях секунды. Результатом работы Мастера будет создание анимации из последовательности кадров с локальными палитрами для каждого из них.
Чтобы изображение кадра всегда было видно в рабочей области, следует установить флажок около его имени на панели Layer panel (Панель кадров). Отмеченные кадры одновременно отображаются только в режиме редактирования, что не влияет на воспроизведение анимации созданного GIF-файла.
Выделить несколько кадров на панели. Layer panel (Панель кадров) можно также с помощью мыши без установки флажков. При этом следует использовать клавишу Shift для выделения группы последовательных кадров или клавишу Ctrl — для выделения несмежных кадров в произвольном порядке. Отметка или выделение нескольких кадров позволяет манипулировать ими одновременно, изменяя их параметры на Attributes toolbar (Панели атрибутов).
Для удаления кадра из анимации достаточно выделить его на панели Layer panel (Панель кадров) и нажать клавишу Del либо выбрать команду Edit > Delete (Правка > Удалить).
Кадры можно сдвигать друг относительно друга. Простейший способ поместить изображение в нужную позицию рабочей области — с помощью мыши передвинуть его в режиме Compose mode. Для изменения позиции изображения можно также воспользоваться клавиатурой: стрелки влево/вправо перемещают изображение вдоль оси X, а вниз/вверх — вдоль оси Y. Точно задать положение объекта можно, численно задав параметры сдвига в полях X-offset и Y-offset (сдвиг по X и Y).
Добавить слой примечания можно выбором команды Layer > Add Comment (Слой > Добавить комментарий) либо щелчком на одноименной кнопке панели инструментов. Заголовок и содержание комментария вводятся в соответствующих полях панели Attribute toolbar (Панель атрибутов).
Цветовая палитра выделенного кадра отображается на Palette toolbar (Палитра). Если цвет на палитре перечеркнут крестом, это означает, что он в выделенном кадре не используется. При выделении первого кадра анимации, обозначенного как Global information (Общая информация), на палитре отображаются цвета Global Palette. Для добавления новых цветов в палитру следует щелкнуть на кнопке Add Color (Добавить цвет) на панели Palette toolbar (Палитра) и в открывшемся окне задать число добавляемых оттенков цвета. После щелчка на кнопке ОК на палитре отображается дополнительно заданное число ячеек. Последовательно выделяя их и щелкая на кнопке Replace Color (Заменить цвет) панели Palette toolbar (Палитра), задают новые цвета, выбирая их в открывающемся окне Color (Цвет).
Для того чтобы удалить цвет с палитры, следует отобразить глобальную или локальную палитру на панели Palette toolbar (Палитра) и выделить ячейку или группу ячеек с удаляемым цветом. Щелчок на кнопке Delete Color (Удалить цвет) на панели палитр удалит выделенные ячейки (цвета).

Окно GIF Animator с файлом изображения

Рисунок 1.3. Окно GIF Animator с файлом изображения

Для каждого отображаемого кадра анимации на панели Attribute toolbar (Панель атрибутов) задаются индивидуальные параметры слоя. Поле Image title (Название рисунка) позволяет присвоить имя выделенному кадру. Раскрывающийся список How to remove (Способ смены кадра) указывает, каким образом кадр будет вести себя при воспроизведении. Возможен выбор из четырех значений:

Web Browser Decides (Решает браузер) — это значение не рекомендуется использовать, так как разные обозреватели используют различные способы при воспроизведении анимации;

Do Not Remove (He удалять) — изображение сохраняется и все последующие воспроизводятся на его фоне;

То Background Color (Цветом фона) — заменяет изображение фоном Web-страницы (при частичном совпадении кадров возможен плавный переход);

То Previous State (К предыдущему) — при смене изображения используется предыдущий кадр (при установке этого параметра плавный переход выполняется для всех кадров независимо от совпадения изображений на них).

К сожалению, последний параметр поддерживается не всеми обозревателями.
Кнопка Global Attribute Change (Изменение общих параметров) позволяет установить параметры всех кадров, используя текущий кадр в качестве шаблона.
Поля ввода X-offset и Y-offset (сдвиг по X и Y) задают, насколько далеко от левого верхнего угла рабочей области находится текущее изображение. Единицей измерения при этом является число пикселов, которое может быть задано вручную.
Флажок Local Palette (Локальная палитра) позволяет создать локальную палитру слоя на основе глобальной палитры, что позволит добавлять, удалять, изменять и настраивать цвета изображения, используя инструменты панели Palette toolbar (Палитра).
Флажок Interlace (Чересстрочный) задает возможность чересстрочного появления анимации, однако при воспроизведении она поддерживается только соответствующими программами воспроизведения стандарта GIF89a, например проигрывателем GIF Animator.
Флажок Transparent index (Прозрачный цвет) позволяет задать свойство прозрачности одному из цветов. При установке флажка этот цвет следует указать на палитре.
Флажок Wait for user input (Ожидание ввода) придает интерактивность анимации, приостанавливая воспроизведение до нажатия клавиши или щелчка мыши. Однако эта возможность поддерживается только специализированными GIF-проигрывателями и некоторыми обозревателями.
Поле ввода Delay Sets (Установка задержки) определяет время показа изображения в сотых долях секунды. Величина по умолчанию задается в начальных установках Image Layer preferences (Параметры слоя).
Кроме слоев изображений можно создавать слои примечаний (Comment Layers), предназначенные для указания авторских прав на изображения. Каждому примечанию присваивается имя. Длина примечания не должна превышать 512 символов, включая пробелы.
При воспроизведении анимации слои примечаний пропускаются. Следует принять во внимание, что слои примечаний увеличивают размер файла анимации. Рабочая область окна программы GIF Animator для задания различных режимов работы с анимацией содержит несколько вкладок, корешки которых расположены над изображением. По умолчанию устанавливается режим Compose mode (Режим композиции), позволяющий задавать местоположение изображения в кадре по отношению к анимации в целом.
Режим Edit mode (Режим редактирования) дает возможность редактировать содержимое изображения, добавляя и удаляя точки, выполняя заливки цветом либо выделяя области, в том числе сразу в нескольких слоях, для применения к ним различных фильтров.
Режим Optimize mode (Режим оптимизации) служит для определения параметров сжатия анимации, оптимальных для ее размещения в Интернете. Эти параметры могут быть заданы вручную, для чего щелчком на кнопке Advanced (Расширенный) раскрывается дополнительная область на вкладке Optimize (Оптимизация), либо с помощью Optimization Wizard (Мастера оптимизации), вызываемого щелчком на кнопке.
Режим Preview mode (Предварительный просмотр) позволяет увидеть анимацию в действии. Для этого используется либо проигрыватель GIF Animator, либо обозреватель Internet Explorer начиная с 4-й версии. Для остановки просмотра достаточно переключиться в другой режим. Так как разные обозреватели воспроизводят GIF-анимацию по-разному, предоставляется возможность выбора обозревателя для просмотра. Соответствующие кнопки для вызова Microsoft Internet Explorer и Netscape Navigator размещены на панели инструментов. Если на компьютере установлены также и другие обозреватели, то кнопке Preview In Custom Browser (Просмотр в обозревателе пользователя) той же панели можно задать вызов дополнительного обозревателя. Просмотр анимации в любом из обозревателей осуществляется щелчком на соответствующей кнопке.

Окно программы GIF Animator с пустым проектом

Рисунок 1.2. Окно программы GIF Animator с пустым проектом

Щелчок левой кнопкой мыши на имени кадра в Layer panel (Панель кадров) показывает его изображение в рабочей области и отображает параметры кадра на Attributes toolbar (Панель атрибутов). Палитра цветов кадра при этом представлена на Palette toolbar. Щелчок правой кнопкой мыши выводит на экран контекстное меню кадра, в котором представлены наиболее часто употребляемые команды из меню Edit (Правка) и Layer (Слой).
Панель Layer panel (Панель кадров) содержит список всех кадров анимации, который позволяет перемещать их друг относительно друга. Команды меню Layer (Слой) — Move Layer Up (Переместить вверх) и Move Layer Down (Переместить вниз) — так же, как и одноименные кнопки панели инструментов, перемещают кадр на одну позицию вверх (вниз) относительно текущей. Для ускорения работы можно пользоваться клавиатурными комбинациями Alt+Up или Alt+Down.
Используя команды меню View > Layer Panel (Вид > Панель слоев), можно изменить представление кадров на панели Layer panel (Панель кадров). Команда List (Список) отображает только названия кадров (слоев). Как правило, каждому кадру присваивается имя исходного файла, однако если изображение вставляется через буфер обмена, то ему задается имя по умолчанию. Команда Thumbnail (Миниатюра) показывает каждый кадр в рамке заданного размера. Выбор размера рамки выполняется командами подменю View > Thumbnail Size (Вид > Размер миниатюры). Команда Filmstrip (Кинолента) отображает кадры без рамки, наподобие их представления на кинопленке, с учетом их взаимного расположения. Переключаться между этими представлениями можно также с помощью вкладок, расположенных на панели Layer panel (Панель кадров). Горизонтальный размер этой панели изменяется за счет размера рабочей области окна программы GIF Animator.
Выделение кадра на Layer panel (Панель кадров) отобразит его параметры на панели Attribute toolbar (Панель атрибутов), где можно задать желаемые изменения. Первый слой проекта, именуемый Global information (Общие сведения), является невидимым кадром и описывает свойства анимации в целом. Для этого слоя на панели Attribute toolbar (Панель атрибутов) задаются особые параметры. В области Logical Screen (Логический экран), влияющей на размеры всего проекта, следует задать размеры, соответствующие максимальному изображению, используемому в анимации. Поле этого размера будет выделено в рабочей области. При установке флажка Automatic (Автоматически) размер проекта устанавливается автоматически с учетом размеров используемых изображений.
Область Global Palette (Общая палитра) содержит число цветов глобальной палитры и позволяет задать цвет фона анимации. Область Looping (Повтор) задает число повторений анимации. Если флажок Infinite (бесконечно) не установлен, то по умолчанию она показывается один раз (значение 0).

Окно Startup Wizard открывающееся при запуске GIF Animator

Рисунок 1.4. Окно Startup Wizard, открывающееся при запуске GIF Animator

Окно Tween вкладка Frame

Рисунок 1.27. Окно Tween вкладка Frame

Выбор команды Layer > Add Scrolling (Слой > Добавить прокрутку) открывает одноименное окно, в котором определяются параметры эффекта прокрутки изображения, для чего создается несколько дополнительных кадров. Установка флажка Use background (Использовать фон) позволяет выбрать кадр, который будет служить фоном при прокрутке. В раскрывающемся списке Effects (Эффект) задается способ прокрутки, а в полях Frames (Кадры) и Delay time (Время задержки) — число кадров и задержка между ними. От флажка Use background (Использовать фон) зависит способ смены вновь создаваемых кадров: при установленном флажке выбирается значение Do Not Remove (He удалять), а в противном случае — То Background Color (К цвету фона).

Окно Tween вкладка Objects

Рисунок 1.28. Окно Tween вкладка Objects

Эффекты перехода Transition effects позволяют создать несколько новых кадров для имитации перехода от одного изображения к другому. Добавить эффекты перехода можно с помощью команды Layer > Add Simple Transition (Слой > Простой переход), открывающей одноименное окно. В области Transition (Переход) из раскрывающегося списка выбирают вариант перехода, указывают число кадров в поле Quality (frames) и задают длительность перехода в поле Transition length (при меньшем времени перехода создается малое число кадров, что ухудшает качество эффекта, но незначительно увеличивает размер файла). В области Select Transition image (Выбор изображений) в раскрывающихся списках Source image (Исходное изображение) и Destination image (Результирующее изображение) задаются исходное и конечное изображения, причем при выборе значения Matte (Затемнение) изображение появляется или уходит в черный фон, размер которого задается в полях Matte dimensions (Размер затемнения).

Окно Ulead Color Picker

Рисунок 1.25. Окно Ulead Color Picker

Цветовая анимация кадра позволяет использовать набор цветов, входящих в палитру (от 2 до 32). Для каждого анимиру-емого цвета создается отдельный кадр. Этот эффект наиболее заметен для изображений, содержащих небольшое число цветов. Чтобы создать анимацию цвета, следует выбрать команду Layer > Add Color Animation (Слой > Добавить анимацию цвета), открывающую одноименное окно. На представленной в окне палитре нужно отметить группу желаемых цветов, для чего используются клавиши Shift для цветов, расположенных последовательно, и Ctrl для произвольно расположенных цветов. Затем с помощью мыши цвета в области Animation order (Порядок анимации) размещаются в нужном порядке. Установка флажка Reverse animation order (Обратить порядок) позволяет изменить этот порядок на противоположный. Для удаления цвета из последовательности достаточно вытащить его мышью из области Animation order (Порядок анимации). Следует отметить, что применение этого эффекта к 256-цветным изображениям не дает заметного результата.

Окно выбора файлов изображения для новых кадров

Рисунок 1.6. Окно выбора файлов изображения для новых кадров

GIF Animator поддерживает импорт более 30 распространенных форматов графических файлов, в частности таких, как GIF, JPEG, PCX, PSD, PCT, PNG, TGA, EPS, IFF, IMG, MAC, MSP, PCD и BMP.
Используя буфер обмена Windows, можно вставить новые кадры с изображениями в формате, не поддерживаемом GIF Animator. Для этого следует открыть приложение, работающее с требуемым форматом файлов, и загрузить в него изображение. Командой Edit > Сору (Правка > Копировать) поместить выделенное изображение в буфер обмена. После чего перейти в GIF Animator и командой Edit > Paste Image (Правка > Вставить рисунок) вставить его как новый кадр. Аналогичным образом с помощью буфера обмена можно продублировать уже существующие кадры анимации, добавляя их в нужные позиции панели Layer panel (Панель кадров).

Окно выбора и задания параметров видеоэффектов перехода

Рисунок 1.29. Окно выбора и задания параметров видеоэффектов перехода

Большое количество эффектов перехода представлено также первой группой команд меню Video F/X (Видеоэффекты). При выборе одной из них открывается окно Add Effects (Добавление эффекта), в котором можно не только задать необходимые параметры перехода, но и выполнить предварительный просмотр эффекта, а при необходимости и поменять эффект на другой с помощью раскрывающегося списка Effects (Эффекты).
Вторая группа команд меню Video F/X (Видеоэффекты) содержит различные видеофильтры, которые можно применить к изображению в кадре. При выборе одной из этих команд поочередно открываются два диалоговых окна. В первом окне Add Image Filter Effect (Добавление фильтра к изображению) задается число промежуточных кадров для реализации фильтра, а во втором окне, индивидуальном для каждого из фильтров, задаются управляющие параметры. Регулировочные движки служат для выбора ключевых кадров, между которыми и применяется фильтр. Верхняя группа кнопок служит для управления ключевыми кадрами, а нижняя — для режима предварительного просмотра результата. Для изображений, содержащих прозрачную область, которая трактуется как маска, фильтры применяются только к непрозрачной части изображения.
Для расширения возможностей GIF Animator к нему можно подключить предназначенные для Adobe Photoshop 32-разрядные plug-ins, которые реализуют дополнительные фильтры. Чтобы добавить новый модуль plug-ins, следует выбрать команду File > Preferences (Файл > Установки) и на вкладке Plug-in Filters (Плагины фильтров) указать местонахождение файла модуля plug-ins. Для его дальнейшего использования требуется перезапустить GIF Animator. После этого новые фильтры могут быть применены к отдельным кадрам анимации.

Окно выбора нового размера кадра

Рисунок 1.10. Окно выбора нового размера кадра

Переключатель Resample quality (Качество изменения разрешения) контролирует качество нового изображения и позволяет задать следующие значения:

Normal (Нормальное) — обеспечивает среднее качество, сохраняя исходные цвета изображения без их преобразования;

Fine (Отличное) — использует установки для более высокого качества изображения, однако может вызвать нежелательные изменения изображения из-за преобразования отдельных цветов;

Super-fine (Высшее) — обеспечивает самое высокое качество, но преобразовывает большинство цветов изображения, изменяя его по сравнению с исходным. Установка флажка Keep relative position (Сохранить положение) сохраняет положение кадра на логическом экране рабочей области относительно правого верхнего угла экрана. Следует иметь в виду, что при этом возможно размывание изображения на границах для достижения более высокого качества.

Для объединения двух и более кадров в один можно использовать команду Layer > Merge Images (Слой > Объединить рисунки), вызывающую одноименное диалоговое окно. Предварительно на панели Layer panel (Панель кадров) следует выделить кадры, подлежащие объединению. При этом сначала должен идти кадр, который будет служить фоном, а кадр, который будет на переднем плане, должен следовать непосредственно за ним. Установка флажка Replace original image layers (Заменить исходные кадры) позволяет заменить выделенные кадры объединенным. Эта команда позволяет создавать эффекты движения фона по отношению к объекту либо просто сократить количество кадров анимации.
GIF Animator предлагает простой способ объединения нескольких кадров с общим фоном. Однако чтобы можно было использовать эту функцию, слои должны быть прозрачными. По команде Layer > Background Merge (Слой > Объединить с фоном) открывается одноименное окно, в котором указывается фоновый кадр и отмечаются кадры, подлежащие объединению с ним. Щелчок на кнопке ОК выполняет объединение, заменяя все кадры новыми. Слияние нескольких анимаций в одну выполняется командой Layer > Merge Animations (Слой > Объединить анимации), открывающей одноименное диалоговое окно.

Окно выбора параметров фильтра «зеркало»

Рисунок 1.30. Окно выбора параметров фильтра «зеркало»

Окно выбора существующего GIFфайла

Рисунок 1.5. Окно выбора существующего GIF-файла

Окно выбора видеофайла для включения в анимацию Ulead GIF

Рисунок 1.7. Окно выбора видеофайла для включения в анимацию Ulead GIF

Animator обеспечивает широкую поддержку разных видеоформатов: прямой импорт и преобразование AVI-файлов, файлов AutoDesk animation с расширениями (FLI, FLC, FLX), файлов Quick Time Movie (QT, MOV).
Команда Layer > Add Video (Слой > Добавить видео) открывает одноименное окно, в котором можно указать файл-источник, выполнить его просмотр и получить полную информацию об импортируемом файле, для чего следует выполнить щелчок на кнопке Info (Информация), открывающей окно свойств видеофайла. При импорте можно выбрать участок видеопоследовательности и задать начальный и конечный кадры. Для этого щелчком на кнопке Duration (Продолжительность) открывают одноименное окно (Рисунок 1.8), в котором можно выполнить покадровый просмотр файла либо указать номера кадров выбранной видеопоследовательности. Кнопки под окном просмотра позволяют переходить от одного кадра к другому и отметить выбранный участок.

Окно задания параметров Add Simple Banner

Рисунок 1.21. Окно задания параметров Add Simple Banner

Команда Layer > Add Banner Text > Neon (Слой > Добавить заголовок > Неон) позволяет добавить к тексту излучение.

Окно задания параметров сдвига для эффекта перемещения

Рисунок 1.12. Окно задания параметров сдвига для эффекта перемещения

В раскрывающемся списке Background (Фон) указывается слой, являющийся начальным для вставляемой анимации. Кнопка Browse (Просмотр) в строке Imported image file (Импортируемый файл рисунка) позволяет указать местонахождение вставляемого GIF-файла. В окне просмотра первый кадр вставляемого файла появляется в левом верхнем углу на фоне кадра существующей анимации. Задавая параметры сдвига X-offset и Y-offset (сдвиг по X и Y), можно указать точную позицию для нового изображения. В области Frames (Кадры) выбирается число кадров анимации:

Use current (Использовать текущую) — указывает число кадров существующей анимации начиная с выделенного кадра;

Use imported (Использовать импортируемую) — указывает число кадров импортируемого файла;

Custom (Пользовательская) — позволяет пользователю задать число кадров новой анимации.

Если задать число кадров большее, чем число кадров в анимации, то анимация будет повторяться столько раз, сколько требуется для достижения заданного числа. Щелчок на кнопке ОК выполнит слияние.
Для быстрого создания эффекта движения объекта служит команда Layer > Moving Sprite (Слой > Движущийся спрайт), открывающая одноименное диалоговое окно. В этом окне выделяют группу кадров, представляющих собой набор копий одного объекта, причем сдвиг объекта будет выполняться относительно первого кадра. В поля X-offset и Y-offset (сдвиг по X и Y) вводятся величины сдвига, которые для каждого кадра измеряются относительно предыдущего и соответствуют всем выделенным кадрам кроме первого. Чтобы анимация выполнялась правильно, после щелчка на кнопке ОК и закрытия окна Moving Sprite (Движущийся спрайт) необходимо для всех выделенных кадров установить способ их смены (How to remove) назначение То background color (Цветом фона).

Особенности GIFанимации

Особенности GIF-анимации

Компьютерная анимация состоит из последовательного ряда рисунков (кадров), быстро сменяющих друг друга. Если каждый из рисунков незначительно отличается от предыдущего и последующего, то при их воспроизведении создается иллюзия движения. Раньше художники-мультипликаторы рисовали каждый кадр вручную, но теперь появилась возможность автоматизировать этот процесс с помощью компьютеров. Основной характеристикой анимации является число кадров, использованных для ее создания. Большее число кадров позволяет добиться плавных движений анимированных героев и появления объектов в изображении в разные моменты времени. При недостаточном количестве кадров становятся заметны различия в последовательных изображениях объектов, что приводит к их резким перемещениям. В традиционной анимации число кадров прямо зависело от продолжительности анимации в секундах. В компьютерной анимации на первый план выходит размер файла, в котором хранятся изображения. Поэтому при создании компьютерной анимации стараются найти компромисс между качеством анимации и размером файла, что и определяет общее количество кадров анимации.

Первое окно Optimization Wizard

Рисунок 1.17. Первое окно Optimization Wizard

Пользовательские установки

Пользовательские установки

При копировании изображения в GIF Animator из внешней программы для него задается набор параметров по умолчанию. Пользователи могут задать свои значения этих начальных параметров, для чего следует выбрать команду File > Preferences (Файл > Установки), открывающую одноименное диалоговое окно с набором вкладок.

Последовательность кадров анимации

Рисунок 1.1. Последовательность кадров анимации

Одним из первых графических форматов, поддерживающих анимацию, стал GIF-формат. Этот формат был разработан для использования в CompuServe, получил наименование Graphics Interchange Format (графический формат обмена) и был предназначен для хранения библиотек изображений. Последний стандарт, описывающий этот формат, был создан в 1989 году и получил название GIF89a. В силу относительно малого размера файлов изображений GIF-формат стал одним из широко используемых форматов хранения изображений в Интернете.
GIF-анимация использует возможность GIF-формата хранить в файле несколько изображений. Если в GIF-файле содержится несколько изображений, то они будут показаны поочередно, как слайд-шоу или небольшой фильм. Однако в отличие от обычного фильма, в котором скорость воспроизведения определяется числом кадров в секунду, в GIF-файле хранится ряд параметров, определяющих, каким образом и как долго каждое изображение будет демонстрироваться. Кроме того, изображения GIF-файла могут быть разного размера и размещены в нужной позиции экрана независимо от изображений других кадров.
Задать параметры управляющих кодов GIF-анимации, встроенные в файл, можно с помощью различных программ, например Ulead GIF Animator (http: / /www. ulead. com/ga/ features. htm).
GIF-формат использует метод сжатия LZW (Lempel-Ziv-Welch). позволяющий уменьшить размер файла до 40% от его первоначального размера без потерь информации. Однако в этом формате применяется палитра, содержащая не более 256 цветов, что зачастую приводит к потере качества при преобразовании изображений других графических форматов, созданных в режиме True Color. Пользуясь форматом GIF, можно размещать изображения в Интернете на оригинальном фоне Web-страницы. Такую возможность обеспечивает поддержка атрибута прозрачности, позволяя не отображать один из цветов изображения. GIF-формат также поддерживает чересстрочную развертку (interlacing), позволяющую увидеть изображение на странице еще до его полной загрузки.
Несмотря на различия в технологии создания GIF-анимации и мультипликации, результат одинаков — статические изображения оживают на экране. Однако при создании GIF-анимации для Web-страниц следует учесть ряд особенностей. Во-первых, необходимо продумать концепцию анимации, ее изюминку, позволяющую сжато выразить идею, не нарушая при этом иллюзии движения. Это позволит ограничиться малым количеством кадров. Во-вторых, цвет фона анимации должен сочетаться с цветом фона Web-страницы, чтобы они выглядели как единое целое. Однако если анимация содержит движущиеся объекты, появляющиеся или скрывающиеся за краем рисунка, то важно, чтобы фон анимации выделялся на странице, в противном случае объект на краях будет казаться обрезанным.
Каждый GIF-файл содержит таблицу индексов цветов, называемую цветовой палитрой. Она определяет, какие цвета используются в изображении и какой индекс соответствует каждому цвету. В зависимости от способа хранения для индекса требуется до 4 байтов данных, поэтому изображение с-256 цветами имеет палитру размером до 1024 байта.
В анимированных GIF-файлах используют два типа палитр: глобальную (Global Palette), определяющую цвета каждого изображения анимации по умолчанию, и локальную (Local Palette), уникальную для каждого отдельного кадра анимации. При добавлении изображения в GIF-анимацию можно указать, какую из палитр следует использовать. Однако не следует стремиться к уменьшению размера файла, используя только Global Palette. Зачастую качество анимации важнее, поэтому для кадров изображений, значительно отличающихся от основных или хотя бы от предыдущего кадра, следует использовать Local Palette. В противном случае преобразование цветов к цветам Global Palette может привести к ухудшению качества изображения.
При построении Global Palette можно использовать два способа добавления в нее цветов из нового изображения, помещаемого в анимацию. Первый — использовать цвета из так называемой безопасной палитры («Web-safe» palette), содержащей 216 заранее определенных цветов и предназначенной для Интернета. Второй — создать оптимизированную палитру (Optimized Palette), в которую добавляются только доминирующие цвета нового изображения.
При добавлении в пустую анимацию первого изображения можно построить Global Palette на основе палитры этого оригинального изображения. Включение последующих изображений потребует либо добавления цветов в палитру (для этого используют инструмент Color Remapping), либо преобразования изображения к цветам Global Palette. Последнее целесообразно в том случае, когда цвета нового изображения такие же, как в Global Palette. Если цвета значительно различаются, то можно сохранить собственную палитру изображения Local Palette либо добавить их к цветам Global Palette, используя Safe palette или Optimized palette.
При построении Global Palette на основе палитры оригинального изображения следует выбрать способ ее построения. Использование оптимизированной палитры Optimized Palette сохранит только наиболее часто встречающиеся цвета оригинальной палитры. Выбор безопасной палитры Safe Palette позволит применять в Global Palette только 216 заранее определенных цветов, используемых обозревателями Netscape Navigator и Microsoft Internet Explorer. Любой из этих вариантов позволит уменьшить размер файла анимации.

Практикум

Практикум

В упражнениях показано, как создать анимацию, используя последовательность файлов с фазами движения объекта, и как преобразовать видеофайл в анимацию для Web-страницы, выбирая из него отдельные кадры.
Упражнение 1.1. Создание анимации из последовательности файлов

Предупреждение о проблемах совместимости

Рисунок 1.20. Предупреждение о проблемах совместимости

Работа с последовательностью кадров

Работа с последовательностью кадров

Первый запуск программы GIF Animator приводит к появлению окна Startup Wizard (Мастер запуска), предлагающего открыть уже существующие анимацию, видеофайл или образец, создать новую пустую анимацию либо запустить Animation Wizard (Мастер анимаций), который поможет в создании новой анимации.
Выбор кнопки Blank Animation (Пустая анимация) откроет окно, приведенное на Рисунок 1.2. В свою очередь, выбор одной из кнопок области Open (Открыть) откроет стандартное окно выбора файла (Рисунок 1.5). После выделения имени файла, например BANNER ANIMATION .GIF, откроется окно программы, показанное на Рисунок 1.3.
Окно Startup Wizard (Мастер запуска) можно отключить, установив в нем флажок Do not show this dialog box next time (He показывать в следующий раз), тогда при последующих запусках программы оно отображаться не будет. Простейший способ добавить новый кадр к открытой анимации — это перетащить нужный файл изображения из окна Windows Explorer или окна папки Windows непосредственно в рабочую область или в список панели Layer panel (Панель кадров). Другим способом служит выбор команды Layer > Add Images (Слой > Добавить рисунок) или щелчок на одноименной кнопке панели инструментов, открывающих окно Add Images (Добавление рисунков), где можно выделить желаемые файлы.

Редактирование кадров анимации

Редактирование кадров анимации

Режим Editor mode (Режим редактирования) рабочей области позволяет редактировать кадры непосредственно в программе GIF Animator. Для этого служит набор инструментов, таких как Paint (Кисть), Rectangle (Прямоугольник), Fill Tools (Заливка) и др. С их помощью можно не только изменить цвет отдельных пикселов или областей изображения, но и нарисовать в нем новые элементы.
При использовании анимаций из Интернета, которые уже были оптимизированы, может оказаться невозможным редактирование их кадров. В этом случае следует воспользоваться командой Edit > Regenerate Frames (Правка > Восстановить кадры), позволяющей восстановить изображения в кадрах для их последующего редактирования в режиме Editor mode либо в стороннем приложении.
Скопировать один или несколько существующих кадров можно с помощью команды Edit > Duplicate (Правка > Дублировать), вызывающей одноименное диалоговое окно. Для этого кадры предварительно выделяют на панели Layer panel (Панель кадров) и в окне Duplicate (Дублирование) задают количество копий, которое необходимо создать. В поле Horizontal shifting (Горизонтальный сдвиг) задается сдвиг по горизонтали для новых изображений, причем отрицательные величины соответствуют сдвигу влево, а положительные — вправо от исходного изображения. Для сдвига по вертикали служит поле Vertical shifting (Вертикальный сдвиг), в котором отрицательные величины вызывают сдвиг вверх, а положительные — вниз от исходного расположения кадра. Если изображение исходного кадра имеет координаты (0, 0), то допускается ввод только положительных значений. Данная команда позволяет простым способом создать эффект перемещения объекта.

Окно Add Banner Text

Рисунок 1 .23. Окно Add Banner Text

Анимация из видеофайла

Рисунок 1 .36. Анимация из видеофайла

Слияние кадров из двух анимаций

Рисунок 1.11. Слияние кадров из двух анимаций

Сохранение анимации

Сохранение анимации

Существует несколько способов сохранить анимацию. Наиболее очевидным способом является создание GIF-файла, однако при этом следует учитывать возможности его оптимизации. Кроме того, анимацию можно сохранить в виде исполняемого файла, для которого не требуется программы-проигрывателя, а также в одном из форматов видео. Чтобы сохранить анимацию в формате GIF-файла, следует выбрать команду File > Save (Файл > Сохранить), если файл сохранялся ранее, или File > Save As (Файл > Сохранить как), по которой открывается диалоговое окно Save As (Сохранить как). В этом случае файлу можно присвоить новое имя. Если же требуется сократить размер файла, то используют команду File > Optimization Wizard (Файл > Мастер оптимизации), запускающую Мастер оптимизации.
GIF Animator позволяет также экспортировать часть кадров анимации с созданием нового анимированного GIF-файла либо группы отдельных GIF-файлов, содержащих по одному кадру. Для этого выбирают команду File > Export Image Layers (Файл > Экспорт кадров), открывающую окно Export Images (Экспорт кадров), в котором выделяют экспортируемые кадры (Рисунок 1.13).

Специальные эффекты

Специальные эффекты

Команды меню Video F/X (Видеоэффекты) позволяют легко добавить к анимации различные эффекты, но при этом следует учесть, что их использование также увеличивает размер GIF-файла.
Для добавления заголовков с прокручивающимся текстом можно воспользоваться командой Layer > Add Banner Text > Simple (Слой > Добавить заголовок > Простой), добавляющей дополнительные кадры к анимации и размещающей их в заданной позиции экрана. По команде открывается окно Add Simple Banner (Простой заголовок), в котором представлены инструменты для форматирования шрифта, выбора рамок и направления прокрутки текста. В поле Banner text (Текст заголовка) вводится строка текста, которая и будет помещена в анимацию. Флажок Merge with background image (Слияние с изображением фона) позволяет совместить текст с фоновым изображением. На вкладке Rolling Control (Управление прокруткой) задаются направление и скорость прокрутки, а также качество анимации. Установкой флажка Optimized frame size (Оптимальный размер кадра) можно сократить размер файла за счет сокращения размера кадра до размера баннера. На вкладке Border Style (Тип линии) можно задать толщину и цвет рамки, а также добавить к ней тень. Кнопка Start Preview (Начать предварительный просмотр) этого окна позволяет увидеть результат в области образца, которая одновременно служит для выбора позиции баннера на логическом экране.

Третье окно Optimization Wizard

Рисунок 1.19. Третье окно Optimization Wizard

Щелчок на кнопке Wizard (Мастер) или выбор команды File > Optimization Wizard (Файл > Мастер оптимизации) вызывают Мастер оптимизации, который обеспечивает диалог для выбора параметров оптимизации (Рисунок 1.17—1.19). По завершении процесса оптимизации открывается диалоговое окно с информацией о размере файла до и после оптимизации, позволяющее заменить файл анимации оптимизированным или сохранить его под новым именем. При оптимизации задаются следующие параметры:

Palette merging (Слияние палитр) — позволяет создать общую палитру, содержащую большинство используемых в изображениях цветов с заменой похожих цветов в отдельных кадрах, при этом локальные палитры для воспроизведения сильно различающихся цветов в кадрах не сохраняются;

Dithering (Имитация) — выбирается для сглаживания цветовых переходов при использовании Global Optimized Palette, что позволяет создать имитацию промежуточных оттенков цвета, не входящих в палитру (не рекомендуется для изображений, содержащих текст);

Quick optimization (Быстрая оптимизация) — позволяет быстро сократить размер файла анимации, вызывая из первого окна Мастера оптимизации ранее выбранные и сохраненные параметры оптимизации.

Не все обозреватели одинаково отображают GIF-анимацию, поэтому GIF Animator выдает предупреждение, если анимация содержит параметры, которые могут создать проблемы при их воспроизведении. Основными параметрами, влияющими на совместимость, являются:

Interlace (Чересстрочный) — в анимации содержатся кадры с чересстрочной загрузкой, что может вызвать проблемы у некоторых обозревателей;

Local Palettes (Локальные палитры) — наличие локальной палитры увеличивает размер файла от 12 байт (4 цвета) до 768 байт (256 цветов), поэтому если каждый кадр содержит локальную палитру, то размер файла может оказаться значительным;

То previous state (К предыдущему) — этот метод смены кадров поддерживается не всеми обозревателями, поэтому могут возникать проблемы при воспроизведении в таких обозревателях;

Wait for user input (Ожидание ввода) — этот параметр поддерживается незначительным числом программ просмотра GIF-файлов;

2 or more comment blocks (2 и больше комментариев) — так как слои комментариев необязательны, то сокращение размера файла может быть достигнуто их удалением и помещением всех комментариев в один слой.

Установка параметров режима Optimize mode

Рисунок 1.16. Установка параметров режима Optimize mode

Наиболее эффективным способом сокращения размера файла является оптимизация в режиме Optimize mode (Рисунок 1.16).
При оптимизации GIF-анимации выполняются три основных шага:

Удаление избыточных цветов из палитры, которые не используются в изображениях, появляются только однажды либо близки к часто используемым цветам палитры.

Изменение Global Palette добавлением к ней цветов локальных палитр, что позволит сократить число используемых локальных палитр. Если число цветов Global Palette достигло максимума, то оптимизируют локальные палитры, сокращая число цветов в них до минимально возможного.

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

Вкладка General окна Preferences

Рисунок 1.31. Вкладка General окна Preferences

На первой вкладке General (Общие) (Рисунок 1.31) задаются следующие параметры:

в области Default Global Palette (Глобальная палитра по умолчанию) определяется способ построения глобальной палитры при создании новой анимации:

Use the palette of the first image layer (Использовать палитру первого слоя) — выбирается оригинальная палитpa первого импортированного в GIF Animator изображения с указанием максимального числа сохраняемых цветов (от 16 до 256);

Select a predefined palette (Выбрать предопределенную палитру) — выбирается одна из существующих в GIF Animator палитр, включая безопасную палитру с 216 цветами;

Use a custom palette file (Использовать файл палитры) — выбирается одна из ранее созданных пользователем палитр, сохраненная в специальном файле с расширением PAL;

флажок Automatically expand Global Palette (Автоматически расширять палитру) задает режим добавления в Global Palette цветов, отсутствующих в ней, но содержащихся во вновь вставляемом изображении. При этом следует указать максимальное число добавляемых цветов. При достижении Global Palette общего размера в 256 цветов новые цвета в нее добавлять нельзя;

флажок Enable Startup Wizard (Активизировать Мастер запуска) задает появление окна Мастера при каждом запуске программы GIF Animator.

Вкладка Optimize окна Preferences

Рисунок 1.33. Вкладка Optimize окна Preferences

На вкладке Optimize (Оптимизация) (Рисунок 1.33) задаются параметры, используемые при оптимизации GIF-файла:

В области Preset manager (Диспетчер установок) перечислены сохраненные ранее варианты, причем пользователь может упорядочить их по своему желанию. Кнопка Set selection as default (Сделать по умолчанию) позволяет задать один из них как выбираемый по умолчанию (его имя появится в строке под кнопкой). Флажок Use settings on Optimize tab as default (Использовать эти установки по умолчанию) дает возможность, не сохраняя установки в списке, использовать их для последующей оптимизаций анимированных файлов.

В областиDefault GIF optimization engine (Метод оптимизации GIF) выбирают метод, применяемый при оптимизации изображения. Значение Median Cut (Усреднение) выбирают для файлов невысокого качества и создания файлов меньшей величины с сохранением в изображении небольших зон с цветом, значительно отличающимся от цвета остальной части изображения. Значение Minimum Variance (Минимум отклонения) выбирают для более качественных файлов, что приводит к созданию файлов большей величины по сравнению с предыдущим параметром.

Флажок Check if the current document is already optimized (Проверить выполнение оптимизации) устанавливают для проверки выполнения оптимизации файла текущей анимации.

Рисунок 1 .34. Вкладка Advanced окна Edit
На вкладке Advanced (Дополнительно) (Рисунок 1.34) также задаются различные параметры, используемые как при оптимизации GIF-файла, так и при его редактировании:

Флажок Run Optimization Wizard when saving file (Запускать Мастер при сохранении файла) указывает необходимость запуска Optimization Wizard (Мастера оптимизации) при каждом сохранении GIF-файла. При его установке становится доступным другой флажок, Optimize with the settings specified on the Optimize tab (Оптимизировать с параметрами на вкладке Optimize), который позволяет не запускать Мастер оптимизации, а сохранить GIF-файл с параметрами, заданными при последней оптимизации.

Флажок Check animation compatibility when saving file (Проверить совместимость анимации) указывает GIF Animator проверить, не содержит ли анимация свойства, которые не поддерживаются всеми обозревателями (например, метод смены кадров То previous state), или наличие нескольких слоев комментариев.

Поле Levels of undo (Число отмен) определяет число отмен в режиме текущего редактирования (максимальное значение 200).

Поле Number of onion skin layers (Число одновременно отображаемых слоев) задает число кадров, которые будут отображаться при работе в режиме Onion Skin.

Поле Transparency of onion skin layers (Прозрачность слоев в режиме onion skin) задает величину прозрачности изображения кадра в режиме Onion Skin.

На вкладке Personal (Личная) находится флажок Add personal comment block when saving oroptimizing (Добавить личный комментарий) для автоматического добавления персонального комментария к каждой сохраняемой или оптимизируемой анимации. Текст комментария вводится в поле Content (Содержание) и не может быть длиннее 512 символов. После добавления слоя персонального комментария новое сохранение файла анимации может быть выполнено только по команде File > Save As (Файл > Сохранить как).

Второе окно Optimization Wizard

Рисунок 1.18. Второе окно Optimization Wizard

Выбор эффектов в окне Add Banner Text

Рисунок 1.24. Выбор эффектов в окне Add Banner Text

В окне Add Neon Banner (Неоновый заголовок) кроме ранее рассмотренных вкладок добавляется вкладка Neon Options (Параметры излучения), на которой задаются параметры изменения цвета и размера излучения. Если создаваемый баннер имеет цветной фон, который впоследствии отмечается как прозрачный, то для правильного воспроизведения анимации следует также задавать параметр смены кадров То previous state (К предыдущему). Однако этот параметр поддерживается не всеми обозревателями.
Применение эффекта градиента позволяет изменять цвет баннера во время анимации. Для создания этого эффекта по команде Layer > Add Banner Text Gradient (Слой > Добавить заголовок > Градиент) открывается окно Add Gradient Banner (Градиентный заголовок), в котором находится набор вкладок для создания баннера, в том числе указывается цветовой режим и способ его изменения. Среди представленных вариантов можно задать и изменение цвета от центра текста к его краям.
Применение эффекта бегущей строки позволяет задать несколько строк текста, поочередно появляющихся во время анимации. Для этого по команде Layer > Add Banner Text > Marquee (Слой > Добавить заголовок > Бегущая строка) открывается окно Add Marquee Text (Бегущий заголовок), в котором указывается, сколько строк текста следует использовать. Добавить новые строки и их текст можно с помощью кнопки Add (Добавить), а удалить ненужные строки — с помощью кнопки Remove (Удалить). Для каждой из строк можно задать индивидуальные параметры, включая выравнивание, цвет и тень. Кнопка Banner Settings (Параметры заголовка) позволяет установить задержку между кадрами и направление движения текста, а также параметры рамки баннера.
К тексту можно применить набор анимационных эффектов. Подобно эффекту бегущей строки, баннер в этом случае может состоять из нескольких строк текста с различной задержкой их появления. Для этого по команде Layer > Add Banner Text > Animation (Слой > Добавить заголовок > Анимированный) открывается окно Add Animation Text (Анимированный заголовок), в котором указывается, сколько строк текста следует использовать. На дополнительной вкладке Effects (Эффекты) с помощью раскрывающихся списков выбираются способы появления и исчезновения текста на экране.

Выбор нового размера кадра

Рисунок 1.9. Выбор нового размера кадра

Если в анимации кадры различаются только небольшой областью, то можно уменьшить размер файла, оставив в последующих кадрах только эту область. При этом результат анимации будет тот же самый. Чтобы уменьшить размер кадра, следует воспользоваться командой Edit > Crop (Правка > Обрезать) или одноименной кнопкой на вкладке Edit (Правка) рабочей области, вызывающими окно Crop (Обрезка) (Рисунок 1.9). С помощью мыши изменяется размер рамки обреза, и она помещается в соответствующее место. Для замены оригинального кадра обрезанным следует установить флажок Replace original image layer (Заменить исходный слой). Переключатель Apply to selected image layers only (Применить только к выделенным кадрам) в правом нижнем углу позволяет изменить размер только выделенных кадров, a Apply to all image layers (Применить ко всем кадрам) - сразу всех кадров анимации. Щелчок на кнопке ОК закроет окно Crop (Обрезка), размеры заданных кадров изменятся.
В режиме Edit mode можно изменить размеры одного или нескольких кадров, если они оказались слишком велики по размеру, что часто случается при импорте видеофайлов. Для этой цели служит команда Edit > Resample (Правка > Изменить разрешение) или одноименная кнопка на вкладке Edit (Правка) рабочей области, вызывающие диалоговое окно Resample (Изменение разрешения). Предварительно следует выделить нужные кадры на панели Layer panel (Панель кадров). При нажатой клавише Shift выделяется группа последовательных кадров, а при нажатой клавише Ctrl выделяются несмежные кадры в любом порядке. В окне Resample (Изменение разрешения) указывается, каким образом следует изменить размеры. Установка флажка Keep aspect ratio (Сохранить пропорции) сохраняет пропорции кадра при изменении одного из размеров по ширине или высоте, которые могут быть заданы как в процентах, так и непосредственно в пикселах.

Выбор параметров цвета в окне Add Banner Text

Рисунок 1.22. Выбор параметров цвета в окне Add Banner Text

Выбор параметров гиперссылки для Webстраницы

Рисунок 1.15. Выбор параметров гиперссылки для Web-страницы

При создании видеофайла число кадров рассчитывается как результат деления 100 на среднее время задержки. При этом максимальное число кадров в секунду не должно превышать 30. В изображении используется 24 бита на пиксел (True Color) при размерах кадра, определяемых размером логического экрана. Например, если среднее время задержки в анимации 45, то число кадров в секунду будет равно 2,2.
GIF Animator позволяет легко и просто создать HTML-код для GIF-файла, который затем может быть помещен на соответствующую Web-страницу. При этом требуется, чтобы GIF-файл находился в той же папке, что и Web-страница. Первым шагом создания HTML-кода является выбор команды File > Export > As HTML Code (Файл > Экспорт > Как HTML-код), создающей файл с текстом кода. Затем выполняется команда Edit > Copy HTML (Правка > Копировать HTML), посылающая в буфер обмена сгенерированный код. Теперь остается только перейти в редактор HTML и вставить строку кода в соответствующее место страницы командой Edit > Paste (Правка > Вставить).
Вставляемая GIF-анимация может содержать гиперссылку на заданный URL-адрес. Чтобы создать гиперссылку одновременно с ее вставкой на Web-страницу, необходимо предварительно определить следующие параметры. По команде File > Preferences (Файл > Установки) открываем одноименное окно и активизируем вкладку HTML. На вкладке устанавливаем флажок Add URL when copying HTML code option (Добавить URL при копировании HTML-кода).
Выбираем нужное значение переключателя: Prompt dialog box (Вывод окна диалога) для ввода ссылки вручную при каждом выполнении команды Edit > Copy HTML (Правка > Копировать HTML) либо Custom default (По умолчанию), позволяющее задать одну постоянную ссылку для всех вставляемых файлов (Рисунок 1.15). Дополнительно можно выделить ссылку рамкой, если установить флажок Border (Рамка), а также выбрать нужный вариант альтернативного текста.
Существуют три основных способа существенного сокращения размера анимированного GIF-файла: сокращение цветовой палитры, уменьшение числа кадров (слоев), оптимизация отдельных кадров анимации. При этом следует помнить, что главной целью является получение качественной анимации для Web-страницы, а не файла минимального размера. Поэтому следует искать компромисс между качеством анимации и размером файла для его быстрой передачи по сети.
Наилучшим способом для сокращения цветовой палитры является использование глобальной палитры Global Palette для задания цвета отдельных кадров. Если какие-то кадры незначительно различаются по цветовой гамме, то нет необходимости создавать для них локальную палитру Local Palette, а следует, используя вкладку General (Общие) окна Preferences (Установки), добавить эти цвета в Global Palette. Для кадров, имеющих существенные различия в цвете, создают свои локальные палитры Local Palette, но удаляют из них цвета, общие с глобальной палитрой Global Palette. Сокращенные палитры могут содержать 16,32, 64 и 128 цветов. Другим способом сократить размер файла является удаление отдельных кадров, которые не являются необходимыми, если это не приводит к значительному искажению анимации при воспроизведении. Также следует обратить внимание на размер кадров. Если анимированный объект занимает малую часть окна, то нет нужды сохранять для него кадры того же размера, что и статический фон. Поэтому для кадров с объектом можно задать меньший размер, указав его положение на логическом экране, что существенно сократит общую величину GIF-файла.

Выбор параметров сохраняемого видеофайла

Рисунок 1.14. Выбор параметров сохраняемого видеофайла

В окне Save Video File (Сохранение видеофайла) кнопка Options (Параметры) открывает диалоговое окно Video Save Options (Параметры сохранения видео), в котором можно задать параметры сохраняемого файла, выбрать скорость обмена с устройством хранения информации, кодек и характеристики сжатия. В зависимости от этих параметров новый файл может быть по размеру меньше или больше исходного, иметь другую скорость анимации и может быть оптимизирован для проигрывания на оборудовании определенного типа.

Выделение экспортируемых кадров

Рисунок 1.13. Выделение экспортируемых кадров

Внизу окна выбирают нужное значение переключателя: As a single file (Как один файл) — для анимированного GIF-файла или As a sequence of files (Как набор файлов) — для раздельных файлов. Щелчок на кнопке ОК вызывает окно для указания имени файла. В случае экспорта кадров в отдельные файлы им присваиваются имена с порядковой нумерацией, например при задании имени SUN файлы будут поименованы SUN.GIF, SUN001.GIF, SUN002.GIF и т. д. в порядке их расположения в исходной анимации.
Результаты работы могут быть сохранены не только в виде анимированного GIF-файла, но и в других форматах. Команда меню File > Export (Файл > Экспорт) открывает подменю, позволяющее выбирать формат видеофайла, HTML-документа, объекта Active Desktop или исполняемого файла Animated Package. В последнем случае можно использовать созданную анимацию для отправки виртуальной открытки или просмотра анимации на экране компьютера без помощи специальных программ.
При сохранении анимации в формате видеофайла можно получить более высокое качество с большим числом кадров в секунду. Для создания видеофайла выбирают команду File > Export > As Video File (Файл > Экспорт > Как видеофайл), открывающую окно Save Video File (Сохранение видеофайла), в котором можно ввести имя файла, выбрать его тип, а также задать краткое описание и тему.

Анимация для Интернет

Четвертое окно Animation Wizard

Рисунок 2.7. Четвертое окно Animation Wizard

Четвертое окно Мастера служит для задания числа повторений проигрывания анимации и времени воспроизведения кадра. Циклическое воспроизведение анимации задается значением переключателя Yes, repeat the animation indefinitely (Да, повторять бесконечно). Выбор второго значения, Play it n times (Воспроизвести n раз), требует указания числа повторений в поле ввода. Еще одно поле ввода, How long... (Время демонстрации кадра), служит для задания периода смены кадров анимации, измеряемого в сотых долях секунды (выбор величины 20 определит интервал в 0,2 с).

Четвертое окно Banner Wizard

Рисунок 2.13. Четвертое окно Banner Wizard

В третьем окне определяется время демонстрации каждого кадра (Display Time) в десятых долях секунды, количество кадров в секунду (Frames Per Second), а также число повторов анимации.
Общее число кадров анимации будет рассчитываться по формуле (Display Time/10) * Frames Per Second,поэтому если для времени задано значение 15, а число кадров определено как 10, то всего кадров будет (15/10)* 10 = 15. Значение переключателя Yes, repeat the animation indefinitely (Да, повторять бесконечно) позволяет повторять анимацию бесконечное число раз, а выбор значения Play it n times (Воспроизвести n раз) требует указания количества повторов в поле ввода.
Четвертое окно Мастера предназначено для текста создаваемого баннера. В поле ввода этого окна набирается требуемый текст. Затем щелчком на кнопке Set font (Задать шрифт) открывают диалоговое окно Add Text (Добавление текста), в котором задают желаемые параметры его форматирования (шрифт, кегль, начертание и т. д.). Закрывая окно щелчком на кнопке ОК, возвращаются в четвертое окно Мастера.

Цветовая палитра

Цветовая палитра

Существует несколько методов представления цвета на экране монитора. Два основных из них используются инструментами Animation Shop. Это модели RGB и HSB. В табл. 2.1 представлены параметры для этих методов, задающие различные цвета.
Таблица 2.1. Параметры моделей RGB и HSB

Цвет	RGB	HSB(HSL)
Параметры	Параметры
	Red	Green	Blue	Hue	Sat	Light
Красный	255	0	0	0	240	120
Оранжевый	255	128	0	20	240	120
Желтый	255	255	0	40	240	120
Зеленый	0	255	0	80	240	120
Голубой	0	255	255	120	240	120
Синий	0	0	255	160	240	120
Фиолетовый	255	0	255	200	240	120

Цветовая модель RGB (Red, Green, Blue) представляет собой сочетание в различных пропорциях трех основных цветов — красного (Red), зеленого (Green), синего (Blue). При наложении одного компонента основного цвета на другой яркость суммарного излучения увеличивается. Совмещение трех компонентов дает ахроматический серый цвет, который при увеличении яркости приближается к белому цвету. При 256 градационных уровнях тона черному цвету соответствуют нулевые значения RGB, а белому — максимальные значения (255, 255,255).
Цветовая модель HSB (HSL) разработана с максимальным учетом особенностей восприятия цвета человеком. Она описывается тремя компонентами: оттенком (Hue), насыщенностью (Saturation) и яркостью (Brightness, иногда ее обозначают Lightness).
Цветовой тон (оттенок — Hue) характеризует положение данного цвета на цветовом круге. Красный цвет принят за нулевое значение, положение остальных цветов характеризуется величиной угла между данным тоном и красным. Для чистых спектральных цветов достаточно этого параметра. Однако цвет может быть осветлен (уменьшена его насыщенность) или затемнен (уменьшена яркость).
Насыщенность (Saturation — Sat) характеризует монохроматичность цвета. Для чистых спектральных цветов его величина максимальна. Чем меньше насыщенность, тем светлее цвет. При нулевой насыщенности чистый спектральный цвет становится белым.
Яркость (Brightness — Light) имеет максимальное значение для чистых спектральных цветов. При снижении яркости цвет становится темным. При нулевой яркости любой цвет превращается в черный.
Электронная цветовая палитра по предназначению подобна палитре художника, но включает гораздо большее число цветов (Рисунок 2.3). Электронная палитра состоит из определенного числа ячеек, каждая из которых содержит отдельный цветовой тон. Конкретная цветовая палитра соотносится с определенной цветовой моделью, так как ее цвета созданы на основе цветового пространства этой модели. Но если в цветовой модели можно воспроизвести любой из описываемых ею цветов, то цветовая палитра содержит ограниченный набор цветов, называемых стандартными.

Информация о результатах оптимизации

Рисунок 2.25. Информация о результатах оптимизации

В третьем окне Мастера Optimization Progress (Выполнение оптимизации) с помощью индикаторов отображается ход оптимизации файла. Когда оптимизация завершится, щелчком на кнопке Next (Далее) переходим к следующему, четвертому окну Optimization Preview (Предварительный просмотр) Мастера, в котором можно выполнить предварительный просмотр результирующей анимации перед окончательным завершением оптимизации и созданием результирующего файла.
Последнее окно — Optimization Results (Результаты оптимизации) содержит информацию о результатах оптимизации и сравнительные характеристики загрузки файла при различной скорости соединения с Интернетом. Щелчком на кнопке Finish (Готово) завершаем работу с Мастером и сохраняем оптимизированную анимацию в заданном файле.

Окно Animation Shop содержит следующие

Интерфейс Animation Shop 3

Окно Animation Shop содержит следующие основные элементы, предназначенные для выполнения определенных функций. Строка Title Bar (Заголовок окна) является стандартной и включает значок Animation Shop, название приложения и имя файла активной анимации, а также стандартные кнопки Windows для управления окном. Ниже расположена Menu Bar (Строка меню) с заголовками раскрывающихся меню команд. Рабочая область окна (Workspace) предназначена для размещения панелей инструментов и палитр. В ней также размещаются окно Frames (Кадры), в котором отображаются кадры различных анимаций, и окно Play (Воспроизведение) для воспроизведения активной анимации. Строка Status Bar (Строка состояния) внизу окна информирует о свойствах активной анимации и производимых действиях, а также служит индикатором выполнения при открытии файла анимации или выполнении рендеринга. При работе с инструментами рисования на ней отображаются также координаты (х и у) нахождения указателя мыши в кадре анимации.

Jasc Animation Shop

Jasc Animation Shop

Одним из средств, которые предлагают производители графического программного обеспечения для создания анимаций, служит пакет Paint Shop Pro 7 фирмы Jasc Software. Это не только графический редактор, предоставляющий широкий выбор кистей для рисования, средства ретуширования изображения, более 25 стандартных фильтров для его обработки, базовый набор стандартных эффектов и возможность подключения дополнительных фильтров plug-ins пакета Photoshop.
В состав пакета Paint Shop Pro 7 фирмы Jasc Software (http: //www.jasc.com/product.asp?pf_ id=001)также включен Animation Shop (http: //www. j asc. com/product. asp?pf_id= 003) — программа для создания анимации, которую можно использовать в Интернете или в собственных мультимедиа-приложениях. В ней к одному или нескольким статическим изображениям можно применить различные эффекты и переходы для создания мультипликации. Встроенные мастера позволяют быстро создать требуемый вид анимации, подобрать желаемые эффекты и сохранить файл. Animation Shop позволяет сохранять анимацию в файлах форматов GIF, FLC, FLI, AVI, ANI или собственном формате программы — MNG.
На подготовительном этапе в графическом редакторе Paint Shop Pro создают изображения заданного размера в соответствии с числом объектов будущей анимации. Как правило, выбирается небольшой размер, так как от этого зависит скорость загрузки Web-страницы с анимацией. Количество кадров изображения также должно быть невелико и обычно не превышает трех-пяти. Объект, который будет анимирован, должен быть нарисован заново или уже сохранен в отдельном файле. Если требуется изобразить несколько фаз движения, то каждая из них может сохраняться в отдельном файле либо как отдельный слой многослойного файла. При наложении объектов друг на друга задается прозрачный фон изображения. Затем многослойный файл или набор файлов с изображениями импортируется в Animation Shop.

Мастер оптимизации

Мастер оптимизации

Несколько особняком стоит Мастер оптимизации (Optimization Wizard), который позволяет сократить размер результирующего файла при сохранении требуемого качества анимации. Этот процесс запускается автоматически при сохранении анимации, либо вручную выбором команды File> Optimization Wizard (Файл > Мастер оптимизации), либо клавиатурной комбинацией Shift+Z.
В первом окне Мастера Optimized Output (Оптимизация вывода) с помощью переключателя Optimize for (Оптимизировать для) задается формат сохраняемого файла анимации (GIF, FLC, FLI, AVI). Другой переключатель, When finished (По окончании), позволяет создать новый файл (значение -Create a new animation from the optimized animation) либо сохранить результат оптимизации в имеющемся файле (значение — Replace the current animation with the optimized version).

Animation Wizard) помогает создать новую

Мастера Animation Shop 3

Мастер анимации ( Animation Wizard) помогает создать новую анимацию. Для его запуска можно выполнить команду File > Animation Wizard (Файл > Мастер анимации), либо щелкнуть на одноименной кнопке панели инструментов, либо воспользоваться клавиатурной комбинацией Shift+A. В раскрывающихся последовательно диалоговых окнах Мастера вводится информация, необходимая для создания анимации. Навигация между окнами выполняется щелчком на кнопке Next (Далее) для перехода к следующему окну и Back (Назад) для перехода к предыдущему.

Окно Animation Shop с анимацией

Рисунок 2.1. Окно Animation Shop с анимацией

Окно Frames (Кадры) отображает последовательность кадров анимации и позволяет выполнять редактирование каждого кадра. Выделенные кадры отмечаются в нем синей рамкой, а текущий кадр — красными штрихами (цвета, используемые для выделения, могут быть установлены и другие). В режиме предварительного просмотра анимации появляется специальное окно Play (Воспроизведение), в котором она и демонстрируется. При остановке демонстрации это окно закрывается.
Стандартная панель инструментов (Toolbar) содержит 25 командных кнопок, вызывающих наиболее употребительные команды. Tool palette (Палитра инструментов) по умолчанию располагается слева и содержит 12 кнопок различных инструментов. При активизации инструмента форма указателя мыши изменяется. Для отключения инструмента активизируется первая кнопка Arrow (Стрелка). Большинство инструментов рисования и закрашивания требуют, чтобы компьютер работал в режиме True Color. Палитра цветов (Color palette), расположенная справа, позволяет выбирать нужный цвет и информирует о его параметрах. Дополнительно можно вывести панель VCR Control (Управление воспроизведением), кнопки которой будут доступны только при отображении окна Play (Воспроизведение).
Панель Style bar (Панель атрибутов) позволяет задавать параметры для активного инструмента палитры инструментов. Поэтому параметры, представленные на ней, изменяются с выбором инструмента. Раскрывающийся список выбора масштаба доступен на ней практически постоянно. Он позволяет выбрать отношение от 1:24 до 32:1, то есть уменьшение до 24 раз или увеличение до 32 раз по отношению к заданному размеру анимации.
Для выделения кадров предназначена первая кнопка палитры инструментов Arrow (Стрелка). Чтобы выделить один кадр, достаточно щелкнуть на нем. Для выделения группы последовательных кадров следует щелкнуть на первом из них и, удерживая клавишу Shift, щелкнуть на последнем. Если кадры расположены произвольно, то после выделения первого из них удерживают клавишу Ctrl и щелкают на последующих. При случайном выделении лишнего кадра в этом случае повторным щелчком выделение с него можно снять.
Выделить сразу все кадры анимации можно по команде Edit > Select All (Правка > Выделить все). Выбор команды Edit > Select None (Правка > Снять выделение) снимает выделение со всех кадров.
Кроме выделения инструмент Arrow (Стрелка) позволяет перемещать содержимое кадра в другой кадр методом перетаскивания с помощью мыши. Если при этом удерживать клавишу Ctrl, то будет выполнено копирование содержимвго в другой кадр.
Перемещение или копирование кадра или группы выделенных кадров в свободную область окна Animation Shop позволяет создать новую анимацию и открывает для нее новое окно Frames (Кадры).
Инструмент Zoom (Масштаб) позволяет изменять размер кадров в окне Frames (Кадры). Выделение этого инструмента меняет вид курсора на лупу. Щелчок левой кнопки мыши на кадре увеличивает масштаб на одно значение, а правой кнопки — уменьшает его. Текущее значение масштаба отображается на панели стилей в списке Zoom (Масштаб).
Инструмент Registration Mark (Регистрационная метка) дает возможность указать определенную позицию на каждом кадре анимации, позволяя использовать в этой позиции другие инструменты. Данная метка может быть удалена в любой момент и не оказывает действия при воспроизведении анимации или ее печати. Активизация этого инструмента сопровождается появлением на панели атрибутов следующих параметров: раскрывающегося списка Mark Style (Вид метки), задающего три размера перекрестия (Small Cross — 10 пикселов, Medium Cross — 20 пикселов, Spanning Cross — весь кадр), флажка Auto Color (Автоматический цвет) — для изображения перекрестия цветом, отличным от цветов, выделенных на палитре. Удалить перекрестие с изображения можно только щелчком на кнопке Clear (Очистить), расположенной также на панели атрибутов.
При перетаскивании выделенных кадров из одной анимации с отмеченной позицией в другую следует удерживать нажатой клавишу Shift, чтобы привязать отметки друг к другу. Это дает возможность точно позиционировать объекты при создании комбинированной анимации.
Инструмент Crop (Обрезка) позволяет одновременно сократить размер всех кадров анимации, что уменьшит также размер результирующего файла. Активизация этого инструмента приводит к появлению на панели атрибутов трех кнопок: Options (Параметры), Crop (Обрезать) и Clear (Очистить).
Задать область обрезки можно несколькими способами. С помощью мыши центр курсора помещается в какой-либо из углов создаваемого прямоугольного контура, и при нажатой левой кнопке мыши контур рисуется в текущем кадре. Нарисованный контур появится во всех кадрах анимации. Для точного задания размеров прямоугольного контура можно щелкнуть на кнопке Options (Параметры) панели атрибутов.

Окно Color для выбора цвета

Рисунок 2.3. Окно Color для выбора цвета

Состав цветовых палитр RGB зависит от выбранного цветового разрешения, то есть количества бит, сохраняющих информацию об одном пикселе, — 24 бита (True Color), 16 бит (High Color) или 8 бит. В последнем случае цветовая палитра называется индексной, потому что каждый цветовой оттенок кодируется одним числом, которое выражает не цвет пиксела, а индекс (номер) цвета. Таким образом, к файлу цветного изображения, созданного в индексной палитре, должна быть приложена сама палитра, так как программе обработки компьютерной графики неизвестно, какая именно палитра была использована при его создании.
Изображения, подготавливаемые для публикации в Интернете, принято создавать в так называемой безопасной палитре («web-safe» palette) цветов. Она является вариантом рассмотренной выше индексной палитры. Но так как файлы изображений в Web-графике должны иметь минимальный размер, необходимо было отказаться от включения в их состав индексной палитры. Для этого была принята единая фиксированная палитра цветов, названная безопасной, то есть обеспечивающая правильное отображение цветов на любых устройствах (и в программах), поддерживающих единую палитру. Безопасная палитра содержит всего 216 цветов, что связано с ограничениями, накладываемыми требованиями совместимости с компьютерами, не относящимися к классу IBM PC.
Для создания цветов, отсутствующих в индексной палитре, применяют специальный метод Error Diffusion Dithering. Это метод имитации (Dithering), в котором передача цветного полутона в точечном изображении, отсутствующего в стандартной палитре, достигается за счет перемежающихся пикселов двух или более доступных цветов. Оптическое смешение цветов в глазу зрителя, не имеющего возможности рассмотреть отдельно смежные пикселы, создает иллюзию присутствия на рисунке цвета, на самом деле отсутствующего в палитре. Для цветов, сильно отличающихся от цветов палитры, эта техника приводит к созданию зернистых изображений.

Окно Preview in WWW Browser

Рисунок 2.27. Окно Preview in WWW Browser

В области Size (Размер) в полях Width (Ширина) и Height (Высота) задают размер анимации. Установка флажка Default (По умолчанию) позволяет задать исходный размер анимации. В области Background color (Цвет фона) выбирают цвет фона HTML-страницы в обозревателе, на которой будет демонстрироваться анимация. Щелчок на кнопке Preview (Предварительный просмотр) запускает процесс оптимизации с последовательностью нескольких диалоговых окон. Щелчок на кнопке Finish (Готово) последнего из них приводит к открытию окна обозревателя и демонстрации оптимизированной анимации.
Если анимация сохранена в отдельном файле, то Animation Shop может автоматически создать HTML-код, необходимый для размещения анимации на Web-странице. Для этого следует выбрать команду View > HTML Code (Вид > Код HTML), открывающую одноименное окно. Щелчок на кнопке Copy to Clipboard (Копировать в буфер обмена) позволяет скопировать строку кода в буфер обмена, а затем вставить ее на Web-страницу в одном из HTML-редакторов. Закрыть окно HTML Code можно щелчком на кнопке Close (Закрыть).

Окно со строкой HTMLкода

Рисунок 2.28. Окно со строкой HTML-кода

Чтобы сохранить анимацию в файле, следует выбрать команду File > Save (Файл > Сохранить) или щелкнуть на одноименной кнопке панели инструментов. Если файл уже сохранялся ранее и ему присвоено имя, это приведет к его обновлению и сохранению всех сделанных изменений.
Если сохранение происходит в первый раз или требуется сохранить анимацию в файле другого формата, то выбирают команду File > Save As (Файл > Сохранить как), открывающую диалоговое окно Save As (Сохранить как). В этом окне с помощью раскрывающегося списка Save in (Сохранить в) выбирают папку для хранения файла, вводят имя файла в поле File name (Имя файла), выбирают тип файла в раскрывающемся списке Save as type (Сохранить с типом), а затем щелкают на кнопке Save (Сохранить).
После этого файл в формате MNG будет сразу сохранен, а для форматов GIF, FLC, FLI или AVI будет активизирован процесс оптимизации файла с вводом информации в диалоговые окна Animation Quality Versus Output Size (Качество против размера), Viewing Optimization Progress (Выполнение оптимизации), Viewing Optimization Results (Результаты оптимизации). Следует отметить, что сохранение в формате AVI может быть выполнено в уже существующий файл либо с созданием нового файла. Если анимация из ранее сохраненного AVI-файла была открыта в Animation Shop в режиме объединения одинаковых кадров, то сохранение ее изменений в том же файле приведет к потере множества неоткрытых кадров.
Можно также сохранить отдельный кадр анимации или группу предварительно выделенных кадров в отдельном файле. Для этого следует выбрать команду File > Save Frames As (Файл > Сохранить кадры как) или щелкнуть на одноименной кнопке панели инструментов. В диалоговом окне Save Frame As (Сохранить кадры как) задать требуемые параметры и щелчком на кнопке ОК выполнить сохранение.

Окно выбора файлов рисунков

Рисунок 2.29. Окно выбора файлов рисунков

Окно задания пользовательских параметров при оптимизации

Рисунок 2.23. Окно задания пользовательских параметров при оптимизации

В области Create palette by (Способ создания палитры) выбирают одно из значений переключателя:

Standard palette (Стандартная палитра) — при использовании общей палитры, содержащей заданное число цветов;

Optimized Octree (Восьмеричная оптимизация) — при использовании 8 бит на цветовой канал без учета значимости цветов;

Optimized Median Cut (Медианная оптимизация) — при использовании 5 бит на цветовой канал, ранжируя цвета по их значимости;

Browser palette (Палитра браузера) — при использовании безопасной палитры, предназначенной для Web;

Custom palette (Пользовательская палитра) — при использовании одной из палитр пользователя, сохраненных в специальных файлах.

В области Reduce colors by (Замена цветов с помощью метода) выбирают одно из значений переключателя:

Ordered Dithering (Имитация порядка) — позволяет сократить число цветов в палитре, имитируя цвета, не вошедшие в нее, путем оптического смешения точек разного цвета, расположенных в соседних позициях;

Error Diffusion (С учетом ошибки) — заменяет оригинальные цвета ближайшими к ним из выбранной цветовой палитры с учетом полученной ошибки при выборе цветов соседних точек;

Nearest Color (Ближайший цвет) — заменяет оригинальный цвет в изображении ближайшим к нему цветом, имеющимся в выбранной палитре.

На второй вкладке Optimizations (Оптимизация) с помощью флажков задаются следующие параметры:

Remove Non Visible Animation Elements (Удалить все невидимые элементы) — разрешает удалить элементы анимации, не использующиеся для создания изображения;

Write Minimal Frames (Сохранить минимум кадров) — сохраняет только различия в соседних кадрах, что позволяет сократить количество сохраняемых в кадре пикселов (по умолчанию всегда установлен);

Collapse Identical Frames (Сжать идентичные кадры) — удаляет одинаковые кадры, задавая их общее время демонстрации одному кадру;

Map Identical Pixels To Transparent (Заменить одинаковые пикселы прозрачными) — использует свойство прозрачности для сжатия файла (по умолчанию установлен для анимации с использованием прозрачного цвета);

Enable Browser-Specific Optimizations (Включить оптимизацию для заданного браузера) — сокращает размер анимации, используя свойства определенного браузера (не следует задавать, если файл предназначается для Web, где просмотр может выполняться с помощью различных браузеров).

При создании GIF-файла из анимации, поддерживающей неполную прозрачность, в окне выбора параметров появляемся третья вкладка Partial Transparency (Частичная прозрачность), позволяющая выбрать следующие значения переключателя Partial transparency is not allowed... (He допускается частичная прозрачность):

Convert pixels... (Преобразовать пикселы) — задает уровень прозрачности (от 0 до 255), причем все точки, имеющие меньший уровень, преобразуются в полностью прозрачные, а при большем значении становятся полностью непрозрачными (справа указывается величина заданного уровня в процентах);

Use a 50% dither pattern (Использовать имитацию 50%) -позволяет задать уровень прозрачности 50% за счет перемешивания точек полностью прозрачных и полностью непрозрачных;

Use error diffusion dither (Использовать имитацию с расчетом ошибки) — использует однобитовую маску и метод имитации оттенков цветов.

Второй переключатель Would you like to blend... (Разрешить смешивание) предлагает выбор из двух значений:

Yes, blend with this color (Да, смешать с этим цветом) — задает цвет, с которым смешивают частично прозрачные пикселы;

No, use the existing image color at 100% opacity (Нет, использовать существующий непрозрачный цвет) — позволяет сохранить цвет частично прозрачных пикселов без изменений.

При создании файлов AVI, FLC, FLI третья вкладка окна называется Canvas Color (Цвет холста) и позволяет выбрать цвет, который будет замещать прозрачный фон. Щелчок на цветном прямоугольнике вызывает диалоговое окно Color (Цвет) для определения нужного цвета.

Первое окно Animation Wizard

Рисунок 2.4. Первое окно Animation Wizard

Первое окно Banner Wizard

Рисунок 2.10. Первое окно Banner Wizard

Первое окно Optimization Wizard

Рисунок 2.21. Первое окно Optimization Wizard

Пятое окно Animation Wizard

Рисунок 2.8. Пятое окно Animation Wizard

Следующее, пятое окно предназначено для выбора файлов изображений и задания их последовательности, позволяя с помощью кнопки Add Image (Добавить рисунок) выбрать файлы, удалить ненужные кнопкой Remove Image (Удалить рисунок), изменить порядок их следования кнопками Move Up (Переместить вверх) и Move Down (Переместить вниз).
После формирования последовательности щелчок на кнопке Next (Далее) переводит в заключительное окно Мастера, сообщающее об окончании сбора информации и предлагающее щелчком на кнопке Finish (Готово) завершить создание анимации, представив ее в окне Frames (Кадры).

Пятое окно Banner Wizard

Рисунок 2.14. Пятое окно Banner Wizard

В пятом окне выполняется выбор цвета текста или заполнение его изображением, хранящимся в каком-либо файле. Значение переключателя Opaque text (Непрозрачный текст) позволяет задать цвет символов. При выборе значения Image text (Рисунок в тексте) необходимо указать файл изображения, используя кнопку Browse (Обзор), открывающую окно выбора файла. В этом случае изображение при вставке будет обрезано по форме символов текста.
Последнее, шестое окно позволяет выбрать тип перехода в раскрывающемся списке Transition Name (Название перехода), предлагающем для текста семь вариантов: Backlight (Подсветка), Bouncing (Дрожание), Drop Shadow (Тень), Flag (Флаг),
Highlight (Выделение), Marquee (Бегущая строка), Wheel (Колесо).

Практикум

Практикум

В упражнениях показано, как создать анимацию из последовательности файлов, содержащих изображения фаз движения объекта, как из двух изображений с помощью эффектов и переходов рассчитать дополнительные кадры, как создать анимацию из файла Paint Shop Pro, содержащего несколько слоев, преобразовывая каждый слой в отдельный кадр.
Упражнение 2.1. Создание анимации из группы файлов

1. Запускаем Animation Shop. По команде File > New (Файл > Создать) создаем пустую анимацию заданного размера: ширина (width) 50, высота (height) 50, цвет фона — прозрачный (transparent).

2. Из заранее созданных файлов с изображением бабочки bfly1. gif - bfIy8. gif по команде Animation > Insert Frames > From File (Анимация > Вставка кадров > Из файла) вставим восемь кадров, выделяя их группой и расставляя в нужном порядке с помощью кнопок Move Up (Переместить вверх), Move Down (Переместить вниз). Следует учесть, что файлы для кадров в окне Insert Frames From Files (Вставка кадров из файлов) не могут повторяться.

3. По команде View > Animation (Вид > Анимация) выполняем предварительный просмотр анимации и убеждаемся, что девятый пустой кадр нарушает плавную последовательность кадров, поэтому его удаляем.

4. Чтобы сохранить все кадры в одном файле, выполняем команду File > Save (Файл > Сохранить) и задаем имя файла (например, butterfly) и тип CompuServe Graphics Interchange. С помощью Optimization Wizard (Мастер оптимизации) выбираем стандартные параметры сохранения либо, щелкнув на кнопке Customize (Пользовательский), указываем свой набор параметров. В заключение Optimization Wizard (Мастер оптимизации) информирует о размере файла и времени его загрузки при различной скорости обмена (в нашем случае при скорости 28,8 бод время не более 2 с).

Применение эффекта к изображению на существующих кадрах

Рисунок 2.19. Применение эффекта к изображению на существующих кадрах

При установке флажка Show Preview (С предварительным просмотром) в области Source (Источник) можно увидеть анимацию выделенных кадров до применения эффекта, а в области Effect (Эффект) — после его применения. Щелчок на кнопке ОК окна заменяет выделенные кадры вновь рас-:читанными с использованием эффекта.
\налогично действуют команды меню Effects (Эффекты) по угнетению к тексту: Insert Text Effect (Вставка текстового эффекта) вставляет новые кадры с использованием эффекта, примененного к тексту, a Apply Text Effect (Применение текстового эффекта) заменяет существующие кадры на новые. Например, в анимацию с изображением вращающегося гло-iyca в существующие кадры можно добавить бегущую строку с текстом. В этом случае, выделяя все кадры последовательности, следует выбрать команду Effects > Apply Text Effect (Эффекты > Применение текстового эффекта).
В одноименном диалоговом окне в поле Define text (Задать текст) вводится строка текста и при необходимости форматируется в окне Add Text (Добавить текст), вызываемом щелчком на кнопке Fonts (Шрифт). В раскрывающемся списке эффектов выбирается эффект бегущей строки (Marquee), а в поле Text appearance — цвет символов текста, причем в качестве заполнения символов может быть выбрано изображение кадра. Предварительный просмотр результатов в областях Source (Источник) и Effect (Эффект) позволяет оценить результат. Щелчок на кнопке ОК позволит добавить на изображения кадров бегущий текст.

Применение текстового эффекта к кадрам анимации

Рисунок 2.20. Применение текстового эффекта к кадрам анимации

Программа Animation Shop включает более 20 эффектов, применяемых к изображениям, и 26 типов переходов между кадрами. К переходам, которые не имеют параметров, относятся следующие: Dissolve (Растворение), Double Split (Двойное расщепление), Fade (Наплыв), Slat Spin (Вращающиеся полоски), Wedge Wipe (Клинообразное вытеснение).
Переходы, для которых можно задавать управляющие параметры: Blinds (Жалюзи), Checker Wipe (Шахматное вытеснение), Clock Wipe (Радиальное вытеснение), Curtains (Занавес), Hue Wipe (Вытеснение цветом), Iris Wipe (Диафрагма), Lumiance Wipe (Вытеснение яркостью), Morph (Превращение), Mosaic (Мозаика), Page Turn (Переворачивание страницы), Pinwheel (Колесо), Saturation Wipe (Вытеснение насыщенностью), Slash Wipe (Диагональное вытеснение), Slats (Открывающиеся полоски), Sliding Boxes (Скользящие прямоугольники), Spin (Поворот), Split (Расщепление), Star Wipe (Звездообразное вытеснение), Twist (Скручивание), Wipe (Вытеснение), Zoom (Изменение масштаба).
Эффекты, не имеющие параметров: Fade To Grey (Выцветание в серое), Pixelate (Оформление), Rotate Colors (Изменение цвета), Scratches (Царапины), Stream (Полосы).
Эффекты, которыми можно управлять, задавая параметры: Compress (Сжатие), Explode (Рассеивание), Gaussian Blur (Размытие по Гауссу), Motion Blur (Движущееся размытие), Noise (Шум), Pinch (Сжатие к центру), Posterize (Постеризовать), Rotate (Вращение), Shaky Cam (Трясущаяся камера), Shear (Сдвиг), Spiral (Спираль), Stained Glass (Сквозь стекло), Stretch (Растяжение), TV Scanlines (ТВ-развертка), Underwater (Блики), Wave (Волна).

Просмотр анимации в Animation Shop

Рисунок 2.30. Просмотр анимации в Animation Shop

Упражнение 2.2. Применение эффектов к анимации

1. Запускаем Animation Shop. По команде File > Browse (Файл > Обзор) или используя клавиатурную комбинацию Ctrl+B открываем окно обзора папок с рисунками и выбираем два рисунка одинакового размера (Рисунок 2.29). Выполнив команду Image File > Open (Файл изображения > Открыть), открываем два окна Frames (Кадры), содержащих каждое по одному кадру.

2. С помощью инструмента Arrow (Стрелка) переместим один из кадров в окно другой анимации и закроем окно, оставшееся пустым.

3. Чтобы изменить время демонстрации кадра, выполним команду Animation > Frame Properties (Анимация > Свойства кадра) и зададим значение 20, то есть 0,2 секунды. Если выполнить просмотр анимации по команде View > Animation (Вид > Анимация), то рисунки будут меняться в заданном темпе (Рисунок 2.30).

4. Для плавной смены изображений применим к ним переход. По команде Effects > Insert Image Transition (Эффекты > Вставка перехода) открываем одноименное окно, в котором в раскрывающемся списке Effect (Эффект) выбираем значение Page Turn (Перелистывание). Чтобы число новых кадров было невелико, устанавливаем движок Transition length (Длина перехода) в положение 1 секунда, а Frame per seconds (Кадров в секунду) — в положение 5 fps. Если установлен флажок Show Preview (Предварительный просмотр), то в области Transition (Переход) будет демонстрироваться результат выбранного перехода. Щелчок на кнопке О К вставляет пять новых кадров в анимацию.

5. Чтобы при циклической демонстрации анимации не было резкого перехода между последним и первым кадрами, используем эффекты. Выделим первый кадр анимации и выполним команду Effects > Insert Image Effect (Эффекты > Вставка эффекта). В одноименном открывшемся окне задаем тип эффекта, например Gaussian Blur (Размытие по Гауссу), Effect length (Время эффекта) — 1 секунда и число кадров в секунду — 5 fps. Устанавливаем флажок Run Effect in diverse direction (Показать в обратном порядке), чтобы эффект от размытого изображения переходил к четкому. При установленном флажке Show Preview (Предварительный просмотр) в области Effect (Эффект) будет демонстрироваться результат выбранного эффекта. Щелчок на кнопке ОК вставит пять новых кадров в анимацию.

6. Аналогичным образом поступим с последним кадром, только в этом случае флажок Run Effect in diverse direction (Показать в обратном порядке) устанавливать не будем, чтобы создать в итоге размытое изображение.

7. В результате в анимации получится 17 кадров, реализующих полный набор эффектов и переход.

8. С помощью мастера Optimization Wizard оптимизируем параметры сохранения анимированного файла и создаем результирующий файл

Упражнение 2.3. Создание анимации из файла со слоями

1. Предварительно с помощью Paint Shop Pro создаем изображение со следующими параметрами: ширина (width) — 350, высота — (height) 125, цвет фона — прозрачный (transparent), количество цветов — 16 млн. В это изображение вставляем рисунок, каждый раз создавая новый слой и сдвигая изображение в нем на заданную величину. Активизировав все слои, сохраняем файл с многослойным изображением.

2. Запускаем приложение Animation Shop.

3. В окне Animation Shop выполняем команду File > Preferences > General Program Preferences (Файл > Установки > Общие установки программы) и на вкладке Layered Files (Многослойные файлы) устанавливаем флажок Keep each layer as separate frame (Сохранять каждый слой в отдельном кадре).

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

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

Просмотр анимации

Просмотр анимации

Для просмотра анимации следует выбрать команду View > Animation (Вид > Анимация) или щелкнуть на одноименной кнопке панели инструментов. Также можно выбрать команду View Animation (Показать анимацию) контекстного меню, вызываемого щелчком правой кнопки мыши в окне Frames (Кадры).
Воспроизведение анимации выполняется в отдельном окне Play (Воспроизведение). Управлять процессом воспроизведения и задавать различную скорость можно с помощью кнопок панели VCR Controls (Управление воспроизведением). Вывод ее на экран осуществляется выбором команды View > VCR Controls (Вид > Управление воспроизведением). Чтобы остановить воспроизведение, следует повторно выбрать команду View > Animation (Вид > Анимация), или щелкнуть на одноименной кнопке панели инструментов, или закрыть окно Play (Воспроизведение) его управляющей кнопкой.
Просмотр анимации можно выполнить непосредственно в обозревателе, для чего выбирают команду View > Preview in Web Browser (Вид > Просмотр в обозревателе), которая вызывает диалоговое окно Preview in WWW Browser (Просмотр в обозревателе) (Рисунок 2.27), позволяющее определить ряд параметров. В поле Formats (Форматы) следует выбрать один из представленных форматов, которые поддерживает обозреватель для воспроизведения анимации. Если исходный файл анимации имеет другой формат, то Animation Shop преобразует анимацию в заданный формат. В поле Web Browser (Обозреватель) выбирают нужный для просмотра. Если это поле пустое, то щелчком на кнопке Edit Web Browser (Правка обозревателя) открывают окно File Locations (Размещение файлов), с помощью которого указывают расположение файла обозревателя. Таким способом можно добавить к списку еще два дополнительных обозревателя.

Шестое окно Animation Wizard

Рисунок 2.9. Шестое окно Animation Wizard

Предварительный просмотр анимации выполняется по команде View > Animation (Вид > Анимация) либо щелчком на одноименной кнопке панели инструментов. Проигрывание анимации осуществляется в специальном окне Play (Воспроизведение). Для завершения просмотра следует закрыть окно Play, либо снова щелкнуть на кнопке Animation (Анимация).
Другой Мастер (Banner Wizard) предназначен для создания текстовых баннеров, размещаемых на Web-страницах Интернета. Для его запуска требуется выполнить команду File > Banner Wizard (Файл > Мастер баннеров), или щелкнуть на одноименной кнопке стандартной панели инструментов, или воспользоваться клавиатурной комбинацией Shift+B.
Первое окно Мастера предназначено для выбора фона бан-нера, который может быть задан прозрачным (значение переключателя — Transparent background), цветным (значение Opaque background с указанием цвета в нижележащем прямоугольнике) или в виде рисунка (значение Use a background image с указанием файла, в котором хранится фоновое изображение).

Шестое окно Banner Wizard

Рисунок 2.15. Шестое окно Banner Wizard

Расположенная ниже кнопка Customize (Пользовательский) дает возможность изменить некоторые параметры выбранного перехода. Если результат, отображаемый в области Preview (Просмотр), удовлетворителен, то щелчок на кнопке Finish (Готово) завершает формирование баннера и показывает его кадры в окне Frames (Кадры). В противном случае с помощью кнопки Back (Назад) можно вернуться к любому шагу Мастера для внесения соответствующих изменений.

Создание анимации

Создание анимации

Чтобы создать анимацию из отдельных изображений (лучше одинакового размера), следует открыть файл первого из них, а затем командой Animation Hnsert Frame > From file (Анимация > Вставка кадров > Из файла) добавить следующие как отдельные кадры. При выборе файлов в окне Insert Frames From files (Вставка кадров из файлов) можно задать не только их порядок, но и время демонстрации, а также в какое место анимации они должны быть вставлены.
Переключатели внизу окна задают месторасположение изображения в кадре (Location within frame) и способ заполнения оставшегося на кадре места (Fill rest of frame with). Расположение может быть в левом верхнем углу или по центру кадра, а заполнение либо цветом холста, либо частью изображения предыдущего кадра.

Третье окно Animation Wizard

Рисунок 2.6. Третье окно Animation Wizard

В третьем окне Мастера определяется расположение изображения в кадре, если оно имеет размер, отличный от заданного на первом шаге. Значение Upper left corner of the frame (В левом верхнем углу) указывает на размещение в левом верхнем углу независимо от соотношения сторон вставляемого изображения. Значение Centered in the frame (По центру) размещает их по центру кадра, причем если изображение меньше, чем размер кадра, то следует также указать, что будет воспроизводиться вокруг него. Второй переключатель этого окна предлагает на выбор параметры: With the canvas color (С цветом холста) — для показа в остальном пространстве заданного цвета холста либо With the preceding frame's contents (С содержимым предыдущего кадра) — для сохранения части изображения предыдущего кадра. Если же предполагается изменить размер вставляемого изображения в соответствии с размерами кадра, то следует установить флажок Scale frames to fit (Масштабировать по размеру).

Третье окно Banner Wizard

Рисунок 2.12. Третье окно Banner Wizard

Третье окно Optimization Wizard

Рисунок 2.24. Третье окно Optimization Wizard

Установка параметров размера кадра при обрезке

Рисунок 2.2. Установка параметров размера кадра при обрезке

В открывшемся окне Crop Options (Параметры обрезки) определяют область обрезки, задавая в полях Left (Слева), Right (справа), Тор (Вверху) и Bottom (Внизу) нужные значения. Кнопка этого окна Surround the opaque area (Вокруг непрозрачной области) автоматически обрезает кадр по размеру, охватывающему все непрозрачные пикселы анимации. Другая кнопка, Surround the animated area (Вокруг области анимации), позволяет создать прямоугольник обрезки, охватывающий все изменяющиеся пикселы во всех кадрах. В обоих cлучаях полях ввода области Current cropping rectangle (Текущий прямоугольник обрезки) появятся новые значения, соответствующие заданному режиму (Рисунок 2.2). Вызвать окно Crop Options (Параметры обрезки) можно также, выполнив двойной щелчок на кнопке Crop (Обрезка) палитры инструментов.
Удалить нарисованный контур до выполнения обрезки можно щелчком на кнопке Clear (Очистить) панели атрибутов. Чтобы выполнить обрезку по размерам заданного прямоугольника, следует щелкнуть на кнопке Crop (Обрезать), расположенной на панели атрибутов. Это приведет к изменению размеров всех кадров анимации. Сразу после выполнения обрезки ее можно отменить, выбрав команду Edit > Undo (Правка > Отменить) либо одноименную кнопку панели инструментов.
Инструмент Mover (Перемещение) позволяет перемещать содержимое внутри кадра. При этом та часть изображения, которая выходит за границы кадра, обрезается. Для строго горизонтального перемещения следует при этом удерживать нажатой клавишу Ctrl, а для вертикального — Shift.
Инструмент Dropper (Пипетка) позволяет задавать активные цвета на палитре. При его наведении на образец палитры цветов или на элемент изображения в области палитры Current Color (Текущий цвет) отображаются числовые параметры данного цвета (значения красного, зеленого, синего и прозрачности). Чтобы сделать цвет основным, на нем щелкают левой кнопкой мыши. Щелчок правой кнопкой мыши выберет этот цвет как фоновый.
Выбранные цвета будут показаны в области палитры Active Colors (Активные цвета).
Активизировать инструмент Dropper (Пипетка) можно также, удерживая нажатой клавишу Ctrl во время работы с такими инструментами, как Registration Mark (Регистрационная метка), Paintbrush (Кисть), Eraser (Ластик), Flood Fill (Заливка), Text (Текст), Line (Линия) и Shape (Фигура). Инструмент Paintbrush (Кисть) позволяет рисовать на изображении, придавая курсору мыши вид кисти. На панели атрибутов можно задать для этого инструмента следующие параметры: масштаб с помощью раскрывающегося списка Zoom (Масштаб), размер кисти в поле Width (Ширина), определяющий ее диаметр (величина от 1 до 200). Рисование основным цветом выполняется при нажатой левой кнопке мыши, а фоновым — правой кнопке. При необходимости создания отрезков прямых линий следует щелкнуть в точке начала отрезка (левой кнопкой для выбора основного цвета или правой для выбора фонового), затем, удерживая клавишу Shift, перевести курсор в точку конца отрезка и снова щелкнуть соответствующей кнопкой мыши.
Инструмент Eraser (Ластик) удаляет пикселы из кадра, заменяя их цветом, ранее выбранным для холста. Используя этот инструмент, на панели стилей можно задать масштаб с помощью раскрывающегося списка Zoom (Масштаб) и размер ластика величиной от 1 до 200 в поле Width (Ширина). Стирание отрезков прямых линий может быть выполнено теми же приемами, что и их создание с помощью инструмента Paintbrush (Кисть).
Инструмент Flood Fill (Заливка) заполняет цветом области в кадре. Для него на панели атрибутов устанавливается тип пикселов заливки с помощью раскрывающегося списка Match Mode (Режим соответствия) (при выборе RGB value (значение RGB), Hue value (значение оттенка) или Brightness value (значение яркости) заменяют только пикселы соответствующего типа; значение None (Нет) заливает цветом все пикселы кадра). В поле Tolerance (Допуск) задается расстояние от курсора, в пределах которого пикселы изображения изменяют свой цвет. Возможный диапазон значений от 0 (только один пиксел изменяется, соответствующий перекрестию курсора) до 200 (изменяются все пикселы одноцветной области). Установка флажка Canvas Color (Цвет холста) позволяет выполнить заливку не основным или фоновым цветом, а цветом холста, заданным для всей анимации (если указан прозрачный цвет, то пикселы заменяются прозрачными).
Инструмент Text (Текст) позволяет добавить к отдельным кадрам текст без его анимации. В отличие от других инструментов параметры для этого инструмента задаются не на панели атрибутов, а в специальном диалоговом окне Add Text (Добавление текста). После набора текста и выбора всех требуемых параметров окно закрывается щелчком на кнопке ОК и курсор с привязанным к нему текстом появляется в1 кадре. Позиционируя курсор, щелчком мыши переносят текст в кадр.
Инструмент Line (Линия) позволяет рисовать как прямые линии, так и кривые Безье (Bezier Curves). Для создания прямых линий на панели стилей в раскрывающемся списке Line Туре (Тип линии) выбирают значение Normal (Обычная), а в поле Width (Ширина) задают величину от 1 до 100, определяющую толщину линии. Помещая курсор в начало линии, нажимают кнопку мыши и перемещают его в точку окончания линии, где кнопку отпускают. Если при рисовании удерживать нажатой клавишу Shift, то линия будет иметь фиксированный наклон с шагом 45°. Для сглаживания изображения наклонной прямой устанавливают флажок Antialias (Сглаживание).
Для рисования кривых линий на панели стилей в раскрывающемся списке Line Type (Тип линии) выбирают значение Bezier (Кривая Безье) и устанавливают флажок Antialias (Сглаживание) для сглаживания изображения кривой. Чтобы создать кривую, курсор устанавливают в точку ее начала и щелкают кнопкой мыши, затем его перемещают в конечную точку и производят второй щелчок. Затем вне кривой нажимают кнопку мыши и, перемещая курсор, меняют форму линии. Повторяя это действие еще раз, можно добиться получения кривой нужной формы. Например, для получения S-образной кривой изменять форму линии следует поочередно с разных сторон.
Инструмент Shape (Фигура) используется для создания прямоугольников, квадратов, эллипсов и окружностей. Нужный тип изображения выбирается на панели стилей из раскрывающегося списка Shape (Фигура). В раскрывающемся списке Style (Стиль) задают значение Filled (Заливка) для фигуры, залитой цветом, либо значение Outlined (Контур) для изображения контура фигуры. В последнем случае в поле Outline Width (Толщина контура) определяют толщину линии обводки (от 1 до 100). Для сглаживания неровностей устанавливают флажок Antialias (Сглаживание). Рисование прямоугольника и квадрата выполняется от одного из углов к противоположному. Рисование круга и эллипса выполняется от центра фигуры. Цвет обводки или заливки определяется кнопкой мыши, с помощью которой выполнялся рисунок.

Установка параметров

Установка параметров

Начальные установки Animation Shop определяют режим отображения анимации и работу с ней. Чтобы изменить параметры по умолчанию И задать свои установки, следует выбрать команду File > Preferences > General Program Preferences (Файл > Установки > Общие установки программы), которая открывает диалоговое окно Preferences (Установки) с семью вкладками.
На первой вкладке Frame View (Вид кадра) задаются цвета, с помощью которых в окне Frames (Кадры) отмечаются: Все кадры фильма (Filmstrip border), Выделенные кадры (Selected frames), Текущий кадр (Current selection). Для изменения цвета следует щелкнуть на соответствующем цветном прямоугольнике и в окне Color (Цвет) задать новый цвет. Для быстрого выбора из недавно использовавшихся цветов щелчок выполняется правой кнопкой мыши. Установка флажка Display frame numbers, delay time underneath frames (Отображать его номер кадра и продолжительность) выводит в окне Frames (Кадры) эти значения под каждым кадром анимации.
На второй вкладке Browser (Обозреватель) в области Thumbnail size (Размер миниатюры) флажок Symmetric (Симметричный) задает одинаковую ширину и высоту для уменьшенных изображений кадров. При снятом флажке можно задать различные размеры в полях Width (Ширина) и Height (Высота). В области Appearance (Выделение) переключатель задает, какой цвет будет использоваться обозревателем для выделения. При выборе значения Use Windows colors (Использовать цвета Windows) будет использован цвет, установленный в операционной системе, для значения Use classic colors (Использовать классические цвета) можно выбрать другой цвет. Установка флажка Display flat style thumbnails (Плоская миниатюра) показывает в окне обозревателя плоскую рамку для каждого рисунка, при снятом флажке эта рамка имеет объемный вид.

Вкладка Browser окна Preferences

Рисунок 2.26. Вкладка Browser окна Preferences

Флажок Save Browser files to disk (Сохранить на диске файл обозревателя) позволяет создать в просматриваемой папке файл P5PBRW5E. JBF, в котором Animation Shop сохраняет информацию об изображениях, что позволяет в дальнейшем читать только этот файл, не просматривая все файлы изображений этой папки. Другой флажок, Automatically update the thumbnails (Автоматически обновлять миниатюры), организует автоматическое исправление указанного файла при каждом последующем просмотре папки, контролируя изменения, дополнения и удаления, выполненные с момента последнего просмотра.
На вкладке Transparency (Прозрачность) задаются следующие параметры: в раскрывающемся списке Grid Size (Размер сетки) выбирают одно из предлагаемых значений величины сетки, отображающей прозрачный цвет. В области Grid Colors (Цвет сетки) из раскрывающегося списка Scheme (Схема) выбирают цветовую схему либо с помощью цветных прямоугольников задают свою для создания раскраски сетки.
На вкладке Undo (Отмена) активизируют работу команд Undo (Отмена) и Redo (Повтор), устанавливая флажок Enable the undo/redo system (Включить систему отмены и повтора). Это дает доступ к двум другим флажкам. Первый (Limit undo/reda memory usage...) задает ограничение на используемую память и требует указать в поле ввода ее величину в мегабайтах. Если эта величина превышает объем установленной на компьютере физической памяти RAM, то дополнительно будет использоваться виртуальная память. Второй флажок (Limit undo/redo to...) определяет количество шагов для отмены или повтора действий (можно задать величину от 1 до 99).
Вкладка Layered Files (Файлы со слоями) определяет режим работы с файлами изображений, поддерживающими слои. Установка флажка Export frames to Paint Shop Pro as layered images (Экспортировать кадры в Paint Shop Pro как многослойное изображение) приводит к созданию в графическом редакторе Paint Shop Pro файла, в котором каждый кадр представлен как отдельный слой. Когда флажок снят, каждый кадр экспортируется как отдельное изображение.
Когда файл со слоями открывают в Animation Shop, значение переключателя When opening a file... (При открытии файла) определит способ работы со слоями:

значение Keep layers as separate frames (Сохранить слои как отдельные кадры) создает из каждого слоя файла отдельный кадр анимации (это значение установлено по умолчанию);

значение Merge layers into a single frame (Слияние слоев в один кадр) объединит изображения всех слоев в одном кадре;

значение Each frame contains all previous layers (Каждый кадр сохраняет изображения предыдущих слоев) позволяет создать столько кадров, сколько в изображении слоев, причем в каждом последующем кадре будут присутствовать изображения всех предыдущих слоев;

значение Each frame shows first and current layers (Каждый кадр объединяет первый и текущий слои) создает кадры для каждого слоя, в которых также будет присутствовать изображение первого слоя.

Установка флажка Preserve overall layer transparency (Сохранять прозрачность слоя) позволяет сохранить прозрачность для каждого слоя. Если флажок снят, то прозрачный слой заменяется соответствующим цветом.
Вкладка Color Palette (Цветовая палитра) по умолчанию задает использование встроенного в Animation Shop диалогового окна выбора цветов (Рисунок 2.3) либо при установке флажка Use standard Windows color picker (Использовать стандартный указатель цвета) — стандартного окна цветов Windows. Переключатель под ним определяет десятичное или шестнадцатеричное определение координат цветов на текущей палитре.
Последняя вкладка Miscellaneous (Разное) содержит следующие флажки:

Do not ask to save changes on Window Close All (He запрашивать сохранение изменений по команде Close All) — позволяет отключить предупреждение о необходимости сохранения изменений при выходе из программы;

Do not ask to empty the clipboard on Exit (He запрашивать очистку буфера обмена по команде Exit) — позволяет отключить предупреждение о содержимом буфера обмена при выходе из программы;

Show splash screen when application starts (Отображать заставку при запуске) — позволяет демонстрировать стартовый экран при запуске программы;

Display menu icons (Отображать значки) — позволяет вместе с командами меню отображать значки кнопок инструментов;

Show warning when reading PSD files containing adjustment layers (Предупреждать при открытии файла Photoshop, содержащего корректирующие слои) — позволяет включить предупреждение об открытии файла Photoshop указанного типа;

Display frame count in window under animation (Показывать» номера кадров при воспроизведении) — показывает номера кадров в окне Play View при демонстрации анимации.

Второе окно Animation Wizard

Рисунок 2.5. Второе окно Animation Wizard

В первом окне Мастера задается размер кадров анимации. При выборе значения переключателя Same size as the first image frame (Размер по первому кадру) размер кадров определяется по размеру первого изображения. Значение As defined here (Как задано) позволяет указать точный размер в полях ввода Width (Ширина) и Height (Высота), измеряемый в пикселах.
Во втором окне определяется вид фона. При значении Transparent (Прозрачный) анимация может быть непосредственно размещена на фоне Web-страницы. Выбор значения Opaque (Непрозрачный) требует задания цвета фона, который будет использован во всех кадрах анимации. Щелчок мышью на цветном прямоугольнике рядом с переключателем вызывает диалоговое окно выбора цвета (Рисунок 2.3).

Второе окно Banner Wizard

Рисунок 2.11. Второе окно Banner Wizard

Во втором окне Мастера задается размер баннера. Первое значение Use a standard banner size (Использовать стандартный размер) позволяет с помощью раскрывающегося списка выбрать один из шести стандартных размеров, применяемых в Интернете. Если для фона был указан файл с изображением, то размер баннера можно задать в соответствии с размером фона. Наконец, значение As defined here (Как задано) позволяет ввести любые требуемые значения в поля ввода Width (Ширина) и Height (Высота).

Второе окно Optimization Wizard

Рисунок 2.22. Второе окно Optimization Wizard

Второе окно Animation Quality Versus Output Size (Качество против размера) позволяет задать параметры оптимизации. Перемещая расположенный слева ползунок в одно из четырех положений, справа можно видеть соответствующие этому положению характеристики качества анимации. Чтобы Мастер не запускался автоматически при каждом сохранении анимации, а использовал выбранные однажды в данном окне параметры оптимизации, следует установить флажок Use these settings when saving unoptimized files (Применять параметры при сохранении неоптимизированного файла).

Задать собственный набор параметров можно, щелкнув на кнопке Customize (Пользовательский), которая открывает диалоговое окно Customize Optimization Settings (Пользовательские параметры оптимизации). На первой вкладке Colors (Цвета) этого окна в раскрывающемся списке Number of Colors (Число цветов) выбирают количество цветов анимации, причем один из них всегда зарезервирован для поддержки прозрачности. Поэтому предлагаются значения 3, 7, 15, 31, 63, 127 или 255 цветов. Справа от списка указано число цветов анимации до оптимизации.

Ввод новых кадров из файлов изображений

Рисунок 2.16. Ввод новых кадров из файлов изображений

Если рисунки статические, то можно задать достаточно большое время их показа, чтобы добиться эффекта слайд-шоу. Чтобы изменить время, заданное по умолчанию для уже вставленных кадров, следует выделить один из них и выбрать команду Animation > Frame Properties (Анимация > Свойства кадра), в одноименном окне вводят нужную величину времени, а также можно добавить комментарий к кадру. Чтобы получить более связные переходы между кадрами, Animation Shop предлагает целый набор возможностей автоматического создания промежуточных кадров. Так, команда Effects > Insert Image Transition (Эффекты > Вставка перехода) или аналогичная команда контекстного меню кадра позволяют вставить нужное число кадров между двумя соседними кадрами анимации. По этой команде открывается одноименное окно (Рисунок 2.17), в котором выбирается один из предлагаемых вариантов перехода. Кнопка Customize (Пользовательский) открывает дополнительное окно для задания возможных значений параметров выбранного перехода. Регулируя положение ползунков Transition Length (Длина перехода) и Frame per seconds (Кадров в секунду), можно определить число вставляемых кадров. Области Start with (Начать) и End with (Закончить) позволяют выбрать источником перехода не только кадр, но и произвольный цветной фон.

Задание параметров эффекта для кадров

Рисунок 2.18. Задание параметров эффекта для кадров

Если число кадров анимации не следует увеличивать, то можно применить эффект к существующим кадрам. Выделяя один или несколько кадров, выполняют команду Effects > Apply Image Effect (Эффекты > Применить эффект), открывающую одноименное диалоговое окно (Рисунок 2.19), в котором эффект можно увязать с заданным временем демонстрации кадра либо с номером кадра в последовательности.

Задание параметров перехода между кадрами

Рисунок 2.17. Задание параметров перехода между кадрами

Если установить флажок Show Preview (С предварительным просмотром), то после вычисления новых кадров анимации в области Transition (Переход) можно увидеть результат работы выбранного перехода. При неудовлетворительном качестве можно поменять какие-либо параметры, что потребует нового расчета и покажет новый вариант перехода в окне предварительного просмотра. Щелчок на кнопке ОК вставит заданное число кадров в анимацию, осуществляющих переход.
Остальные команды меню Effects (Эффекты) предлагают использование набора эффектов для изображений и текстов ак в отдельных кадрах анимации, так и с созданием дополнительных последовательностей кадров, реализующих выбранный эффект.
Выделяя кадр, который будет начальным в последовательности, по команде Effects > Insert Image Effect (Эффекты > Вставка эффекта) открывают одноименное окно для выбора типа и параметров эффекта (Рисунок 2.18). Аналогично окну Insert Image Transition (Вставка перехода) в нем задаются значения Transition Length (Длина перехода) и Frame per seconds (Кадров в секунду), уточняются параметры эффекта в окне Customize (Пользовательский), вызываемом одноименной кнопкой, и выполняется предварительный просмотр эффекта. Установка флажка Run effect in reverse direction (Выполнить эффект в обратном порядке) позволяет сделать выделенный кадр завершающим кадром последовательности с примененным эффектом. После расчета всех вновь вставляемых кадров они помещаются в окно Frames (Кадры) щелчком на кнопке ОК.

Анимация для Интернет

Adobe ImageReady

Adobe ImageReady

От разработки инструментов создания анимации не осталась в стороне и фирма Adobe, включившая в Photoshop 6 программу ImageReady. С помощью этой программы проще всего реализуется анимация из заранее подготовленных файлов рисунков, содержащих фазы движения, однако в ней предусмотрена и возможность автоматического расчета промежуточных кадров.
Предварительно созданный в Adobe Photoshop 6 (http:// www.adobe.соm/products/photoshop/overview12.html) файл рисунка, содержащий в изображении несколько слоев, позволяет быстро получить анимацию, использующую эти слои. Для этого в Photoshop предназначена специальная кнопка Jump to (Перейти) палитры инструментов, которая запускает приложение ImageReady и загружает в него файл, открытый в данный момент в растровом редакторе Photoshop.
Анимации ImageReady сохраняются в формате GIF и могут воспроизводиться заданное число раз, а также повторяться в цикле. Однако они не допускают присоединения аудиофайлов для звукового сопровождения.
Слои обеспечивают также удобный способ композиционного построения изображения из различных графических и текстовых элементов, позволяя выполнять изменения каждого из них без воздействия на остальные элементы. Разделение элементов изображения по слоям также дает возможность применять к ним различные фильтры, получая самые разнообразные эффекты. Концепция слоев важна не только для создания изображений в Photoshop — с появлением каскадных таблиц стилей (CSS — Cascading Style Sheets) Web-дизайнеры могут разрабатывать современные Web-страницы, аналогичным образом располагая по слоям входящие в них текст и графику.
Подробнее познакомиться с инструментами Adobe Photoshop и работой над изображениями можно в книгах издательства «Питер»: Стразницкас М. «Photoshop 5.5 для подготовки Web-графики. Учебный курс» и Панкратова Т. «Photoshop 6. Учебный курс».

Анимированная страница в окне ImageReady

Рисунок 3.22. Анимированная страница в окне ImageReady

Хотя программа ImageReady может быть

Интерфейс Adobe ImageReady 3.0

Хотя программа ImageReady может быть открыта независимо от Photoshop, ее окно включает стандартный набор элементов, присущий этому растровому редактору.

Меню палитры Rollover

Рисунок 3.16. Меню палитры Rollover

Чтобы скопировать состояние интерактивного объекта (rollover), следует выделить требуемое состояние и выполнить команду Copy Rollover State (Копировать состояние) из меню палитры Rollover. Затем выделяют состояние в текущем или другом интерактивном объекте, которое следует заменить, и выполняют команду Paste Rollover State (Вставить состояние) из меню палитры Rollover.
Возможно удаление отдельных состояний интерактивных объектов (rollover) либо всех состояний сразу. Чтобы удалить отдельное состояние, его следует выделить, а затем щелкнуть на кнопке Trash (Корзина) палитры Rollover либо выбрать команду Delete State (Удалить состояние) из меню палитры Rollover. Чтобы удалить все состояния интерактивного объекта (rollover), выполняют команду Delete Rollover (Удалить интерактивный объект) из меню палитры Rollover.
Предварительный просмотр интерактивных объектов возможен непосредственно в окне документа ImageReady при переключении в режим rollover preview (например, с помощью кнопки Play (Воспроизвести) палитры Rollover). Этот просмотр выполняется с помощью обозревателя Internet Explorer 5.0 для Windows. Просмотр с помощью другого обозревателя выполняется щелчком на кнопке Preview in Default Browser (Просмотр в обозревателе по умолчанию) панели инструментов.
Для выхода из режима предварительного просмотра щелкают на кнопке Play (Воспроизвести) еще раз либо выбирают любой другой инструмент палитры инструментов.
Следует отметить, что в ImageReady инструмент Туре (Текст) позволяет вводить текст прямо на изображение или графический объект в окне документа, а не в отдельное окно, как при использовании аналогичного инструмента Photoshop. Дальнейшее редактирование атрибутов текста возможно при его выделении и выборе команд контекстного меню, выполняющих их изменение.

Набор фреймов в окне Adobe ImageReady

Рисунок 3.20. Набор фреймов в окне Adobe ImageReady

Упражнение 3.1. Создание покадровой анимации из группы файлов

1. Запускаем ImageReady. По команде File > Import > Folder as Frames (Файл > Импорт > Папки как кадры) импортируем набор файлов с последовательными фазами движения, находящийся в одной из папок на жестком диске.

2. Для просмотра анимации выполняем щелчок на кнопке Play (Воспроизвести), расположенной в нижней строке палитры Animation (Анимация).

3. Если требуется изменение времени задержки между кадрами, то, выполняя щелчок мышью на величине времени под соответствующим кадром, задаем нужный интервал.

4. Для просмотра анимации в обозревателе выполняем команду File > Preview in (Файл > Просмотр) и из открывшегося списка выбираем нужный обозреватель, например Netscape Navigator. Рекомендуется оценить изображение во всех доступных обозревателях.

5. Сохраняем анимацию по команде File > Save Optimized (Файл > Сохранить оптимизированный), при этом используются параметры оптимизации по умолчанию. Оценить результат оптимизации можно с помощью вида 2-Up, который показывает исходное и оптимизированное изображения, а также с помощью вида 4-Up, в котором представлены также два изображения другого качества с измененными параметрами оптимизации.

6. Для изменения параметров, применяемых при оптимизации, выбираем команду File > Preferences > Optimization (Файл > Установки > Оптимизация). В секции Default Optimization (Оптимизация по умолчанию) выбираем один из вариантов, представленных в списке: Use the Previously Used Settings (Ранее использованные); Auto Select GIF/JPEG (Автовыбор); Use Named Setting (Использовать поименованные). В секциях 2-Up Settings и 4-Up Settings задаем параметры для соответствующих представлений изображения, причем первое из них должно быть оригинальным изображением, а остальные выбираются по желанию пользователя. Щелчком на кнопке ОК завершаем определение параметров.

Упражнение 3.2. Создание анимации с расчетом промежуточных кадров

1. Запускаем ImageReady. По команде File > New (Файл > Новый) создаем новое изображение размером 300 х 300 пикселов.

2. С помощью инструмента Rectangle (Прямоугольник) нарисуем в верхнем левом углу квадрат и заполним его цветом. При этом автоматически будет создан второй слой.

3. Щелчком на кнопке Duplicates Current Frame (Дублировать текущий кадр) создаем второй кадр с тем же изображением.

4. С помощью инструмента Move (Перемещение) передвинем квадрат в правый нижний угол, что будет отображено на выделенном втором кадре палитры Animation (Анимация).

5. Открываем меню этой палитры и выбираем команду Tween (Промежуточный). В одноименном окне в поле Frames To Add (Число добавляемых кадров) задаем количество промежуточных кадров — 5, снимаем флажок параметра Opacity (Непрозрачность) и щелкаем на кнопке ОК.

6. На палитре Animation (Анимация) будут представлены все семь кадров. При просмотре анимации убеждаемся, что траекторией перемещения квадрата является прямая линия.

7. Выделив последний кадр, добавьте на изображение текст прямо на квадрат в правом нижнем углу (он сольется с ним, так как будет того же цвета). Убедитесь, что автоматически создан новый слой с именем набранного текста.

8. Создадим дубль этого кадра и переместим выделенный текст в правый верхний угол, а квадрат — в левый верхний угол. Для перемещения последнего придется выделить слой, содержащий этот объект.

9. Снова выполняем команду Tween (Промежуточный), задав в окне раскрывающегося списка Tween with (Расчет) значение Previous Frame (Предыдущий кадр), в результате чего получаем 13 кадров анимации.

10. Выполняя команду File > Save (Файл > Сохранить), сохраняем файл в формате Photoshop для продолжения работы со слоями изображения. Если работа завершена и не требуется сохранения слоев, то по команде File > Save Optimized (Файл > Сохранить оптимизированный) сохраняем GIF-файл для Web-страницы.

Упражнение 3.3. Создание анимации из файла со слоями

1. Открываем в Photoshop файл, содержащий несколько слоев, и щелчком на кнопке Jump to (Перейти) или по команде File > Jump to >ImageReady (Файл >Перейти >ImageReady) переключаемся на программу ImageReady. При этом в нее загружается открытый в Photoshop файл.

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

3. Выполняем просмотр анимации с помощью кнопки Play (Воспроизвести).

4. Сохраняем файл как анимационный GIF с выбранными параметрами оптимизации с помощью команды File > Save Optimized (Файл > Сохранить оптимизированный).

Окно документа с раскрытым меню

Рисунок 3.3. Окно документа с раскрытым меню

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

Original/Optimized File Size (Размер файла оригинала/ оптимизированного изображения) — первое значение представляет размер оригинального файла. Если была выполнена оптимизация, то второе значение указывает размер оптимизированного файла и его формат в соответствии с параметрами Optimize palette;

Optimized Information (Результаты оптимизации) — показывает формат, размер, количество цветов и процент имитации (dither) оптимизированного изображения;

Image Dimensions (Размер изображения) — показывает размер в пикселах;

Watermark Strength (Водяной знак) — позволяет увидеть цифровую подпись рисунка Digimarc, если она имеется;

Undo/Redo Status (Число отмен/повторов) — показывает число возможных отмен (повторений) действий с изображением;

Original in Bytes (Размер оригинала в байтах) — показывает размер оригинального изображения в байтах;

Optimized in Bytes (Размер оптимизированного изображения в байтах) — показывает размер оптимизированного изображения в байтах;

Optimized Savings (Экономия при оптимизации) — показывает, на сколько уменьшается размер оптимизированного изображения;

Size/Download Time (Размер и время загрузки для скоростей 9.6 Kbps / 14.4 Kbps / 28.8 Kbps / 56.6 Kbps / 128 Kbps / 256 Kbps) — показывает размер оптимизированного файла и предполагаемое время загрузки при соответствующей скорости.

При достаточной ширине окна в его нижней строке становится доступным второе аналогичное раскрывающееся меню, содержащее такой же набор команд и позволяющее отобразить дополнительно одно из перечисленных свойств. Adobe ImageReady может открывать и импортировать файлы следующих форматов: PSD, AI, BMP, EPS, FlashPix, FLIC, FLI, GIF, JPEG, PCX, PDF, Pixar, PNG, MOV, Targa и TIFF. Файлы AI, PDF и EPS при этом растрируются (rasterized), то есть векторное описание изображения становится точечным.
Чтобы открыть файл, выполняют команду File > Open (Файл > Открыть), выбирают папку, в которой он находится, выделяют нужный файл и щелкают на кнопке Open (Открыть). Если файл открывался в предыдущем сеансе работы с программой, то его имя можно выбрать из списка подменю команды File > Recent Files (Файл > Недавно открывавшиеся). Каждый выделенный файл открывается в отдельном окне документа.
Если изображение, хранящееся в файле, нужно поместить в уже открытый документ, то выполняют команду File > Place (Файл > Поместить), которая позволяет указать точное место размещения изображения в кадре.

Окно File to Place для выбора файла изображения

Рисунок 3.4. Окно File to Place для выбора файла изображения

В первом диалоговом окне File to Place (Размещаемый файл) выбирают файл с изображением, а после щелчка на кнопке Open (Открыть) открывается следующее окно Place (Размещение), в котором из раскрывающихся списков Horizontal (По горизонтали) и Vertical (По вертикали) выбирают нужные значения, определяя точку, относительно которой измеряется сдвиг вставляемого изображения, и в соответствующих полях ввода задают значения этого сдвига в пикселах (можно задавать и отрицательные значения). Кнопка Choose (Выбор) позволяет вновь открыть окно выбора файла для его замены. Щелчок на кнопке ОК окна Place (Размещение) вставляет изображение в указанную позицию. При размещении векторного изображения, созданного в Adobe Illustrator, открывается также окно Rasterize options (Параметры растрирования), в котором определяются следующие параметры: размеры изображения Width (Ширина) и Height (Высота) в пикселах, а также устанавливаются флажки Constrain Proportions (Сохранить пропорции) для предотвращения искажения изображения при масштабировании и Antialias (Сглаживание) для получения гладких контуров. Щелчок на кнопке О К вставляет изображение в окно документа на новый слой.
При импорте или сканировании изображения оно помещается на первый слой документа. Импорт файла выполняется по команде File > Import (Файл > Импорт) с выбором соответствующей команды подменю.

Окно команды Optimize Animation

Рисунок 3.14. Окно команды Optimize Animation

Созданную анимацию можно сохранить в формате GIF либо как фильм QuickTime. Другие форматы файлов, такие как JPEG или PNG, сохранят только первый кадр изображения, не позволяя воспроизвести всю анимацию. Существует несколько способов сохранить оптимизированную анимацию для использования на Web-странице. В ImageReady достаточно выбрать команду File > Save Optimized (Файл > Сохранить оптимизированный), чтобы сохранить анимацию с установками, выбранными при предыдущем ее сохранении. Если это не первое сохранение, то диалоговое окно Save (Сохранить) не появляется и название файла и его параметры остаются теми же, что были присвоены ранее.
Выбор команды File > Save Optimized As (Файл > Сохранить как оптимизированный) позволяет изменить имя файла и выбрать другое место его хранения. Кроме того, возможен выбор измененного параметра Save As Type (Тип файла) из набора доступных значений:

HTML and Images (HTML и рисунки) — генерирует HTML-файл и сохраняет каждый изображение в виде отдельного файла;

Images Only (Только рисунки) — сохраняет только изображение в отдельном файле;

HTML Only (Только HTML) — сохраняет только HTML-файл без файлов изображений.

Кроме того, ImageReady позволяет создать HTML-файл по команде Copy HTML (Копировать HTML), которая копирует код HTML в буфер обмена, а затем он может быть вставлен на Web-страницу в любом HTML-редакторе. В случае изменений исходного изображения для обновления HTML-файла выполняют команду Update HTML (Обновить HTML) с указанием имени обновляемого файла.
Чтобы сохранить анимацию в формате QuickTime, следует выбрать команду File > Export Original (Файл > Экспорт начального) и из раскрывающегося списка выбрать значение QuickTime Movie (оно будет доступно, если на компьютере установлена программа QuickTime). Указав имя файла и его место расположения, щелчком на кнопке Save (Сохранить) создаем файл выбранного типа.

Назад

Содержание

Вперед

Окно Place для указания положения размещаемого изображения

Рисунок 3.5. Окно Place для указания положения размещаемого изображения

Это не только строки заголовка

Рисунок 3.1. Окно программы Adobe ImageReady 3.0

Это не только строки заголовка и меню, а также целый комплект инструментов и палитр для создания и редактирования различных объектов, в том числе слоев и масок. К командам меню могут быть добавлены новые команды и фильтры, разработанные третьими фирмами и представленные в виде дополнительных (plug-in) модулей. Палитра инструментов (Tools) позволяет создавать, редактировать и просматривать изображение, а также выделять его области. Некоторые инструменты рисования имеют ассоциированные палитры, например такие, как Brushes (Кисти) и Options (Параметры), позволяющие выбирать для них различные значения управляющих параметров.

Окно задания параметров нового документа

Рисунок 3.2. Окно задания параметров нового документа

Находящиеся на экране палитры позволяют управлять изображением и изменять его. Они могут быть отображены или скрыты во время работы, но по умолчанию располагаются группой в правой части окна приложения. Чтобы вывести на экран отсутствующую палитру, следует выполнить соответствующую ей команду меню Window > Show (Окно > Показать). Она открывает окно одной из групп палитр, отображая на первом плане вкладку с выбранной палитрой. При желании можно объединить несколько палитр в одну, перетащив соответствующую вкладку в окно другой палитры. Если палитра имеет ассоциированное меню команд, то для его открытия служит специальная круглая кнопка со стрелкой внутри. Скрыть группу палитр можно щелчком на кнопке закрытия в правом верхнем углу ее строки заголовка. Эта строка используется также для перемещения палитры по экрану.
По команде File > New (Файл > Новый) открывается окно New Document (Новый документ) для выбора параметров создаваемой в ImageReady анимации. В этом окне задают размер кадра будущей анимации в пикселах, ее название, а также выбирают тип первого слоя, служащего фоном: White (белый), Background color (цветной фон), Transparent (прозрачный). Щелчок на кнопке ОК открывает окно документа с заданными свойствами.
Окно документа ImageReady позволяет не только редактировать изображение текущего кадра анимации, но и выполнять ее просмотр. Благодаря наличию четырех вкладок оно позволяет легко переключаться между оригинальным изображением и его оптимизированной версией. Кроме того, оно имеет представление 2-Up, позволяющее расположить эти версии рядом, и представление 4-Up, показывающее одновременно три варианта оптимизации изображения для размещения на Web-странице с заданием для них индивидуальных параметров.

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

Рисунок 3.6. Окно задания параметров растрирования

Команда этого подменю Folder as Frames (Папки как кадры) позволяет импортировать все файлы изображений, хранящиеся в выбранной папке как последовательность кадров анимации. В этом случае все файлы должны иметь названия, позволяющие их расположить в нужном порядке. После импорта файлов из папки они не только создают последовательность кадров анимации, но и представлены отдельными слоями на палитре Layers (Слои).
Создание дополнительных слоев позволяет организовать объекты по уровням. На каждом слое можно помещать или рисовать новые объекты, редактировать или изменять расположение существующих объектов, не затрагивая при этом остальные слои.
Слои обеспечивают удобный способ композиционного построения изображения из различных графических и текстовых элементов, позволяя выполнять в них изменения без воздействия на остальные элементы. Разделение элементов изображения по слоям также дает возможность применять к ним фильтры, обеспечивая различное их взаимодействие. Специальные свойства, такие как слои-маски, назначаемые для отдельных слоев, позволяют экспериментировать с изображением и добиваться разнообразных эффектов.
Многослойное изображение, созданное в Photoshop и открытое в ImageReady, сохраняет весь набор слоев, в том числе корректирующие слои, а также эффекты, ранее примененные к слоям. В ImageReady можно редактировать все слои, кроме корректирующих. Однако ImageReady не поддерживает слой холста Photoshop. Этот слой преобразуется в обычный слой, после того как файл, созданный в Photoshop, открывается в ImageReady.

Палитра Анимация

Палитра Анимация

Adobe ImageReady — это мощный и удобный инструмент для создания GIF-анимации. Каждая анимация представляется рядом кадров, для управления которыми предназначены как палитра Animation (Анимация), так и палитра Layers (Слои). Если палитра слоев известна из растрового редактора Photoshop, то палитра анимации появляется только в программе ImageReady. Палитра Animation (Анимация) — это окно, в котором отображается последовательность кадров с возможностью их копирования, перемещения, удаления и организации в любом порядке. Чтобы отобразить ее в окне ImageReady, выполняют команду Window > Show Animation (Окно > Показать анимацию). Для сокращения места, занимаемого палитрой на экране, можно уменьшить размер изображения отдельного кадра на ней, что позволяет видеть одновременно большее число последовательных кадров при ее фиксированной ширине.

Палитра Animation

Рисунок 3.8. Палитра Animation

На Рисунок 3.8 цифрами обозначены следующие элементы управления палитры Animation (Анимация):

1. Раскрывающееся меню задержки со значениями (Delay menu).

2. Раскрывающийся список задания циклического повторения (Looping options).

3. Кнопка перехода к началу анимации (Rewind).

4. Кнопка перехода к предыдущему кадру (Backward).

5. Кнопка остановки воспроизведения (Stop).

6. Кнопка воспроизведения (Play).

7. Кнопка перехода к следующему кадру (Forward).

8. Кнопка расчета промежуточных кадров (Tween).

9. Кнопка создания нового кадра (New Frame).

10. Кнопка удаления кадра (Trash).

Палитра Animation (Анимация) имеет собственное меню команд, вызываемое щелчком на кнопке со стрелкой, расположенной в ее правом верхнем углу. В меню представлены следующие команды:

New Frame (Новый кадр) — создает дубликат выделенного кадра (быстрее можно выполнить это действие, если щелкнуть на кнопке Duplicates Current Frame, расположенной в нижней части окна палитры);

Delete Frame (Удалить кадр) — удаляет выделенный кадр (это действие также быстрее выполняется с помощью щелчка на кнопке с рисунком корзины в нижней части окна палитры);

Delete Animation (Удалить анимацию) — удаляет все кадры анимации;

Copy Frame (Копировать кадр) — копирует выделенный кадр;

Paste Frame (Вставить кадр) — вставляет в заданную позицию последний скопированный кадр;

Select All Frames (Выбрать все кадры) — выделяет все кадры анимации;

Tween (Промежуточный) — вызывает диалоговое окно создания заданного количества промежуточных кадров между двумя соседними кадрами;

Reverse Frames (Обратить кадры) — меняет порядок двух или нескольких выделенных кадров в анимации;

Optimize Animation (Оптимизировать анимацию) — уменьшает размер файла анимации с помощью средств Bounding Box и Redundant Pixel elimination;

Match Layer Across Frames (Подогнать слой под кадры) — позволяет при редактировании слоя с помощью палитры Layers (Слои) вставить изменения во все кадры анимации;

Make Frames From Layers (Сделать кадры из слоев) — создает кадры из слоев рисунка Photoshop;

Flatten Frames Into Layers (Свести кадры в слои) — объединяет слои в кадрах анимации в один слой;

Add Layer To New Frames (Добавлять слой для нового кадра) — позволяет при создании нового кадра создавать также новый слой, видимый только в этом кадре, для вновь появляющегося элемента изображения;

New Layers Visible in All Frames (Новые слои отображаются во всех кадрах) — разрешает отобразить вновь созданный слой во всех кадрах анимации;

Palette Options (Параметры палитры) — задает один из трех размеров изображения кадров на палитре.

После открытия файла изображения он представлен на палитре Animation (Анимация) как первый кадр последовательности. Новый кадр последовательности создается как копия предыдущего, после чего в него можно вносить изменения, используя палитру Layers (Слои) и инструменты ImageReady.
Для изменения одного из кадров последовательности его следует выделить. Содержимое выделенного кадра отображается в окне документа. Можно одновременно выделить несколько кадров, расположенных как последовательно друг за другом, так и в произвольном порядке, редактируя их или применяя к ним команды как к группе. В окне документа при этом отображается только текущий кадр, который был выделен первым. На палитре Animation (Анимация) текущий кадр выделяется узкой рамкой, в то время как все выделенные кадры отмечены серым фоном вокруг их изображений.
Чтобы сделать кадр текущим, можно выполнить одно из следующих действий:

щелкнуть на изображении нужного кадра на палитре Animation (Анимация);

на палитрах Animation (Анимация) или Layers (Слои) щелкнуть на кнопке Forward (Вперед), чтобы сделать текущим следующий по порядку кадр;

на палитрах Animation (Анимация) или Layers (Слои) щелкнуть на кнопке Backward (Назад), чтобы сделать текущим предыдущий кадр;

на палитре Animation (Анимация) щелкнуть на кнопке Rewind (Перемотка), чтобы сделать текущим первый кадр анимации.

Чтобы выделить несколько кадров как группу, можно выполнить одно из следующих действий:

выделить первый кадр непрерывной группы и при нажатой клавише Shift щелкнуть по заключительному кадру выделяемой группы;

щелкать по кадрам, расположенным в произвольной последовательности, при нажатой клавише Ctrl;

выделить все кадры анимации можно командой Select All Frames (Выбрать все кадры) из раскрывающегося меню палитры Animation (Анимация).

Убрать кадр из выделенной группы можно, повторно щелкнув по нему при нажатой клавише Ctrl.

Выделенную группу кадров можно переместить, изменив ее место в последовательности, либо, если это непрерывная группа кадров, заменить их порядок обратным. При перемещении произвольно выделенных кадров в новой позиции они расположатся последовательно друг за другом.
Чтобы удалить выделенные кадры, можно выполнить одно из следующих действий:

воспользоваться командой Delete Frames (Удалить кадры) из меню палитры Animation (Анимация);

щелкнуть на кнопке Trash (Корзина) и подтвердить удаление щелчком на кнопке Yes (Да) диалогового окна;

перетащить мышью выделенные кадры на значок корзины палитры Animation (Анимация).

Команды копирования и вставки кадров меню палитры Animation (Анимация) позволяют получить копию кадра, которая может быть вставлена в любое место последовательности. При этом копируется не само изображение, а та конфигурация слоев и их атрибутов, которая присуща данному кадру. При вставке в кадры места назначения текущей анимации или другой анимации следует указать метод, который будет использован при вставке:

Replace Frames (Заменить кадры) — позволяет заменить выделенные кадры скопированными. При вставке кадров в то же самое изображение к нему не добавляются новые слои, а заменяются только их атрибуты теми, что были в скопированных кадрах. При вставке кадров в новое изображение к нему добавляются новые слои, и им присваивается свойство visible (видимый), старым же слоям присваивается свойство hidden (скрытый).

Paste Over Selection (Вставить в выделенные) — добавляет содержимое вставляемых кадров в качестве новых слоев изображения. При вставке кадров в то же самое изображение число слоев в нем удваивается, причем вставленные слои в кадрах назначения будут видимыми, а существовавшие ранее — скрыты. В остальных кадрах анимации вставленные слои будут скрыты.

Paste Before Selection (Вставить перед выделением) или Paste After Selection (Вставить после выделения) — добавляет скопированное число кадров перед или после выделения, причем новые слои добавляются к изображению и будут видимы только во вновь добавленных кадрах, в которых существовавшие до вставки слои изображения будут скрыты.

Флажок Link Added Layers (Связать добавляемые слои) позволяет связать вставляемые слои и затем одновременно изменять их позицию. По щелчку на кнопке ОК выполняется выбранный способ вставки.

Палитра Layers

Рисунок 3.7. Палитра Layers

На Рисунок 3.7 цифрами обозначены следующие элементы управления палитры Layers (Слои):

1. Выделенный слой, доступный для редактирования (Selected layer).

2. Указатель связанных слоев (Link/Unlink).

3. Указатель отображения слоя в кадре (Show/Hide).

4. Кнопка перехода к предыдущему кадру анимации (Previous).

5. Кнопка перехода к следующему кадру анимации (Next).

6. Кнопка применения к слою эффекта (Layer Effects).

7. Кнопка создания маски слоя (Layer Mask).

8. Кнопка создания группы слоев (Create New Set).

9. Кнопка создания нового слоя (New Layer).

10. Кнопка удаления слоя (Trash).

Со слоями можно работать как на вкладке оригинального вида окна документа, так и на вкладке оптимизированного вида. Однако в оригинальном представлении результат будет получен быстрее. Кроме того, в оптимизированном виде может применяться лишь ограниченный набор инструментов редактирования. При сохранении оптимизированного изображения все слои объединяются в единый слой изображения либо при создании анимированного GIF-файла объединяются в единый слой каждого отдельного кадра.
Палитра Layers (Слои) отображает все слои изображения по порядку, начиная с самого верхнего. Вместе с именем слоя на ней представлена миниатюра (thumbnail), которая показывает содержимое слоя и изменяется в процессе его редактирования. Палитра слоев позволяет создавать новые слои, скрывать или отображать существующие, копировать, удалять или объединять слои.
Выделенный слой является активным, и к нему можно применять редактирование. Выделить можно только один из слоев. При работе со слоем можно изменять его цвет и тон, прозрачность и позицию, применять к слою графические эффекты, например тень или сияние, и т. п.

Палитра Rollover с разными состояниями объекта

Рисунок 3.15. Палитра Rollover с разными состояниями объекта

Так как палитры Animation и Rollover совмещены в одном окне, то легко можно создать анимацию, связанную с определенным состоянием. Предварительно следует выделить это состояние, затем перейти на палитру Animation (Анимация) и щелкнуть на кнопке New Frame (Новый кадр). Дальнейшее создание анимации выполняется способами, описанными ранее.
Анимация в состоянии Normal воспроизводится при первоначальной загрузке страницы, а остальные варианты анимации — при возникновении соответствующего события.
При использовании команд палитры Layers (Слои) для создания эффектов состояния интерактивных объектов (rollover) изменения действуют только на текущее состояние.
Чтобы изменения в слое отразились во всех состояниях интерактивных объектов (rollover), на палитре Layers (Слои) выделяем слой, содержащий элемент, который должен отображаться во всех состояниях, а на палитре Rollover из меню палитры выбираем одну из следующих команд:

Match Layer Across States (Подогнать слой под состояния) — назначает атрибуты выделенного слоя в текущем состоянии ко всем состояниям интерактивного объекта;

Match Layer Across All Rollovers (Подогнать слой под все интерактивные объекты) — назначает атрибуты выделенного слоя в текущем состоянии ко всем состояниям во всех интерактивных объектах данного изображения.

При копировании состояния интерактивного объекта (rollover) и вставке его в одно из состояний текущего объекта или объекта другого изображения слои вставляемого состояния заменят слои места назначения. Возможно также взаимное копирование и вставка кадров с палитры Animation или состояний с палитры Rollover как новых состояний или кадров анимации. При этом используется специальный внутренний буфер обмена, доступный только для этих команд, что не удаляет информацию из основного буфера обмена программы ImageReady.

Практикум

Практикум

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

Просмотр анимации в обозревателе

Рисунок 3.12. Просмотр анимации в обозревателе

Независимо от заданного числа повторов анимации она в этом случае воспроизводится в бесконечном цикле. Чтобы завершить просмотр анимации, следует щелкнуть на кнопке Stop (Стоп). Вернуться к начальному кадру можно, щелкнув на кнопке Rewind (Перемотка).
Для просмотра анимации в окне обозревателя выполняют команду File > Preview In (Файл > Просмотр) с выбором названия обозревателя в открывшемся подменю либо щелкают на кнопке Preview in Default Browser (Просмотр в обозревателе по умолчанию) стандартной панели. Для остановки анимации используют кнопку панели инструментов обозревателя Stop (Стоп), а для повторного просмотра — кнопку Refresh (Обновить).
Управление параметрами оптимизации для различных представлений окна документа 2-Up и 4-Up выполняется с помощью установок окна, вызываемого по команде Edit > Preferences > Optimization (Правка > Установки > Оптимизация). В окне Preferences (Установки) в области Default Optimization (Оптимизация по умолчанию) можно выбрать одно из значений:

Previous Settings (Предыдущие) — автоматически применяются параметры последней оптимизации;

Auto Selected GIFor JPEG (Автовыбор) — автоматически выбирается оптимизация как GIF или JPEG по результатам анализа изображения;

Named Setting (Поименованные) — с выбором поименованного набора установок из раскрывающегося списка.

В областях 2-Up Settings или 4-Up Settings определяются параметры для четырех панелей (3-я и 4-я панели доступны только в виде 4-Up):

Original (Оригинал) — отображает на панели исходное изображение (значение доступно только для первой панели);

Current (Текущие) — отображает на выбранной панели изображение с текущими значениями параметров Optimize palette (значение доступно для всех панелей);

Auto (Автоматически) — отображает наименьшую по размеру версию, сгенерированную автоматически ImageReady на основе текущих параметров Optimize palette (значение доступно для второй, третьей и четвертой панелей);

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

Просмотр и сохранение анимации

Просмотр и сохранение анимации

Чтобы выполнить предварительный просмотр анимации в окне документа ImageReady, достаточно щелкнуть на кнопке Play (Воспроизвести) палитры Animation (Анимация).

Различия методов смены кадров

Рисунок 3.11. Различия методов смены кадров

На Рисунок 3.11 представлены результаты воспроизведения анимации с прозрачным фоном для параметров смены кадра Restore to Background (первый ряд) и Do Not Dispose (второй ряд).
При сохранении анимации в формате GIF первоначальные слои изображений теряются, так как в каждом кадре все слои сводятся к единому слою. Поэтому если требуется дальнейшее редактирование анимации, то ее целесообразно сохранить в формате Photoshop, содержащем все исходные слои изображений. При необходимости можно получить сведение слоев в кадрах этого файла, выполнив команду Flatten Frames into Layers (Свести кадры в слои). Эта команда позволяет создать отдельный сведенный слой для каждого из кадров и предохранить исходные слои, сделав их скрытыми, для последующего создания новых кадров.
Открывая в ImageReady файл Photoshop, содержащий несколько слоев, каждый слой можно сделать отдельным кадром анимации. Для этого в меню команд палитры Animation (Анимация) предусмотрена команда Make Frames From Layers (Создать кадры из слоев), разбирающая слои по кадрам, после чего файл можно сохранять как анимированный GIF с выбранными параметрами оптимизации.

Слои преобразованные в кадры в ImageReady

Рисунок 3.21. Слои, преобразованные в кадры в ImageReady

Упражнение 3.4. Создание анимированной Web-страницы

1. Запускаем ImageReady. По команде File > New (Файл > Новый) создаем изображение размером 640 х 400 пикселов, соответствующее по размеру выбранной фотографии.

2. Выполняем команду File > Place (Файл > Поместить) и в центр изображения вставляем фотографию сфинкса.

3. С помощью ползунка на палитре Layer (Слой) устанавливаем для слоя с фотографией непрозрачность (Opacity) 10%.

4. С помощью кнопки Duplicates current frame (Дублировать текущий кадр) палитры Animation (Анимация) создаем новый кадр, в котором устанавливаем для слоя с фотографией непрозрачность 100%.

5. По команде Tween (Промежуточный) меню палитры Animation (Анимация) открываем одноименное окно и в поле Frames To Add (Число добавляемых кадров) задаем количество промежуточных кадров — 2, устанавливаем флажок параметра Opacity (Непрозрачность) и щелкаем на кнопке ОК.

6. Создадим копию последнего кадра, на которую с помощью инструмента Туре (Текст) добавим к изображению текст приглашения. Автоматически будет создан новый слой с именем текста.

7. Выделив строку текста, с помощью контекстного меню задаем размер (50 рх) и гарнитуру (например, Brush Script). Дополнительное расстояние между буквами задается с помощью команды Tracking (Трекинг) с вводом значения 100). Снимем выделение, щелкнув вне текста.

8. Создаем новый кадр (уже шестой), на котором с помощью инструмента Move (Переместить) перемещаем текст в нижний левый угол изображения.

9. Удерживая клавишу Shift, щелкаем по предыдущему кадру на палитре Animation (Анимация). Будут выделены два кадра.

10. С помощью команды Tween (Промежуточный) вставляем три новых кадра с промежуточными положениями текста. Убедитесь при этом, что флажок параметра Opacity (Непрозрачность) снят.

11. Включаем число повторений анимации Once (Однократно) для однократного ее исполнения, после чего выполняем просмотр анимации с помощью кнопки Play (Воспроизведение).

12. Выполнив просмотр анимации в обозревателе по команде File > Preview in (Файл > Просмотр), можно уточнить скорость смены кадров и при необходимости установить требуемое время для каждого из них.

13. Выполняя команду File > Save (Файл > Сохранить) сохраняем файл в формате Photoshop для продолжения работы со слоями изображения. Если работа завершена и не требуется сохранения слоев, то по команде File > Save Optimized (Файл > Сохранить оптимизированный) сохраняем GIF-файл для Web-страницы.

Создание графических карт для Webстраниц

Создание графических карт для Web-страниц

Графическая карта (image map) позволяет связать отдельные области изображения гиперссылками, содержащими адреса URL, с другими Web-страницами, с аудиофайлами или видеофайлами или с другими изображениями. Кроме того, этим областям можно придать свойства интерактивных объектов (rollover), отображающих реакцию на действия пользователя мышью.
Создание графических карт возможно с помощью специального инструмента Image map tool (Графическая карта) или на основе слоев изображения. Области на графической карте определяются их прорисовкой на изображении с помощью мыши при выбранном инструменте Image map tool. (Графическая карта). Также можно определить области карты изображений, используя существующие слои, однако при этом будут доступны не все команды меню палитры Image Map. Чтобы получить доступ ко всем командам, следует преобразовать области, созданные на основе слоев, в области, подобные созданным инструментом Image map tool (Графическая карта). Следует отметить, что создание графических карт с использованием эффекта интерактивного объекта (rollover) предпочтительнее выполнять на базе слоев изображения. Просмотр созданных областей выполняется на палитре Image Map.

Создание интерактивных компонентов Webстраниц

Создание интерактивных компонентов Web-страниц

При создании Web-страниц с помощью программ Adobe Photoshop или Adobe ImageReady следует принимать во внимание конкретные возможности каждого из этих приложений:

Photoshop обеспечивает подготовку статических изображений для Web с возможностью их деления на отдельные области, связанные гиперссылками с целевыми объектами;

ImageReady кроме всех возможностей, предоставляемых Photoshop, включает также инструменты для создания динамических элементов, таких как анимации и интерактивные кнопки.

С помощью ImageReady можно создать целую анимированную Web-страницу, использующую комбинацию текстов, рисунков и графических объектов. При этом предварительно следует продумать очередность их появления и перемещения в пределах страницы, которая должна иметь стандартный размер, чтобы полностью отображаться в окне обозревателя. Однако чаще всего ImageReady используют для создания таких интерактивных компонентов Web-страницы, как графические карты либо анимированные кнопки.
С этой целью в ImageReady добавлены специальные палитры для Web-дизайна: Rollover, Image Map и Slice, объединенные в одном окне с палитрой Animation (Анимация). Вывести их на передний план можно щелчком на соответствующей вкладке окна Animation (Анимация), либо выполнив одну из команд меню Window (Окно): Show Rollover, Show Slice, Show Image Map.
Под интерактивным эффектом (rollover) понимают такой эффект, при котором изображение принимает различный вид в зависимости от действий пользователя (например, наведение мыши или щелчок на определенной области Web-страницы). Каждое состояние определяется набором параметров палитры Layers (Слои), включая расположение слоев, их стили и параметры форматирования. В качестве состояния может быть использована анимация, либо можно создать такое изображение, при наведении мыши на один из участков которого изменяется вид другой части изображения (secondary rollovers).
Сохраняя изображение для использования в качестве элемента Web-страницы, можно одновременно сгенерировать HTML-файл, который будет содержать информацию для обозревателя о том, как воспроизводить элементы страницы при загрузке. Этот файл включает ссылки на изображения (в формате GIF, PNG или JPEG), HTML-текст, гиперссылки и код JavaScript для создания интерактивных эффектов (rollover effects). Хотя для большинства эффектов можно выполнить предварительный просмотр непосредственно в программах Photoshop или ImageReady, но зависимость демонстрируемых Web-страниц от операционной системы, типа обозревателя и системы отображения цвета требует выполнения просмотра в каждом конкретном обозревателе.
ImageReady поддерживает создание интерактивных объектов (rollovers), добавляя код JavaScript в результирующий HTML-файл, обеспечивающий смену состояния объекта при наведении на него указателя мыши. Для создания интерактивных объектов служит палитра Rollover, совмещенная с палитрой Animation (Анимация). На ней отображаются возможные состояния объекта, каждому из которых может соответствовать свое изображение или даже целая анимация. При сохранении такого объекта, как элемента Web-страницы каждое состояние сохраняется в отдельном файле, в название которого добавлен тип состояния.
Первое из состояний, отображенное на палитре Rollover, всегда состояние Normal (Обычное).
Остальные состояния определяют, каким действием пользователя будет вызываться соответствующий вид интерактивного объекта. Чтобы создать новое состояние, следует выбрать команду New State (Новое состояние) из меню палитры Rollover либо щелкнуть на одноименной кнопке этой палитры. Появившееся новое изображение соответствует следующему по порядку состоянию, но по виду идентично исходному и подлежит редактированию с помощью палитры Layers (Слои). Изменить тип состояния можно с помощью раскрывающегося меню у имени состояния, содержащего следующие значения:

Over (Наведение) — появление на интерактивном объекте указателя мыши при ненажатой левой кнопке;

Down (Нажатие) — нажатие левой кнопки мыши при наведенном ее указателе на интерактивный объект (сохраняется, пока кнопка нажата);

Click (Щелчок) — щелчок левой кнопки мыши на интерактивном объекте состояние сохраняется до следующего действия пользователя на объекте);

Out (Наружу) — определяет состояние, когда указатель мыши сходит с области карты изображения (обычно для этой цели используется состояние Normal);

Up (Отпускание) — определяет состояние, когда пользователь отпускает нажатую клавишу мыши на интерактивном объекте (обычно для этой цели используется состояние Over);

Custom (Пользовательский) — определяет новое состояние, для которого нужно создать код JavaScript и добавить его к HTML-файлу Web-страницы, чтобы это действие могло быть реализовано;

None (Нет) — используется, чтобы заданное изображение могло быть в дальнейшем использовано как одно из состояний интерактивного объекта (это состояние не отображается на Web-странице).

Раскрывающееся меню Rollover states (Интерактивные состояния) включает только те состояния, которые еще не применялись для данного объекта (исключения составляют состояния None и Custom, которые могут быть использованы неоднократно).
При работе со слоями изменение порядка слоев в состоянии Normal вызывает их перемещение во всех остальных состояниях. Однако перемещение отдельного слоя в других состояниях rollover сохраняет его первоначальное положение во всех остальных состояниях.

Создание области Image Map на основе слоя

Рисунок 3.18. Создание области Image Map на основе слоя

Чтобы создать область изображения на основе существующего слоя, его нужно выделить на палитре Layers (Слои). Если слоев несколько, то их предварительно следует объединить. Затем выполняют команду Layer > New Layer Based Image Map Area (Слой > Новый слой области графической карты). Поскольку область изображения на основе слоя связана с пикселами этого слоя, то единственный способ изменения ее размера, перемещения или выравнивания — это редактирование самого слоя. Для того чтобы получить возможность редактирования с помощью набора команд меню палитры Image Map, область изображения следует преобразовать в область, подобную созданной с помощью инструмента Image map tool (Графическая карта). Для этого выделяем область, используя инструмент Image map select tool (Выделение графической карты). Из меню палитры Image Map выбираем команду Promote Layer Based Image Map Area (Продвинуть слой области графической карты).
При выборе инструмента Image map select tool (Выделение графической карты) области отображаются автоматически. Чтобы показать или скрыть область графической карты (image map areas), нужно выполнить одно из следующих действий:

щелкнуть на кнопке Image Map Visibility (Отображение графической карты) панели Toolbox;

выбрать команду View > Show > Image Maps (Вид > Показать > Графическая карта);

выбрать команду View > Show Extras (Вид > Показать дополнительно). Эта команда позволяет также отобразить направляющие, рамки выделения, границы текста, его основную линию, грани выделения.

Палитра Image Map позволяет перемещать, выравнивать, дублировать области, созданные с помощью инструмента Image map tool (Графическая карта). Существенно меньше действий доступно для областей, созданных на основе слоев, однако их можно выделять, размещать и удалять с карты изображения.
Выделение области выполняется с помощью инструмента Image map select tool (Выделение графической карты). После выбора инструмента выполняется щелчок на области. Если требуется выделить несколько областей, то последующие щелчки производятся при нажатой клавише Shift.
Перемещение и изменение размера области, созданной с помощью инструмента Image map tool (Графическая карта), выполняются с помощью мыши либо путем задания числовых значений для областей прямоугольной и круглой формы.
В последнем случае в области Dimensions (Размеры) палитры Image Map изменяют значения следующих параметров:

X — определяет расстояние в пикселах до левого края прямоугольной области или центра окружности от нулевой отметки горизонтальной линейки;

Y — определяет расстояние в пикселах до верхнего края прямоугольной области или центра окружности от нулевой отметки вертикальной линейки;

W — определяет ширину прямоугольной области;

Н — определяет высоту прямоугольной области;

R — определяет радиус окружности области графической карты.

Область, созданная на основе слоя, по умолчанию имеет прямоугольную форму, но может быть изменена на другую с помощью раскрывающегося списка Shape (Фигура) палитры Image Map, предоставляющего выбор из значений: Rectangle, Circle или Polygon.
Дублирование области графической карты (image map area) выполняется с тем же самым размером и параметрами, что и оригинальная область, созданная с помощью инструмента Image map tool (Графическая карта). Чтобы дублировать одну или несколько областей, их предварительно следует выделить, а затем выполнить одно из следующих действий:

выбрать команду Duplicate Image Map Area (Дублировать область) из меню палитры Image Map;

переместить область графической карты (image map area) при нажатой клавише Alt.

Дубликат появится с небольшим сдвигом (10 пикселов вниз и вправо) поверх оригинала и может быть отредактирован нужным образом.
Порядок создания областей важен в случае их перекрытия, тогда область, которая находится выше в стопке, и определяет ссылку. Для изменения порядка областей можно воспользоваться командами меню палитры Image Map: Bring to Front (Впереди всех), Bring Forward (Сдвинуть вперед), Send Backward (Сдвинуть назад), Send to Back (Позади всех) — либо одноименными кнопками палитры атрибутов при выбранном инструменте Image map select tool (Выделение графической карты).
Для выравнивания областей используют соответствующие команды меню палитры Image Map: Align Top Edges (Выровнять по верхнему краю), Align Vertical Centers (Вертикальное выравнивание по центру), Align Bottom Edges (Выровнять по нижнему краю), Align Left Edges (Выровнять по левому краю), Align Horizontal Centers (Горизонтальное выравнивание по центру), Align Right Edges (Выровнять по правому краю) — либо одноименные кнопки палитры атрибутов при выделенном инструменте Image map select tool (Выделение графической карты). Чтобы выровнять области, созданные на основе слоев, их предварительно следует связать, а затем выбрать команду из подменю Layer > Align Linked (Слой > Выровнять связанные).
Для областей, созданных с помощью инструмента Image map tool (Графическая карта), возможно распределение вдоль вертикальной или горизонтальной оси, для чего используют соответствующие команды меню палитры Image Map: Distribute Top Edges (Распределить по верхнему краю), Distribute Vertical Centers (Вертикальное распределение по центру), Distribute Bottom Edges (Распределить по нижнему краю), Distribute Left Edges (Распределить полевому краю), Distribute Horizontal Centers (Горизонтальное распределение по центру), Distribute Right Edges (Распределить по правому краю) — либо одноименные кнопки палитры атрибутов при выделенном инструменте Image map select tool (Выделение графической карты).
Для удаления выделенной области image map areas используют клавиши Backspace или Delete, а также команду Delete Image Map Area (Удалить область) из меню палитры Image Map. Для области графической карты можно задать имя, URL- адрес, целевой фрейм и альтернативный текст с помощью полей ввода палитры Image Map. Предварительно следует выделить нужную область графической карты. При вводе URL-адреса можно указывать относительную ссылку, но для абсолютной ссылки обязательно следует включить в начало указание на тип протокола — http: / /. Графические карты, создаваемые с помощью ImageReady, могут быть как серверного, так и клиентского типа. В первом случае карта управляется с помощью CGI-скрипта, запускаемого на сервере. Во втором случае вся информация о разметке карты содержится в HTML-файле и интерпретируется самим обозревателем. По этой причине навигация по картам клиентского типа выполняется быстрее. По умолчанию ImageReady сохраняет графические карты именно клиентского типа.
Однако нужный тип графической карты можно задать в окне Output Settings (Параметры вывода), вызываемом по команде File > Output Settings > HTML (Файл > Параметры вывода > HTML). При выборе графической карты серверного типа ImageReady генерирует отдельный файл графической карты, при этом в HTML-файле необходимо указать правильный путь доступа к месту размещения этого файла на сервере.

Установки параметров оптимизации анимации

Рисунок 3.13. Установки параметров оптимизации анимации

Оптимизация необходима для уменьшения размера файла формата GIF, который является единственным форматом в ImageReady, позволяющим демонстрировать анимацию на Web-странице. Кроме задания стандартных параметров оптимизации следует при редактировании кадров анимации оставлять в них только изменяющиеся области на прозрачном фоне, что позволяет значительно сократить размер получаемого файла. Сокращение количества цветов в палитре также уменьшает размер файла, однако, чтобы предотвратить мерцание изображения при воспроизведении и сохранить возможность отображения цветовых оттенков, отсутствующих в палитре, используется специальная техника имитации (dithering technique). В этом случае потребуется больше времени на создание результирующего GIF-файла.
Выбор команды Optimize Animation (Оптимизировать анимацию) из меню команд палитры Animation (Анимация) открывает одноименное окно, в котором по умолчанию установлены флажки:

Bounding Box (Граничная рамка) — обрезает каждый кадр по размеру изменяемой области (файл с такими кадрами можно редактировать только в программах, поддерживающих этот режим);

Redundant Pixel Removal (Удаление избыточных пикселов) — делает прозрачными все не изменившиеся пикселы в кадре (чтобы этот параметр работал, необходимо установить параметр Transparency (Прозрачность) в палитре Optimize и выбрать метод смены кадров Automatic).

Щелчок на кнопке ОК запускает оптимизацию.

Выбор параметров при расчете кадров

Рисунок 3.10. Выбор параметров при расчете кадров

Перед расчетом промежуточных кадров следует выделить один или несколько последовательных кадров. Если выделен один кадр, то рассчитанные кадры вставляются между ним и предыдущим или же последующим кадрами. Если выделены два последовательных кадра, то новые кадры вставляются между ними. Для выделенной непрерывной группы кадров все промежуточные кадры (то есть все, кроме первого и последнего) заменяются кадрами, рассчитанными по команде Tween (Промежуточный). Выделение первого и последнего кадров анимации также рассматривается как последовательное и позволяет добавить рассчитанные кадры в конец анимации, обеспечивая непрерывность при ее циклическом повторении.
Затем в раскрывающемся меню выбирается команда Tween (Промежуточный) либо выполняется щелчок по одноименной кнопке палитры Animation (Анимация). В открывшемся окне Tween (Расчет промежуточных кадров) задаются следующие параметры:

Выбирается одно из значений переключателя Layers (Слои):

All Layers (Все слои) — выполняет расчет для всех слоев в выделенных кадрах;

Selected Layer (Выделенный слой) — выполняет расчет только для выбранного слоя выделенных кадров, что требует предварительного выделения этого слоя на палитре Layers (Слои).

Снимаются или устанавливаются флажки свойств, для которых выполняется расчет:

Position (Положение) — для расчета изменения положения слоя в кадрах;

Opacity (Непрозрачность) — для изменения значения коэффициента прозрачности в рассчитываемых кадрах;

Effects (Эффекты) — для изменения величины эффекта в рассчитываемых кадрах.

Указывается количество вставляемых кадров. Если выделено более двух кадров, то этот параметр недоступен.

Щелчок на кнопке ОК приводит к созданию заданного числа кадров, которые затем можно редактировать по отдельности.
Время демонстрации каждого кадра в секундах указано под изображением кадра. Чтобы его изменить, следует выделить один или несколько кадров и щелкнуть на величине времени задержки, что вызовет меню с набором постоянных значений. Выбор значения Other (Другое) открывает диалоговое окно Set Frame Delay (Время кадра), в котором можно задать произвольное число секунд. После щелчка на кнопке ОК это время будет присвоено всем выделенным кадрам анимации. Следует отметить, что при просмотре анимации в ImageReady время демонстрации кадров может отличаться от установленного. Поэтому просмотр следует выполнять в браузере, где это время точно выдерживается.
Создаваемая анимация при воспроизведении может быть повторена заданное число раз. Для этого щелчком на раскрывающемся списке Selects looping option (Выбор параметров повторения), расположенном в левом нижнем углу палитры Animation (Анимация), выбирается одно из значений списка: Once (Однократно), Forever (Бесконечно) или Other (Другое). В последнем случае в диалоговом окне Set Loop Count (Число повторов) вводится нужное числовое значение.
Метод удаления кадра (frame disposal method) определяет, сохранится ли изображение предыдущего кадра при демонстрации последующего. При использовании кадров с прозрачным фоном в этом случае будут видны изображения предыдущих кадров.
Выбор метода осуществляется для одного или нескольких выделенных кадров с помощью контекстного меню, вызываемого щелчком правой кнопки мыши на рисунке кадра (thumbnail) в окне Animation (Анимация):

Automatic (Автоматически) — устанавливается по умолчанию, автоматически стирая изображение текущего кадра, если следующий содержит прозрачный слой;

Do Not Dispose (He удалять) — сохраняет изображение предыдущего кадра, добавляя к нему изображение следующего, причем предварительный просмотр такой анимации следует выполнять в браузере;

Restore to Background (Восстановить фон) — позволяет демонстрировать в каждый момент времени только один кадр.

Для методов Do Not Dispose (He удалять) и Restore to Background (Восстановить фон) у рисунков кадров появляется специальная отметка Disposal Method icon, указывающая на тип метода.

Выбор способа вставки скопированных кадров

Рисунок 3.9. Выбор способа вставки скопированных кадров

В ImageReady каждый слой рассматривается как отдельный элемент анимации. Используя команды и параметры палитры Layers (Слои), можно задавать нужные изменения, добиваясь создания анимационных эффектов в изображении, так как изменения будут влиять только на выделенные кадры. Можно менять положение объекта, его прозрачность, а также рассчитывать промежуточные кадры, используя команду Tween (Промежуточный). Изменения, выполненные на палитре Layers (Слои), можно применить ко всем кадрам, если выполнить команду Match Layer Across Frames (Подогнать слой под кадры).
Однако изменения объекта, влияющие на параметры пикселов (такие, как раскраска, изменение тона или цвета, трансформации), оказывают влияние на все кадры анимации, в которых представлен данный объект. Для анимации подобных свойств следует создавать отдельные слои с разными параметрами для каждого изменяемого кадра, задавая соответствующий режим видимости.
Применение эффекта к слою-маске воздействует на все кадры, в которых представлен этот слой, однако при этом маска может дополнительно изменять свое положение.
Создание анимации изменением параметров слоев выполняется достаточно просто и предоставляет, если сохранить ее в формате документа Photoshop, дальнейшую возможность ее редактирования. При создании анимации в Image- Ready анимируемые объекты следует размещать на разных слоях, связывая эти слои в группы.
Возможность автоматического создания промежуточных кадров анимации (tweened animation) является очень полезной и может быть применена как к графическим, так и к текстовым изображениям. Эта функция позволяет рассчитывать кадры, в которых объект может перемещаться, появляться или исчезать, а также к нему может быть применен постепенно усиливающийся эффект.

Выделение области Image Map

Рисунок 3.17. Выделение области Image Map

Чтобы указать новую область с помощью инструмента Image map tool (Графическая карта), выбирают нужную форму инструмента (rectangle, circle, polygon). Затем выполняют действия, как при обычном рисовании:

для прямоугольного (rectangle) или круглого (circle) инструмента Image map tool (Графическая карта): протаскиваем его над областью определения (удерживая нажатой клавишу Shift, получаем квадрат или окружность, а удерживая клавишу Alt, создаем объект из его центра);

для многоугольного (polygon) инструмента Image map tool (Графическая карта): щелчками задаем вершины многоугольника; завершаем построение щелчком на начальной точке либо двойным щелчком мыши (удерживая при построении нажатой клавишу Shift, можно строить стороны многоугольника под углом 45°).

Размер прямоугольной (rectangle) или круглой (circle) областей можно задать численно, для чего устанавливают флажок Fixed Size (Фиксированный размер) и вводят размеры в пикселах.

Задание параметров в окне Output Settings

Рисунок 3.19. Задание параметров в окне Output Settings

Анимация для Интернет

Анимация формы

Анимация формы

Метод расчета промежуточных кадров (shapes-tweened) позволяет преобразовывать одну форму в другую, изменяя при этом ее размер, положение и цвет. При создании анимации формы следует учесть, что Flash не может выполнить такую анимацию для групп, символов, текстовых блоков и растровых изображений.
Анимация формы фигур позволяет создать эффект метаморфозы, когда одна форма превращается в другую. Для управления этими изменениями служат специальные идентификаторы формы (shape hints), которые позволяют создавать сложные изменения и превращения отдельных частей исходной фигуры в новые. Идентификаторы формы отмечают отдельные точки фигуры до и после изменения ее формы. Каждая из них обозначается буквой латинского алфавита, что позволяет задать до 26 идентификаторов. Таким образом можно создать изменение выражения нарисованных лиц, превращения одних животных в других и т. п. Для фигур сложной формы желательно задать промежуточные состояния в виде дополнительных ключевых кадров, что позволит контролировать фазы превращения. Лучше все анимируе-мые фигуры размещать в отдельных слоях, хотя можно выполнять одновременную анимацию для слоя, содержащего сразу несколько фигур.

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

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

Теперь, когда мы научились создавать движущееся изображение, можно добавить к нему звук. Macromedia Flash позволяет назначить объекту звук-событие либо использовать потоковый звук. Их воспроизведение по-разному реализуется при просмотре Web-страницы в Интернете. Воспроизведение звука-события начинается только после его полной загрузки на локальный компьютер и продолжается до тех пор, пока его специально не остановят. Потоковый звук начинает воспроизводиться сразу после загрузки такого объема данных, который достаточен для озвучивания первых нескольких кадров анимации, и продолжает воспроизводиться по мере дальнейшей загрузки, при этом звук синхронизируется с временной диаграммой на Web-сайте. Таким образом, воспроизведение звука совместно с анимацией может быть сделано непрерывным, не зависящим от распределения кадров на оси времени, либо его можно синхронизировать с поведением объектов.
Озвучивание фильма в Macromedia Flash предполагает создание отдельного слоя для звука, назначение ему звукового файла и задание параметров звука на панели Sound (Звук). Создать звуковой слой можно обычной командой Insert > Layer (Вставка > Слой). Каждый звук размещается в отдельном слое, и каждый такой слой работает подобно звуковому каналу. При воспроизведении фильма звуки на всех слоях воспроизводятся вместе.
Полоса частот и степень сжатия звукового файла существенно влияют на качество и размер звуковых данных в готовом фильме. Macromedia Flash может импортировать звуковые файлы форматов WAV, AIFF и AU, сохраняя их в библиотеке наряду с растровыми изображениями и символами. Так как звуковые файлы занимают значительный объем памяти, то желательно использовать файлы, оптимальные по качеству. Macromedia Flash работает с 8- или 16-разрядными звуками с полосой 11,22 или 44 кГц (для стереозвука потребуется в два раза больше места, чем для моно). При импорте звука, полоса которого не кратна 11, звучание может стать выше или ниже, чем в оригинале, из-за его преобразования. Чтобы размер выходного файла Macromedia Flash не оказался очень большим, следует придерживаться следующих принципов:

многократное воспроизведение одного звука с помощью цикла позволяет создать звуковой фон значительной длительности;

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

исключение пауз между звуками позволяет устранить сохранение лишней информации.

Управление параметрами воспроизведения звукового файла выполняется на панели Sound (Звук), где доступен набор следующих установок.

Движение по заданной траектории

Рисунок 4.13. Движение по заданной траектории

Интерфейс Macromedia Flash

Интерфейс Macromedia Flash 5

Изменение цвета идентификаторов при правильном размещении

Рисунок 4.17. Изменение цвета идентификаторов при правильном размещении

Чтобы использовать идентификаторы формы, выполняют следующие действия:

1. Выделяют первый ключевой кадр в последовательности и выполняют команду Modify > Transform > Add Shape Hint (Изменить > Трансформировать > Добавить идентификатор). На объекте появится первый идентификатор красного цвета с буквой внутри.

2. Идентификатор перемещают в точку на контуре фигуры, которую хотят отметить.

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

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

5. Повторяют процесс, добавляя новые идентификаторы (b, с и т. д.).

Если идентификаторы формы не отображаются на экране, то выполняют команду View > Show Shape Hints (Вид > Показать идентификаторы формы), которая доступна, если выделенный слой и ключевой кадр содержат идентификаторы формы.
Использование идентификаторов формы позволяет не только выполнять анимацию формы, но и создавать дополнительные эффекты, например вращение.
Лишний идентификатор формы, размещенный на фигуре, можно удалить, щелкнув по нему правой кнопкой мыши и выбрав из контекстного меню команду Remove Hint (Удалить идентификатор). Делать это следует на первом ключевом кадре последовательности. Для удаления всех идентификаторов формы достаточно выполнить команду Modify > Transform > Remove All Hints (Изменить > Трансформировать > Убрать все идентификаторы).
Как уже отмечалось, Flash при создании анимации формы не может выполнить ее расчет для групп, символов, текстовых блоков и растровых изображений. В этих случаях приходится пользоваться пошаговой (покадровой) анимацией, что существенно увеличивает размер конечного файла, но дает простор для воображения и позволяет с помощью последовательности изображений выполнять любые превращения.

Кнопки управления режимом кальки

Рисунок 4.20. Кнопки управления режимом кальки

Кнопка Onion Skin (Режим кальки) включает отображение на рабочем столе содержимого группы кадров, заключенных между маркерами диапазона Start Onion Skin и End Onion Skin, расположенными на оси времени.

Кнопка Onion Skin Outlines (Контуры на кальке) задает отображение контуров объектов группы кадров, заключенной между маркерами диапазона.

Кнопка Edit Multiple Frames (Правка нескольких кадров) делает доступным для редактирования содержимое всех кадров диапазона.

Кнопка Modify Onion Markers (Изменить маркеры диапазона) открывает меню со следующими командами для изменения представления маркеров диапазона:

Always Show Markers (Всегда отображать маркеры) — отображает положение маркеров диапазона в заголовке оси времени и при выключенном режиме кальки (onion skin);

Anchor Onion Marks (Закрепить маркеры) — блокирует маркеры диапазона на текущей позиции, что препятствует их обычному перемещению вместе с указателем текущего кадра;

Onion 2 (показать два кадра) — включает в диапазон по 2 кадра с каждой стороны от указателя текущего кадра;

Onion 5 (показать пять кадров) — включает в диапазон по 5 кадров с каждой стороны от указателя текущего кадра;

Onion All (показать все кадры) — включает в диапазон все кадры фильма.

При работе над фильмом может возникнуть необходимость переместить всю анимацию в новое положение на рабочем столе. В этом случае, чтобы избежать повторного размещения и выравнивания объектов, их следует перемещать все вместе и одновременно. Предварительно необходимо разблокировать все слои анимации (для заблокированных слоев перемещения объектов не произойдет). Затем щелчком на кнопке Edit Multiple Frames (Правка нескольких кадров) задают режим редактирования всех кадров диапазона и перемещают маркеры диапазона в нужное положение. Например, для выбора всех кадров щелкают по кнопке Modify Onion Markers (Изменить маркеры диапазона) и выбирают команду Onion All (Показать все кадры). Далее выделяют все объекты командой Edit > Select All (Правка > Выделить все) и перемещают всю анимацию в новую позицию на рабочем столе.

Macromedia Flash

Macromedia Flash

Программный продукт фирмы Macromedia -Flash 5 предназначен для создания мультимедийных компонентов Web-страниц. Он предлагает средства для реализации интерактивной работы с этими компонентами, дополняя Web-сайт потоковым звуком в формате МРЗ.
С помощью Macromedia Flash 5 (http: //www.macromedia . com/software/flash) можно создавать также анимированные изображения различного типа — от простейших «живых» кнопок до сложных мультипликаций. Так же, как и в ImageReady, анимация создается путем изменения содержания последовательности кадров. Поддерживаются многослойные изображения, можно задавать перемещение объекта, его вращение, изменение формы, размера, цвета, прозрачности, причем эти изменения могут выполняться как по отдельности, так и одновременно друг с другом.
При пошаговой анимации (frame-by-frame animation) в каждом кадре создается собственное изображение, как в мультфильмах, нарисованных художниками. Это существенно увеличивает размер конечного файла, так как требует сохранения всех кадров. При использовании автоматического создания промежуточных кадров (tweened animation) в конечном файле сохраняется изображение только для ключевых кадров, что позволяет сократить его размер.
Результаты анимации обычно сохраняются в виде фильмов Flash в формате SWF, которые используют векторную графику, но могут также включать точечную графику и звук. Они поддерживают интерактивность, что позволяет создавать фильмы, поведение которых зависит от реакции пользователя. Фильмы Flash компактны, быстро загружаются и масштабируются к размеру экрана зрителя.
На Web-странице с помощью Flash создаются элементы управления, анимированные заставки, длительные анимации, сопровождающиеся звуком, и даже целые интерактивные Web-страницы. Для их просмотра предназначен Flash Player, размещаемый на локальном компьютере, либо специальные компоненты, подключаемые к обозревателю.
Подробнее познакомиться с работой в программе Macromedia Flash можно в книге издательства «Питер» из серии «Краткий курс» — «Macromedia Flash 5», а также готовится к изданию книга «Эффективная работа: Flash 5».

Начало работы над фильмом

Начало работы над фильмом

Каждый раз при открытии приложения Flash создается новый файл с расширением FLA. При этом для задания таких свойств фильма, как размер, частота кадров, цвет фона и т. п. используется диалоговое окно Movie Properties (Свойства фильма).
Если окно приложения Flash уже открыто, то, чтобы начать новый фильм, следует выбрать команду File > New (Файл > Создать). Выбирая затем команду Modify > Movie (Изменить > Фильм), открываем окно Movie Properties (Свойства фильма). В поле Frame Rate (Частота кадров) этого окна задается число кадров в секунду (для Web-страниц обычно выбирают значения от 8 до 12). В полях Width (Ширина) и Height (Высота) — размер в пикселах по горизонтали и вертикали (минимально возможный равен 18 х 18, амаксимальный — 2880 х 2880). Кнопки Contents (Содержание) и Printer (Принтер) служат для согласования размера рабочего стола с его содержимым или областью печати на заданном формате бумаги.

Одновременное отображение ключевых кадров при анимации формы

Рисунок 4.19. Одновременное отображение ключевых кадров при анимации формы

Для отображения и редактирования нескольких кадров одновременно следует использовать режим кальки (onion skin), позволяющий увидеть содержимое нескольких последовательных кадров. Этот режим особенно удобен при редактировании пошаговой анимации. Чтобы его активизировать, нужно выполнить щелчок по кнопке Onion Skin (Режим кальки) окна. В этом режиме текущий кадр отображается ярко, а все остальные — как полупрозрачные с наложением друг на друга. Редактировать при этом можно только текущий кадр. Чтобы обеспечить доступ ко всем кадрам, отмеченным маркерами диапазона, следует щелкнуть по кнопке Edit Multiple Frames (Правка нескольких кадров), также расположенной в окне Timeline (Ось времени).
При перемещении текущего кадра одновременно изменяется положение маркеров диапазона отображаемых полупрозрачных кадров. Ухватив указателем мыши один из маркеров, можно расширить диапазон в ту или иную сторону. Чтобы избежать путаницы при большом количестве слоев, можно блокировать или скрыть те слои, содержание которых не требуется отображать в данный момент. Заблокированные слои, отмеченные значком замка в окне оси времени, не отображаются в режиме кальки.
Для изменения момента появления объекта или его превращения следует перетащить мышью в новую позицию на временной оси ключевой кадр или всю последовательность. При необходимости можно скопировать выделенную последовательность кадров, это действие выполняется с помощью мыши при нажатой клавише Alt.
Можно также выполнить изменение порядка следования анимированных кадров на противоположный, для чего следует выделить кадры последовательности в одном или нескольких слоях и выполнить команду Modify > Frames > Reverse (Изменить > Кадры > Обратный). В этом случае в начале и в конце выделенной последовательности обязательно должны присутствовать ключевые кадры.
В окне Timeline (Ось времени) имеются следующие кнопки, управляющие режимом кальки:

Окно библиотеки

Рисунок 4.3. Окно библиотеки

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

Окно Layer Properties

Рисунок 4.14. Окно Layer Properties

Чтобы связать слой с существующим слоем направляющей, можно выполнить одно из следующих действий:

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

Создать новый слой под слоем направляющей. Объекты, размещенные на этом слое, к которым будет применена анимация методом расчета кадров (tweened), автоматически привязываются к траектории.

Выделить слой под слоем с направляющей и выполнить команду Modify > Layer (Изменить > Слой) с выбором значения Guided (Управляемый) для типа слоя в диалоговом окне Layer Properties (Свойства слоя).

Щелкнуть на слое при нажатой клавише Alt.

Чтобы разорвать связь слоя со слоем направляющей, выполните одно из следующих действий:

Выделите слой, связь которого надо разорвать, и перетащите его выше слоя направляющей.

Выполните команду Modify > Layer (Изменить > Слой) с выбором значения Normal (Обычный) для типа слоя в окне Layer Properties (Свойства слоя).

Щелкните на слое при нажатой клавише Alt.

Окно Movie Explorer

Рисунок 4.6. Окно Movie Explorer

Вызов окна обозревателя фильма осуществляется по команде Window > Movie Explorer (Окно > Обозреватель фильма). Управление окном обозревателя осуществляется либо с помощью команд раскрывающегося меню, вызываемого щелчком на кнопке в правом верхнем углу окна, либо с помощью доступных в контекстном меню объектов. Для выбора категорий отображаемых объектов используются кнопки в области Show (Показ), позволяющие показать текст, символы, действия, импортированные файлы, кадры и слои. Кнопка Customize (Пользовательский) дает возможность еще более детализировать выбор с помощью диалогового окна Movie Explorer Settings (Установки обозревателя фильма). Установка флажков Show Movie Elements (Показывать элементы фильма) и Show Symbol Definitions (Показывать описания символов) соответствует отметке одноименных команд раскрывающегося меню окна.
Поле Find (Поиск) позволяет найти по названию элемент фильма, шрифт, действие, а также кадр по его номеру. Поиск проводится только по отображенным в окне обозревателя компонентам.
Выделение элемента в обозревателе сопровождается его выделением на рабочем столе, если он не заблокирован. Для выделения нескольких элементов можно использовать клавиши Shift и Ctrl. Выделение сцены отображает на рабочем столе первый кадр этой сцены.
Раскрывающееся меню окна обозревателя фильма содержит следующий набор команд:

Goto Location (Перейти к месту) — переход к выделенному слою, сцене или кадру;

Goto Symbol Definition (Перейти к описанию символа) — переход к описанию символа, выделенного в окне обозревателя;

Select Symbol Instances (Выделить экземпляры символа) — переход к сцене, содержащей экземпляры символа, выделенного в окне обозревателя фильма;

Find in Library (Поиск в библиотеке) — выбор выделенного символа в окне библиотеки;

Properties (Свойства) — открытие панелей, соответствующих выделенному элементу;

Rename (Переименовать) — изменение имени выделенного элемента;

Edit in Place (Правка на месте) — разрешение редактировать выделенный элемент на рабочем столе;

Edit in New Window (Правка в новом окне) — переход к редактированию выделенного элемента в отдельном окне;

Show Movie Elements (Показывать элементы фильма) — отображение сцен фильма с входящими в них элементами;

Show Symbol Definitions (Показывать описания символов) — отображение всех элементов, связанных с символом;

Copy Text to Clipboard (Копировать текст в буфер) — копирование выделенного текста в буфер обмена, откуда его можно вставить в текстовый редактор для изменения или проверки;

Cut (Вырезать), Сору (Копировать), Paste (Вставить) и Clear (Очистить) — выполняют указанные действия с выделенным элементом;

Expand Branch (Развернуть ветвь) — разворачивание дерева навигации у выделенного элемента;

Collapse Branch (Свернуть ветвь) — сворачивание дерева навигации у выделенного элемента;

Collapse Others (Свернуть другие) — сворачивание всех ветвей навигационного дерева, не содержащих выделенного элемента;

Print (Печать) — печать дерева навигации, отображенного в данный момент в окне обозревателя.

Для многократного использования объекта его можно преобразовать в символ, предварительно выделив его в композиции на рабочем столе. Можно также создать пустой символ и импортировать в него содержимое либо в режиме редактирования создать его содержимое вручную. Символы поддерживают всю функциональность Flash, в том числе анимацию. Использование символов для анимации позволяет создать итоговый файл минимального размера. Особенно значительный эффект получается в случае анимации с повторяющимися движениями, например взмахами крыльев птицы или насекомого.
Чтобы создать новый символ из одного или нескольких объектов на рабочем столе, следует предварительно выделить эти объекты и выполнить команду Insert > Convert to Symbol (Вставка > Преобразовать в символ). В открывшемся диалоговом окне Symbol Properties (Свойства символа) вводят имя символа и выбирают тип его поведения, устанавливая значение переключателя Behavior (Поведение): Graphic (Графика), Button (Кнопка) или Movie Clip (Видеоклип). Щелчок на кнопке О К добавляет новый символ в библиотеку, а выделенный на рабочем столе объект преобразуется в экземпляр этого символа. Дальнейшее его изменение возможно только в режиме редактирования символов.

Окно редактирования символа

Рисунок 4.8. Окно редактирования символа

При создании пустого символа следует убедиться, что на рабочем столе ничего не выделено, после чего можно выбрать команду Insert > New Symbol (Вставка > Новый символ) либо щелкнуть на одноименной кнопке в окне библиотеки. В диалоговом окне Symbol Properties (Свойства символа) вводится имя нового символа и указывается тип его поведения. После щелчка на кнопке ОК символ добавляется в библиотеку и Flash переходит в режим его редактирования. Наполнить символ содержанием можно, используя ось времени, инструменты рисования, средства импорта, либо с помощью экземпляров других символов. Закончив наполнение символа, следует перейти в режим редактирования сцены, выбрав команду Edit > Edit Movie (Правка > Правка фильма) либо щелкнув на кнопке с ее названием в левом верхнем углу окна документа. Для многочисленных сцен можно использовать кнопку Edit Scene (Правка сцены) в правом верхнем углу окна документа, выбирая из списка нужную сцену.

Окно Symbol Properties

Рисунок 4.7. Окно Symbol Properties

Определение параметров экспорта отдельного звукового файла

Рисунок 4.23. Определение параметров экспорта отдельного звукового файла

Для каждого звукового файла можно также задать свои параметры компрессии в зависимости от его качества и требуемого размера будущего файла фильма Macromedia Flash. Для этого в диалоговом окне Library (Библиотека) следует выделить нужный звук и щелчком на кнопке Properties (Свойства) открыть окно Sound Properties (Свойства звука). В этом окне раскрывающийся список Compression (Сжатие) содержит следующие варианты (Рисунок 4.23):

Default (По умолчанию) — используются параметры по умолчанию, заданные в окне Publish Settings (Параметры публикации);

ADPCM — применяется для экспорта коротких звуков-событий, устанавливая параметры сжатия для 16-разрядного звука;

МРЗ — применяется для экспорта длительных потоковых звуков, устанавливая параметры сжатия МРЗ;

RAW — экспорт звука без сжатия.

В зависимости от выбранного варианта становятся доступными для установки еще несколько параметров:

флажок Convert Stereo to Mono (Конвертировать стерео к моно) позволяет преобразовать стереозвук в монофонический;

раскрывающийся список Sample Rate (Частота дискретизации) позволяет выбрать полосу частот для звуков экспортируемого файла (5 кГц — речь, 11 кГц — короткие звуки, 22 кГц — для Web-сайтов, 44 кГц — качество компакт-диска), но не выше полосы оригинала;

раскрывающийся список ADPCM Bits позволяет выбрать число битов, используемое в кодировании ADPCM (от 2 до 5);

раскрывающийся список Bit Rate позволяет выбрать максимальную скорость передачи звуковой информации в битах, выполняемую при кодировании МРЗ (рекомендуется 16 Кбит/с и выше);

раскрывающийся список Quality (Качество) позволяет задать один из трех вариантов: Fast (Быстрый), Medium (Средний), Best (Наилучший). Первый пригоден для публикации на Web-сайте, остальные для публикации фильма на локальном диске или компакт-диске).

Следует отметить, что при экспорте фильма Flash в форматы Quick Time или Windows AVI ограничения на использование звуковых файлов снимаются, так как в этом случае звуки объединяются в одну звуковую дорожку. Поэтому для создания фильмов подобного формата можно использовать произвольное число исходных файлов. Для связи звука и изображения следует использовать потоковую синхронизацию. Если компьютер, на котором воспроизводится фильм, не будет успевать прорисовывать все кадры, то часть из них будет просто пропущена.

Ось времени с набором слоев

Рисунок 4.2. Ось времени с набором слоев

На Рисунок 4.2 цифрами отмечены следующие элементы управления окна Timeline (Ось времени):

1. Указатель текущего кадра (Playhead).

2. Линейка времени (Timeline header).

3. Кнопка раскрывающегося меню Frame View.

4. Кнопка Center Frame.

5. Кнопки режима Onion Skin.

6. Указатель номера выделенного кадра.

7. Значение частоты кадров (Frame rate).

8. Слой направляющей Guide Layer.

9. Пустой ключевой кадр (Empty keyframe).

10. Покадровая анимация (Frame by frame Animation).

11. Анимация с расчетом кадров (Tweened Animation).

Symbols (символы) — это многократно используемые элементы фильма. Ими могут быть кнопки, графика, шрифты, звуки, видеоклипы и т. п. Помещая символ на рабочий стол, создают экземпляр этого символа. Для любого элемента, появляющегося в фильме более одного раза, символы позволяют получить более компактный результирующий файл. Изменение символа влияет на все его экземпляры, но редактирование экземпляра не отражается на свойствах породившего его символа. Символы можно редактировать как непосредственно в области Stage (на рабочем столе), так и в отдельном окне. При редактировании одного символа на рабочем столе все остальные элементы остаются видимыми, но недоступными для редактирования. На оси времени остается при этом только слой, соответствующий редактируемому символу. Символы играют важную роль в создании интерактивных фильмов Flash. Так, символ кнопки может менять свой вид при наведении на него указателя мыши либо в зависимости от того, в каком месте рабочего стола будет помещен его экземпляр.

Отметки групп кадров на оси времени

Рисунок 4.9. Отметки групп кадров на оси времени

Поэтому в окне Timeline (Ось времени) группы рассчитанных кадров обозначаются различным образом. Анимация движения (motion-tweened) обозначается стрелкой на синем фоне (Рисунок 4.9, а) между двумя ключевыми кадрами, отмеченными точками. Анимация формы (Shape-tweened) обозначается стрелкой на зеленом фоне между двумя ключевыми кадрами, причем последний отделен вертикальной линией (Рисунок 4.9, б). Пунктирная линия (dashed) указывает на то, что последний ключевой кадр отсутствует (Рисунок 4.9, в). Одиночный ключевой кадр отмечается черной точкой, а все последующие кадры, повторяющие его содержимое, выделены серым фоном, причем последний из них отмечен пустым прямоугольником (Рисунок 4.9, г). Малая буква «а» указывает кадр, которому назначено одно из действий панели Actions panel (Рисунок 4.9, Э). Красный флажок отмечает кадр, содержащий комментарий или метку (Рисунок 4.9, е).
Каждый кадр фильма Flash может быть составлен из любого числа объектов, размещенных послойно. В анимации с помощью слоев можно организовать объекты так, чтобы они не мешали друг другу. При одновременной анимации нескольких групп или символов они должны быть размещены на разных слоях. Обычно фоновый слой содержит статическую сцену, а каждый последующий слой — по одному ани-мированному объекту. В окне Timeline (Ось времени) они отображаются в виде отдельных строк. Одновременно редактируется содержимое только одного слоя.
При создании в анимации фонового изображения требуется, чтобы оно повторялось на протяжении нескольких кадров. При добавлении новых кадров в последовательность в каждом из них повторяется содержимое кадра, после которого они вставлены. Добавить группу новых кадров можно командой Insert > Frame (Вставка > Кадр), предварительно выделив крайний правый кадр последовательности. Аналогичный результат можно получить, если переместить ключевой кадр с помощью мыши, удерживая клавишу Alt, до нужной позиции на оси времени.

Панель Controller

Рисунок 4.24. Панель Controller

Для непрерывного воспроизведения анимации выполняют команду Control > Loop Playback (Управление > Повтор воспроизведения), а для проигрывания всех сцен фильма — команду Control > Play All Scenes (Управление > Воспроизведение всех сцен). Если при предварительном просмотре не нужно воспроизводить звук, то выполняют команду Control > Mute Sounds (Управление > Отключить звук). Для интерактивной анимации используют команды меню Control (Управление): Enable Simple Frame Actions (Активизировать действия кадра) или Enable Simple Buttons (Активизировать кнопки), активизирующие режим взаимодействия с пользователем. Так как многие интерактивные функции нельзя проверить в режиме предварительного просмотра без экспертов окончательный формат фильма, то для их тестирования предусмотрена команда Control > Test Movie (Управление > Проверить фильм) или Control > Test Scene (Управление > Проверить сцену), по которым создается файл SWF и проигрывается в отдельном окне с помощью проигрывателя Flash player. При создании файла SWF используется набор параметров по умолчанию, установленный в окне Publish Settings (Параметры публикации), и файл сохраняется в той же папке, что и файл FLA.
Дополнительно можно проверить фильм в окне обозревателя, для чего следует выполнить команду File > Publish Preview > HTML (Файл > Просмотр публикации > HTML).
Опубликование фильма Flash в Интернете — это двухэтапный процесс. Первоначально по команде File > Publish Settings (Файл > Параметры публикации) выбираются тип файла и его параметры. Затем по команде File > Publish (Файл > Публиковать) выполняется создание фильма в выбранном формате.
Диалоговое окно Publish Settings (Параметры публикации) позволяет выбрать также параметры для создания отдельных файлов изображений, включенных в анимацию, в том числе GIF, JPEG или PNG, и сохранить эти установки вместе с файлом фильма.
В зависимости от установок окна Publish Settings (Параметры публикации) по команде Publish (Публиковать) создаются результирующие файлы следующих типов:

Фильм Flash для Интернета (файл SWF).

При отсутствии Flash Player используются альтернативные форматы (GIF, JPEG, PNG или QuickTime).

Поддержка HTML-документов требует для показа фильма (или альтернативных изображений), контроля его параметров в обозревателе.

При наличии программ воспроизведения фильмов на платформах Windows или Macintosh либо в формате QuickTime можно сохранить фильмы Flash в файлах EXE, HQX или MOV соответственно.

Параметры этих файлов предварительно задаются в окне Publish Settings (Параметры публикации), вызываемом по команде File > Publish Settings (Файл > Параметры публикации). По умолчанию в нем установлены флажки для файлов SWF и HTML. Поэтому в окне имеются вкладки для определения их параметров. Выбор дополнительных форматов файлов открывает новые вкладки в окне Publish Settings (Параметры публикации), позволяя установить параметры сохранения и для них.

Панель Info с характеристиками фигуры

Рисунок 4.4. Панель Info с характеристиками фигуры

Dockable panels (панели) позволяют не только просматривать, организовывать и модифицировать элементы фильма, но и задавать параметры или применять команды к каждому типу элементов. Панели можно показывать или скрывать, создавая пользовательский вариант интерфейса.

Панель Sound для присоединенного звукового файла

Рисунок 4.21. Панель Sound для присоединенного звукового файла

В раскрывающемся списке Sync (Синхронизация) представлены четыре варианта событий:

Event ( Событие) — позволяет синхронизировать звук с событием; воспроизведение начинается с синхронизированным кадром и продолжается независимо от временной диаграммы даже при остановке самого фильма (звуки-события при воспроизведении опубликованного фильма смешиваются);

Start (Начать) — обеспечивает аналогичные функции, однако при возникновении события запускается новый экземпляр звука, даже если он уже воспроизводится;

Stop (Остановить) — позволяет остановить воспроизведение указанного звукового файла;

Stream (Поток) — позволяет синхронизировать звук с временной диаграммой на Web-сервере, при этом кадры анимации, которые Flash не успевает прорисовывать, могут пропускаться (такой звук останавливается при остановке анимации; при воспроизведении опубликованного фильма потоковые звуки также смешиваются).

В поле ввода Loops (Цикл) задается число повторений воспроизведения звука. Если длина звука мала, то для его непрерывного воспроизведения в течение всего фильма можно задать достаточно большое число повторений.
Раскрывающийся список Effect (Эффект) позволяет назначить звуковому файлу некоторые эффекты:

None (Нет) — отменяет все ранее назначенные эффекты;

Left Channel (Левый канал) — воспроизводит звук только в левом канале;

Right Channel (Правый канал) — воспроизводит зв^к только в правом канале;

Fade Left to Right (С левого в правый) — звук «перетекает» с левого канала на правый;

Fade Right to Left (С правого в левый) — звук «перетекает» с правого канала на левый;

Fade In (Нарастание) — постепенное нарастание громкости в процессе воспроизведения;

Fade Out (Затухание) — постепенное уменьшение громкости в процессе воспроизведения;

Custom (Пользовательский) — позволяет назначить собственный звуковой эффект.

Практикум

Практикум

В упражнениях рассмотрено создание анимации движения и изменения формы, а также присоединение к анимации звуковых файлов и сохранение фильма со звуком.
Упражнение 4.1. Анимация движения

1. Запускаем Macromedia Flash. Если в окне не отображается временная диаграмма, то по команде View > Timeline (Вид > Ось времени) выводим ее на экран.

2. Создадим на столе объект, например цветной круг. Выделим его и по команде Insert > Create Motion Tween (Вставка > Рассчитать движение) преобразуем в символ Flash с именем по умолчанию tweenl.

3. На временной диаграмме выделяем последний кадр будущей последовательности, например 15, и выполняем команду Insert > Frame (Вставка > Кадр).

4. Переместим объект в новую позицию на рабочем столе, при этом будет создан новый ключевой кадр в конце последовательности, а на временной диаграмме между ключевыми кадрами появится стрелка.

5. По команде Windows > Panel > Frame (Окно > Панели > Кадр) открываем панель Frame (Кадр), в которой задаются свойства анимации движения, — в раскрывающемся списке Tweening (Расчет) должно быть значение Motion (Движение).

6. Нажатие клавиши Enter или выбор команды Control > Play (Управление > Воспроизвести) запускает просмотр анимации.

Упражнение 4.2. Анимация формы

1. Запускаем Macromedia Flash. Если программа активна, то щелчком по кнопке New (Создать) либо выбором команды File > New (Файл > Создать) создадим новый фильм. Для отображения на экране временной диаграммы выполняем команду View > Timeline (Вид > Ось времени).

2. Активизируем слой и выделяем на нем пустой ключевой кадр для создания будущей анимации.

3. На рабочем столе изображаем исходную фигдоу с помощью любых инструментов рисования, предлагаемых Flash, учитывая, что можно будет изменять не только ее форму, но и цвет, и ее положение. В примере на Рисунок 4.19 это красный овал.

4. Пропустив определенное число кадров, например 15, по команде Insert > Key Frame (Вставка > Ключевой кадр) задаем второй ключевой кадр, в котором изобразим конечное состояние фигуры. В примере это зеленый прямоугольник.

5. Для первого ключевого кадра выделим объект на рабочем столе и выбором команды Modify > Frame (Изменить > Кадр) откроем панель Frame (Кадр), в которой в списке Tweening (Расчет) зададим тип анимации Shape (Форма).

6. Нажатие клавиши Enter или выбор команды Control > Play (Управление > Воспроизвести) запускает просмотр созданной анимации.

Упражнение 4.3. Анимация с использованием идентификаторов

1. Запускаем Macromedia Flash. Если программа активна, то щелчком по кнопке New (Создать) либо выбором команды File > New (Файл > Создать) создадим новый фильм. Для отображения на экране временной диаграммы выполняем команду View > Timeline (Вид > Ось времени).

2. Изобразим на столе объект, например желтый круг.

3. Пропустив определенное число кадров, например 15, по команде Insert > Keyframe (Вставка > Ключевой кадр) зададим второй ключевой кадр, на котором изобразим конечное состояние фигуры. В примере это синий круг такого же размера в той же позиции стола.

4. В первом ключевом кадре выделяем круг и открываем панель Frame (Кадр) выбором команды Modify > Frame (Изменить > Кадр). В раскрывающемся списке Tweening (Расчет) зададим тип анимации Shape (Форма). При просмотре такой анимации круг будет лишь постепенно менять свой цвет.

5. Снова выделим первый ключевой кадр и выполним команду Modify > Transform Add Shape Hints (Изменить > Трансформировать > Добавить идентификатор). В центре фигуры появится начальный идентификатор — красный кружок, помеченный буквой «а». Если команда Add Shape Hints (Добавить идентификатор) недоступна, то предварительно следует выполнить команду View > Show Shape Hints (Вид > Показать идентификаторы формы).

6. Переместим идентификатор «а» на левый край окружности и повторим команду Add Shape Hints (Добавить идентификатор). Новый идентификатор «6» переместим на правый край окружности (Рисунок 4.28).

7. Выделим конечный кадр и в нем разместим идентификаторы в обратном порядке. Если они размещены точно на окружности, то их цвет изменится на зеленый. Цвет соответствующих идентификаторов в первом кадре станет желтым (Рисунок 4.29).

8. Нажатие клавиши Enter или выбор команды Control > Play (Управление > Воспроизвести) запускает просмотр созданной анимации. Теперь круг будет не только менять цвет, но и вращаться относительно вертикальной оси.

9. Команда File > Save (Файл > Сохранить) позволяет сохранить файл анимации с расширением FLA для дальнейшей работы над ней.

Преобразование формы автоматическое и с использованием идентификаторов

Рисунок 4.15. Преобразование формы: автоматическое и с использованием идентификаторов

Для применения анимации формы (shapes-tweened) к группам, символам, текстовым блокам и растровым изображениям их предварительно следует преобразовать командой Modify > Break Apart (Изменить > Разбить на части). По этой команде разрывается связь между экземпляром и символом, превращая экземпляр в набор несвязанных линий и фигур, что позволяет изменять его, не оказывая воздействия на другие экземпляры. Изменения символа в дальнейшем также не будут влиять на данный экземпляр.
Рассмотрим последовательность действий при создании анимации формы:

1. Выделим слой и пустой ключевой кадр на нем, с которого начнется анимация.

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

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

4. Создаем новый объект в этом кадре, к которому должен быть преобразован исходный объект.

5. Выполним команду Window > Panels > Frame (Окно > Панели > Кадр), чтобы открыть панель Frame (Кадр).

6. Из раскрывающегося списка Tweening (Расчет) выбирем значение Shape (Форма).

7. Зададим значение Easing (Плавность) в диапазоне от -100 до 100, определяя скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные — быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.

8. В раскрывающемся списке Blend (Переход) выбираем значение Distributive (Распределенный) — для гладких промежуточных форм или значение Angular (Острый) — для сохранения четких углов и прямых линий в промежуточ ных формах. Последнее значение применимо только к формам, имеющим острые углы и прямые линии, в противном случае автоматически будет задано значение Distributive (Распределенный).

Пример покадровой анимации с использованием рисунков

Рисунок 4.18. Пример покадровой анимации с использованием рисунков

Привязка объекта к траектории

Рисунок 4.12. Привязка объекта к траектории

Рассмотрим последовательность действий при создании анимации с движением объекта по заданной траектории:

1. Создадим анимацию движения одним из способов, рассмотренных ранее.

2. При установке флажка Orient to Path (Ориентация на траекторию) базовая линия группы анимируемых объектов будет двигаться параллельно заданной траектории. Для фиксации на траектории регистрационной точки объекта устанавливается флажок Snap (Привязка).

3. Выполняем команду Insert > Motion Guide (Вставка > Траектория движения). Flash создаст над выделенным слоем новый слой со значком направляющей слева от имени.

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

5. Чтобы сделать траекторию невидимой, следует щелкнуть на пересечении строки направляющего слоя и отмеченного значком глаза столбца.

Размещение идентификаторов формы в конечном кадре

Рисунок 4.29. Размещение идентификаторов формы в конечном кадре

Упражнение 4.4. Создание последовательности кадров для пошаговой анимации

1. Щелчком по кнопке New (Создать) либо выбором команды File> New (Файл > Создать) создадим новый фильм. Для отображения на экране временной диаграммы выполняем команду View >Timeline (Вид > Ось времени).

2. В окне Timeline (Ось времени) выделяем слой и кадр, с которого начнется анимация. Если кадр не является ключевым, то выполняем команду Insert > Keyframe (Вставка > Ключевой кадр).

3. Помещаем на стол изображение первого кадра последовательности. Это можно сделать с помощью инструментов рисования, импорта готового изображения или вставки графики из буфера обмена.

4. Щелчком правой кнопки мыши по следующему кадру этого же слоя открываем контекстное меню и выполняем команду Insert Keyframe (Вставить ключевой кадр). Таким образом, в последовательность добавляется новый ключевой кадр с таким же, как и в первом кадре, содержанием.

5. Изменим содержание этого кадра нужным образом (можно также импортировать следующее изображение, подготовленное в каком-либо графическом редакторе), что дает следующий кадр будущей анимации.

6. Повторяем шаги 4 и 5 до тех пор, пока не будет сформировано необходимое превращение. Воспроизведение анимации с помощью клавиши Enter позволяет контролировать работу в любой момент.
7. Готовый фильм сохраняется по команде File > Export Movie (Файл > Экспорт фильма), что позволяет создать файл с расширением SWF, предназначенный для воспроизведения с помощью Flash-проигрывателя, но не подлежащий дальнейшему редактированию.

Упражнение 4.5. Присоединение звукового файла к анимации

1. При открытом файле фильма Macromedia Flash вставим новый слой командой Insert > Layer (Вставка > Слой).

2. По команде File > Import (Файл > Импорт) открываем окно задания местонахождения файла и выбираем нужный звуковой файл. При необходимости импортировать несколько файлов последовательно повторяем эти действия. Все импортированные файлы будут помещены в библиотеку.

3. Для назначения слою звукового файла следует открыть панель Sound (Звук), где в одноименном раскрывающемся списке выбираем один из импортированных файлов. Список будет доступен, если в слое выделены все кадры, с которыми он должен воспроизводиться.

4. С помощью кнопки Edit (Правка) вызовите окно правки звука Edit Envelope (Правка звука), где задайте эффект или уровни громкости, проверяя характер звучания с помощью кнопки.воспроизведения (Рисунок 4.19), и щелчком по кнопке ОК закройте окно.

Упражнение 4.6. Присоединение нескольких звуковых файлов

1. Вставляем новый слой по команде Insert > Layer (Вставка > Слой), выделяем кадр, с которого должен начаться звук, и выполняем команду Insert > Keyframe (Вставка > Ключевой кадр). При выделенном ключевом кадре вызываем окно его свойств командой Modify > Frame (Изменить > Кадр).

2. На панели Sound (Звук) в одноименном раскрывающемся списке выбираем один из импортированных файлов. Редактируем звук с помощью инструментов Macromedia Flash и назначаем эффекты, проверяя характер звучания с помощью кнопки воспроизведения. Щелчком по кнопке О К закрываем окно.

3. Результат одновременного воспроизведения звука проверяем по команде Control > Test Movie (Управление > Проверить фильм).

4. Если какой-либо из звуков должен иметь собственные параметры экспорта, то по команде Window > Library (Окно > Библиотека) вызываем библиотеку, в которой перечислены импортированные звуки, и, выделив нужный звук щелчком правой кнопки, выбираем команду Properties (Свойства). В окне свойств звука задаем требуемые параметры компрессии.

5. При экспорте фильма имеется возможность создать отдельный звуковой файл в формате WAV, объединяющий все звуки фильма. Для этого по команде File > Export Movie (Файл > Экспорт фильма) открываем окно задания имени и типа файла и в раскрывающемся списке File Type (Тип файла) выбираем WAV.

Назад

Содержание

Размещение идентификаторов формы в первом кадре

Рисунок 4.28. Размещение идентификаторов формы в первом кадре

Редактирование анимации

Редактирование анимации

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

Регулировка уровня звука в окне Edit Envelope

Рисунок 4.22. Регулировка уровня звука в окне Edit Envelope

Щелчок на кнопке Edit (Правка) открывает дополнительное окно Edit Envelope (Правка звука), в котором можно изменить выбранный эффект и вручную задать уровень громкости звука и моменты начала и конца его воспроизведения. Для каждого из каналов (верхний — левый, нижний — правый) можно задать до восьми маркеров настройки громкости, перемещением которых регулируют уровень звука в канале. Специальные бегунки Time In (Начальный момент) и Time Out (Конечный момент), расположенные на оси числа кадров или времени, задают участок звукового файла, подлежащий воспроизведению. Невыделенная часть звукового файла не сохраняется в фильме, что уменьшает общий размер его файла.

Результат расчета промежуточных кадров анимации

Рисунок 4.10. Результат расчета промежуточных кадров анимации

При каждом изменении положения ключевых кадров либо изменении их содержимого Flash автоматически рассчитывает промежуточные кадры.
Рассмотрим последовательность действий при создании анимации движения с помощью задания параметров на панели Frame (Кадр):

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

2. Создаем на рабочем столе экземпляр, группу или текстовый блок либо перетаскиваем экземпляр символа из окна библиотеки. Рисованный объект следует преобразовать в символ.

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

4. Чтобы изменить экземпляр, группу или текстовый блок в последнем кадре, можно выполнить следующее: переместить их в новую позицию, изменить размер, угол поворота или скоса, изменить цвет экземпляра или текста.

5. Выполняем команду Window > Panels > Frame (Окно > Панели > Кадр), чтобы открыть панель Frame (Кадр). В раскрывающемся списке Tweening (Расчет) выбираем значение Motion (Движение).

6. При изменении размера объекта следует установить флажок Scale (Масштабировать).

7. Значение Easing (Плавность) задаем в диапазоне от -100 до 100, определяя тем самым скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные — быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.

8. Вращение можно задать выбором значения из раскрывающегося списка Rotate (Поворот). По умолчанию вращения нет. Значение CW соответствует вращению по часовой стрелке, a CCW — против, с указанием требуемого числа оборотов. Это вращение будет добавлено к повороту объекта, заданному на шаге 4.

9. Флажок Orient to Path (Ориентация на траекторию) устанавливается в случае, если задана криволинейная траектория движения.

10. Флажок Synchronize (Синхронизировать) позволяет синхронизировать число кадров анимации с числом экземпляров графики, если они различны.

11. При заданной траектории движения флажок Snap (Привязка) фиксирует на ней анимируемый экземпляр.

Сохранение файла с анимацией

Сохранение файла с анимацией

Файлы Flash сохраняются в формате FLA по команде File > Save (Файл > Сохранить) под ранее выбранным именем либо по команде File > Save As (Файл > Сохранить как) для указания нового имени и месторасположения. При необходимости вернуться к последней сохраненной версии файла можно воспользоваться командой File > Revert (Файл > Возврат).
При работе над анимацией предварительный просмотр текущей сцены выполняется по команде Control > Play (Управление > Воспроизвести) либо по нажатию клавиши Enter. Для удобства возврата к началу анимации и пошаговому просмотру можно вывести на экран панель Controller (Контроллер), содержащую набор кнопок управления. Для этого следует выполнить команду Window > Toolbars > Controller (Окно > Панели инструментов > Контроллер). Пошаговый просмотр возможен не только с помощью команд меню Control (Управление): Step Forward (Шаг вперед) и Step Backward (Шаг назад), но также и щелчком на одноименных кнопках панели Controller либо нажатием клавиш < и > клавиатуры.

Создание анимации движения

Создание анимации движения

Анимацию движения (motion-tweened) также можно применять к экземплярам, группам или текстовым блокам, при этом Flash поддерживает расчет промежуточных кадров при перемещении, изменении размера, поворота и скоса объектов. Дополнительно можно изменять цвет экземпляров объектов или текста, применяя градиентную смену цветов или изменяя их прозрачность. Чтобы выполнить такие изменения для группы или текстового блока, их предварительно следует преобразовать в символы командой Insert > Convert to Symbol (Вставка > Преобразовать в символ). При этом преобразуемый объект становится экземпляром этого символа.
Создать анимацию движения можно двумя способами:

Создать начальный и конечный ключевые кадры и для начального кадра установить значение Motion (Движение) в раскрывающемся списке Tweening (Расчет) на панели Frame (Кадр).

Создать начальный ключевой кадр, затем выполнить команду Insert > Create Motion Tween (Вставка > Рассчитать движение) и переместить объект в новую позицию на сцене. При этом Flash автоматически создаст заключительный ключевой кадр.

Создание анимации методом расчета кадров

Создание анимации методом расчета кадров

Анимация создается при изменении характеристик объекта в последовательности кадров: их положения, размеров, прозрачности и других свойств, причем эти изменения могут происходить одновременно. Flash поддерживает два метода создания анимации: пошаговую (frame-by-frame) и путем расчета промежуточных кадров (tweened). В последнем случае размер файла существенно уменьшается, так как Flash сохраняет только значения ключевых кадров, в которых задаются параметры объектов.
Ключевым кадром называется кадр, в котором заданы изменения анимационной сцены. Для пошаговой анимации (frame-by-frame) ключевым является каждый кадр. В анимации с расчетом промежуточных кадров (tweened) ключевые кадры определяют состояние объектов в определенные моменты, а все кадры между ними будут автоматически рассчитаны Flash. На оси времени ключевой кадр отмечен кружком, если в нем присутствуют объекты, или вертикальной чертой, если он пустой. Flash рассчитывает промежуточные кадры с учетом всех объектов, существующих в ключевых кадрах, и отмечает эту последовательность стрелкой.
Чтобы создать новый ключевой кадр, можно выбрать команду Insert > Keyframe (Вставка > Ключевой кадр) либо одноименную команду контекстного меню кадра, вызываемого щелчком правой кнопки мыши в окне оси времени.
Flash может рассчитывать промежуточные кадры для анимации двух типов:

анимации движения, когда задаются положение, размер и поворот объекта, группы или текстового блока в один момент времени, а затем устанавливаются их новые значения в другой момент;

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

Вид окна Macromedia Flash

Рисунок 4.1. Вид окна Macromedia Flash

При открытии окна приложения Flash 5 на экране появляются следующие элементы интерфейса:

Stage (рабочий стол) — область для компоновки отдельных кадров, создания композиции из графических элементов или импортированных точечных изображений и просмотра результатов анимации;

Timeline (ось времени) — окно, содержащее список отдельных слоев с расположенными на них графическими объектами и их распределением во времени (на оси времени отмечен каждый кадр фильма);

Symbols (символы) — основные элементы фильма, как правило, многократно в нем используемые;

Library (библиотека) — окно со списком символов и импортированных файлов, позволяющее выполнять их организацию и сортировку;

Floating, dockable panels (пристыковываемые панели) — окна с набором вкладок, служащие для настройки приложения и изменения параметров элементов фильма;

Movie Explorer (обозреватель фильма) — дополнительно вызываемое окно для просмотра структуры фильма.

На рабочем столе отображается композиция того кадра, который отмечен Указателем текущего кадра (Playhead) в окне Timeline (Ось времени). Представленные в окне Timeline (Ось времени) слои (Layers) можно рассматривать как стопку прозрачных пленок, содержащих графические элементы. Комбинируя эти пленки между собой, можно создать общую композицию кадра. Переходя от кадра к кадру, можно изменять композицию, отдельно управляя каждым элементом в слое и редактируя его.

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

Рисунок 4.11. Выбор параметров анимации движения

Рассмотрим последовательность действий при создании анимации по команде Create Motion Tween (Рассчитать движение):

1. Выделяем пустой ключевой кадр и изображаем на рабочем столе объект или перетаскиваем на него экземпляр символа из окна библиотеки.

2. Выполняем команду Insert > Create Motion Tween (Вставка > Рассчитать движение). Изображенный на первом шаге объект будет автоматически преобразован в символ, которому присвоено имя tween1. Последующим объектам будут присваиваться имена tween2, tween3 и т. д.

3. Щелчком указываем кадр, где должна завершиться анимация, и выполняем команду Insert > Frame (Вставка > Кадр).

4. Перемещаем объект, экземпляр или блок текста в желаемую позицию. Изменяем его размер и угол поворота, если это требуется. После всех изменений снимаем с объекта выделение. В конце последовательности кадров автоматически появляется ключевой кадр.

5. Выделяем конечный ключевой кадр последовательности и выполняем команду Window > Panels > Frame (Окно > Панели > Кадр). На открывшейся панели Frame (Кадр) автоматически должно появиться значение Motion (Движение).

6. Если был изменен размер, то следует установить флажок Scale (Масштабировать).

7. Значение Easing (Плавность) задается в диапазоне от -100 до 100, определяя скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные — быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.

8. Вращение задается выбором значения из раскрывающегося списка Rotate (Поворот). По умолчанию указывается значение Auto (Автоматически), определяемое поворотом объекта на шаге 4. Значение CW соответствует вращению по часовой стрелке, a CCW — против, с указанием требуемого числа оборотов. Это вращение будет добавлено к повороту, заданному на шаге 4.

9. Флажок Orient to Path (Ориентация на траекторию) устанавливается в случае, если задана криволинейная траектория движения.

10. Флажок Synchronize (Синхронизировать) позволяет синхронизировать число кадров анимации с числом экземпляров графики, если они различны.

11. При заданной траектории движения флажок Snap (Привязка) фиксирует на ней анимируемый экземпляр.

Выбор параметров для файла HTML

Рисунок 4.27. Выбор параметров для файла HTML

Сохранить результирующие файлы можно в одной папке с именем, выбранным по умолчанию, либо по отдельности в разных папках и под разными именами. После задания всех параметров можно перейти непосредственно к созданию требуемых файлов, щелкнув на кнопке Publish (Публиковать), либо сохранить эти установки, закрыв окно щелчком на кнопке ОК.

Назад

Содержание

Вперед

Выбор параметров для файла SWF

Рисунок 4.26. Выбор параметров для файла SWF

Выбор типов файлов в окне Publish Settings

Рисунок 4.25. Выбор типов файлов в окне Publish Settings

Так как HTML-код требуется для воспроизведения на Web-странице любого формата файла, то эта вкладка всегда активизирована и на нее помещаются нужные команды вызова в соответствии с заданными форматами.

Задание движения по траектории

Задание движения по траектории

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

Задание параметров анимации формы

Рисунок 4.16. Задание параметров анимации формы

Чтобы контролировать сложные превращения формах, используют идентификаторы формы (shape hints). Они определяют точки, которые в исходной и завершающей формах должны соответствовать друг другу.
Идентификаторы формы (shape hints), помеченные буквой латинского алфавита, представлены желтым цветом в начальном и зеленым цветом в конечном ключевых кадрах. Красный цвет идентификатора означает, что он расположен не на кривой и не может участвовать в трансформации. При использовании идентификаторов формы следует придерживаться нескольких правил:

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

Порядок идентификаторов должен сохраняться как в начальном положении фигуры, так и в конечном положении, чтобы не нарушалась их логическая последовательность (например, если на первом ключевом кадре abc, на следующем не должно быть acb).

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

Задание параметров фильма в Macromedia Flash

Рисунок 4.5. Задание параметров фильма в Macromedia Flash

Палитра Background color (Цвет фона) позволяет выбрать цвет фона кадров. Раскрывающийся список Ruler Units (Деления линейки) задает единицы измерения, используемые для линеек и координат объектов. Щелчок на кнопке ОК окна присваивает выбранные параметры фильму. Timeline (Ось времени) позволяет отобразить композицию любого кадра и выполнить ее редактирование. Кадры, определяющие изменения в фильме, должны быть сделаны ключевыми, что необходимо для расчета промежуточных кадров методом tweened animation. Количество рассчитываемых кадров можно менять, перетаскивая ключевой кадр вдоль оси времени.
С кадрами можно выполнять следующие операции: выделение, перемещение, копирование и вставка, удаление, преобразование в ключевые и наоборот.
Чтобы вставить кадр, выбирают команду Insert > Frame (Вставка > Кадр). Чтобы создать ключевой кадр, следует выбрать команду Insert > Keyframe (Вставка > Ключевой кадр). Для создания пустого ключевого кадра используют команду Insert > Blank Keyframe (Вставка > Пустой ключевой кадр). Аналогичные команды доступны в контекстном меню кадра, вызываемом щелчком правой кнопки мыши. Чтобы удалить кадр, ключевой кадр или последовательность кадров, их предварительно следует выделить, а затем выполнить команду Insert > Remove Frame (Вставка > Удалить кадр). Последовательность кадров можно переместить на новое место простым перетаскиванием с помощью мыши. При необходимости изменить продолжительность последовательности кадров, рассчитанной по методу tweened animation, ее ключевой кадр перемещают при нажатой клавише Alt. Чтобы скопировать кадр или последовательность кадров, следует предварительно выполнить их выделение, затем выбрать команду Edit > Copy Frames (Правка > Копировать кадры), после чего, перейдя на место вставки, выделить заменяемые кадры и выполнить команду Edit > Paste Frames (Правка > Вставить кадры).
Преобразовать ключевой кадр в обычный можно по команде Insert > Clear Keyframe (Вставка > Очистить ключевой кадр). В этом случае вся рассчитанная последовательность кадров заменяется на содержимое кадра, предшествующего ключевому.
При большом количестве объектов и значительной продолжительности фильма для управления его содержанием удобно пользоваться окном Movie Explorer (Обозревательфильма). С его помощью при работе над фильмом можно выполнять целый ряд действий:

поиск элементов по их названию;

поиск всех экземпляров определенного символа;

отображение свойств элемента;

отображение заданных категорий объектов в окне обозревателя;

выделение элементов для редактирования;

замена определенного шрифта другим во всех местах его использования;

копирование текста в буфер обмена для контроля его правописания в текстовом редакторе;

знакомство ср структурой фильма, созданного другим разработчиком;

печать иерархической структуры объектов фильма из окна обозревателя.

Анимация для Интернет

Анимация объекта с искажением

Рисунок 5.21. Анимация объекта с искажением

Упражнение 5.3. Анимация с помощью пошаговых переходов

1. Командой File > New (Файл > Создать) создадим новую композицию.

2. Выберем инструмент Polygon (Многоугольник) и изобразим пятиугольник в левом верхнем углу листа области (Stage).

3. Преобразуем его в звезду, переместив один из средних узлов ближе к центру пятиугольника.

4. Щелчком по желтому квадрату на палитре заливаем звезду желтым цветом.

5. Удалим контур звезды, открыв кнопкой Outline (Абрис) дополнительную панель и выбрав на ней кнопку No Outline (Без абриса).

6. С помощью инструмента Rectangle (Прямоугольник) изобразим прямоугольник в правом нижнем углу композиции, придав ему такие же свойства (желтая заливка, без контура).

7. Выделим оба объекта.

8. Щелчком на кнопке Interactive Tools (Интерактивные инструменты) открываем дополнительную панель и выбираем кнопку Interactive Blend (Интерактивный переход).

9. На панели свойств (Property Bar) в списке Preset (Установки) выбираем значение — Straight 20 Step.

10. Выполняем команду Movie > Create Sequence From Blend (Фильм > Создать ряд перехода), которая создает линию жизни заданной длины для объекта.

11. Теперь можно просмотреть получившийся эффект преобразования типа объекта в движении.

12. Выполним экспорт анимации в GIF-файл, для чего выберем команду File > Export (Файл > Экспорт) и в окне Export (Экспорт) зададим имя файла STAR3 .GIF с указанием типа: GIF-Animation.

13. Дополнительное задание к упражнению: для создания простой трансформации объектов проделайте все вышеуказанные действия для звезды и прямоугольника, расположенных в центре композиции один над другим.

Анимация объектов

Анимация объектов

Corel R.A.V.E. позволяет анимировать объекты путем изменения их от кадра к кадру в течение всего времени их демонстрации. Рассмотрим основные методы создания таких изменений.
Метод расчета промежуточных кадров (tweened animation) позволяет анимировать статические объекты, плавно меняя их свойства от момента появления в фильме до момента исчезновения. Чтобы анимировать объект этим методом, следует преобразовать конечный кадр на его линии жизни в ключевой, а затем изменить объект в этом кадре. Одновременно с этим в ключевой преобразуется также начальный кадр, сохраняя информацию об исходном состоянии объекта. Это позволяет получить переход объекта из одного состояния в другое.

Анимация по методу tweened animation

Рисунок 5.5. Анимация по методу tweened animation

Можно создать анимацию подобного типа, преобразовывая в ключевой также промежуточный кадр на линии жизни с изменением свойств объекта в этом кадре. Это дает возможность получить объект, который изменяется из исходного состояния в модифицированное, а затем возвращается в исходное.
Программа Corel R.A.V.E. позволяет выполнять расчет промежуточных кадров, изменяя следующие свойства объектов: размер (size), положение (position), угол поворота (rotation angle), абрис (outline), — а также применяя такие эффекты, как контур (contour), прозрачность (transparency), заполнение (fill), оболочка (envelope), искажение (distortion), тень (drop shadow). Одновременно можно выполнять расчет с изменением параметров нескольких свойств или эффектов.
Чтобы преобразовать статический объект в анимированный, его предварительно следует выделить. Затем в окне Timeline (Ось времени) нужно щелкнуть по последнему кадру линии жизни этого объекта и выполнить команду Movie > Insert keyframe (Фильм > Вставить ключевой кадр). Задать ключевой кадр можно также двойным щелчком по нужному месту линии жизни объекта. Изменение объекта в рабочей области достигается редактированием его параметров или параметров эффектов, примененных к нему. (Все эти действия можно применить к объекту, существующему более чем в одном кадре.)
Чтобы создать нужный эффект анимации, следует выполнить соответствующие изменения. Так, для создания эффекта движения следует переместить объект в новую позицию на экране. Для изменения его размера можно задать точные значения в полях Scale factor (Коэффициент масштабирования) на Панели свойств (Property bar) либо мышью изменить размеры, перемещая угловые размерные маркеры. Дополнительный щелчок мыши по объекту изменит на экране вид этих маркеров на поворотные с расположенными по углам объекта двойными стрелками, позволяющими изменить угол поворота объекта. Другие маркеры с двойными стрелками, расположенные по центру каждой из сторон объекта, позволят выполнить его сдвиг.
Для создания движения объекта по произвольной траектории необходимо предварительно выделить объект. Если он существует только в одном кадре, то следует увеличить время его жизни, растянув линию в окне Timeline (Ось времени). Установив указатель текущего времени на последний кадр этой линии, командой Movie > Insert keyframe (Фильм > Вставить ключевой кадр) делаем его ключевым. В рабочей области переместим объект в конечное положение. С помощью инструмента Freehand (Произвольная кривая) нарисуем также траекторию движения, а в окне Timeline (Ось времени) переместим точку, отображающую эту траекторию, в начальный кадр движущегося объекта. Нажав клавишу пробела, щелчком выделяем имя объекта в окне Timeline (Ось времени). Выполним команду Movie > Attach to path (Фильм > Привязать к пути) и щелкнем на траектории. В результате анимированный объект будет связан с указанной траекторией и станет перемещаться вдоль нее.
Метод расчета промежуточных кадров (tweened animation) позволяет создать интересные эффекты движения объекта как по прямой, так и по произвольной траектории при одновременном его вращении. Если добавить изменение его размера, то можно добиться иллюзии приближения или удаления, а наклон (skew) придает также свойство глубины. Сложные эффекты достигаются последовательным применением набора эффектов, подобно некоторым примерам, представленным в табл. 5.1.
Таблица 5.1. Эффекты с расчетом промежуточных кадров

Создание эффекта анимации	Расчет промежуточных кадров для эффекта
Растворение	Прозрачность (Transparency)
Изменение цвета и узора	Заливка (Fill)
Изменение очертаний	Оболочка, искажение (Envelope, Distortion)
Движение блика по объекту	Тень, прозрачность (Drop shadow, Transparency)
Свечение	Заливка, тень (Fill, Drop shadow)

Можно также одновременно анимировать группу объектов. Эта возможность наиболее полезна при анимации импортированных картинок. Для анимации группы объектов ключевой кадр задается в окне Timeline (Ось времени) на линии жизни группы с редактированием в рабочей области сразу всей группы объектов. Все анимированные объекты группы будут одновременно появляться на экране и изменяться одинаковым образом. Например, одновременно изменять свой цвет.

Для анимации группы следует объединить объекты в группу командой Arrange > Group (Монтаж > Группировать), затем выделить имя этой группы в окне Timeline (Ось времени). Если для нее еще не существует линии жизни, то необходимо растянуть точку, обозначающую группу, задав начальный и конечный кадры. Выделив нужный кадр на линии, выполняем команду Movie > Insert keyframe (Фильм > Вставить ключевой кадр) и изменяем положение группы объектов. Задать ключевой кадр можно также двойным щелчком мыши по нужной позиции. Следует отметить, что если для отдельных объектов группы уже была задана анимация, то она будет утрачена после анимации группы в целом. При изменении положения группы объектов все они будут двигаться по прямой линии, однако им можно назначить траекторию, так же как и отдельно взятому объекту. Возможно также редактирование сразу всей группы объектов путем добавления или удаления ключевых кадров.

Анимация с помощью пошагового перехода

Рисунок 5.7. Анимация с помощью пошагового перехода

Для перехода, выполняющегося вдоль произвольной траектории, следует предварительно нарисовать кривую траектории движения. Затем выбрать тип перехода и выполнить команду Movie > Attach to path (Фильм > Привязать к пути). Щелкнув на траектории и присвоив ее выделенным объектам, выполняют команду Movie > Create sequence from blend (Фильм > Создать ряд перехода).

Покадровая анимация объектов (frame-by-frame animation) дает возможность создавать эффекты, которые не могут быть получены с помощью метода расчета промежуточных кадров (tweened animation). Так как для покадровой анимации все кадры должны быть преобразованы в ключевые и отредактированы соответствующим образом, то это приводит к существенному увеличению размера результирующего файла.

Прежде чем вручную задавать изменения объекта, его следует выделить. Затем двойным щелчком по линии жизни объекта в окне Timeline (Ось времени) делают кадр ключевым и изменяют его параметры на панели атрибутов либо в рабочей области непосредственно изменяют сам объект. Повторение этих действий для всех последующих кадров на линии жизни объекта позволяет контролировать его поведение и свойства.

Анимация объектов, существующая в нескольких кадрах фильма, может быть повторена на всем его протяжении. Для этого следует щелкнуть по стрелке у имени объекта или группы в окне Timeline (Ось времени), изменив ее на значок цикла. При циклическом повторении анимации линия жизни объекта также повторяется на протяжении всего фильма, причем все линии, кроме первой, имеют серый цвет и не могут быть отредактированы, однако отражают все изменения, выполненные с оригинальным объектом, отмеченным основной линией. Можно повторять анимацию всей группы либо отдельного объекта в группе, в последнем случае число повторений анимации объекта определяется временем демонстрации данной группы.

Для использования повторяющихся анимаций в других фильмах следует сохранить повторяющуюся часть в отдельном файле. С этой целью в окне Timeline (Ось времени) следует выделить циклически повторяющийся объект или группу объектов и выполнить команду File > Save As (Файл > Сохранить как). В одноименном окне назначают оригинальное имя файлу, устанавливают флажок Selected Only (Только выделение) и, если необходимо, задают дополнительные параметры щелчком на кнопке Advanced (Дополнительно). Щелчок на кнопке Save (Сохранить) сохраняет файл. При импорте такой анимации из уже существующего GIF-файла в композицию она появляется в окне Timeline (Ось времени) в виде группы объектов. Можно отредактировать импортированную анимацию, изменяя каждый объект по отдельности. Например, можно увеличить линию жизни объекта и применить к нему метод расчета промежуточных кадров (tweened animation). Можно также отредактировать анимацию, создав пошаговый переход для группы объектов с помощью команды Movie > Create sequence from group (Фильм > Создать ряд группы).

Анимация символов текста

Рисунок 5.22. Анимация символов текста

Упражнение 5.4. Анимация текста

1. Командой File > New (Файл > Создать) откроем новую композицию, в которой создадим эффект печати текста на пишущей машинке для дальнейшего использования на Web-странице или включения в состав другой анимации.

2. Зададим начальные параметры анимации, для чего выполним команду Movie > Movie Setup (Фильм > Параметры фильма). Выделим в списке единиц измерения значение — Pixels и зададим размеры: в поле Width (Ширина) — 468, в поле Height (Высота) — 60 (это размер стандартного баннера для Web-страницы). Щелчком на кнопке ОК закроем окно.

3. Если на экране отсутствует докерное окно Timeline (Ось времени), то выполним команду Window > Dockers > Timeline (Окно > Докеры > Ось времени).

4. Создадим текст, для чего щелкнем по кнопке Text (Текст) и выберем значение Arial в списке шрифтов на панели свойств (Property Bar). В списке Font Size (Размер шрифта) зададим величину: 24. В области композиции щелкнем в точке, с которой должен начинаться текст, и наберем на клавиатуре фразу: Effect Typewri ter.

5. Инструментом Pick (Выбор) выделим всю фразу. Выполнив команду Arrange > Break Artistic Text Apart (Монтаж > Разбить артистический текст), опять выделим первое слово фразы. Снова выполним команду Arrange > Break Artistic Text Apart (Монтаж > Разбить артистический текст). Повторим это действие для второго слова — теперь все буквы представлены в окне Timeline (Ось времени) как отдельные объекты.

6. Выделим весь текст — при активном инструменте Pick (Выбор) очертим рамку вокруг всей фразы. Выполним команду Arrange > Group (Монтаж > Группировать), после чего в окне Timeline (Ось времени) появится символ группы 16 текстовых объектов.

7. Выполним команду Arrange > Order > Reverse Order (Монтаж > Порядок > Обратный), а затем команду Movie > Create Sequence From Group (Фильм > Создать ряд для группы). Не снимая выделения с фразы, копируем ее в буфер обмена командой Edit > Сору (Правка > Копировать).

8. Выполним просмотр анимации, щелкнув по кнопке Play (Воспроизвести) на панели управления.

9. В окне Timeline (Ось времени) развернем группу из 16 объектов, щелкнув по знаку (+) у ее имени. Обратите внимание на то, что каждая буква представлена точкой. Мышью переместите каждую точку вдоль оси времени до заключительного кадра (одинакового для всех букв).

10. В окне Timeline (Ось времени) выделим всю группу и щелчком правой кнопки мыши вызовем контекстное меню, в котором выберем команду Rename (Переименовать). Изменим название группы на Main Text и нажмем клавишу Enter.

11. Вставим копию группы из буфера обмена командой Edit > Paste (Правка > Вставить) и переименуем новую группу в Faded text.

12. Выделив эту новую группу, щелчком на кнопке Interactive Tools (Интерактивные инструменты) открываем дополнительную панель, в которой выбираем кнопку Interactive Transparency (Интерактивная прозрачность). На панели свойств (Property bar) выделяем в раскрывающемся списке Transparency Type (Тип прозрачности) значение Uniform, а в поле Starting Transparency (Начальное значение) задаем величину 50. Чтобы сдвинуть две группы во времени друг относительно друга, мышью перемещаем линию группы Main text на 1-2 кадра вправо.

13. Выполним просмотр анимации, щелкая по кнопке Play (Воспроизвести) на панели управления.

14. Сохраним результаты работы в файле TEXT. CLK.

Упражнение 5.5. Создание интерактивной кнопки (rollover button)
Вид интерактивной (rollover) кнопки на Web-странице изменяется при наведении на нее указателя мыши. Поэтому к ней легко можно добавить анимацию.

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

Рисунок 5.15. Анимированная интерактивная кнопка

Если связать звуковой файл с состоянием интерактивной кнопки, то он будет воспроизводиться при выполнении заданного действия. При изменении состояния кнопки воспроизведение звука прекратится.

Corel R.A.V.E. позволяет задать гиперсвязи как для интерактивных кнопок, так и для других объектов фильма, в качестве которых могут выступать текст, рисунки и т. п. Выделенному объекту назначается URL-адрес документа, размещенного в Интернете, при этом автоматически создается область (hotspot), в которой щелчок мыши активизирует гиперссылку. Эта область может совпадать с формой объекта либо с его рамкой. Для лучшей идентификации этой области можно изменить цвет ее заливки или выделить каким-либо другим способом.

Corel R.A.V.E. позволяет также указать, каким образом следует открыть документ, связанный по гиперссылке, — его можно открыть в новом окне, либо в уже открытом окне браузера, либо в одном из его фреймов. К гиперсвязи можно добавить комментарий, который будет отображаться в строке состояния браузера при наведении указателя мыши на гиперссылку.

Corel R A V E

Corel R.A.V.E

Приложение Corel R.A.V.E. (Real Animated Vector Effects) — это новая программа, которую фирма Corel включила в десятую версию своего графического пакета CorelDRAW. Она дополнила его функциональность новыми свойствами. Программа предназначена для создания анимации и сохранения ее в виде фильма, в первую очередь в популярном формате Macromedia Flash.
В приложении Corel R.A.V.E. (http: / / www3. corel. com) имеется большое количество инструментов рисования и создания эффектов, а также поддержка импорта изображений из других графических приложений. Созданная анимация может включать звук и содержать интерактивные элементы. Результирующий фильм можно экспортировать в файлы следующих форматов, которые поддерживают воспроизведение анимации:

GIF Animation (GIF) - анимация для Web-страниц и слайдов PowerPoint;

Video for Windows (AVI) - анимация для видеоприложений с сохранением звука;

QuickTime (MOV) — анимация для видео в формате QuickTime 4 с сохранением звука;

Macromedia Flash (SWF) — анимация для Web-страниц с сохранением звука и интерактивности.

При выполнении экспорта в формат Macromedia Flash можно не только контролировать качество файла путем задания параметров изображения и размера кадров, но и оптимизировать объекты с целью сокращения величины результирующего файла. При этом необходимо проследить, чтобы звуковой слой, если он добавлен к анимации, также был бы экспортирован во вновь создаваемый файл.
Corel R.A.V.E. позволяет анимировать как векторные, так и растровые объекты, изменяя их свойства во времени либо применяя к ним различные эффекты. Например, можно придать объекту вращение, изменение цвета, формы или размера, создать для него тень и т. п. Программа Corel R.A.V.E. поддерживает три основных метода анимации: покадровую анимацию (frame-by-frame animation), расчет промежуточных кадров (tweened animation), пошаговый переход (animating blends). Покадровая анимация требует предварительного создания рисунков всех кадров, позволяя одновременно воспроизводить движение множества объектов, в том числе и фона. Метод расчета промежуточных кадров позволяет задать ключевые кадры или объекты, а затем автоматически создать их промежуточные состояния. Анимация с пошаговыми переходами позволяет выполнять преобразование типа объектов.

Информация о проблемах публикации

Рисунок 5.18. Информация о проблемах публикации

Ha вкладке Issues (Ценные замечания) представлена информация об ошибках или даны предупреждения о возможных проблемах публикации. Эти данные можно получить, воспользовавшись специальным инструментом (preflight feature). Он проверяет файл Macromedia Flash и сообщает о возникающих проблемах и возможных путях их решения.

Щелчок на кнопке Export (Экспорт) окна Flash Export (Flash-экспорт) приводит к созданию SWF-файла и соответствующей Web-страницы.

в любом другом приложении фирмы

Интерфейс Corel R.A.V.E. 2.0

Как и в любом другом приложении фирмы Corel, при первоначальном запуске программы открывается стартовое диалоговое окно, предлагающее на выбор: создать новую анимацию, открыть одну из существующих либо последнюю, над которой надо Продолжить работу (Рисунок 5.1). Если выбрать первый пункт — создание новой анимации, то открывшееся окно приложения будет иметь вид, подобный представленному на Рисунок 5.2.

Изобразительные возможности Подобно

Изобразительные возможности

Подобно другим графическим приложениям пакета фирмы Corel, программа R.A.V.E. предлагает большое количество инструментов рисования.

Это и создание прямых и кривых линий различного типа, подобных нарисованным вручную либо изображаемых с помощью специальных элементов управления, как это происходит при создании линий Безье. Возможно также изображать линии каллиграфического типа, толщина которых зависит от направления линии и варьируется путем задания угла наклона пера (calligraphic angle). К изображенным линиям можно в дальнейшем применить форматирование, включая различные виды мазков кистью (brush strokes). Для таких линий, как каллиграфические, имеющих толщину, можно применять заливку, подобно любому другому объекту. Форматирование можно применить также к абрисам, ограничивающим объекты.

Ошибка при рисовании линий вручную может быть незамедлительно исправлена стиранием последнего участка изображаемой линии. Используя графический планшет с пером, реагирующим на силу нажима, можно создавать линии с изменением толщины вдоль ее оси.

Как для линий, так и для их абриса можно задавать различные цвета, толщину, стиль, тип завершения для линий и форму углов для фигур. Абрис можно удалить либо провести на заданном расстоянии от объекта, а также создать каллиграфический абРисунок

Corel R.A.V.E. предлагает также набор заготовок геометрических фигур, таких как прямоугольники, эллипсы, дуги, спирали, многоугольники, звезды, сетки и др. В дальнейшем их можно преобразовать, используя специальные эффекты, либо заменить одну фигуру другой.

К созданной геометрической фигуре можно применить заливку цветом, узором, текстурой либо использовать специальные виды заливки. После выполнения заливки объекта все новые объекты автоматически будут создаваться с тем же типом заливки. Corel R. A.V.E. предлагает следующие специальные типы заливки: равномерная (uniform), градиентная (fountain), шаблоном (pattern), текстурой (texture), по сетке (mesh). Напомним, что для объектов с заливкой анимация с расчетом промежуточных кадров в большинстве случаев не может быть выполнена.

Назначение кнопке гиперссылки

Рисунок 5.23. Назначение кнопке гиперссылки

1. Если на экране отсутствует панель инструментов Internet, то отобразим ее, выбрав команду Window > Toolbars > Internet (Окно > Панели инструментов > Интернет).

2. Создадим заготовку кнопки для основного состояния (Normal). Изобразим окружность с помощью инструмента Ellipse (Эллипс), удерживая нажатой клавишу Ctrl. Точный диаметр окружности можно задать на панели свойств (Property bar) в поле Object Size (Размер объекта). Создадим окружность диаметром 48 пикселов.

3. Выполним заливку окружностей. Щелчком на кнопке Interactive tool (Интерактивные инструменты) открываем дополнительную панель и выбираем на ней кнопку Interactive Fill (Интерактивная заливка). Тип заливки выбираем из раскрывающегося списка Fill Type на панели свойств (Property Bar). В нашем случае используем значение Radial. Выделяем окружность и при необходимости перемещаем управляющие маркеры заливки.

4. Чтобы удалить для окружности абрис, следует щелчком на кнопке Outline tool (Инструменты обводки) открыть дополнительную панель и выбрать на ней кнопку No outline (Без абриса).

5. Преобразуем созданный объект в интерактивную кнопку, для чего щелкнем на кнопке Create Rollover (Создать интерактивную кнопку) панели Internet либо выполним команду Effects > Rollover > Create Rollover (Эффекты > Интерактивная кнопка > Создать интерактивную кнопку). Если окно Timeline (Ось времени) отображено на экране, то, щелкнув на значке (+) у нового объекта Rollover, увидим три состояния: Normal, Over и Down.

6. По команде Effects > Rollover > Edit Rollover (Эффекты > Интерактивная кнопка > Правка интерактивной кнопки) либо щелчком на кнопке Edit Rollover (Правка интерактивной кнопки) панели Internet переходим в режим редактирования объекта типа Rollover. В окне композиции появятся три закладки: Normal, Over и Down.

7. Отредактируем состояния интерактивной кнопки. Как правило, нет необходимости редактировать состояние Normal, но следует внести изменения в состояния Over и Down.

8. Добавим к состоянию Over эффект сияния (glow effect). Для этого перейдем на вкладку Over и выделим окружность. Щелчком по кнопке Interactive Tools (Интерактивные инструменты) раскрываем дополнительную панель инструментов и щелкаем на кнопке Interactive Dropshadow (Интерактивная тень). На панели свойств (Property bar) в списке Preset (Установки) выбираем значение Large Glow (Большое сияние).

9. Состоянию Down придадим эффект нажатия кнопки, используя изменение направления заливки на противоположное.

10. Для выхода из режима редактирования кнопки щелкнем на кнопке Finish Editing Rollover (Завершить правку интерактивной кнопки) панели Internet.

11. Выполним предварительный просмотр результатов работы, щелкнув на кнопке Live Preview of Rollover (Просмотр интерактивной кнопки) панели Internet.

12. Теперь кнопке можно назначить гиперссылку на определенный URL-адрес, вводя его в соответствующее поле панели инструментов Internet.

13. Для экспорта кнопки предварительно выделим ее и щелкнем на кнопке Exportin Flash format and embeds in HTML file (Экспорт в формат Flash и встраивание в файл HTML) панели Internet. В окне Export (Экспорт) устанавливаем флажок Selected Only (Только выделение) и задаем имя Button. Щелчок на кнопке Export (Экспорт) создает файл Button. SWF, в котором сохраняются все три состояния вместе с управляющим кодом.

Назначение объекту траектории

Рисунок 5.20. Назначение объекту траектории

Упражнение 5.1. Анимация движения и цвета

1. По команде File > New (Файл > Создать) откроем новую композицию.

2. Выберем инструмент Polygon (Многоугольник) и нарисуем фигуру с семью углами в левом верхнем углу листа в области (Stage).

3. Преобразуем ее в звезду, переместив один из средних узлов ближе к центру семиугольника.

4. Щелчком на красном квадрате палитры заполним семи-лучевую звезду красным цветом.

5. Чтобы контур звезды также был красным, кнопкой Outline (Абрис) открываем панель и выбираем на ней кнопку Outline Color (Цвет абриса). В открывшемся окне на вкладке Palettes (Палитра) выбираем образец красного цвета и закрываем окно щелчком на кнопке ОК.

6. Если на экране отсутствует докерное окно Timeline (Ось времени), то выполняем команду Window > Dockers > Timeline (Окно > Докеры > Ось времени).

7. Выделяем звезду с помощью инструмента Pick (Выбор). В окне Timeline (Ось времени) она будет представлена точкой на первом кадре будущей анимации.

8. Мышью перемещаем эту точку к тридцатому кадру. При этом указатель текущего времени также переместился на 30-ю позицию и появилась линия жизни объекта Polygon, охватывающая все 30 кадров.

9. Вставим ключевой кадр, для чего выполним команду Movie > Insert Keyframe (Фильм > Вставить ключевой кадр). Черные точки заменяются квадратами, что показывает наличие ключевых кадров в этих позициях.

10. С помощью инструмента Pick (Выбор) выделяем один из концов звезды и изменяем ее размер. Затем перемещаем звезду в нижний правый угол.

11. С помощью мыши возвратим указатель времени к первому кадру анимации.

12. Для ее просмотра щелкаем на кнопке Play (Воспроизвести) на панели управления, расположенной в нижнем левом углу рабочего окна.

13. Для добавления к анимации смены цвета снова переместим указатель времени на 30-й кадр и щелкнем по ключевому кадру в окне Timeline (Ось времени). Выберем на палитре другой образец цвета (например, желтый).

14. Повторяем просмотр созданного эффекта анимации.

15. Для задания произвольной траектории движения объекта установим указатель текущего времени на первый кадр.

16. С помощью инструмента Freehand (Произвольная кривая) нарисуем изгибающуюся кривую, которая будет служить траекторией.

17. В окне Timeline (Ось времени) выделим имя звезды (Polygon). Выберем команду Movie > Attach to Path (Фильм > Привязать к пути) и щелкнем в любом месте траектории.

18. Для расчета всех промежуточных кадров щелкнем на кнопке Set Tween Along Full Path (Задать расчет вдоль всего пути) панели свойств (Property Bar). При желании, чтобы звезда при перемещении еще и вращалась, можно щелкнуть по кнопке Rotate Along Path (Вращение вдоль пути) панели свойств (Property Bar).

19. Выполним просмотр анимации с помощью кнопки Play (Воспроизвести).

20. Сохраним результаты работы в файле STAR1. CLK в собственном формате программы Corel R.A.V.E., что позволит в дальнейшем продолжить работу над ней.

Упражнение 5.2. Применение эффектов анимации к объекту

1. По команде File > New (Файл > Создать) создадим новую композицию, в которой изобразим желтую звезду на черном фоне.

2. Выберем инструмент Polygon (Многоугольник) и нарисуем пятиугольник в левом верхнем углу листа области (Stage).

3. Преобразуем его в звезду, переместив один из средних узлов ближе к центру пятиугольника.

4. Щелчком на желтом квадрате палитры зальем звезду желтым цветом.

5. Чтобы контур звезды также был желтым, кнопкой Outline (Абрис) открываем панель и выбираем на ней кнопку Outline Color (Цвет абриса). В открывшемся окне на вкладке Palettes (Палитра) выбираем желтый квадрат и закрываем окно щелчком на кнопке ОК.

6. Для создания черного фона выполняем команду Movie > Movie Setup (Фильм > Параметры фильма). В левой части открывшегося окна Options (Параметры) отмечаем свойство Background (Фон). Устанавливаем переключатель в положение Solid (Непрозрачный) и выбираем из раскрывающейся палитры черный цвет. Щелчком на кнопке О К закрываем окно. Рисунок готов, теперь к нему можно применять эффекты анимации.

7. В докерном окне Timeline (Ось времени) переместим точку до тридцатого кадра, задавая таким образом продолжительность демонстрации звезды.

8. Указатель времени устанавливаем на отметку 15 и отмечаем этот кадр как ключевой выбором команды Movie > Insert Keyframe (Фильм > Вставить ключевой кадр).

9. Теперь можно применить эффект. Щелчком на кнопке Interactive Tools (Интерактивные инструменты) открываем дополнительную панель и выбираем кнопку Interactive Distortion (Интерактивное искажение). В списке Preset (Установки) панели свойств (Property bar) выбираем имя одного из предлагаемых параметров эффекта (zipper, twister или push-pull). Для применения эффекта огибающей следует выбрать кнопку Interactive Envelope,(Интерактивная огибающая) и, выделив один из узлов звезды, переместить его в другую точку. Для применения эффекта прозрачности следует выбрать кнопку Interactive Transparency (Интерактивная прозрачность) и, добавив ключевые кадры через каждые 5 кадров, задать разную величину радиуса, используя значение типа Radial.

10. Для просмотра анимации щелкаем на кнопке Play (Воспроизвести) панели управления, расположенной в нижнем левом углу рабочего окна

11. Сохраним результаты работы в файле STAR2 . CLK.

Окно приложения Corel R A V E

Рисунок 5.2. Окно приложения Corel R.A.V.E.

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

панель свойств (Property bar) — плавающая панель, элементы которой задают параметры текущего выбранного инструмента;

набор инструментов (Toolbox), предназначенных для создания и редактирования объектов, который содержит специальные кнопки (Flyout) с раскрывающимися панелями однотипных инструментов;

докерное окно с осью времени (Timeline), позволяющее управлять объектами во времени и организовать их анимацию;

цветовая палитра (Palette), определяющая набор используемых в анимации цветов.

Кроме того, командой Tools > Scrapbook (Инструменты > Записная книжка) можно открыть специальное окно Scrapbook (Записная книжка), предназначенное для создания и просмотра библиотек рисунков, фотографий и фонов с целью их использования в создаваемой анимации (Рисунок 5.3).
В рабочей области (Stage) отображается только текущий кадр анимации (current frame), композиция в котором может состоять из нескольких объектов. Номер этого кадра определяется указателем времени в виде синей стрелки (playhead) окна Timeline (Ось времени).

Окно Startup при запуске Corel R A V E

Рисунок 5.1. Окно Startup при запуске Corel R.A.V.E.

Отображение объектов в окне Timeline

Рисунок 5.4. Отображение объектов в окне Timeline

При создании в рабочей области нового объекта он существует только в текущем кадре и представлен одной точкой в окне Timeline (Ось времени). Чтобы увеличить число кадров, в которых будет отображаться этот объект, необходимо мышью растянуть линию из данной точки к начальному и конечному кадрам. В дальнейшем положение этих кадров может быть изменено в любой момент. В результате будет создан статический объект, отображаемый во всех последовательных кадрах, соответствующих линии жизни объекта.
Corel R.A.V.E. позволяет вкладывать векторные или точечные объекты (например, фотографии) внутрь другого объекта, который называется в этом случае контейнером. Контейнером может служить любой объект (прямоугольник, артистический текст и т. п). Если вложенный объект (content) будет по размеру больше контейнера, то он обрезается по форме контейнера. Вместе они носят наименование РоwerClip (Фигурная обрезка). Возможно создавать сложные конструкции из вложенных друг в друга объектов PowerClip. Кроме того, можно копировать содержимое (content) из одного объекта PowerClip в другой. Созданный объект Power-Clip можно редактировать, причем независимо можно изменять как вложенный объект, так и сам контейнер. Corel R.A.V.E. поддерживает импорт большинства существующих графических и текстовых форматов, в том числе таких, как AI, BMP, CDR, CMX, CPT, DWG, DXF, FPX, GIF, HTM, JPG, PCD, PCT, PCX, PNG, PSD, RIFF, TGA, TIP, WPG, EPS, DOC, PDF, WPD. Поэтому изображения для анимации можно подготовить в любом доступном графическом редакторе.

Отображение промежуточных состояний объектов в режиме кальки

Рисунок 5.9. Отображение промежуточных состояний объектов в режиме кальки

Одновременное отображение содержимого разных кадров дает возможность выполнить сравнение взаимного размещения объектов и позволяет выделять те объекты, которые не присутствуют в композиции текущего кадра. Затем выделенные объекты разных кадров можно выравнивать и располагать нужным образом в рабочей области, а также одновременно преобразовывать с помощью соответствующих команд.

Чтобы переключиться в режим кальки (Onion skin), следует щелкнуть по кнопке Show onion skin (Показать режим кальки), находящейся в окне Timeline (Ось времени). Затем c помощью мыши можно переместить граничные маркеры диапазона отображаемых кадров (onion skinning handles), задав число кадров, отображаемых в рабочей области. Чтобы работе не мешали объекты, которые не подлежат редактированию, можно скрыть соответствующие им слои в окне Timeline (Ось времени).

Предварительный просмотр отредактированной анимации выполняется с помощью встроенного проигрывателя по команде Movie > Control > Play Movie (Фильм > Управление > Воспроизвести) или щелчком по синей кнопке Play (Воспроизвести), расположенной внизу окна рабочей области. В режиме предварительного просмотра анимация циклически повторяется до тех пор, пока не будет остановлена командой Movie > Control > Stop movie (Фильм > Управление > Остановить). Кроме указанных действий команды подменю Control (Управление) или кнопки управления позволяют: встать на начало фильма (Rewind to beginning), перейти на конец фильма (Fast forward to end), перейти на следующий кадр (Step forward one frame) или на предыдущий кадр (Step back one frame).

Однако последние из перечисленных действий удобнее выполнять с помощью мыши, перемещая указатель текущего кадра (playhead) в окне Timeline (Ось времени). Перемещение этого указателя с помощью мыши вдоль линейки кадров позволяет также выполнить просмотр анимации (для чего следует удерживать клавишу Ctrl нажатой), но уже с той скоростью, с которой будет двигаться указатель, причем возможно также его перемещение назад по оси времени с обратным воспроизведением кадров.

Добавление звука. В Corel R.A.V.E. можно добавить звуковое сопровождение, импортируя аудиофайлы формата WAV.

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

Повтор анимации в окне Timeline

Рисунок 5.8. Повтор анимации в окне Timeline

Практикум

Практикум

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

Применение линзы Magnify

Рисунок 5.13. Применение линзы Magnify

Чтобы применить преобразование линзы, необходимо вызвать докерное окно Lens (Линзы) командой Window > Dockers > Lens (Окно > Докеры > Линзы). Затем строится объект, который будет играть роль линзы, и выделяется с помощью инструмента Pick (Выбор). В раскрывающемся списке типов преобразований докерного окна Lens (Линзы) выбирается нужный тип линзы. После щелчка на кнопке Apply (Применить) выделенный объект превращается в линзу.

Для отмены преобразования линзы ее предварительно выделяют, а затем в окне Lens (Линзы) в раскрывающемся списке типов преобразований выбирают значение No Lens Effect (Без эффекта линзы). Щелчок на кнопке Apply (Применить) превращает выделенную линзу в обычный объект. Слои помогают организовывать и размещать объекты в сложных композициях. Каждому слою назначают собственное имя, которое может отражать его содержание, отношение к другим слоям или положение в наборе объектов. Положение слоя в наборе можно изменять, перемещая его с помощью мыши. По умолчанию у всех слоев включены свойства редактирования, печати и отображения. Выключение свойства достигается щелчком по соответствующему значку около имени слоя. Для заблокированного слоя невозможно выделить или редактировать объекты, расположенные на нем. Это позволяет при редактировании объекта одного из слоев предохранить остальные от нежелательных изменений. Возможно переместить или скопировать объект на другой слой, если он не заблокирован. При помещении объекта на слой, расположенный ниже, объект станет верхним в наборе. При помещении на верхний слой объект в наборе будет последним. При печати кадра выводятся на печать только объекты тех слоев, для которых свойство print не заблокировано.

Corel R.A.V.E. позволяет менять форму объектов разными способами, в том числе используя служебные объекты-модификаторы, не влияющие на сам объект, но изменяющие способ его отображения: Envelopes (Огибающие), Distortion (Деформации). Также можно использовать сам объект как управляющий, строить на его базе составной объект: Blend (Пошаговый переход), Shadow (Тень), Extrude (Экструзия).

Включение в композицию точечных изображений в Corel R.A.V.E. достигается либо с помощью импорта готовых файлов, либо путем их сканирования. Затем они могут быть отредактированы с изменением цвета или тона и обработаны с помощью специальных эффектов инструментами самой программы.

Сorel R.A.V.E. при создании анимации позволяет широко использовать текст, который наравне с изображениями может перемещаться, изменять свой вид и способы появления нa экране. В то же время к тексту могут быть применены все методы работы, используемые в текстовых редакторах: выделение отдельных символов и слов, их форматирование и выравнивание, контроль правописания, форматирование абзацев и т. д. При этом можно не только использовать стандартные шрифты, но и преобразовывать текстовые блоки в художественный текст.

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

Подробно познакомиться со всеми возможностями инструментов рисования и обработки изображений, общими для программ пакета CorelDraw, можно в книгах издательства «Питер»: Миронов Д. «CorelDraw 10. Учебный курс», а также Кобурн Ф., Маккормик П. «Эффективная работа с CorelDraw 10».

Редактирование интерактивной кнопки

Рисунок 5.14. Редактирование интерактивной кнопки

Если последующее состояние интерактивной кнопки пустое, то можно продублировать предыдущее состояние, чтобы объект выглядел одинаково при выполнении обоих действий. Для этого выделяют нужное имя состояния в раскрывающемся списке Active rollover state (Активные состояния) и щелчком на кнопке Duplicate state (Дублировать состояние) этой же панели инструментов копируют содержимое в следующее состояние.

Так как панель инструментов Internet содержит все необходимые элементы управления для создания интерактивных кнопок, то окно Timeline (Ось времени) можно закрыть, чтобы увеличить размер рабочей области. Сделать это можно по команде Movie > Timeline (Фильм > Ось времени).

При добавлении анимации к интерактивной кнопке ее можно неоднократно повторять, задавая режим loop (цикл). Например, кнопка может периодически пульсировать либо текст на ней может быть мигающим и т. п. Если задать режим loop для кнопки в целом, то она будет демонстрироваться на протяжении всего фильма. При задании этого режима только для одного из состояний кнопки оно будет показано на протяжении всего времени демонстрации этой кнопки в фильме. Задание режима loop (цикл) для одного из объектов в каком-либо состоянии кнопки будет повторять его на протяжении времени, которое соответствует этому состоянию кнопки. Число повторений при этом будет определяться длительностью линии жизни кнопки либо ее состояния.

Редактирование объектов

Редактирование объектов

Редактирование анимированных объектов выполняется путем их изменения в ключевых кадрах, а также перемещения и изменения размеров их линий жизни. Во время редактирования на экране можно одновременно отобразить несколько идущих подряд кадров.

Сдвиг линии жизни позволяет переместить объект для воспроизведения в других кадрах, не изменяя продолжительность его демонстрации. Например, объект, отображавшийся в кадрах с 5-го по 20-й, можно сдвинуть так, чтобы он демонстрировался в кадрах с 10-го по 25-й. При этом, конечно, можно поменять и длительность его отображения.

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

Для создания нового ключевого кадра на оси времени выделяем нужный кадр и выполняем команду Movie > Insert keyframe (Фильм > Вставить ключевой кадр). Для удаления существующего ключевого кадра его нужно выделить и выполнить команду Movie > Delete keyframe (Фильм > Удалить ключевой кадр).

Перемещение ключевого кадра выполняется с помощью мыши, однако оно может быть выполнено не далее чем до следующего ключевого кадра. Быстро превратить обычный кадр в ключевой и наоборот можно с помощью двойного щелчка левой кнопки мыши.

Чтобы координировать взаимное положение объектов, Corel R.A.V.E. позволяет отображать несколько кадров на экране в режиме кальки (Onion skin). Режим кальки отображает объекты текущего кадра полноцветными, в то время как объекты других кадров представлены в виде каркасов (Wireframe view). Диапазон кадров, отображаемых на экране в режиме кальки (Onion skin), можно регулировать, перемещая граничные маркеры диапазона вправо и влево от положения указателя текущего кадра (playhead).

З Окно библиотеки Scrapbook

Рисунок 5.З. Окно библиотеки Scrapbook

В этом же окне для каждого объекта задается время жизни (object's life time) — специальная линия, отображающая время существования объекта в фильме, с точками на концах. Ключевые кадры (keyframe), в которых заданы изменения объекта, отмечены на этой линии квадратами. Такой объект, меняющийся во времени, называется анимированным. В противоположность ему объект, который в фильме не изменяется (в том числе не меняется и его положение в кадре), называется статическим.

Сохранение анимации для Web

Сохранение анимации для Web

Corel R.A.V.E. позволяет публиковать анимацию, сохраняя ее в формате Macromedia Flash и встраивая ее в HTML-файл, автоматически генерируемый на основе шаблона. HTML-документ, в который встраивается анимация, позволяет управлять ею и сохраняет ее интерактивность. Перед опубликованием можно задать размеры анимации, используя значения по умолчанию либо задавая свои значения, задать ее многократное воспроизведение, а также указать качественные характеристики сохраняемой анимации. Кроме того, задаются расположение анимации на HTML-документе и задержка начала ее воспроизведения по отношению к моменту полной загрузки страницы.

Для публикации анимации выбирают команду File > Publish to the Web (Файл > Опубликовать в Web) и в открывшемся диалоговом окне Export (Экспорт) задают папку для его сохранения. В поле File name (Имя файла) назначают файлу имя. После щелчка по кнопке ОК на вкладках General и HTML появляющегося после этого окна Flash Export (Flash-экспорт) устанавливают необходимые параметры.

Создание гармоничной цветовой палитры

Рисунок 5.12. Создание гармоничной цветовой палитры

Вариант Triangle 2 (Треугольник 2) отличается от предыдущего наличием двух свободных селекторов цвета, что определяет их синхронное перемещение при изменении положения одного из них.

Для варианта Rectangle (Прямоугольник) задаются четыре базовых цвета, два из которых являются свободными. Перетаскивание черного или серого селектора синхронно меняет расположение всех селекторов, а перетаскивание одного из белых селекторов — только положение этой пары свободных селекторов.

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

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

Для создания иллюзии трехмерности плоского объекта служат инструменты, добавляющие к нему контур или тень. Использование эффекта прозрачности позволяет видеть сквозь объект. Причем Corel R.A.V.E. дает возможность указать, каким образом цвет прозрачного объекта будет взаимодействовать с цветом объекта, расположенного за ним.

Преобразование линзы — это группа преобразований, которые, будучи применены к какому-либо замкнутому объекту, меняют не его собственный внешний вид, а вид объектов, которые им перекрываются. Например, эффект одного из типов линз позволяет создать перспективные искажения объекта, зависящие от выбранных параметров. Программа предлагает несколько типов линз: Transparency (Полупрозрачная линза), Magnify (Увеличительная линза), Brighten (Осветляющая линза), Invert (Линза негативного изображения), Color li mit (Линза цветовой отсечки), Color Add (Линза сложения цветов), Tinted Grayscale (Линза полутонового монохромного изображения), Heat Map (Линза теплового портрета), Custom Color Map (Линза заказной палитры), Wireframe (Каркасная линза) и Fish Eye (Линза «рыбий глаз»).

Создание интерактивных кнопок

Создание интерактивных кнопок

При создании Web-страниц широко используются интерактивные кнопки (Rollover Buttons), которые реагируют на действия пользователя мышью. Интерактивные кнопки можно создать и в программе CorelDraw, однако в этом случае создается графический файл, который управляется кодом JavaScript. При создании интерактивных кнопок с помощью Corel R.A.V.E. они экспортируются в файл Flash, в котором управляющий код хранится вместе с изображением.

Как CorelDraw, так и Corel R.A.V.E. автоматизируют создание кода, поэтому разработчик может сосредоточиться на творческой работе: внешнем виде кнопок и их поведении в различных состояниях.
Создать интерактивную кнопку (rollover) можно практически из любого объекта или группы объектов. Для этого он преобразуется в объект с тремя состояниями, в каждом из которых объект может быть представлен в различном виде. Normal (Обычный) — это состояние по умолчанию, когда объект не взаимодействует с указателем мыши. Overtriggered (Указание) — состояние, при котором указатель мыши помещен на интерактивную кнопку. Downtriggered (Нажатие) — состояние после щелчка мыши на кнопке. Например, при наведении мыши на кнопке может появляться текст, а после щелчка она меняет свой цвет.

Каждое из состояний интерактивной кнопки может быть дополнительно анимировано. Например, текст на кнопке может вращаться при наведении на нее указателя мыши. Кроме того, к каждому состоянию может быть присоединен свой звуковой файл. Режим предварительного просмотра позволяет контролировать вид кнопки непосредственно в процессе работы над ней.

Каждое из состояний интерактивной кнопки может быть в любой момент отредактировано с изменением вида используемых в этом состоянии объектов. Удаление содержимого одного из состояний приводит к исключению этого режима интерактивной кнопки, поэтому она не меняет свой вид при выполнении соответствующего действия. Для перехода в режим редактирования интерактивной кнопки следует выделить объект типа rollover в окне Timeline (Ось времени) и выполнить команду Effects > Rollover > Edit rollover (Эффекты > Интерактивная кнопка > Правка интерактивной кнопки). На открывшейся панели инструментов Internet выбрать название состояния из раскрывающегося списка Active rollover state (Активные состояния). На рабочем столе отредактировать объект и выйти из режима редактирования по команде Effects > Rollover > Finish editing rollover (Эффекты > Интерактивная кнопка > Завершить правку интерактивной кнопки).

Чтобы удалить одно из состояний интерактивной кнопки, следует выделить его название (Normal, Over, Down) в раскрывающемся списке Active rollover state (Активные состояния) и нажать клавишу Del.

Траектория движения группы объектов

Рисунок 5.6. Траектория движения группы объектов

Для указания специальной траектории движения анимированной группы нужно с помощью инструмента Freehand (Произвольная кривая) нарисовать кривую и переместить соответствующую ей точку в окне Timeline (Ось времени) на Начальный кадр группы объектов. Затем выделить в окне Timeline (Ось времени) имя группы и выполнить команду Movie > Attach to path (Фильм > Привязать к пути). Появившимся на экране маркером указания щелкнуть на кривой. В результате вся группа будет привязана к указанной траектории и двигаться по ней.

Крайние правые кнопки панели атрибутов Along full path (Вдоль всего пути) и Rotate all objects relative to the path (Вращение всех объектов вдоль пути) задают перемещение объектов вдоль всего заданного пути и их вращение при движении по траектории.

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

Свойство объекта	Параметры, для которых промежуточные кадры не рассчитываются
Абрис объекта (Outline)	Форма углов объекта; завершения незамкнутых линий
Равномерная заливка (Uniform fill)	Цветовая модель заливки
Градиентная заливка (Fountain fill)	Тип градиента
Заливка шаблоном (Pattern fill)	Тип шаблона
Текстурная заливка (Texture fill)	Тип текстуры, преобразование вместе с объектом, зеркальная заливка
Перенос и сдвиг текста	Все свойства переноса и сдвига

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

Эффект	Параметры эффекта, для которыхпромежуточные кадры не рассчитываются
Переход (Blend)	Циклический переход Изменение цветовых оттенков по часовойстрелке или против нее
Контур (Contour)	Изменение цветовых оттенков по часовойстрелке или против нее
Инструменты художника (Artistic media)	Тип удара кисти
Тип кисти (Brush type)	Порядок объектов, расстояние между ними, угол поворота и смещения объектов
Искажение (Distortion)	Типы искажения Zipper и Twister
Тень от объекта (Drop shadow)	Перспектива тени, направление и форма растушевки
Линза (Lens)	Тип линзы

Анимация с помощью пошагового перехода (animating blends) позволяет значительно изменять форму объекта, преобразовывая его от одного типа к другому. Таким способом можно превратить эллипс в звезду или одну букву в другую. При создании перехода объект представляется единой линией жизни, охватывающей столько кадров, сколько объектов получилось в результате расчета перехода от начального до конечного состояния, причем все они отображаются в рабочей области (Stage).

Пошаговый переход увеличивает размер файла анимации, поэтому при изменении формы объекта без изменения его типа рекомендуется применять метод tweened animation.

Чтобы реализовать пошаговый переход, следует создать композицию и разместить в ней начальный и конечный объекты. На панели Interactive Tools (Интерактивные инструменты) выполняют щелчок на инструменте Interactive Blend (Интерактивный пошаговый переход). Затем выделяют оба объекта и на панели свойств в раскрывающемся списке Presets (Установки) выбирают тип перехода. После чего выбор команды Movie > Create sequence from blend (Фильм > Создать ряд перехода) приводит к появлению линии жизни для группового объекта blend в окне Timeline (Ось времени).

Установка параметров при экспорте в AVIфайл

Рисунок 5.19. Установка параметров при экспорте в AVI-файл

Для сохранения анимации в формате AVI выбирают команду File > Export (Файл > Экспорт) и в открывшемся окне Export (Экспорт) в поле Files of type (Тип файла) выбирают формат файла. В поле File name (Имя файла) задают наименование файла и устанавливают необходимые параметры:

Флажок Crop to stage (Обрезать по изображению). Если он установлен, то при сохранении сцена обрезается по размеру рабочего поля.

Флажок Web_safe_filenames (Безопасное имя файла) для замены пробелов в имени файла на подчеркивание (другие специальные символы заменяются разрешенными для сохранения на Web-сервере).

В раскрывающемся списке Compression type (Метод компрессии) выбирают метод сжатия файла.

Щелчок на кнопке Export (Экспорт) создает файл выбранного типа с заданным именем.

Для сохранения анимации в отдельном файле формата SWF выбирают команду File > Export (Файл > Экспорт) и в открывшемся окне Export (Экспорт) в поле Files of type (Тип файла) указывают значение: SWF — Macromedia Flash. В поле Filename (Имя файла) задают наименование файла и щелчком на кнопке Export (Экспорт) переходят в ранее описанное окно Flash export (Flash-экспорт), в котором устанавливают необходимые параметры.

Установки параметров HTMLстраницы

Рисунок 5.17. Установки параметров HTML-страницы

Если флажок не установлен, то становятся доступными поля Width (Ширина) и Height (Высота) для задания пользовательского размера документа.

Кнопка Preview (Предварительный просмотр) позволяет убедиться в правильном выборе параметров экспорта путем просмотра анимации в обозревателе. При удовлетворительном качестве файла выбранные параметры экспорта могут быть сохранены для последующего использования.

Установки при экспорте во Flash

Рисунок 5.16. Установки при экспорте во Flash

В области Bitmap Settings (Параметры точечного изображения) задаются значения Resolution (Разрешение), JPG Compression (Сжатие JPG) и Smoothing (Сглаживание).

В области Bounding Box Size (Размер ограничивающего прямоугольника) определяется сохранение только анимирован-ных объектов либо полного размера рабочей области.

Сохранение в SWF-файле звукового сопровождения возможно при установке флажков Use Sound Behaviors (Применить звуки) и Use Audio Layers (Включить звуковые слои) с указанием степени их компрессии.

Установка флажка File Protection from import (Защита файла от импорта) позволяет предохранить созданную анимацию от импорта и несанкционированного использования созданного SWF-файла.

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

Флажок Match movie (Соответствие с фильмом) служит для согласования размера HTML-документа с размером анимации.

Выбор цвета заливки на основе палитры

Рисунок 5.11. Выбор цвета заливки на основе палитры

Однако правильнее выбирать цвета из готовой палитры, ориентированной на использование в Web-страницах. Для этого в окне выбора цвета заливки служит вкладка Palettes (Палитры), на которой в раскрывающемся списке выбирается нужный тип палитры, гарантирующей правильное воспроизведение оттенков цвета при просмотре Web-страницы.

Для гармонизации цветов, используемых при создании анимации, служит вкладка Mixers (Смесители) окна выбора цвета заливки. С помощью представленных на ней инструментов управления можно формировать палитры цветов, находящихся друг с другом в заданных цветовых отношениях. Задавая от одного до пяти базовых цветов, можно сформировать гармоничные палитры с различным числом цветовых оттенков, количество которых определяется числом в поле Size (Размер). В пределах каждой из цветовых палитр градации цвета меняются в соответствии с выбранным значением раскрывающегося списка Variation (Вариация): Cooler (Переход к холодному тону), Warmer (Переход к теплому тону), Darker (Переход к темным тонам), Lighter (Переход к светлым тонам), Less Saturation (Переход с убыванием насыщенности тона).

Раскрывающийся список Hues (Цвета) позволяет задать базовые цвета палитры. Вариант Primary (Первичный цвет) создает одну динамическую палитру на основе уже имеющейся заливки объекта. Однако этот цвет можно изменить, перемещая мышью кружок селектора цвета на цветовом круге либо задавая новые значения цветовых параметров с помощью счетчиков.

Для варианта Compliment (Дополнительные цвета) базовые цвета выбираются на противоположных концах диаметра цветового круга, синхронно перемещающихся при перетаскивании одного из них.
Вариант Triangle 1 (Треугольник 1) задает три базовых цвета, один из которых отмечен белым кружком селектора цвета и является свободным. При его перемещении с помощью мыши другие селекторы сохраняют свое положение.

Выбор цветовой модели однородной заливки

Рисунок 5.10. Выбор цветовой модели однородной заливки

Выбор цвета для однородной заливки или абриса выполняется в специальном окне, содержащем три вкладки. Первая вкладка Models (Модели) позволяет выбрать тип цветовой модели, чтобы использовать оттенки, входящие в ее цветовой охват. Используя инструмент Fill (Заливка), раскрываем палитру, на которой выбираем кнопку Fill Color Dialog (Окно однородной заливки). В открывшемся одноименном окне в раскрывающемся списке Model (Модель) выбираем тип цветовой модели. В области, расположенной ниже, можно щелчком мыши выделить нужный цвет либо ввести параметры цвета в поля области Components (Составляющие), меняющиеся в зависимости от выбранной модели.

Анимация для Интернет

Анимация движения на основе отдельных файлов

Рисунок 6.26. Анимация движения на основе отдельных файлов

Упражнение 6.1. Создание анимации из группы файлов

1. Открываем окно Adobe After Effects. Командой File > Import > Footage File (Файл > Импорт > Файл заготовки) открываем окно Open File (Открытие файла) и выбираем файлы рисунков, содержащие фазы движения, например BFLY1.GIF - BFLY8.GIF. Щелчком на кнопке Open (Открыть) выполняем импорт заготовок.

2. Создадим новую композицию, выбрав команду Composition > New composition (Композиция > Создать композицию). Зададим размер изображения 50x50 и длительность 5 секунд. После щелчка на кнопке ОК в окне проекта появляется значок новой композиции и открываются окна «Соmр 1» и «Соmр 1 — Time Layout»,

3. Теперь в окно композиции «Соmр 1 — Time Layout» в область Source Name (Имя источника) следует перетащить все восемь файлов из окна проекта. В правой части окна на панели графиков времени автоматически задается такой масштаб, чтобы отображалась полная длительность композиции (5 с). На каждом слое с помощью указателей начала и конца слоя установим последовательное отображение рисунков, как это представлено на Рисунок 6.26.

4. Для предварительного просмотра анимации на палитре Time Controls (Управление воспроизведением) щелкаем на кнопке Play (Воспроизвести) и в окне «Соmр 1» видим анимированное изображение (Рисунок 6.27).

5. Чтобы сохранить результат работы в отдельном файле, выполняем команду Composition > Make Movie (Композиция > Создать фильм) и в окне Save Movie As (Сохранить фильм) вводим имя файла. Щелчок на кнопке Save (Сохранить) открывает окно Render Queue (Очередь рендеринга), в котором можно видеть параметры создаваемого файла. По умолчанию установлен тип файла Video for Windows. Изменим тип файла на анимированный GIF. Для этого выполним двойной щелчок на строке Output Module (Модуль вывода) и в открывшемся окне Output Module Settings (Параметры модуля вывода) изменим формат на Animated GIF. После щелчка на кнопке ОК в предыдущем окне Render Queue (Очередь рендеринга) появится новый тип файла. Теперь можно щелкнуть на кнопке Render (Визуализация) и запустить создание итогового файла. Во время рендеринга в диалоговом окне отмечается, какая часть задания уже выполнена, с указанием затраченного на обработку времени и временной позиции, до которой произведен расчет кадров. По завершении работы статус задания меняется на Done (Выполнено). Теперь готовый файл находится в той папке, где выполнялось его сохранение, причем его размер оказался всего 7 Кбайт, что вполне допустимо для размещения в Интернете.

Добавление в композицию звукового файла

Рисунок 6.20. Добавление в композицию звукового файла

Прослушать звуковое сопровождение с текущей позиции можно, выбрав команду Composition > Preview > Audio Preview (Here Forward) (Композиция > Предварительный просмотр > Прослушать звук). Поэтому для прослушивания всего звукового файла предварительно следует переместить указатель времени в начальную позицию, чтобы звук воспроизводился от начала до конца. Можно также выполнить прослушивание, если перемещать этот указатель текущего времени с помощью мыши при нажатой клавише Ctrl. При воспроизведении на палитре Audio (Аудио) отображается уровень сигналов каждого канала.

Добавление звука

Добавление звука

Так как сохранить результирующую анимацию можно в формате видеофайла, то в этом случае к ней может быть добавлен звук. Файл звукового сопровождения так же, как и остальные заготовки, импортируется в окно проекта командой File > Import > Footage File (Файл > Импорт > Заготовка). При импорте звуковых файлов параметры программы After Effects должны быть настроены соответствующим образом. Для этого по команде File> Preferences > General (Файл > Установки > Общие) открываем окно Preferences (Установки) и задаем нужные параметры, например частоту дискретизации 20,050 кГц при длительности 5 с (Рисунок 6.19).

Файлы заготовок в окне Project

Рисунок 6.25. Файлы заготовок в окне Project

Настройка под параметры звукового файла

Рисунок 6.19. Настройка под параметры звукового файла

При перетаскивании значка звукового файла в окно «Соmр 1 -Time Layout» он займет в этом окне первую позицию. Список его свойств можно открыть щелчком по треугольнику у имени файла, и таким же образом раскрываются свойства Audio (Аудио) и Waveform (Осциллограмма). В результате в окне «Comp 1 — Time Layout» можно видеть осциллограммы звуковых дорожек (Рисунок 6.20).
Управление звуком осуществляется с помощью палитры Audio (Аудио). Если она отсутствует на экране, то ее можно вызвать, выбирая команду Window > Show Audio (Окно > Показать аудио). Для стереозвука эта палитра позволяет выполнять раздельную регулировку громкости правого и левого каналов. По умолчанию установлено значение 0 дБ. Средний ползунок регулирует громкость сразу двух каналов, а левый и правый — соответствующие стереоканалы. Они становятся доступными для регулировки, если в окне «Comp 1 — Time Layout» выделен звуковой слой. Задать точные численные значения можно в полях ввода, расположенных под ползунками. Положительные значения соответствуют усилению громкости, а отрицательные — ослаблению. Если задать разные значения для правого и левого каналов, то можно создать эффект перетекания звука из одного динамика в другой.

Окно Render Queue

Рисунок 6.22. Окно Render Queue

По умолчанию установлен тип файла Video for Windows. Для изменения типа выполняем двойной щелчок по строке Output Module (Модуль вывода). В открывшемся окне Output Module Settings (Параметры модуля вывода) изменяем формат на нужный, например Animated GIF. После щелчка по кнопке ОК возвращаемся в предыдущее окно Render Queue (Очередь рендеринга), где будет задан новый тип файла. Теперь можно щелкнуть по кнопке Render (Визуализация) и запустить создание итогового файла. Однако эта операция может занять очень много времени, особенно для сложных и продолжительных композиций, поэтому рендеринг выполняется сразу для группы композиций и запускается в то время, когда компьютер не загружен другими задачами. С этой целью можно создать несколько заданий на рендеринг и выполнить его в нерабочее время. Во время рендеринга в диалоговом окне отмечается, какая часть задания уже выполнена, с указанием затраченного на обработку времени и временной позиции, до которой произведен расчет кадров. По завершении работы статус задания меняется на Done (Выполнено). Теперь готовый файл находится в той же папке, где выполнялось его сохранение в виде композиции.

Палитра Audio при воспроизведении звукового файла

Рисунок 6.29. Палитра Audio при воспроизведении звукового файла

Упражнение 6.3. Добавление звука к анимации

1. Откроем одну из ранее созданных в After Effects композиций.

2. Импортируем файл звукового сопровождения в окно проекта командой File > Import > Footage File (Файл > Импорт > Заготовка). Для импорта выберем один из звуковых файлов Windows, имеющих достаточную длительность, например LOGOFF .WAV.

3. В окне проекта будут представлены характеристики этого файла, и в соответствии с ними необходимо настроить параметры программы After Effects. Для этого выполняем команду File > Preferences > General (Файл > Установки >Общие) и в открывшемся окне Preferences (Установки) задаем частоту дискретизации 20,050 кГц при длительности 5 с (см. Рисунок 6.19).

4. Перетащим значок новой заготовки в окно «Соmр 1 -Time Layout». Файл LOGOFF. WAV займет первую позицию в этом окне. Щелчком на треугольнике у имени файла откроем список его свойств и раскроем свойства Audio (Аудио) и Waveform (Осциллограмма).

5. Для управления звуком с помощью палитры Audio (Аудио) выполняем команду Window > Show Audio (Окно > Показать аудио). Можно изменить установленное по умолчанию значение 0 дБ. Средний ползунок регулирует громкость обоих каналов одновременно, а левый и правый — громкость каналов по отдельности. Они доступны для регулировки, если в окне «Comp1 — Time Layout» выделен слой со звуком. Если задать разные значения для правого и левого каналов, то можно создать эффект перетекания звука из одного динамика в другой.

6. Для прослушивания звукового сопровождения выполняем команду Composition > Preview > Audio Preview (Here Forward) (Композиция > Предварительный просмотр > Прослушать звук). Предварительно следует переместить указатель времени в начальную позицию, чтобы слышать звук с самого начала. При воспроизведении на палитре Audio (Аудио) отображается уровень сигналов каждого канала (Рисунок 6.29).

7. Можно использовать встроенные эффекты для изменения характеристик звука. Удаление или изменение параметров, примененных к звуковому слою эффектов, возможно в окне Effect Control (Управление эффектом), вызываемом командой Layer > Open Effect Controls (Слой > Открыть управление эффектом).

8. Сохранение анимации со звуком возможно только в формате видео при использовании специального шаблона.

Практикум

Практикум

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

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

Рисунок 6.27. Предварительный просмотр анимации

Сохранение фильма

Сохранение фильма

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

понижение разрешения композиции;

организация папок в окне Project (Проект);

закрытие ненужных окон и вкладок; понижение качества отображения слоя;

блокировка слоя в окне Time Layout (Ось времени);

предварительный рендеринг вложенных композиций;

запретить обновление окон Footage, Layer и Composition включением клавиши Caps Lock;

использование прямоугольных масок.

Команда Composition > Preview (Композиция > Предварительный просмотр) открывает подменю, в котором можно задать режим предварительного просмотра. Команда RAM preview (Просмотр RAM) использует оперативную память и проигрывает композицию настолько быстро, насколько позволяют ресурсы компьютера. After Effects показывает общее число кадров, необходимое для просмотра, и число кадров, которое получено в результате рендеринга. Для их согласования можно уменьшить рабочую область в окне Time Layout (Ось времени). Команда Wireframe preview (Просмотр рамок) выполняет просмотр для всех кадров и слоев активного рабочего пространства. Каждый слой отображается прямоугольником или, если слой имеет маску или альфа-канал, созданный в другом приложении, их контурами. Команда Motion with Trails (Движение со следом) сохраняет при просмотре
контуры каждого кадра и выделенного слоя таким образом, чтобы была видна траектория движения объекта. Это помогает выполнить анализ правильности анимации.
Чтобы сохранить созданную композицию в отдельном файле, следует выполнить команду Composition > Make Movie (Композиция > Создать фильм) и в окне Save Movie As (Сохранить фильм) задать имя файла. Щелчок по кнопке Save (Сохранить) этого окна открывает следующее окно, Render Queue (Очередь рендеринга), в котором можно задать параметры создаваемого файла. В окне Render Queue (Очередь рендеринга) имеются две области. Верхняя область отображает ход рендеринга текущей композиции, а в нижней выполняется постановка композиций в очередь и определение параметров выходных файлов. Установки, сделанные в этом окне, влияют только на результирующий файл и не действуют на созданную композицию.

Установки параметров звуковых эффектов

Рисунок 6.21. Установки параметров звуковых эффектов

Кроме эффектов, применяемых к изображению, в After Effects включены эффекты, применяемые к звуку. Подменю Effect > Audio (Эффект > Звуковой) содержит четыре команды: Backwards (Обращение), Bass & Treble (Тембр), Delay (Задержка), Stereo Mixer (Стереомиксер).
Эффект Backwards (Обращение) проигрывает звук в обратном направлении от последнего кадра (или от ключевого кадра) к первому. В окне «Compl — Time Layout» кадры сохраняют первоначальный порядок.
Регулировка звукового тона выполняется с помощью эффекта Bass and Treble (Тембр), который позволяет задать граничные значения воспроизводимых верхних и нижних звуковых частот.
Эффект Delay (Задержка) выполняет повтор звука через определенный промежуток времени, что позволяет создавать эффекты отражения звука от стен или различных поверхностей, находящихся на определенном расстоянии. Параметр Delay Time (Время задержки) определяет интервал времени в миллисекундах между звуком и его эхом. Параметр Delay Amount (Уровень задержанного сигнала) задает уровень эха. Параметр Feedback (Обратная связь) определяет уровень последующих повторений эха. Заключительные параметры Dry Out, Wet Out задают баланс оригинального и задержанного звуков в выходном сигнале (обычно используют значения 50%).
Эффект Stereo Mixer (Стереомиксер) позволяет смешивать правый и левый каналы. Параметры Left level (Уровень левого), Right level (Уровень правого) определяют уровень каждого из стереоканалов (максимальное значение равно 2). Параметры Left pan (Левое согласование), Right pan (Правое согласование) сдвигают смешанный сигнал с левого в правый канал (равный баланс достигается при значениях -1.0 для левого и +1.0 для правого). Параметр Invert Phase (Инверсия фазы) инвертирует фазу обоих каналов стереосигнала, что позволяет при равенстве частот сигналов предотвратить их взаимную компенсацию.
Изменение параметров или удаление примененных к звуковому слою эффектов возможно в окне Effect Control (Управление эффектом), вызываемом по команде Layer > Open Effect Controls (Слой > Открыть управление эффектом).

Задание ключевых кадров анимации

Рисунок 6.28. Задание ключевых кадров анимации

Упражнение 6.2. Создание анимации при помощи трансформаций и эффектов

1. Создадим новый проект в Adobe After Effects и, не используя в нем никаких заготовок, откроем новую композицию размером 470 х 60 пикселов и длительностью 5 секунд при скорости 1 кадр в секунду. Так как по умолчанию цвет фона композиции получился черный, изменим его на другой командой Composition > Background Color (Композиция > Цвет фона).

2. Теперь создадим первый слой размером 60 х 60 пикселов с помощью команды Layer > New solid (Слой > Создать цельный). Получившийся квадрат (его можно закрасить красным цветом) появится в середине окна композиции «Соmр 1», выделенный размерными маркерами, и с указанием точки привязки (Anchor Point) в центре. Свойства слоя представлены в окне «Comp1 — Time Layout». Для их просмотра следует щелкнуть на треугольном переключателе, расположенном слева от имени слоя, — откроется набор из трех групп свойств, которые могут быть развернуты аналогичным образом с помощью индивидуальных переключателей.

3. Mышью переместим квадрат на левый край композиции. Точные координаты размещения квадрата отображаются на палитре Info (Информационная). Обратите внимание также на символ, появившийся в строке Transform (Преобразование) окна «Comp 1 — Time Layout». Чтобы узнать, к какому из свойств он относится, следует щелкнуть на треугольном переключателе строки Transform (Преобразование), раскрывающем пять основных свойств геометрических преобразований. Как видно, специальным символом отмечено свойство Position, причем для момента времени 0,0. Теперь следует закрепить это значение, для чего выполняется щелчок на кнопке Stopwatch (Секундомер) слева от наименования свойства, и символ отметки изменится, указывая, что кадр стал ключевым (keyframe).

4. Переместим указатель текущего времени (синий движок на шкале времени) к значению третьего кадра (вторая секунда). Передвинем красный квадрат в центр композиции в точку с координатами (230,30). Задать эти значения можно с помощью окна Position (Положение), открывающегося по команде контекстного меню данного слоя Transform > Position (Преобразовать > Положение). Траектория движения отмечается точками в окне «Соmр 1». Аналогично для пятого кадра (четвертая секунда) зададим крайнее правое положение слоя с красным квадратом. Причем вызвать на экран окно Position (Положение) можно с помощью двойного щелчка на значении этого свойства. Таким образом, мы задали еще два ключевых кадра. Теперь выполняем предварительный просмотр анимации, для чего щелкаем на кнопке Play (Воспроизвести) палитры Time Controls (Управление воспроизведением). Красный квадрат циклически перемещается по полю композиции слева направо.

5. Заставим квадрат вращаться во время движения. Для этого установим указатель текущего времени на 0 и выполним щелчок на свойстве Rotation (Вращение). Появившуюся отметку закрепляем кнопкой Stopwatch (Секундомер) и открываем окно Rotation (Вращение) двойным щелчком на этой отметке. Убедившись, что значение Revolutions (Обороты) установлено в ноль, задаем в поле Degrees (Градусы) отрицательную величину (-45) и закрываем окно Rotation (Вращение) щелчком на кнопке ОК. В окне «Comp 1 — Time Layout» переходим к последнему кадру (четвертая секунда). Вновь вызываем окно Rotation (Вращение) командой контекстного меню слоя Transform > Rotation (Преобразовать > Вращение) или с помощью клавиатурной комбинации Shift+Ctrl+R. Задаем в поле Degrees (Градусы) положительную величину 45. Теперь при предварительном просмотре видно не только перемещение, но и вращение красного квадрата. Обратите внимание на то, что вращение выполняется относительно точки привязки (Anchor Point). Если задать иное положение этой точки (не в центре слоя), то можно изменить и характер вращения.

6. Аналогичным образом можно определить свойство Scale (Масштаб) для изменения масштаба объекта, выполнив команду контекстного меню слоя Transform > Scale (Преобразовать > Масштаб) или воспользовавшись клавиатурной комбинацией Shift+Ctrl+S. Зададим значение полей окна Scale (Масштаб) в нулевой момент времени 100% ц установим флажок Preserve Frame Aspect Ratio (Сохранять отношение размеров). Для пятого кадра уменьшим масштаб до 25%. В результате квадрат одновременно с вращением будет уменьшаться в размерах.

7. Создадим новый слой зеленого цвета размером 84x30 пикселов. Он также появится в центре композиции, но передвинем его к левому краю с центром в точке (30, 30) и зафиксируем там. Для последнего кадра переместим новый слой в позицию (430, 30). Так как этот слой создан позже, то он закрывает предыдущий. Чтобы видеть красный квадрат, следует поместить вновь созданный слой Solid2 назад. Это можно выполнить с помощью команды Layer > Send Layer Backward (Слой > Отправить ниже), предварительно выделив имя слоя в окне «Comp 1 — Time Layout». Изменим свойство Opacity (Непрозрачность) этого слоя со 100% для начального кадра до 10% для пятого кадра. Окно Opacity (Непрозрачность) вызывается командой контекстного меню слоя Transform > Opacity (Преобразовать > Непрозрачность) или с помощью клавиатурной комбинации Shift+Ctrl+О. Теперь красный квадрат будет перемещаться на постепенно бледнеющем зеленом фоне.

8. Предварительно выделим слой Solid1 в окне «Compl — Time Layout» и убедимся, что указатель текущей позиции находится в точке 0. Выполним команду Effect > Perspective > Drop Shadow (Эффект > Перспектива > Падающая тень), по которой откроется окно диалога «Effect Controls — Solidl» с заданными по умолчанию параметрами. Введем новые значения этих параметров. Двойной щелчок на образце цвета тени откроет окно выбора цветов, в котором зададим красно-коричневый оттенок. Сохраним значение непрозрачности (50%), установленное по умолчанию. Направление тени изменим на противоположное, для чего мышью переместим указатель Direction (Направление) в обратную сторону. Можно выполнить задание этого параметра и другим способом — щелкнуть на подчеркнутой цифре 135 и в открывшемся окне Angle Control (Угол) задать значение 305. Параметр Distance (Расстояние) можно изменить, перемещая положение движка до значения 35 либо задав это значение в окне Slider Control (Движок), вызываемом щелчком по цифровому значению параметра. Аналогично изменяем параметр Softness (Мягкость) до величины 10.

9. Запустив предварительный просмотр анимации, убедимся, что вместе с квадратом перемещается и его тень.

Задание параметров в окне Output Module Settings

Рисунок 6.23. Задание параметров в окне Output Module Settings

Задание параметров в окне Output Module Templates

Рисунок 6.24. Задание параметров в окне Output Module Templates

Чтобы сохранить анимацию со звуком, выполняют команду File > Templates > Output Module (Файл > Шаблон > Выходной модуль), открывающую одноименное окно, предназначенное для указания параметров создаваемого фильма. По умолчанию предлагается шаблон Lossless, который не включает звук в конечный файл. Создадим новый шаблон для анимации со звуком. Для этого выполним щелчок на кнопке Duplicate (Дублировать) и в поле Settings Name (Имя установок) заменим имя шаблона другим, например Sound Animation. Теперь щелкнем на кнопке Edit (Правка) и в появившемся окне Output Module Settings (Параметры модуля вывода) установим флажок Audio Output (Вывод аудио) и зададим соответствующие параметры звукового сигнала. Щелчком на кнопках О К закрываем оба окна. Теперь выполняем команду Composition > Make Movie (Композиция > Создать фильм) и в окне Save Movie As (Сохранить фильм) вводим имя результирующего файла. Щелчок на кнопке Save (Сохранение) открывает окно Render Queue (Очередь рендеринга), в котором можно видеть параметры создаваемого файла. Чтобы рендеринг фильма выполнялся вместе со звуком, необходимо щелкнуть на кнопке рядом с именем шаблона Lossless и выбрать вместо него созданный шаблон Sound Animation. Если теперь щелкнуть на кнопке Render (Визуализация), то начнет создаваться итоговый файл. По завершении работы статус задания меняется на Done (Выполнено). Теперь файл из папки, где выполнялось его сохранение, можно запустить на проигрывание и убедиться, что анимация сохранилась вместе со звуком.



    Сайт: Аннимация - Видео - Графика

• Анимация на сайте
  
• Графика на сайте
  
• Фотография на сайте
  
• Кино на сайте
  
• Flash на сайте
  
  
• Видео для сайта
  
• Premiere Pro
  
• Vstudio
  
• VirtualDub
  
• Sonic Scenarist
  
  
• DVD
  
  
• Изображения для сайта
  
• Пакет Photoshop
  
• Adobe Illustrator
  
• Adobe Illustrator
  
• CorelDRAW
  
  
• CorelXARA
  
• Maya