40948

Создание покадровой анимации в Flash

Лекция

Косметология, дизайн и стилистика

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

Русский

2013-10-22

793.5 KB

59 чел.

dobe Flash Томилова Елена Анатольевна

Лекция 3. Анимация

[0.1] Практическая работа № 7

[0.1.1] Создание покадровой анимации

[0.1.2] Тестирование анимации

[0.1.3] Формирование оптимальной сцены анимации

[0.2] Практическая работа №8. Анимация перемещения объекта

[0.3]
Практическая работа №9. Анимация изменения размера объекта

[1] Некоторые особенности анимации

[1.1] Практическая работа №11. Создание анимации постепенно исчезающий рисунок

[1.2] Практическая работа №12. Морфинг

Введение 

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

Во Flash предусмотрено три различных механизма анимирования объектов:

  •  покадровая («классическая») анимация, когда автор сам создает или импортирует из других приложений каждый кадр будущего «мультика» и устанавливает последовательность их просмотра;
  •  автоматическое анимирование (так называемая tweened-анимация), при использовании которой автор создает только первый и последний кадры мультипликации, а Flash автоматически генерирует все промежуточные кадры; различают два вида tweened-анимации: анимация, основанная на перемещении объекта (motion animation), и анимация, основанная на трансформации (изменении формы) объекта (shape animation);
  •  анимация на основе сценариев; сценарий представляет собой описание поведения объекта на собственном языке Flash, который называется ActionScript; синтаксис этого языка напоминает синтаксис других языков сценариев, используемых в Web-публикациях (например, JavaScript и VBScript).

Каждый из этих механизмов имеет как достоинства, так и недостатки. В частности, tweened-анимация обладает двумя несомненными достоинствами:

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

Вместе с тем, tweened-анимация пригодна для создания лишь наиболее простых сюжетов, в которых свойства объектов изменяются равномерно.

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

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

Шкала времени

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

Линейка - отображает все кадры по возрастающей. Числом отмечен каждый пятый кадр.

Указатель шкалы времени - выполняет ту же функцию, что и инструмент Стрелка в рабочей области. Он выделяет кадр, для последующей с ним работы.

Чтобы выделить конкретный кадр, щелкните по нему левой клавишей мыши.

Типы кадров

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

Ключевой кадр - кадр доступный для обработки. В анимации этот кадр будет отображаться так, как нарисует пользователь. На временной шкале ключевой кадр отображается чёрным кружочком, если в нём есть изображение, и белым, если нет никакого рисунка.

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

Раскадровка - автоматический переход изображения из одного ключевого кадра в другой.

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

По кадровое формирование изображения.

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

Элементарные операции с кадрами: 

Действие

Контекстное меню

Комбинация клавиш

Примечание

Вставить пустой ключевой кадр

Вставить пустую клавиатуру

F7

Ключевой кадр, повторяющий содержание предыдущего

Вставить клавиатуру

F6

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

Очистить ключевой кадр

Очистить клавиатуру

Shift-F6

Вставить обычный кадр

Вставить кадр

F5

Вставляя обычный кадр (не ключевой), увеличиваем время анимации или время отображения предыдущего ключевого кадра.

Удалить кадр

Стереть кадры

Shift-F5

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

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

Достоинства:  Покадровая анимация дает вам, в некотором смысле, больший контроль над анимацией, и если вы опытный аниматор, вы можете выгодно ею пользоваться.  Это единственный способ организовать смену абсолютно независимых изображений - слайд шоу (например, создавая обычный баннер средствами Flash). 
И все остальное, что вытекает из возможности прорисовывать каждый кадр вручную.

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

Практическая работа № 7

Создание покадровой анимации

Рассмотрим технологию покадровой анимации на примере создания анимированного заголовка "Анимация во Flash".

  1.  Выберите Документ Flash.
  2.  Выберите инструмент Стрелка и кликните левой клавишей мыши в первом кадре шкалы времени (Выбор кадра).
  3.  Выберите инструмент Текст и задайте параметры его модификаторов (тип шрифта, размер, цвет и пр.).
  4.  Кликните левой клавишей мыши в левом верхнем углу сцены, чтобы установить текстовую метку.
  5.  На клавиатуре наберите заглавную букву А.

  1.  Для того, чтобы в анимации буквы в разных кадрах располагались на одной линии, воспользуемся инспектором объектов. Для этого выберите инструмент Стрелка и кликните левой клавишей мыши на букве А. Чтобы оптимизировать площадь заголовка, задайте нулевые координаты в строках X и Y. Буква А будет размещена в самой верхней левой точке основной сцены.

  1.  Для формирования следующего кадра, в котором будет появляться новая буква, необходимо выполнить следующие действия: Кликните левой клавишей мыши в следующем пустом кадре шкалы времени. (Он станет темным).
  2.  Выберите Вставить клавиатуру или просто нажмите на клавиатуре клавишу F6. В кадре шкалы времени появится черная точка.
  3.  Выберите инструмент Текст и если это необходимо задайте новые параметры его модификаторов (тип шрифта, размер, цвет и пр.). Для лучшего усвоения технологии покадровой анимации будем рассматривать пример без изменения параметров модификаторов текста.
  4.  Кликните левой клавишей мыши рядом с предыдущей буквой, чтобы установить текстовую метку.
  5.  На клавиатуре наберите следующую букву.
  6.  Выберите инструмент Стрелка и кликните левой клавишей мыши на новой букве. С помощью этого же инструмента букву, как графический объект, можно перемещать.
  7.  Задайте нулевую координату в строке Y, для того, чтобы все буквы располагались на одной прямой.
  8.  Повторяйте 8-13 операции для каждой новой буквы в заголовке. Для анимации такого заголовка потребуется 15 кадров.

Тестирование анимации

Для того чтобы протестировать полученную анимацию:

  1.  Выберите в главном меню Управление – Тестирование ролика или просто нажмите на клавиатуре клавиши Ctrl-Enter.
  2.  Просмотрев анимацию, нажмите левой клавишей мыши в правом верхнем углу окна тестирования кнопку Закрыть окно (Х).

Формирование оптимальной сцены анимации

Перед публикацией в Web обрежем все лишнее:

  1.  Выберите в главном меню Изменить – Документ или на клавиатуре нажмите клавиши Ctrl+J.
  2.  В открывшемся окне Свойства документа нажмите на клавишу Содержимое.

В результате сцена примет размеры содержимого анимации.

  1.  Сохраните файл под именем Фамилия_7.fla.

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

Гораздо эффективнее другой тип анимации, когда создаются только начальный и конечный кадры некоторого фрагмента, а все промежуточные кадры система достраивает сама. Такой тип анимации называется автоматический (tweened-анимация).

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

Скорость и плавность анимации зависят от количества кадров, которые вы отводите под движение и скорости вашего Flash фильма. Скорость фильма можно изменить здесь: Выберите в главном меню Изменить – Документ или на клавиатуре нажмите клавиши Ctrl+J. В открывшемся окне Свойства документа параметр Частота смены кадра задает количество кадров в секунду. Для качественной анимации скорость должна быть не меньше 25-30 кадров в секунду. 

Плавность и длительность задается количеством кадров, отведенных на анимацию (ее фрагмент). Например, если скорость вашего фильма - 30 кадров/сек., и вам нужно совершить перемещение, скажем, самолетика, из одного угла картинки - в другой за 2.5 секунды, то на это движение вам нужно отвести 75 кадров. 

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

Практическая работа №8. Анимация перемещения объекта

  1.  В левом верхнем углу нарисуйте квадрат.
  2.  Первый кадр шкалы времени видоизменился – окрасился в бледно-красный цвет, и в нем появилась жирная точка – признак того, что кадр стал ключевым.
  3.  Вызовете контекстное меню на ключевом кадре и выберите Создать анимацию движения.

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

  1.  С помощью инструмента «Средства Выделения» (V) переместите объект в новое положение, но в начале проверьте, что вы находитесь в последнем ключевом кадре.

  1.  Отмените выделение объекта, и нажмите Enter – объект пришел в движение.
  2.  Для замедления движения надо переместить вправо конечный ключевой кадр, для ускорения – влево. Выделите слой.
  3.  Нажмите и не отпускайте клавишу Ctrl. Наведите курсор на ключевой кадр – указатель превратился в двунаправленную стрелку.
  4.  Нажмите кнопку мыши и, не отпуская ее, передвигайте кадр.
  5.  Сохраните файл под именем Фамилия_8.fla.


Практическая работа №9. Анимация изменения размера объекта

  1.  Создайте новый файл.
  2.  Нарисуйте в центре кадра окружность.
  3.  В 1-м ключевом кадре – создать анимацию движения (промежуточное изображение).
  4.  Выберите время анимации и команду Вставить ключевой кадр.
  5.  Измените размер объекта конечного ключевого кадра, используя инструмент Свободное преобразование (Q).
  6.  Протестируйте проект.
  7.  Сохраните файл под именем Фамилия_9.fla.

Практическая работа №10. Анимация изменения цвета объекта

  1.  Создайте новый файл, нарисуйте новый объект и примените к нему правила создания анимации движения.
  2.  Находясь в конечном ключевом кадре выделите объект инструментом Стрелка (V). В результате в панели Свойства высветится поле Цвет. Выбрать вариант «Тон», появятся дополнительные поля, с помощью которых можно выбрать цвет.

  1.  Сохраните файл под именем Фамилия_10.fla.

Некоторые особенности анимации

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

Можно задать анимацию, не изменяя ни одного свойства. В результате объект «замрет» на протяжении указанного промежутка времени

Практическая работа №11. Создание анимации постепенно исчезающий рисунок

Объект маленький квадрат, расположен в левом верхнем углу кадра; анимация включает в себя следующие пять шагов:

  1.  Квадрат увеличивается.
  2.  Квадрат движется направо строго горизонтально и останавливается у правой границе кадра.
  3.  Квадрат движется по направлению к левому нижнему углу, изменяя свой цвет, и останавливается в точности под своим увеличенным на 1-м шаге изображением.
  4.  Квадрат некоторое время стоит неподвижно.
  5.  Квадрат возвращается в исходное положение с изменением размера до первоначального.

Сохраните файл под именем Фамилия _11.fla.

Практическая работа №12. Морфинг

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

  1.  Создайте новый файл.
  2.  Нарисуйте круг.
  3.  Выделите ключевой кадр и выберите на панели Свойства – Анимация (Твин) – Форма.

  1.  Выберите 20 кадр и нажмите F6.
  2.  Измените круг, используя инструмент Спецвыделение (заливку можно сделать другого цвета, получится очень красиво!).
  3.  Протестируйте проект.
  4.  Сохраните файл под именем Фамилия _12.fla.

Используемая литература

  1.  Вовк Е.Т. Информатика: уроки по Flash. – М.: КУДИЦ-ОБРАЗ, 2005, - 176 с.
  2.  П. Лапин. Самоучитель Flash MX.  – Спб.: Питер, 2003. – 368 с.

PAGE  1

добавить папку слоев

калькирование (шлейф)

добавить направляющий слой (путеводитель)

анимация трансформации

указатель

центрировать кадр (прокрутить до точки воспроизведения)

удалить выделенный слой

добавить слой

слои

калькирование (шлейф)

строка состояния

кадры

линейка

изменить маркеры шлейфа

  1.  

 

А также другие работы, которые могут Вас заинтересовать

78879. Предмет философии науки. Исследование общих закономерностей по производству, проверке и обоснованию научного знания на разных этапах развития общества 41 KB
  Что такое наука Чем отличается научное знание от мифа и религиозных представлений В чем ценность науки Как она развивается Какими методами пользуются ученые Попытки найти ответы на эти и другие вопросы связанные с пониманием науки как особой сферы человеческой деятельности привели к возникновению в рамках аналитической философии особого направления философии науки которая сформировалась в XX в. на стыке трех областей: самой науки ее истории и философии. Трудно указать тот момент когда возникает философия науки как особая сфера...
78880. Проблема генезиса науки и способы классификации основных этапов ее эволюции 29.5 KB
  Проблема генезиса науки и способы классификации основных этапов ее эволюции В античности и средние века в основном имело место философское познание мира. В античный и средневековый периоды существовали лишь элементы предпосылки науки но не сама наука в собственном смысле слова которая возникает только в Новое время. Онито и образуют первоначальное целое единой науки как таковой науки вообще в отличие от философии. В понимании генезиса возникновения науки в истории и философии науки сложились два противоположных подхода.
78881. Донаучное знание и его особенности 27.5 KB
  Донаучное знание и его особенности Вненаучное знание не является чьейто выдумкой или фикцией. Вненаучное знание разрозненное несистематическое знание которое находится в противоречии с существующей картиной мира. Одна из форм вненаучного знания это донаучное знание. Донаучное знание выступающее прототипом предпосылочной базой научного.
78882. Рождение античной науки 55.5 KB
  Так в древнеегипетской цивилизации носителями знаний были жрецы в зависимости от уровня посвящения обладавшие той или иной суммой знаний. Знания существовали в религиозномистической форме и только жрецы могли читать священные книги и как носители практических знаний имели власть над людьми. Предпосылкой возникновения научных знаний многие исследователи истории науки считают миф. Особенности греческого мышления которое было рациональным теоретическим что в данном случае равносильно созерцательному наложили отпечаток на формирование...
78883. Наука в условиях европейского Средневековья 28.5 KB
  Большое значение для развития науки имело открытие университетов. Другой предпосылкой будущего расцвета науки послужило развитие техники. Наступала новая эпоха в развитии цивилизации и науки. Однако в сфере науки не было совершено прорыва.
78884. Становление науки классического типа 30.5 KB
  Фарадей обнаружил взаимосвязь между электричеством и магнетизмом, ввел понятия электрического и магнитного полей, выдвинул идею о существовании электромагнитного поля. Максвелл создал электродинамику и статистическую физику, построил теорию электромагнитного поля, предсказал существование электромагнитных волн, выдвинул идею об электромагнитной природе света.
78885. Проблема методов познания в философии Нового времени 29.5 KB
  Проблема методов познания в философии Нового времени Наука находится в центре внимания главных философских направлений XVII XVIII вв. Основные области философии этого времени онтология и гносеология. ontos сущее и logos слово понятие учение учение о бытии как таковом знании об истинно существующем раздел философии изучающий фундаментальные принципы бытия наиболее общие сущности и категории сущего Гносеология позже стал употребляться термин эпистемология в переводе с греческого теория познания раздел философии в...
78886. Особенности неклассической науки 31 KB
  Особенности неклассической науки Опора науки Нового времени на эксперимент развитие механики заложили фундамент для установления связи науки с производством. В результате разрешения кризиса произошла новая научная революция начавшаяся в физике и охватившая все основные отрасли науки Она связана прежде всего с именами МЛланка 1858 1947 и А. Механическая картина мира классической науки была рассчитана на относительно малые скорости которые абсолютно не укладывались во внутреннюю логику новых...
78887. Наука и философия. Концепции взаимоотношений философии и науки 29.5 KB
  Наука и философия Нау́ка особый вид человеческой познавательной деятельности направленный на получениеуточнение и производство объективных системноорганизованных и обоснованных знаний о природе обществе и мышлении. Философия обычно описывается как теория или наука одна из форм мировоззрения одна из форм человеческой деятельности особый способ познания. Отличия философии от науки: 1 философия целостное знание наука отдельные дисциплины; 2 философия ценностное знание в науке главное истина. Яковлевой...