Создание анимации в Macromedia Flash

Программный продукт Macromedia Flash интересен для специалиста по связям с общественностью, поскольку предназначен для создания мультимедийных компонентов Web-страниц. Он предлагает средства для реализации интерактивной работы с этими компонентами, дополняя Web-сайт потоковым звуком в формате MP3.

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

При пошаговой анимации (frame-by-frame animation) в каждом кадре создается собственное изображение как в мультфильмах, нарисованных художниками. Это существенно увеличивает размер конечного файла, так как требует сохранения всех кадров. При использовании автоматического создания промежуточных кадров (tweened animation) в конечном файле сохраняется изображение только для ключевых кадров, что позволяет сократить его размер.

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

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

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

Рис. 3 Анимация движения в Macromedia Flash

Задание 1. Анимация движения.

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

2. Создадим на столе объект, например цветной круг. Выделив его, по команде Insert - Create Motion Tween преобразовываем объект в символ Flash с именем по умолчанию tween1.

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

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

5. Двойной щелчок по последнему ключевому кадру вызывает диалоговое окно Frame Properties, в котором на вкладке Tweening задаются свойства анимации движения.

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

На вкладке Tweening доступны следующие параметры:

1. Раскрывающийся список Tweening для указания типа анимации (none, motion, shape);

2. Флажок Tween Scaling, позволяющий выполнить изменение размера группы или символа;

3. Раскрывающийся список Rotate для задания вращения объекта (none, automatic, clockwise, counterclockwise), причем в поле справа следует ввести число оборотов, которое должен выполнить объект;

4. Флажок Orient to Path Direction позволяет задать движение символа или группы по траектории;

5. Для изменения темпа движения в разных местах траектории служит ползунок Easing, перемещая который в начало (In), можно замедлить изменения в начальной стадии либо, передвигая его в конец (Out), — в заключительной части траектории. В среднем положении ползунка темп для всех кадров одинаков;

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

7. Флажок Snap to Guide фиксирует анимируемый экземпляр на траектории движения;

8. При анимации формы переключатель Blend Type задает гладкие промежуточные формы при установке значения Distributive и сохраняет четкие углы и прямые линии при установке значения Angular.

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

Задание 2. Анимация формы.

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

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

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

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

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

5. Для первого ключевого кадра открываем диалоговое окно Frame Properties либо двойным щелчком, либо выбором команды Modify - Frame, в котором на вкладке Tweening задаем тип анимации Shape.

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

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

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

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

• Порядок идентификаторов должен сохраняться как в начальном положении фигуры, так и в конечном положении (хотя возможны и исключения),

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

Использование идентификаторов формы позволяет не только выполнять анимацию формы, но и создавать дополнительные эффекты, например, вращение.

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

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

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

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

4. Для первого ключевого кадра открываем диалоговое окно Frame Properties либо двойным щелчком, либо выбором команды Modify - Frame, в котором на вкладке Tweening задаем тип анимации Shape. При просмотре такой анимации круг будет лишь постепенно менять свой цвет.

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

5. Выделим первый ключевой кадр и выполним команду Modify - Transform - Add Shape Hints. В центре фигуры появится начальный идентификатор — красный кружок, помеченный буквой "а". Если команда Add Shape Hints недоступна, то предварительно следует выполнить команду View - Show Shape Hints.

6. Переместим идентификатор "а" на левый край окружности, и повторим команду Add Shape Hints. Новый идентификатор "b" переместим на правый край окружности.

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

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

9. Команда File - Save позволяет сохранить файл анимации с расширением .fla для дальнейшей работы над ней.

Лишний идентификатор формы, размещенный на фигуре, можно удалить, щелкнув по нему правой кнопкой мыши и выбрав из контекстного меню команду Remove Hint. Делать это следует на первом ключевом кадре последовательности. Для удаления всех идентификаторов формы достаточно выполнить команду Modify - Transform - Remove All Hints.

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

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

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

Чтобы было удобней редактировать пошаговую анимацию, можно отобразить на столе сразу несколько кадров, для чего выполняется щелчок по кнопке окна Timeline — Onion Skin (вторая слева под временной осью). В этом режиме текущий кадр отображается ярко, а все остальные — как полупрозрачные с наложением друг на друга. Редактировать при этом можно только текущий кадр. Чтобы обеспечить доступ ко всем кадрам, отмеченным маркером диапазона, следует щелкнуть по кнопке Edit Multiple Frames, расположенной так же под временной осью.

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

Теперь, когда мы научились создавать движущееся изображение, можно добавить к нему звук.

Macromedia Flash позволяет назначить объекту звук-событие, либо использовать потоковый звук. Их воспроизведение при просмотре веб-страницы в Интернет реализуется по-разному. Воспроизведение звука-события начинается только после его полной загрузки на локальный компьютер и продолжается до тех пор, пока его специально не остановят. Потоковый звук начинает воспроизводиться сразу после загрузки такого объема данных, который достаточен для озвучивания первых нескольких кадров, и продолжает воспроизводиться по мере дальнейшей загрузки, при этом звук синхронизируется с временной диаграммой на веб-сайте. Таким образом, воспроизведение звука совместно с анимацией может быть сделано непрерывным, не зависящим от временной диаграммы, либо его можно синхронизировать.

Озвучивание фильма в Macromedia Flash предполагает создание отдельного слоя для звука, назначение ему звукового файла и задание параметров звука на вкладке Sound диалогового окна свойств кадра Frame Properties. Создать звуковой слой можно как обычно командой Insert - Layer. Звуки можно размещать в нескольких слоях, и каждый такой слой работает подобно звуковому каналу. При воспроизведении фильма звуки на всех слоях воспроизводятся вместе.

Полоса частот и степень сжатия звукового файла существенно влияют на качество и размер звуковых данных в готовом фильме. Macromedia Flash может импортировать звуковые файлы форматов AIFF и WAV, сохраняя их в библиотеке наряду с растровыми изображениями и символами. Так как звуковые файлы занимают значительный объем памяти, то желательно использовать файлы, оптимальные по качеству. Macromedia Flash работает с 8- или 16-разрядными звуками с полосой 11, 22 или 44 кГц (для стереозвука потребуется в два раза больше места, чем для моно). При импорте звука, полоса которого не кратна 11, звучание может стать выше или ниже чем в оригинале из-за его преобразования.

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

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

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

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

Рис. 9 Окно настройки присоединенного к кадру звука

Задание 5. Присоединение звукового файла к анимации

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

2. При выделенном слое выбором команды File - Import открываем окно задания местонахождения файла и выбираем нужный звуковой файл. При необходимости импортировать несколько файлов, последовательно повторяем эти действия.

3. Для назначения слою звукового файла следует создать в нем ключевой кадр, выделить его и выбрать команду Modify - Frame. В окне Frame Properties перейдите на вкладку Sound, где в одноименном раскрывающемся списке выберите один из импортированных файлов.

4. Отредактируйте звук с помощью инструментов Macromedia Flash, проверяя характер звучания с помощью кнопки воспроизведения (рис.9), и щелчком по кнопке ОК закройте окно.

На вкладке Sound окна Frame Properties можно задать следующие параметры воспроизведения звукового файла. В раскрывающемся списке Sync представлены четыре варианта событий:

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

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

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

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

В поле ввода Loop задается число повторений воспроизведения звука. Если длина звука мала, то для его непрерывного воспроизведения в течение всего фильма можно задать достаточно большое число.

Раскрывающийся список Effect позволяет назначить звуковому файлу некоторые эффекты:

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

• Left Channel — воспроизводит звук только в левом канале;

• Right Channel — воспроизводит звук только в правом канале;

• Fade Left to Right — звук "перетекает" с левого канала на правый;

• Fade Right to Left — звук "перетекает" с правого канала на левый;

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

• Fade Out — постепенное уменьшение громкости в процессе воспроизведения;

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

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

Задание 6. Присоединение нескольких звуковых файлов

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

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

3. Результат одновременного воспроизведения звука проверяем по команде Control - Test Movie.

4. Общие параметры экспорта звука задаем в окне Publish Settings, открывающемся по команде File - Publish Settings.

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

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

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

• Default — используются параметры по умолчанию, заданные в окне Publish Settings,

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

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

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

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

• Флажок Convert Stereo to Mono позволяет преобразовать стереозвук в монофонический,

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

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

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

• Раскрывающийся список Quality позволяет задать один из трех вариантов: Fast, Medium, Best (первый пригоден для публикации на веб-сайте, остальные для публикации фильма на локальном диске или компакт-диске).

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