Sb000340

Задание 4.

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

2.Выполняем команду File - Place и помещаем в центр изображения выбранную фотографию. С помощью ползунка на палитре Layer устанавливаем для слоя с фотографией непрозрачность (Opacity) 10%.

3.На палитре Animation с помощью кнопки Duplicates current frame создаем новый кадр, в котором устанавливаем для слоя с фотографией непрозрачность 100%.

4.Открываем меню палитры Animation и выбираем команду Tween.

Водноименном окне в поле Frames To Add задаем количество промежуточных кадров - 2, устанавливаем флажок параметра Opacity и щелкаем по кнопке ОК.

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

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

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

8.Удерживая клавишу <Shift>, щелкаем по предыдущему кадру на палитре Animation. Будут выделены два кадра.

9.С помощью команды Tween вставляем три новых кадра с промежуточными положениями текста. Убедитесь при этом, что флажок параметра

Opacity снят.

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

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

12.Выполняя команду File - Save сохраняем файл в формате Pho-

toshop для продолжения работы со слоями изображения. Если работа завершена и не требуется сохранения слоев, то по команде File - Save Optimized сохраняем GIF-файл для Web-страницы.

11

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

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

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

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

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

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

пов:

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

∙анимации изменения формы, при которой первоначальное изоб-

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

12

Рис. 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 задаются свойства анимации движения.

13

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

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

a.Раскрывающийся список Tweening для указания типа анимации

(none, motion, shape);

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

c.Раскрывающийся список Rotate для задания вращения объекта

(none, automatic, clockwise, counterclockwise), причем в поле справа следует ввести число оборотов, которое должен выполнить объект;

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

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

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

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

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

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

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

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

манду View - Timeline.

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

14

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

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

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

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

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

Анимация формы фигур позволяет создать эффект метаморфозы, когда одна форма превращается в другую. Для возможности управления этими изменениями служат специальные идентификаторы формы (shape hints), ко-

15

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

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

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

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

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

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

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

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

манду View - Timeline.

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

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

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

16

котором на вкладке Tweening задаем тип анимации Shape. При просмотре такой анимации круг будет лишь постепенно менять свой цвет.

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

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

View - Show Shape Hints.

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

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

17

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

18

6.Повторяем шаги 4 и 5 до тех пор, пока не будет сформировано необходимое превращение. Воспроизведение анимации с помощью клавиши <Enter> позволяет контролировать работу в любой момент.

7.Готовый фильм сохраняется по команде File - Export Movie, что позволяет создать файл с расширением .swf, предназначенный для воспроизведения с помощью Flash проигрывателя, но не подлежащий дальнейшему редактированию.

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

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

19

маркером диапазона, следует щелкнуть по кнопке Edit Multiple Frames, расположенной так же под временной осью.

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

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

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

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

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

20