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

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

Рис. 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 (значение доступно для второй, третьей и четвертой панелей);
• также возможен выбор одного из двенадцати поименованных наборов установок, обеспечивающих демонстрацию на данной панели изображения, соответствующего этим установкам (значение доступно для второй, третьей и четвертой панелей).

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

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

Выбор команды Optimize Animation (Оптимизировать анимацию) из меню команд палитры Animation (Анимация) открывает одноименное окно, в котором по умолчанию установлены флажки:

• Bounding Box (Граничная рамка) — обрезает каждый кадр по размеру изменяемой области (файл с такими кадрами можно редактировать только в программах, поддерживающих этот режим);
• Redundant Pixel Removal (Удаление избыточных пикселов) — делает прозрачными все не изменившиеся пикселы в кадре (чтобы этот параметр работал, необходимо установить параметр Transparency (Прозрачность) в палитре Optimize и выбрать метод смены кадров Automatic).

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

Рис. 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 (Сохранить) создаем файл выбранного типа.

Создание интерактивных компонентов 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 сохраняет его первоначальное положение во всех остальных состояниях.

Рис. 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.

Рис. 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. Дальнейшее редактирование атрибутов текста возможно при его выделении и выборе команд контекстного меню, выполняющих их изменение.

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

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

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

Рис. 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.19. Задание параметров в окне Output Settings

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».

Интерфейс Macromedia Flash

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

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

• Stage (рабочий стол) — область для компоновки отдельных кадров, создания композиции из графических элементов или импортированных точечных изображений и просмотра результатов анимации;
• Timeline (ось времени) — окно, содержащее список отдельных слоев с расположенными на них графическими объектами и их распределением во времени (на оси времени отмечен каждый кадр фильма);
• Symbols (символы) — основные элементы фильма, как правило, многократно в нем используемые;
• Library (библиотека) — окно со списком символов и импортированных файлов, позволяющее выполнять их организацию и сортировку;
• Floating, dockable panels (пристыковываемые панели) — окна с набором вкладок, служащие для настройки приложения и изменения параметров элементов фильма;
• Movie Explorer (обозреватель фильма) — дополнительно вызываемое окно для просмотра структуры фильма.

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

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

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

1. 1. Указатель текущего кадра (Playhead).
2. 2. Линейка времени (Timeline header).
3. 3. Кнопка раскрывающегося меню Frame View.
4. 4. Кнопка Center Frame.
5. 5. Кнопки режима Onion Skin.
6. 6. Указатель номера выделенного кадра.
7. 7. Значение частоты кадров (Frame rate).
8. 8. Слой направляющей Guide Layer.
9. 9. Пустой ключевой кадр (Empty keyframe).
10. 10. Покадровая анимация (Frame by frame Animation).
11. 11. Анимация с расчетом кадров (Tweened Animation).

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

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

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

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

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

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

Каждый раз при открытии приложения 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.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 (Обозревательфильма). С его помощью при работе над фильмом можно выполнять целый ряд действий:

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

Рис. 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.7. Окно Symbol Properties

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

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

Задание движения по траектории

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

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

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

1. 1. Создадим анимацию движения одним из способов, рассмотренных ранее.
2. 2. При установке флажка Orient to Path (Ориентация на траекторию) базовая линия группы анимируемых объектов будет двигаться параллельно заданной траектории. Для фиксации на траектории регистрационной точки объекта устанавливается флажок Snap (Привязка).
3. 3. Выполняем команду Insert > Motion Guide (Вставка > Траектория движения). Flash создаст над выделенным слоем новый слой со значком направляющей слева от имени.
4. 4. Используем любой инструмент для рисования, чтобы изобразить желаемую траекторию. В первом кадре зафиксируем объект в начальной точке линии, а в последнем кадре—в конце линии, перемещая объект с помощью мыши за его регистрационную точку.
5. 5. Чтобы сделать траекторию невидимой, следует щелкнуть на пересечении строки направляющего слоя и отмеченного значком глаза столбца.

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

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

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

• Переместить слой с объектами под слой с направляющей. Все анимированные объекты на нем автоматически привязываются к траектории, на что указывает сдвиг названия слоя вправо.
• Создать новый слой под слоем направляющей. Объекты, размещенные на этом слое, к которым будет применена анимация методом расчета кадров (tweened), автоматически привязываются к траектории.
• Выделить слой под слоем с направляющей и выполнить команду Modify > Layer (Изменить > Слой) с выбором значения Guided (Управляемый) для типа слоя в диалоговом окне Layer Properties (Свойства слоя).
• Щелкнуть на слое при нажатой клавише Alt.

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

• Выделите слой, связь которого надо разорвать, и перетащите его выше слоя направляющей.
• Выполните команду Modify > Layer (Изменить > Слой) с выбором значения Normal (Обычный) для типа слоя в окне Layer Properties (Свойства слоя).
• Щелкните на слое при нажатой клавише Alt.