Создание анимационных эффектов в Macromedia Flash

Министерство образования и науки Астраханской области

ГАПОУ АО «Астраханский социально-педагогический колледж»

Специальность 44.02.02 «Преподавание в начальных классах»

МДК.05.01. Теоретические и методические основы использования цифровых образовательных ресурсов

РЕФЕРАТ

Создание анимационных эффектов в Macromedia Flash

Выполнил:

студент группы 3 «А»

__________ Касимов И. К,

Проверил:

преподаватель

__________ Сергалиева Н. С.

Астрахань, 2022

Содержание

Введение

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

Рисованная анимация возникла в конце XIX в. В 1900 - 1907 гг. американец Джеймс Стюард Блектон снял анимационные фильмы «Волшебные рисунки», «Комические выражения смешного лица», «Отель с привидениями». В России первые мультфильмы были созданы в 1911 - 1913 гг. В Беларуси первый мультфильм «Октябрь и буржуазный мир» создан в 1927г. Прорисовка всех фаз движения (кадров) в первых мультфильмах требовала огромных трудозатрат. Так, для мультфильма продолжительностью 5 мин при частоте 24 кадра в секунду необходимо 7200 рисунков. При этом многие кадры содержат повторяющиеся фрагменты, которые приходилось многократно перерисовывать. Поэтому в 20-х гг. XX в. Начали применять упрощенную технологию анимации: на статичный, неизменный рисунок стали накладывать прозрачную целлулоидные пленки с изменяющимися подвижными элементами. Это был первый шаг в механизации труда художника-аниматора, который получил развитие в компьютерных технологиях.

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

Понятие «анимация»

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

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

Основные элементы интерфейса

Одной из универсальных систем векторной графики и компьютерной анимации является редактор Macromedia Flash. Кроме стандартных инструментов рисования, он содержит язык программирования Actio Script, что позволяет создавать как простые анимации, так и интерактивные, т.е. управляемые пользователем.

После запуска редактора открывается окно. В центре окна находиться Рабочее поле (Stage), на котором размещаются изображения. В верхней части окна находится строка меню, по которой располагается горизонтальная панель, содержащая инструменты управления слоями (Layers) и шкалу времени (Timeline), обеспечивающую управление кадрами (Frames). Вдоль левой стороны окна обычно располагаются панель инструментов (Tools), в правой и нижней части окна принято располагать так называемые плавающие панели, например Смеситель цветов (Color Mixer), Свойства (Properties), Библиотека (Library) и др. Чтобы освободить место для рисования и просмотра изображения, панели можно перемещать, удалять с экрана и возвращать по мере надобности. Для этого используют меню Окно (Window). Панель инструментов рисования и редактирования содержит четыре раздела.

В разделе Tools собраны сами инструменты. Затем следует раздел View (способ просмотра), Color (выбор цвета обводки и заливки) и, наконец, контекстно-зависимая область настройки инструментов Options (параметры).

Рисование в редакторе Macromedia Flash

Любая анимация содержит последовательность статичных изображений, поэтому сначала надо научиться их создавать. Вы уже умеете рисовать в графическом редакторе Paint, а также работать с векторной графикой в текстовом редакторе Word. Некоторые инструменты вам знакомы, например Карандаш (Pencl), Кисть (Brush), Линия (Lines), Овал (Oval), Прямоугольник (Rectangle), Ластик (Eraser).

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

Графический объект является совокупностью контура и внутренней области. Контур может быть обрамлен обводкой (Stroke) - линией имеющей определенный цвет, толщину и другие особенности, т.е. стиль. Внутренняя область, ограниченная контуром, может иметь заливку (Fill). Она также имеет свой стиль. Для задания цвета обводки и заливки можно использовать панель инструментов, а также панель Набор цветов (Color Swatches) и Смеситель цветов (Color Maxer). Графический объект не обязательно должен содержать одновременно и обводку, и заливку. Можно нарисовать фигуру без обводки или заливки впоследствии. Каждый объект можно трансформировать, т.е. преобразовать, изменяя его свойства (например, форму, размер, положение, цвет, прозрачность). С самого начала важно приобрести навыки выделения объектов и их частей, а также изменения их свойств. Основной инструмент выделения - Стрелка (Arrow). Приведем несколько примеров, как, нарисовать объекты в редакторе Flash.

Преобразование объектов, формы и заливки

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

Графические объекты можно подвергать различным преобразованиям с помощью меню Модифицировать - Трансформировать (Modify Transform) или инструмента Трансформация (Free Transform). Вид преобразования выбирается в меню или на панели инструментов в разделе Параметры (Options).

Заливка может быть однотонной (solid), с плавным переходом цветов - градиентом, а также с заполнением растровым изображением (bitmap). Цветовые палитры и шаблоны градиентов представлены на панели Набор цветов (Color Swatches). Для настройки параметров заливки используют панель Смеситель цветов (Color Mixer).

Анимационные эффекты

Flash MX 2004 включает предварительно подготовленные анимационные эффекты (timeline-эффекты), которые позволяют создавать сложные анимации, используя минимальное количество действий. Вы можете применять функцию Timeline Еffects к следующим объектам:

• текст;

• графические объекты, включая формы, сгруппированные объекты и графические символы;

• растровые изображения;

• кнопки.

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

В качестве примера создадим эффект «взрыв» применительно к тексту. Для этого напечатаем некоторую фразу или слово, выделим его с помощью инструмента Arrow и выполним команду Insert = Timeline Effects = Effects = Explode.

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

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

Аналогично эффекты можно применить к растровому изображению. Рассмотрим пример с плавным исчезновением растровой картинки. Импортируем растровое изображение на сцену по команде File = Import = Import to stage и применим эффект Вlur по команде Insert = Timeline Effects = Effects = Blur. В результате получим следующий ролик.

Для того чтобы отредактировать анимационный эффект, выделите на сцене объект, ассоциированный с эффектом, и в появившемся окне Properties нажмите кнопку Edit — в результате появится панель Blur.

В панели Blur можно вновь поменять параметры эффекта и сохранить новые настройки.

Покадровая анимация

Рассмотрим простейший пример — листочек перемещается из одной точки экрана в другую с поворотом вокруг своей оси.

Нарисуем кленовый листочек — соответствующий кадр на панели Timeline окрасится в серый цвет и внутри него появится точка, указывающая на то, что это ключевой кадр. Ключевой кадр — это кадр, в котором происходит помещение содержимого или его изменение.

Затем щелкнем правой кнопкой мыши по соседнему кадру и вставим еще один ключевой кадр, используя команду Insert Keyframe. В результате в этом кадре появится копия листочка; переместим ее вниз (пользуясь инструментом Arrow) и повернем, используя команду Modify = Transform = Free Transform.

Повторим процедуру таким образом, чтобы в 6-м кадре лист занимал конечное положение.

Обратите внимание на панель Properties — в левой ее части указывается тип объекта. В каждом кадре листок является объектом типа Shape (форма), о других типах объектов будет рассказано чуть позже.

Для того чтобы экспортировать фильм в виде SEF-файла (родной формат Macromedia для Flash-фильмов), выполним команду File = Export = Export Movie. В результате получим следующий фильм (исходник к данному фильму находится в прилагаемом файле leave1.fla). Просмотреть получившийся фильм можно не покидая программы Flash по команде Control = Test Movie. Причем для того, чтобы просмотреть, какой объем занимают отдельные кадры фильма, следует выполнить команду . В результате мы увидим, что каждый из шести кадров занимает около 600 Кбайт. Таким образом, объем всего фильма составляет 3686 байт.

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

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

Рассмотрим, как можно сделать ту же анимацию и получить более компактный результирующий файл. Выделим на экране нарисованный листок инструментом Arrow и выполним команду Insert = Timeline = Create Motion Tween, в результате листочек будет помещен в рамочку, а в панели Properties появится сообщение, что выделенный объект имеет свойства Grafic (рис. 10). Это означает, что анимируемый объект автоматически преобразован в графический символ. Теперь его уже невозможно произвольно редактировать инструментом Arrow как объект типа Shape. Использование символов является важным понятием во Flash. Однажды создав символ, его можно использовать несколько раз в фильме, не увеличивая размер результирующего файла. Символы делятся на графические (graphic), символы-кнопки (button) и символы-мувиклипы (movie clip). В данном уроке рассмотрим графический символ, а к другим типам символов вернемся позднее. Каждый новый символ сразу становится частью библиотеки текущего документа.

Если выполнить команду Window = Library, то можно убедиться, что в библиотеке появился символ и ему по умолчанию присвоено имя Tween 1. Для того чтобы присвоить символу другое имя, достаточно дважды щелкнуть по названию и заменить его на желаемое. После того как мы сформировали графический символ, перейдем в конечный кадр нашей анимации (пусть это будет 15-й кадр) и вставим ключевой кадр (по команде Insert Keyframe). В этом кадре появится копия символа, которую мы переместим и повернем вокруг оси (по команде Modify Transform=Free Transform), как в предыдущем примере.

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

Для того чтобы проиллюстрировать падение листа с поворотом вокруг плоскости листа, повторим предыдущий пример, только при модификации последнего ключевого кадра добавим команду Modify = Transform = Flip Horizontal. В результате получим следующий фильм.

Теперь рассмотрим пример, когда листочек приближается к зрителю. Для этого в конечном кадре вместо зеркального отображения (Flip Horizontal) будем увеличивать размер листка. Для того чтобы не возникало ощущения замедления движения при приближении объекта к зрителю, скорость его движения необходимо увеличивать. Для того чтобы добиться этого эффекта, необходимо щелкнуть по первому кадру и обратиться к разделу Ease в панели Properties. Положительные значения параметра Ease приводят к замедлению движения, а отрицательные — к ускорению. Выберем максимальное ускорение объекта.

Для этого выставим значение параметра Ease равным –100. В результате получим фильм. Отметим, что первый кадр можно поместить и за сценой, тогда мы получим фильм, в котором листок будет влетать в кадр и двигаться навстречу зрителю. Можно моделировать вращение листа вокруг смещенного центра симметрии. Надеюсь, читатель сам сможет поэкспериментировать, усложняя модификацию конечного кадра и изменяя таким образом характер движения листа.

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

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

Flash позволяет задать движение объекта вдоль заданной траектории. Для того чтобы задать эту траекторию, выполните команду Insert = Timeline = Motion Guide.

В результате над текущим слоем появится специальный слой, который по умолчанию будет иметь имя Guide Layer 1.

Щелкнем мышью по слою траектории и с помощью инструмента «карандаш» нарисуем линию, вдоль которой планируется перемещение листка.

Теперь перейдем в первый кадр (щелкнем по нему мышью) и в появившейся панели Properties установим флажок Snap (задает режим привязки к траектории движения).

После того как вы поставите флажок Snap, центр листа совместится с траекторией движения. Пользуясь инструментом Arrow, можно переместить листочек вдоль кривой движения, но если вы попробуете оторвать листок от траектории и расположить его рядом с ней, он будет притягиваться назад и вновь «прилипать» к траектории движения.

Перейдите на последний кадр и аналогично привяжите листок к конечной точке траектории движения. Для придания фильму объемности добавим трансформацию Flip Horizontal, — в результате получим фильм.

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

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

Заключение

Flash-клипы представляют собой элементы векторной графики и анимации для web-страниц. Flash-клипы имеют компактные размеры, быстро загружаются и меняют свой масштаб в соответствии с размерами монитора конкретного пользователя.

С помощью пакета Macromedia Flash web-дизайнеры создают навигационные панели, динамические логотипы, полноформатные клипы с синхронизированным звуком и страницы Интернет.

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

В Macromedia Flash анимация создается следующими способами:

• покадровая анимация - при этом каждое преобразование или перемещение объекта создается пользователем в отдельном кадре;

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

Во Flash предусматриваются два метода автоматического заполнения кадров: движение – предназначен для изменения атрибутов объекта и превращение – предназначен для преобразования одного объекта в другой.

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

Список литературы

1. https://www.bibliofond.ru/view.aspx?id=656921

2. https://multiurok.ru/files/referat-sozdanie-animatsii-v-programme-macromedia.html

3. https://xreferat.com/33/4650-1-sozdanie-animacii-sredstvami-macromedia-flash-5.html

4. www.daflashcompdoc/internet/flash/

5. https://compress.ru/article.aspx?id=10165

6. https://edufuture.biz/index.php

7. https://2dip.su

8. https://works.doklad.ru/view/vvw_cm2A-kA.html

9. https://все-знания.рф/work/393154/Sozdanie-flash-animacii-sredstvami

10. https://desktop.arcgis.com/ru/arcmap/10.3/map/animation/what-is-an-animation.htm