Материалы для самостоятельного изучения темы "Основы анимации"

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

Работа в редакторе Flash

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

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

     После запуска открывается окно, основные элементы которого представлены на рисунке 1.

Рисунок 1

Панель инструментов

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

содержит четыре раздела

(рис. 2.):

В разделе Tools собраны

сами инструменты.

Затем следуют разделы:

View (способ просмотра),

Color (выбор цвета

обводки и заливки,  и,

наконец, контекстно-

зависимая область

настройки инструментов

Options (параметры).

                                                                                                                          Рисунок 2


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

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

     Рассмотрим создание изображений в редакторе Flash.

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

   Для задания цвета обводки и заливки можно использовать панель инструментов, а также панели Набор цветов (Color Swatсhes)  и  Смеситель  цветов (Color Mixer).  Графический  объект  не обязательно  должен  содержать  одновременно  и  обводку,  и  заливку.  Можно нарисовать фигуру без обводки или заливки, отключив их на панели инструментов. Можно также удалить обводку или заливку впоследствии.

     Каждый объект можно трансформировать, т. е. преобразовать, изменяя его свойства (например, форму, размер, положение, цвет, прозрачность…). С самого начала  важно  приобрести  навыки  выделения  объектов  и  их  частей,  а  также изменения их свойств. Основной инструмент выделения - черная Стрелка (Arrow)


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

Рисунок 3

Алгоритм выполнения задания


КОРОТКО О ГЛАВНОМ

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

     Каждый объект можно трансформировать, т. е. изменять его свойства.

   Параметры  выделенного  объекта  отображаются  и  задаю-тся  на  панели Свойства (Properties).  Основной  инструмент  выделения  объектов - черная Стрелка (Arrow).

свернуть

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

1. Преобразования формы

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

Рисунок 1


Задание 1. Нарисовать елочку, размножить изображение и с помощью преобразования Distort (Искажение) создать эффект перспективы.

Рисунок 2

Алгоритм выполнения задания


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


Задание 2.   Получить изображения (рис. 3) путем объединения и вырезания объектов.

Рисунок 3

Алгоритм выполнения задания


КОРОТКО О ГЛАВНОМ

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

    Вид  преобразования  выбирается  в  меню  или  на  панели  инстру-ментов  в разделе  Options ( Параметры): Rotate and Skew (Поворот  и  Наклон), Distort (Искажение), Scale (Масштабирование), Envelope (Огибание).

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


2. Преобразования заливки

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


Задание 1. Изобразить прямоугольник с заливкой спектром (красный, оранжевый, желтый, зеленый, голубой, синий, фиолетовый) с линей-ным градиентом (рис. 4).

Рисунок 4

Алгоритм выполнения задания


Задание 2. Нарисовать овалы с радиальной и линейной градиентными заливками (рис 5 (а, в)). Трансформировать заливки в соответствии с рисунками  5 (б, г).

Рисунок 5

Алгоритм выполнения задания


КОРОТКО О ГЛАВНОМ

    Заливка  может  быть  однотонной,  с  градиентом,  а  также c заполнением растровым изображением.

    Наборы  цветов  и  шаблоны  градиентов  представлены  на  панели  Color Swatches

    Для  настройки  параметров  заливки  используют  панель Смеситель Цветов (Color Mixer).

    Для преобразования градиентной заливки служит инструмент Транс-формация заливки.

    Для копирования стилей обводки и заливки одного объекта на другой объект предназначен инструмент Пипетка (Dropper).

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

свернуть

Использование слоев и библиотеки объектов

Создание и использование слоев

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

    Список  слоев  находится  в  левой  части  шкалы  времени ( рис 1). При создании нового фильма в этом списке всего один слой с именем Layer 1 (Слой 1).

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

Рисунок 1

    Слой, содержимое которого можно редактировать в данный момент, является активным.  Его  имя  выделяется  темным  цветом  и  отмечается  изображением карандаша.  Слой  можно  заблокировать,  т.  е.  Запретить  редактирование расположенных на нем объектов. Это полезно делать, чтобы нечаянно не поместить на “чужой” слой вновь создаваемые объекты, а также исказить или пере-местить уже  существующие.  Чтобы  заблокировать  или  разблокировать  слой  достаточно щелкнуть мышью по точкам, расположен-ным в столбце под изображением замка.


Задание 1. Изобразить траву, березы, ели и зайца на разных слоях. Поместить слои «береза» и «ель» в папку «Деревья». Исследовать влияние видимости и порядка следования слоев.

Рисунок 2

Алгоритм выполнения задания


КОРОТКО О ГЛАВНОМ

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

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


 

свернуть

Основы Flash-анимации

Основные понятия

    На предыдущих уроках мы рассматривали Flash как векторный графический редактор. Однако его главное назначение состоит в создании анимаций, которые могут  содержать  звуковое  сопровождение,  видеофрагменты  и  интерактивные элементы. В на-стоящее время Flash-анимация превратилась в мощную технологию, особенностями  которой  являются:  векторная  графика;  реа-лизация  нескольких видов анимации; импорт и экспорт векторных и растровых изображений, аудио и видео фрагментов; поддержка интерактивных элементов интерфейса; встроенный язык  програм-мирования. С  помощью  этой  технологии  создаются  рекламные ролики,  фильмы,  мультимедийные  приложения,  модели,  интерактивные Web-страницы  и  даже  игры.  Благодаря  исключительно  малому  размеру  они  широко распространены в сети Интернет. 

    Процесс разработки  анимации  в среде Flash состоит в следующем. Сначала создается  исходный  документ (файл  с  расширением  fla).  Этот документ  можно просматривать и редактировать в редакторе Flash. Затем он преобразуется в swf-файл,  который  уже  можно  просмотреть  в Flash-проигрывателе  и Web-браузере. Этот процесс называют публикацией фильма. Кроме того, можно экспортировать результаты работы в файлы других форматов, напр., avi, mov, анимированный gif.

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

Рисунок 1

    Различают  два  вида  автоматической анимации, которым соответствуют  два способа генерации промежуточных кадров: кадры, построенные  путем изменения формы  объектов (shape tween)  и  кадры,  построенные  путем  изменения положения и трансформации экземпляров символов (motion tween).


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

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


Задание 1. Создать мультипликацию, состоящую из четырех кадров (рис 2).

Рисунок 2

Алгоритм выполнения задания


КОРОТКО О ГЛАВНОМ

    Разработка анимации в среде Flash состоит в создании исходного документа в формате  fla  и  преобразовании  его  фильм  в  формате  swf,  который  можно просмотреть в Flash-проигрывателе и Web-браузере.

    Основной  инструмент  при  работе  с  анимацией - шкала  времени.  На  ней отображается информация о слоях и кадрах.

    Важнейшее  понятие  анимации - ключевые кадры.

   Различают  два  вида  автоматической анимации, которым соответствуют  два способа генерации промежуточных кадров: кадры, построенные  путем изменения формы  объектов (shape tween)  и  кадры,  построенные  путем  изменения положения и трансформации экземпляров символов (motion tween).

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

свернуть

Анимация движения

    Анимация движения производится путем автоматической генерации (автозаполнения) промежуточных кадров. При этом ключевыми являются лишь первый и последний кадры, которые содержат начальную и конечную фазы анимации. Промежуточные  кадры  создаются  путем  изменения  положения  и  трансфор-мации экземпляров символов. Генерацию промежуточных фаз обеспечивает инструмент Motion Tween (движение благодаря изменению промежуточных кадров).


Задание 1. Создать анимацию движения шарика на фоне деревьев (рис 1).

Рисунок 1

Алгоритм выполнения задания


КОРОТКО О ГЛАВНОМ

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

   Генерацию промежуточных фаз обеспечивает инструмент  Motion Tween (движение благодаря изменению промежуточных кадров).

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

свернуть

Движение нескольких объектов

    Анимация движений нескольких объектов создается в несколько этапов:

     1) “расстановка декораций”, т.е. размещение на отдельных слоях объектов, которые должны двигаться независимо;

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

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


Задание 1. Создать анимацию движения робота и мяча длительностью 2 секунды. Первую секунду робот движется из крайнего левого положения вправо до столкновения с мячом, который в это время покоится посередине поля. После столкновения робот движется в обратном направлении, а мяч 0,5 с летит до удара о стенку, затем 0,5 с летит в обратном направлении (рис 1).

Рисунок 1

Разработку анимации начинаем с расстановки декораций, т.е добавления слоев и размещения объектов.

Алгоритм выполнения задания


КОРОТКО О ГЛАВНОМ

    Анимация движений нескольких объектов создается в несколько этапов:

     1) размещение на отдельных слоях объектов, которые должны двигаться независимо

     2) выделение интервалов (этапов) движения всех объектов и уточнение свойств этих объектов в начале и конце каждого интервала;

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

   

свернуть

автор: Велесницкий Андрей Григорьевич

  • Класс/группа: 10
  • Категория: Конкурс сайтов, блогов, веб-страниц творческих учащихся учреждений образования
  • Я, Велесницкий Андрей Григорьевич, родился 26 сентября 2004 года в д. Ворони, Столинского района, Брестской области. С 2011 года являюсь учеником Воронёвской средней школы. В  2018 году был награжден дипломом 1 степени в областном этапе районной олимпиады по химии. В 2019 году был награжден дипломом 3 степени на втором этапе республиканской олимпиады по химии. В 2020 был награжден дипломом 2 степени за участие в районном конкурсе "Химия вокруг нас". Увлекаюсь спортом-посещаю секцию по баскетболу, футболу. Принимаю активное участие в школьных и районных соревнованиях. В последнее время к моим любимым занятиям добавилось новое увлечение, такое как создание анимации.