Как создать анимацию движения. Анимация движения. Создание последовательности ключевых кадров
В этом уроке рассмотрим, что такое анимация движения объекта по заданной направляющей траектории (guide). Создадим условный объект и нарисуем для него путь, по которому он будет проходить.
Создания нового документа ActionScript 3.0
Как обычно, создаем новый документ «Action Script 3.0» . На правой панели инструментов выбираем «Rectangle Tool» и размещаем его на сцене.
Полученый объект переводим в символ, выделив его инструментом «Selection tool» и нажав правую кнопку мыши.
Теперь на панели «timeline» нужно выбрать пятидесятый кадр и сделать его ключевым. Нажимаем правую кнопку мыши и вызываем контекстное меню, где выбираем «Insert Keyframe» .
Создадим направляющую, путь, по которому объект будет двигаться. Для этого нажимаем на слой правой кнопкой мышке и в появившемся контекстном меню выбираем «Add Classic Motion Guide» .
Должно получиться два таких слоя:
Теперь нужно на слое «Guide» нарисовать путь, по которому будет двигаться объект. При помощи инструмента «Pencil Tool» , который находится на правой панели, рисуем направляющую.
Если нарисованный путь получился немного неровным, то его можно сгладить при помощи инструмента «Smooth Tool» , который также как и карандаш находится на правой панели. Сначала используя инструмент «Selection Tool» дважды щелкните по направляющей, а затем нажмите «Smooth Tool» .
Размещаем объект для создания анимации движения
Теперь давайте разместим наш объект на нарисованном пути. Чтобы это сделать, встаньте на первый кадр слоя, возьмите объект при помощи «Selection Tool» и поднесите его к левому краю линии, он как бы «прилипнет» к нему, вернее присоединится опорная точка объекта к направляющей.
Тоже самое нужно проделать для пятидесятого кадра, возьмите объект и разместите его на правом крае линии.
Теперь нужно создать промежуточные кадры, чтобы программа сама разместила объект там где нужно в каждом кадре. Чтобы это сделать просто выбираем любой средний кадр на слое, где расположен объект, и нажимаем правую кнопку мыши, выбираем «Create Classic Tween» .
В итоге мы должны получить два таких слоя:
Запускаем анимацию движения объекта
Посмотрим, что получилось. Переходим в главное верхнее меню «File -> Publish Preview -> Flash» или нажимаем ctrl+enter на клавиатуре. Чтобы посмотреть прямо в программе — нажмите клавишу enter.
Давайте сделаем так, чтобы объект «поворачивал» , когда пробегает по пути. Для этого выберите первый кадр на слое, где расположен объект, и немного его поверните используя инструмент «Free Transform Tool» , который находится на правой панели.
Теперь в свойствах объекта, находясь на первом кадре, выберите «Orient to path» .
Выберите пятидесятый кадр на слое, где расположен объект, и также как в первом кадре немного поверните его.
Чтобы посмотреть, что получилось, нажмите ctrl+enter.
Вся работа по созданию фильма происходит с помощью панели Timeline (Шкала времени), изображение которой приводится ниже. Панель Timeline разделена на две части вертикальной линией, которую можно перемещать мышкой. Правая часть панели представляет собой так называемую "линейку кадров" — линейку, на которой располагаются символы кадров, имеющие вид небольших прямоугольников. Содержанием кадров являются сменяемые во времени статические картинки, появляющиеся на рабочем поле. Нумерация кадров представлена в верхней части линейки. Под линейкой кадров располагается "строка состояния".
Ключевые кадры
— это кадры, в которых размещаются статические картинки, "оживающие" при анимации. Нажатие клавиши
— основной инструмент при работе с анимацией во Flash. На ней отображается информация о слоях, о том какие кадры являются ключевыми, а какие генерирует Flash. С помощью временной шкалы можно понять, какие кадры содержат действия или метки. Она позволяет перемещать ключевые кадры и целые куски анимации.
Основные возможности временной шкалы:
- Чтобы сделать слой активным, его надо выделить. Рисовать и редактировать можно только на активном слое. Активный слой подсвечивается на Монтажной линейке, и значок с изображением карандаша показывает, что его можно редактировать (Layer 3).
- Содержимое слоёв, которые находятся сверху на Монтажной линейке, отображается поверх содержимого слоёв, находящихся под ними. Для обмена слоёв местами надо перетащить название слоя на нужное место на Монтажной линейке.
- Для создания нового слоя надо выбрать позицию на Монтажной линейке для нового слоя и нажать кнопку "Добавить слой".
- Для удаления слоя достаточно перетащить его в корзину.
- Для переименования слоя дважды щелкните мышью по нему на Монтажной линейке.
- При создании многослойного изображения используйте элементы управления слоями. Щелчок в колонке под изображением замка заблокирует любое редактирование, а в колонке под изображением глаза сделает слой невидимы.
Ниже приводится пример анимационного ролика, в котором в разных слоях со сдвигом в 25 кадров, помещён разный фон (пейзаж) с соответствующим текстовым блоком. Пейзаж получен заливкой фона растровым изображением Color Mixer->Bitmap с последующей обработкой инструментом Трансформатор заливок.
- Изображение (graphic) , представляет собой символ, состоящий из единственного кадра. Отсюда следует его статичное название. Если символ действительно представляет собой статичный (не анимирующийся) объект, лучше сделать его изображением (graphic).
- Кнопка (button)
. Во Flash есть специально приспособленный под функции кнопки вид символа. В нем имеется 4 кадра: Up, Over, Down, Hit, которые содержат следующие состояния кнопок:
- Hit — обычное состояние, для кнопки, содержащей ссылку, которую пользователь уже посещал.
- Анимация (movie clip) . Это самый "полноценный" тип символа. В нем может быть любое количество кадров. Символ этого типа может восприниматься как объект типа Movie в ActionScript (встроенный язык Flash).
В Macromedia Flash существуют два принципиально разных способа анимировать что-либо:
- Прорисовать каждый кадр самому, используя Flash только для пролистывания кадров.
- Заставить Flash автоматически просчитывать промежуточные кадры.
Пошаговая (покадровая) анимация
Это анимация, полностью составленная из ключевых кадров. Т.е. Вы сами определяете, как содержимое кадра, так и его "длительность" (т.е. сколько таких статических кадров будет занимать изображение).
Перед тем как нарисовать очередной кадр надо вставить пустой ключевой кадр (
К достоинствам этого способа можно отнести:
- Покадровая анимация даёт, в некотором смысле, больший контроль над анимацией, и если Вы опытный аниматор, то Вы можете выгодно ею пользоваться.
- Это единственный способ организовать смену абсолютно независимых изображений — слайд-шоу (например, создавая обычный баннер средствами Flash).
- И все остальное, что вытекает из возможности прорисовывать каждый кадр вручную.
К недостаткам можно отнести следующее:
- Покадровую анимацию сложно модифицировать. Особенно, если это не дискретный набор изображений, а связанная анимация. Приходится модифицировать все кадры.
- Покадровая анимация занимает достаточно большой объем, так как приходится хранить информацию о каждом кадре.
Элементарные операции с кадрами:
- Вставить пустой ключевой кадр — Insert -> Blank keyframe,
. - Ключевой кадр, повторяющий содержание предыдущего — Insert -> Keyframe,
. - Очистить ключевой кадр — Insert -> Clear keyframe,
+ . - Вставить обычный кадр — Insert Frame,
. - Удалить кадр — Insert -> Remove Frames,
+ .
Элементарные операции с роликом:
- Просмотр ролика — Control, Test movie.
- Изменение высоты и ширины ролика — Modify, Movie.
- Преобразование Flash-ролика в HTML-документ File, Publish Setting, вкладка HTML.
- Просмотр HTML-документа — File, Publish Preview.
Создадим многослойный фильм с пошаговой анимацией «Жизнь цветка». 1-й слой — рамка, 2-й слой — горшок, 3-й слой — цветок. Можно 3-й слой представить тремя слоями: лист, стебель, соцветие.
Горшок и рамка находятся всё время перед нашими глазами, а цветок за 25 ключевых кадров успевает вырасти и увять. В слое «цветок» каждый кадр отличается от предыдущего, но можно сделать изменение состояния цветка чере один кадр.
Публикация ролика происходит с помощью File->Publish Setting. На вкладке Formats выбираются варианты публикации, их можно выбрать несколько, на соответствующих вкладках задаются параметры для выбранного варианта публикации, затем нажимается кнопка Publish. При этом, созданные файлы сохраняются в той же папке, что и исходный файл с расширением.fla. В нашем примере для публикации выбран вариант Gif-анимированный файл, как и во всех последующих примерах.
Второе задание попробуйте выполнить самостоятельно, используя ниже приведённый алгоритм. Это будет создание анимации «Движущийся автомобиль»:
- создаим слой «Пейзаж»;
- выполним команду File/Import и импортируем картинку с изображением пейзажа или создадим фон "асфальт";
- выделим на линейке 30-й кадр и нажмём F5. создадим цепочку дублирующих кадров для пейзажа;
- создадим новый слой «Авто»;
- нарисуем в первом ключевом кадре автомобиль без колёс;
- сгруппируем нарисованный автомобиль и нажав F8 создадим библиотечный образец — клип automobile;
- сдвинем автомобиль, выделим второй кадр и нажмём F6;
- будем перемещать автомобиль и создавать новые ключевые кадры до тех пор, пока, автомобиль не скроется за пределами рабочего поля;
- создадим новый слой и назовём его «Колесо1»;
- нарисуем в первом кадре колесо и создадим из него библиотечный образец wheel;
- создадим новый ключевой кадр и передвинем в нём колесо за передвинутым автомобилем и т.д. во всех остальных кадрах, поворачивая колесо при этом на небольшой угол;
- заблокируем слой «Колесо1» и скопируем в буфер всю полученную последовательность кадров;
- создадим новый слой и назовём его «Колесо2»;
- выделим первый кадр и скопируем из буфера всю последовательность кадров;
- для зацикливания просмотра нажмём
+ .
В качестве ещё одного самостоятельного задания можно предложить создать пошаговую анимацию "Горение спички":
Во Flash существует два варианта построения промежуточных изображений — motion tweening (построение анимации на основе модификации символов) shape tweening (построение анимации на основе изменения формы). Эти способы отличаются в корне.
Анимация движения
При таком способе анимации задают начальное положение, цвет, размеры, ориентацию и конечные параметры, а программа сама осуществляет это движение. При этом способе анимации Flash автоматически строит промежуточные кадры между ключевыми кадрами, заданными вами. Это означает, что Вы рисуете объект, потом на другом кадре производите изменения, о которых мы поговорим ниже, и просите Flash рассчитать те кадры, которые лежат между этими двумя ключевыми кадрами. Он выполняет эту работу, и Вы получаете плавную анимацию.
Скорость и плавность анимации зависят от количества кадров, которые отведены под движение и скорости Flash фильма (movie). Скорость фильма можно изменить следующим образом: Modify->Movie…,
Рассмотрим анимацию с построением промежуточных кадров (tweened motion). Это наиболее часто используемая техника анимации во Flash. В этом случае анимация строится на основе модификации символов, т.е. объектом анимации является символ. Как и в анимации shape tweening, на каждый объект в один момент времени, нам нужен один слой. На этом слое должен находиться один символ, с которым и будут происходить все изменения.
При использовании Motion Tweening модифицируются следующие параметры:
- размер (как пропорционально, так и непропорционально — отдельно высоту и ширину);
- наклон;
- расположение;
- угол поворота;
- цветовые эффекты;
- можно использовать направляющие слои для задания траектории движения объекта.
Включить motion tweening можно несколькими способами (а отключить, к сожалению, только одним). Для того, чтобы включить motion tweening, нужно сделать активным начальный кадр вашего перехода, затем, нажав правую клавишу мыши, в контекстном меню выбрать Create motion tween (это же можно сделать, выбрав Insert->Create motion tween). Универсальный способ включения/выключения motion tweening — с помощью панели Frame, выбрав Motion в поле Tweening. Там же можно контролировать параметры анимации:
- Easing — обратное экспоненциальное ускорение, работает абсолютно так же, как и в shape tweening.
- Rotate позволяет управлять вращением. Auto — Flash автоматически пытается определить количество витков. CW (Clockwise, по часовой стрелке) и ССW (Counter Clockwise — против часовой стрелки). При этом рядом в поле справа появляется возможность ввести количество оборотов. Можно использовать только целые значения. Можно отключить вращение, выбрав None.
- Orient to path — поворачивает символ в соответствии с направляющей линией. Snap привязывает символ к этой направляющей.
В случаях, когда количество кадров основной сцены не бывает кратным количеству кадров символа, флажок Synchronize позволяет синхронизировать эти две анимации.
Слои, которые содержат кривую, по которой должен двигаться объект называются направляющими слоями (guide layers) (т.е. они содержат траекторию движения объекта). Для того, чтобы добавить направляющий слой, нужно Выбрать слой, на котором находится ваш символ; затем Нажав правую клавишу мыши, в контекстном меню выбрать Add Guide. При этом исходный слой становится направляемым (guided layer). Это далеко не единственный способ создать направляющий слой (guide layer). Любой слой можно сделать направляющим, указав это в его свойствах, или направляемым, перетащив нужный слой мышкой, так, чтобы он находился под направляющим.
Далее, нужно нарисовать траекторию движения. Траекторией может быть любая кривая, не являющаяся областью заливки. Всё! Управляющий слой готов. Вы можете его запретить для редактирования, чтобы было удобней работать, а в дальнейшем и вовсе сделать его невидимым.
Теперь, чтобы использовать этот слой, нужно взять символ за центральную точку (это такой маленький кружочек) и перетащить ее на траекторию. Вы почувствуете, когда символ "зацепится" за нее, и увидите, как он будет по ней скользить.
Далее все по знакомому сценарию — ключевые кадры, включаем motion tweening… Если нужно, чтобы объект поворачивался согласно траектории, а не просто двигался по ней, то на панели Frame нужно включить флажок Orient to path.
Motion tweening позволяет использовать различные цветовые эффекты применительно ко всему символу. Эта возможность отсутствует в shape tweening. Для того, чтобы применить эффект к символу, нужно выделить этот символ, и на панели эффектов (Windows ->Panels ->Effects), выбрать нужный эффект, установив яркость, цветовое смещение, оттенок.
Создайте самостоятельно очень простой пример анимации движения шара по кругу, пользуясь ниже приведённым алгоритмом:
- нарисуем в первом кадре круг и зальём его радиальной градиентной заливкой;
- сгруппируем рисунок;
- выделим его инструментом Трансформатор и перенесём центр вращения на некоторое расстояние;
- перейдём в 30 кадр, нажмём
, т.е. сделаем его копией первого кадра; - вернёмся в первый кадр и откроем панель Properties и в списке Tween выберем Motion;
- в дополнительном списке Rotate выберем принудительное вращение по часовой стрелке (CW) или против часовой стрелки (CCW).
Следующий пример несколько сложнее — это создание анимации движения букв текста:
- с помощью инструмента Текст создадим текстовый блок;
- выделим написанное слово и разобьём его на отдельные буквы (Modifi/Break Apart);
- разведём буквы по отдельным слоям Modify/Distribute to Layers;
- преобразуем каждую букву в каждом слое в рисунок, повторим команду Modifi/Break Apart. Выдели каждую букву и сгруппируем её;
- на линейке кадров на некотором удалении создадим копии первого кадра, для этого нажмём
; - по очереди будем выделять первые кадры для каждой буквы, выносить её за пределы рабочей области, изменяя пропорции буквы, центр вращения и т.д.;
- в панели Properties в списке Tween выберем Motion. В дополнительном списке Rotate выберем один поворот по часовой стрелке;
- просмотрим анимацию в окне просмотра
+ .
Анимация формы — это плавное изменение объекта анимации на рабочем поле. Под объектом понимаем здесь не группу или текстовый блок, как при анимации движения, а обычный многоцветный рисунок, который может состоять из нескольких фрагментов. Более того, количество таких фрагментов в начале и в конце анимации может быть различным.
В процессе анимации формы рисунок может распадаться на песколько независимых фрагментов, каждый из которых постепенно преобразится во что-то неожиданное. Или, наоборот, несколько независимых изображений, находящихся на рабочем поле, в процессе анимации, постепенно меняя свой облик (размеры, цвет, форму), становятся частью единого изображения. Скажем, нужно, чтобы квадрат плавно превратился в круг, или силуэт кролика плавно перетёк в силуэт волка. В этих случаях используется shape tweening.
Как обычно, Вы задаете два ключевых кадра на некотором расстоянии друг от друга. В этом варианте анимации есть жесткое ограничение: анимация должна занимать отдельный слой и быть единой нарисованной фигурой (не должно быть групп или символов).
После того как есть два ключевых кадра, надо сделать активным первый из них (просто переходите на него), и выбирать на панели Frame (Windows->Panels->Frame,
При использовании shape tweening необходимо задать два параметра:
- Easing задает обратное экспоненциальное ускорение. Величина этого параметра может изменяться от - 100 до + 100. Это означает, что если вы зададите отрицательный easing, движение будет происходить с положительным ускорением, скорость будет увеличиваться. И наоборот, если easing будет положительным, анимация будет замедляться;
- Параметр Blend, определяет алгоритм перехода:
- Distributive — сглаживает переход от одной фигуры к другой.
- Angular (угловатый) — пытается сохранить пропорции углов.
Последний инструмент в анимации shape tweening — контрольные точки (shape hints, дословно — подсказки для форм). Это точки, с помощью которых Вы помогаете Flash правильно осуществить переход. Без них не обойтись в случае сложных форм.
Пользоваться ими очень легко. На первом ключевом кадре (с которого начинается анимация) Вы добавляете контрольную точку (Modify->Transform->Add shape hint, Удалить все точки можно с помощью Modify->Transform->Remove All Hints. Удалить же единственную точку можно, нажав на ней правую кнопку мыши, и в контекстном меню выбрав Remove Hint.
Так как контрольные точки обозначаются буквами латинского алфавита, то их может быть максимум 27. Вариантов перехода из одной формы в другую может быть множество, поэтому анимация может пойти и по тому пути, который устроит Вас в меньшей степени. Даже преобразование такой простой геометрической фигуры, как прямоугольник, расположенный вертикально, в такой же прямоугольник,
но расположенный горизонтально, может происходить по разному. Например, в процессе такого преобразования фигура может побывать в форме овала или даже круга. Для контроля анимационного процесса нужно постараться упростить анимацию, разделив рисунки на несколько
независимых фрагментов, расположенных в разных слоях, но одновременно участвующих в анимации. Более координальным приёмом является применение меток формы, о которых говорилось выше. Если вам нужно отключить shape tweening, в панели Frame выберите Tweening: None. Ниже приводится на этот способ анимации пример «превращения» слона в овцу и обратно. Попробуйте самостоятельно создать анимацию формы "превращения" змеи в орла и обратно: Часто в процессе анимации необходимо, чтобы объект двигался не по прямой, а по заданной траектории. Анимация в этом случае создаётся обычным образом, а траектория рисуется в отдельном слое. Слой траекторий может обслуживать несколько разных анимаций, каждая из которых размещена в отдельном слое,
но все эти слои с анимацией должны располагаться под слоем траекторий. Для рисования траектории можно использовать различные инструменты: Карандаш, Кисть, Перо, Эллипс, или Прямоугольник.
Чтобы привязать движущийся объект к этой траектории нужно в начальном и конечном ключевых кадрах анимации просто перенести этот элемент на траекторию.
При этом в панели Properties следует подкорректировать параметры анимации таким образом, чтобы был включён флажок Snap (привязать). Для этого нужно предварительно выделить первый ключевой кадр анимации,
полезно также выбрать команду View/Snap to Objects. Для примера, создадим ролик «Полёт бабочки над цветком», по ниже приведённому алгоритму: Этот слой призван закрывать и делать невидимой часть изображения, расположенного непосредственно под ним. Если слой-маска не содержит никакого изображения, то он полностью закрывает
собой (маскирует) расположенный ниже и связанный с ним слой, который называется маскируемым слоем
. Если же в слое-маске что-то нарисовано, то любая заливка этого рисунка становится прозрачной частью слоя.
Если анимировать изображение, созданное в слое-маске, то прозрачная часть маски будет перемещаться по экрану. Слой-маска может маскировать несколько слоёв. Сделать обычный слой маскируемым можно,
изменив его положение в стеке слоёв. Нужно просто перенести мышкой обычный слой под слой-маску.
Анимация в этом случае может быть двух видов. Либо анимация объектов, расположенных на маскируемых слоях. Либо анимация изображения, находящегося на слое-маске. Пример создания эффекта постепенного появления текста на экране буква за буквой. Для этого используем анимацию движения изображения, находяшегося в слое-маске, используя следующий алгоритм: Ниже приводится gif-анимированный файл, в котором используется анимация формы букв текста "С Новым Годом", а затем появившийся текст "стирается", с использованием слоя-маски, прямоугольника с градиентной заливкой,
поэтому получается эффект "переливчатости" букв. Фоном является фрагмент растровой графики. Следующий пример демонстрирует «вырастание» из точки слова, где в качестве маскируемого слоя используется импортированная растровая графика, а в слое-маске создана анимация, в которой из точки вырастает слово, а затем оно опять уменьшается.
В данном примере также используется анимация формы. Кнопка — специальный вид символа, предназначенный для реагирования на действия пользователя, например, нажатия на саму кнопку, её клавишный аналог или активную область в фильме.
Временная шкала кнопки содержит следующие четыре кадра: Если необходимо создать несколько одинаковых кнопок, то в этом случае достаточно создать только один образец кнопки. А далее нанести на него необходимые надписи, менять цвет или размер.
Если кнопка должна содержать анимированные объекты, для этого необходимо заранее создать символы Movie clip, а затем просто разместить их в соответствующем кадре кнопки. В качестве примера создадим кнопку со встроенной анимацией по ниже приведённому алгоритму: Публикация данного объекта выполнена в режиме HTML с указанием на соответствующий swf-файл. Создадим кнопки, управляющие работой слайд-шоу: On (release) { GotoAndStop(k); — цифра в скобках указывает на номер соответствующего кадра. On (press) { GotoAndStop("begin)"; On (press) { Root.prevFrame (); On (press) { Root.nextFrame (); On (press) { GotoAndStop("end"); Ниже приводится результат нашей работы: При создании анимаций с использованием языка ActionScript часто используется трёхкадровый цикл. В первом кадре (подготовка) записываются начальные данные, во втором кадре
размешаются элементы тела цикла, а втретьем кадре пишется команда вернуться во второй кадр gotoAndPlay (2);. Работа трёхкадрового цикла заключается в попеременном просмотре
кадров, участвующих в цикле, до тех пор пока не будет выполнено условие выхода из цикла. Рассмотрим использование трёхкадрового цикла на примере создания движения маски. Наш фильм будет состоять из трёх слоёв:
<маскируемый клип>.setMask (<клип-маска>) При каждом обращении ко второму кадру клип Mask будет поворачиваться на 2°. Перед глазами пользователя вращается окно, имеющее форму клипа Mask,
сквозь которое видна часть клипа Masked. Научимся управлять цветом экземпляра библиотечного клипа. Создадим фильм, в котором на фоне восходящего солнца разнонаправленно вращаются звёзды, изменяя свой цвет. Экземпляр объекта Color создаётся с помощью конструктора в среде ActionScript и имеет следующий формат: <имя экземпляра объекта Color> = new Color (<имя экземпляра клипа>) OnClipEvent (load) { Star1Color = new Color(this); ColorTransform = {rb:0, gb:255, bb:255}; G = 255; B = 255; Step = 5; OnClipEvent (enterFrame) { G -= step; ColorTransform.gb = g; If (r >=0 && b == 255 && g == 0) { R += step; ColorTransform.rb = r; If (g == 0 && r == 255 && b B -= step; ColorTransform.bb = b; If (b == 0 && r == 255 && g >=0) { G += step ; ColorTransform.gb = g; If (g == 255 && b == 0 && r R -= step; ColorTransform.rb = r; If (r == 0 && g == 255 && b>=0) { B += step; ColorTransform.bb = b; Star1Color.setTransform(colorTransform); This._rotation -= 3; Кнопки и меню — это одна из самых главных частей сайта и любого другого приложения, где важна интерактивность. Создадим Flash-меню. on (release) {getURL ("1.html", "_self");} Как уже говорилось, кадры могут быть простыми и ключевыми. Во Flash возможны следующие варианты их реализации. Анимация движения
– в ключевых кадрах рисуется начало и окончание движения, в простых кадрах делается постепенный переход от одной ключевой фазы к другой. По умолчанию соответствующей командой автоматически создается прямолинейное и равномерное движение того, что содержится в слое между двумя ключевыми кадрами. В старых версиях, Macromedia Flash, использовалась командаСоздать анимацию движения (Create Motion Tween)
. В новых версиях, Adobe Flash, надо использовать команду Создать классическую анимацию движения
. Возможны также изменения цвета и прозрачности, вращение объектов. Эти виды анимации принципиально ничем не отличаются от движения – и в том и в другом случае изменяются свойства слоя. Но есть и другие, специальные виды движения. 1. Движение по траектории.
В старых версиях для того, чтобы задать движение не по прямой, надо было создавать новый специальный слой над слоем, с движущимся объектом. В этом слое любым способом (искривленной прямой, линией Безье, карандашом) рисовалась траектория движения. Далее определенными манипуляциями объект привязывался к траектории. В Adobe Flash специальный слой создавать не надо, а надо применить команду Создать анимацию движения
.Траекторию стало легче рисовать, ее можно дополнить рядом эффектов (например, вращением). При этом она легко делается невидимой. 2. Движение с ускорением/замедлением.
Для создания неравномерного движения на вкладкеСвойства
есть движок Замедление (Easing)
. Этот параметр может меняться от -100 до +100. Отрицательному значению соответствует увеличение скорости к концу движения, положительному – замедление к концу движения. Для оформления начала и конца движения надо во временном интервале создать еще 1 или 2 ключевых кадра и сделать в начале ускорение, а в конце замедление. Лучше поставить предельные значения: ±100, промежуточные обычно малоэффективны. А для высоких скоростей и ускорений требуется покадровая анимация. Покадровая анимация
– она состоит только из ключевых кадров, каждый кадр создается вручную. Очевидно, такой вид анимации имеет смысл вводить, если действие очень динамично, разнообразно. Для увеличения времени демонстрации кадров можно между ключевыми ввести 1-3 простых, копирующих предыдущий ключевой. В этом случае анимация все равно останется покадровой, увеличится только время экспозиции кадра. Наконец, с помощью покадровой анимации можно намного точнее сделать специальные движения: с большими ускорениями/замедлениями, по сложной траектории и пр. Анимация формы
– происходит постепенный переход фигуры одной формы в фигуру другой формы. Одновременно могут изменяться размеры, местоположение, цвет. Но на анимацию формы имеется много ограничений. Она не работает: · с растровой графикой; · с текстом; · с группами объектов – нельзя деформировать сгруппированные объекты; · с клипами – деформировать можно только статичный объект. Анимация формы реализуется так же, как и анимация движения, только в окошке Properties → Tween
надо выбрать не Motions
, аShape
(в новых версиях – Создать анимацию формы)
. Цвет кадров с анимацией формы – зеленый. В анимации формы важную роль играют точки подсказки. Их ставят в начальном и конечном ключевых кадрах. Они обозначаются буквами латинского алфавита: a, b, c, d
и так далее. Всего может быть 26 точек подсказки, вплоть до z
. Буквы ставят по часовой стрелке. Смысл точек подсказки в том, что место, обозначенное точкой (например, a
) в начальном ключевом кадре деформации, должно придти в место, обозначенное той же точкой (a)
в конечном ключевом кадре. А если в конечном кадре точки поставить в другие места, то деформация пойдет другим путем. Промежуточные фазы могут быть совершенно разными, в том числе нежелательными. Вообще анимация формы – капризный процесс. Чтобы деформация протекала так, как задумано, часто приходится потратить много времени. К тому же бывает, что она требует больших вычислительных ресурсов, компьютер может зависнуть. Этот вид анимации имеет смысл применять тогда, когда анимация движения однозначно к хорошим результатам не приводит. А покадровая анимация будет слишком трудоемкой. Это самый полный обзор всех аспектов понятия Анимация
с лучшими примерами по мнению редакции. Инвестируй 15 минут времени в новые знания вдохновляясь трендами индустрии. Еще больше примеров современной анимации ждёт вас ниже… С момента появлениея простейшей анимации было придумано широкое разнообразие видов и стилей. Рассмотрим 5 основных видов
: Традиционная анимация
, иногда называемая анимацией cel, является одной из старых форм анимации. В ней: Самый простой пример такой анимации - старые мультфильмы Диснея.
Мультфильм «Маугли» Современные аниматоры могут отказаться от рисования персонажей и кадров от руки. Вместо этого они используют компьютеры, планшеты специальные ручки. Стартовать в профессии можно с изучения базовых Преимуществом уроков
является последовательное изучение процесса создания анимации по принципу - «от простого к сложному». Также, для совершения первых шагов создания анимации необходимо освоить такие базовые программы как: Photoshop часто упускается из виду при рассмотрении программного обеспечения для анимации, а его возможности отлично адаптированы для покадрового рисования в любом стиле. Функциональность временной шкалы Photoshop позволяет анимировать, рисуя кадр за кадром, используя лук-скиннинг. 2D-анимация
- это термин, используемый при обращении к традиционной рисованной анимации. Он также может относиться к компьютерным векторным анимациям, использующими методы традиционной. Принцип
2D-анимации
Для создания векторных анимаций используются те же самые методы, что и для традиционной. Такая гибкость позволяет даже новичку создать свой первый сносный ролик. Как научиться?
В то время как традиционная анимация требует, чтобы вы были хорошим художником, компьютерная - не совсем. 3D-анимация больше похожа конструктор, а не на рисование. Технологии 3D-анимации имеют много общего со стоп моушн, поскольку соответствуют кадровому подходу. Но, в 3D реализация задач более управляема, поскольку находится в цифровом поле. 3D модель Вместо рисования персонажа или создания его из глины в 3D-анимации объект создается в цифровой форме. Позже снабжаются «скелетом», который позволяет перемещать модели. Анимация создается построением моделей на определенных ключевых кадрах, а после компьютер вычисляет и выполняет интерполяцию между этими кадрами для создания движения. Ниже смотрите наглядный пример процесса создания 3D модели в программе Blender . Профессия высококонкурентная, поскольку эта анимация в основном для коммерческих целей. Где можно работать моушн дизайнеру: Средняя зарплата моушн дизайнера на Западе достигает $5000/мес, у нас заработная плата специалиста стартует от $700/мес. Стоп моушн
- это остановка объекта после отснятого кадра и последовательное его перемещение для съемки нового фото и нового движения. При воспроизведении сделанных фото одно за другим, создаётся иллюзия движения. Так получается стоп моушн. Этот приём похож на традиционную анимацию, но вместо рисунков аниматор использует реальные материалы. Мне нравятся все формы анимации, но есть что-то уникальное и особенное в стоп моушн: оно более реальное. Но я думаю, что это тоже своего рода одинокая и темная вещь. Анимация Stop-Motion использует объекты, сфотографированные в последовательности для создания иллюзии движения. Пример Stop Motion анимации Процесс создания анимации в формате стоп моушн длительный, поскольку каждый объект нужно осторожно перемещать миллиметр за миллиметром. Каждый отснятый кадр, просто обязан создать плавную последовательность движений объекта. Начинать движение в глубины профессии стоп-моушн дизайнера необходимо с освоения Dragonframe и iStopMotion Профессия стоп-моушн дизайнера на рынке труда понемногу ожила. Стоп моушн сегодня - это недорогой метод, в котором легко показать хороший художественный вкус, и навыки терпения. Поэтому и дизайнеры зарабатывают неплохо: Рассмотрим, какие существуют типы анимации. GIF (с расширением файла, .gif)
- это формат файла изображения, который анимируется путем объединения нескольких других изображений или кадров в один. Пример GIF. (сконвертирован в mp4 для меньшего размера) В отличие от формата JPEG (.jpg), GIF обычно используют алгоритм сжатия, называемый кодировкой LZW, который не ухудшает качество изображения и позволяет легко хранить файл в байтах. Более подробно о том, что такое GIF можно прочитать на Википедии. Примеры на любой вкус находятся на портале giphy.com
Так же ознакомитесь с мнением может ли Анимэ стать мейнстримом (на анг языке). Процесс создания аниме состоит из нескольких этапов: Согласно этому принципу объекты анимации можно сжать или растянуть для передачи скорости, импульса, веса и массы объекта. Такой прием можно использовать для обозначения прыгучести или твердости объекта (например, для того, чтобы показать какой мяч в анимированном ролике наполнен водой, а какой просто является мячом для боулинга). Также художники с помощью этого принципа передают мимику и эмоции персонажа.
Важно
: размер объекта не должен меняться в зависимости от того, сплющенный он или растянутый. Заключается в том, чтобы подготовить зрителя к какому-либо действию персонажа анимации. Например, такой прием используется чтобы показать, что персонаж готовится подпрыгнуть. В этом случае подготовка будет заключаться в том, что персонаж присядет, собирается с силами и начнет выпрямляться, пока не окажется в воздухе, что и будет прыжком. Важно:
без подготовки к любому действию все последующие шаги персонажа будут выглядеть нереалистично и неправдоподобно. Художник не может пропустить этот момент, поскольку зритель просто не поймет, что хочет сделать персонаж в следующие секунды, и смотреть такой ролик будет просто неинтересно. Подготовка к действию
- это обязательный прием для удержания внимания. Цель
этого принципа состоит в том, чтобы как можно более точно раскрыть творческий замысел автора. В любой анимации важно направить взгляд зрителя на какой-то момент или важный нюанс, движение персонажа или происходящее событие. Инсценировка как-бы привлекает внимание к самому важному. Отметим, что в этом принципе необходимо чередовать крупные планы с дальним фоном. Крупным планом обычно показана мимика персонажа, а на заднем фоне происходят динамичные или статичные события мультимедийного ролика. Важно:
в каждой сценке и ролике в целом действие должно быть максимально понятным, и находиться в фокусе. Иначе зритель просто не уловит суть задумки автора. Принцип спонтанного действия
состоит в том, что поочередно создается несколько рисунков без конкретного плана действий и финала. Принцип от позы к позе
состоит в том, что художник рисует каждую финальную точку движения и лишь после этого рисует промежуточные позы и движения. Важно
: принцип от позы к позе экономит силы и время художника, ведь, используя его, он точно знает, что будет происходить на экране, и чем все закончится. В спонтанном действии такого бонуса нет - если художник нарисовал что-то некорректно, ему придется все перерисовывать. Спонтанным действием хорошо отображать огонь, капли, облака, дым и пыль
, а еще оно отлично передает эстетику и непредсказуемость природных явлений. Применяется этот принцип для того, чтобы после остановки персонажа части его одежды, волосы, руки или даже ноги продолжали двигаться по инерции. Так остановка кажется более естественной и не вызывает у зрителя придирок к в противоестественности картинки. Инерция и нахлест делают движения, тело и персонаж анимации более живыми. В эту группу также входит такой принцип как оттяжка.
Благодаря оттяжке при повороте головы персонажа его волосы или же щеки (как у бульдога) будут медленно и пружинисто двигаться за ней. Принцип состоит в том, что все движения выполняются медленно в начале, затем они ускоряются и в конце, действия снова замедляются. Это делается для того, чтобы максимально увеличить естественность ролика и приблизить нарисованный персонаж к реальному. С одинаковой скоростью двигаются только роботы, поэтому художник старается нарисовать все движения своих персонажей в разных амплитудах и на разных скоростях. Важно:
замедление используется не во всех случаях. Например, для того, чтобы показать движение пули замедление не нужно, а вот для движения пистолета во время выстрела - да. Без учета движения персонажа по дуге возникают очевидные ошибки и они становятся слишком механическими. Абсолютно все движения персонажей выполняются по принципу дуги, и не потому что они все должны быть плавными, а потому что дуга может обрисовать гораздо большую траекторию и наделить персонажа возможностью двигаться максимально естественно. Этот принцип часто путают с нахлестом, но это неправильно. Выразительные штрихи - это особенности движений персонажа, которые придают ему колорита.
Выразительные штрихи наделяют движения персонажа характером момента и настроением. Если персонаж злой, то при стуке в дверь вторая рука у него будет сжата в кулак. Может этот штрих не так и бросается в глаза, но он как нельзя лучше передает настоящие, реальные эмоции человека. Художник, который придает значение таким мелким деталям, наделяет анимацию жизнью. От того, сколько кадров художник нарисовал между основными действиями зависит и общий характер анимации. Меняя частоту кадров, аниматор может рассказать целых 10 историй. Если между основными кадрами поз много и они расположены близко друг к другу, то движения будут осуществляться очень медленно, а если кадров мало и они расположены на большом расстоянии друг от друга - движения будут очень быстрыми. Стандартная частота кадров для кино равна 24
. Анимация также рисуется в один, два или три кадра. Важно:
чем чаще будут меняться кадры, там в более тщательной прорисовке они будут нуждаться. Принцип состоит в том, что почти каждое выражение лица, мимику и эмоцию необходимо сделать уникальной. С помощью этого принципа грустную эмоцию можно сделать еще более грустной, а веселую - еще более веселой. Гиперболизация базируется не на искажении эмоций и мимики, а на придании еще большей убедительности в движениях и выражениях лица.
Принцип гиперболизации уместен всегда, поскольку он делает каждый ролик более интересным, насыщенным и завершенным. Оптимальную степень гиперболизации определить сложно. Поэтому сперва необходимо гиперболизировать задумку по максимуму, а затем адаптировать под ролик. Рисовать по этому принципу нужно так, чтобы подать рисунок в рамках трехмерного пространства. Передавая массу, объем и равновесие персонажа. Если нарисовать фигуру со всех сторон, то процесс анимации будет значительно упрощен. Важно:
во время того, как вы делаете наброски персонажа, лучше всего использовать стандартные геометрические фигуры, такие как сферы кубы и цилиндры, а не квадраты и прямоугольники. И еще, внимательно следить за тем, чтобы нарисованный персонаж не получился плоским. Принцип состоит в том, что нарисованный герой обязательно должен быть интересным и необычным, что значит - вызывать эмоции у зрителя, цеплять и иметь изюминку. Красота персонажа - это не обязательно харизматичность. Эта черта может выражаться в любой детали, быть заключенной в одном персонаже или же во всех героя ролика. Важно:
добиться харизматичности персонажа можно, разнообразив форму объекта, пропорции, а также, подчеркнув характерную деталь. Она обязательно должна быть необычной и выбиваться из общей картины характера персонажа. Сегодня анимация перевоплощается в самые разнообразные и захватывающие способы рассказа истории и идею. Благодаря появлению новых достижений в технике и телекомуникационных технологиях, регулярно возникают новые тренды в анимации. Вот самые популярные из них: Cтиль 3D-анимации, который снова становится популярным - это ретрофутуризм. Это позволяет использовать фантастическую эстетику, о которой люди в конце 70-х и начале 80-х думали, что будущее может выглядеть именно так. Техника:
использование пышных световых эффектов и пиксельных цифровых элементов служит для создания местности и персонажей, в ретро мире. Это тенденция анимации, которая уже несколько лет находится на подъеме и используется некоторыми из ведущих компаний в мире, включая Nike, Nickelodeon, Disney, Cartoon Network и даже для игр Winter X. Яркие контрастные цвета в сочетании с угловым дизайном используются, чтобы придать анимации упрощенный, почти cel-стиль. Результат
- забавная последовательность от которой трудно отвести взгляд. Некоторые из лучших примеров взяты из Golden Wolf, компании по производству анимации, базирующейся в Лондоне. Тенденция, начавшаяся в последние годы и продолжающая нарастать, создает анимации, которые выглядят как сочетание 2D и 3D. Вам не нужно далеко ходить, чтобы найти учебное пособие, в котором показано, как в итоге получить плоский 2D-взгляд, используя cel shader для рендеринга 3D. Предоставляя 3D-объектам 2D-взгляд, аниматоры могут создавать выразительные, иллюстративные элементы, которые сразу привлекают внимание зрителя, обеспечивая четкую и красочную информацию. Если есть одна отличная анимационная тенденция, которая полностью использует силу изображений CGI, это стиль сюрреализм. Эффект гипер-сюрреалистической анимации основан на объединении фотореалистичных элементов с фантастическими изображениями для создания сказочных миров и действий. Есть такой пример анимации, как «The Dreamer» от Roof Studio для Honda, который привлекает зрителей к причудливому путешествию, поскольку реалистичное транспортное средство движется по диким местам. Вместо использования статических изображений или всего текста многие приложения в 2018 году используют функциональную анимацию, которая держит внимание пользователя с ярким, интересным пользовательским интерфейсом. Это включает в себя использование анимации для улучшения элементов навигации, подтверждения ввода пользователя, увеличения и уменьшения содержимого и т.д. В индустрии развлечений, таких как кино и видеоигры, 2D-анимация почти исчезла, когда появился 3D. С тех пор компании чувствовали, что нет лучшего способа увлечь аудиторию, игроков и потенциальных клиентов, чем с помощью 3D-анимации, даже если для этого требуется больше времени и усилий. Урок информатики
Дата:
02.03.2017 г.
Тема: «
Анимация движения
»
Класс:
9 «А»
Тип урока:
изучение и первичное закрепление новых знаний
Цели урока:
Образовательная:
формирование умений создавать анимацию движения по траектории;
Воспитательная:
воспитывать внимательность, интерес к самостоятельной работе, творчеству, ответственность за сохранность школьного имущества, в частности, компьютерного класса, ответственность и требовательность к себе, трудолюбие, дисциплинированность.
Развивающая:
развитие познавательного интереса, логического и алгоритмического мышления.
Программное и методическое обеспечение урока:
редактор
Flash
,
учебное
пособие «Информатика.
9
класс», § 16
Структура урока:
Организационный момент (2 мин)
Проверка домашнего задания (5 мин).
Усвоение новых знаний и способов действий (до 15 мин)
Физкультпауза (2 мин)
(до 16 мин)
Домашнее задание (1 мин)
Подведение итогов занятия (3 мин)
Этап рефлексии (1 мин)
Ход урока
.
Организационный момент:
Здравствуйте! Садитесь.
Кто сегодня отсутствует?
Сегодня на уроке мы продолжим изучение графического редактора Macromedia Flash . Освоим анимацию движения.
Проверка домашнего задания
И прежде всего мы с вами вспомним и освежим в памяти прошлые уроки.
Что такое покадровая анимация?
(Покадровая анимация – это анимация, полностью составленная из ключевых кадров
)
Назовите достоинства и недостатки покадровой анимации?
(Недостатки:
Покадровую анимацию сложно модифицировать. Приходится модифицировать все кадры
.
Покадровая анимация занимает достаточно большой объем, так как приходится хранить информацию о каждом кадре.
Достоинства:
плавные переходы от кадра к кадру
)
Как создать ключевой кадр?
(F6
)
Как занести объект в библиотеку?
(F8
)
Объяснение нового материала.
Анимация движения производится путём автоматической генерации (автозаполнения) промежуточных кадров. При этом ключевыми являются лишь первый и последний кадры, которые содержат начальную и конечную фазы анимации. Промежуточные кадры создаются путём изменения положения и трансформации экземпляров символов. Гене
рацию промежуточных фаз обеспечивает инструмент
Motion
Tween
(движение благодаря изменению промежуточных кадров).
Для вставки промежуточного кадра нажать
F
5
Для удаления промежуточного кадра нажать
Shift
+
F
5
N
=
f
*
t
N
-необходимое число кадров
Демонстрация выполнения примеров 1-4.
Пример 1
. Создать анимацию движения шара на фоне деревьев (рис. 3.39).
B кадре 1 этого слоя, нарисуем шар, выбрав заливку радиальным градиентом. Преобразуем его в символ типа графика (Graphic), присвоив имя «шар»
Созданный символ попадет в библиотеку (вызывается клавишами Ctrl + L), a на слое «шap», теперь находится его экземпляр.
Поместим экземпляр символа «шap» слева перед деревьями.
Выделим на шкале времени 12-й кадр в обоих слоях и преобразуем в ключевой, нажав клавишу F6. Все кадры заполнятся содержанием, дублирующим ключевые кадры своего слоя (на это укажет серая окраска этих кадров на шкале времени).
На самом деле изображения находятся только в ключевых кадрах 1 и 12, а промежуточные кадры 2-11 содержат ссылки на кадр 1. Поэтому Flash-фильм (файл.swf) имеет очень маленький размер.
Кадры слоя «лес» оставим без изменения, поскольку фон неподвижен.
В 12-ом кадре слоя «шар» переместим шар в конечное положение, уменьшив его размеры с помощью инструмента трансформации.
Произведем автозаполнение промежуточных кадров. Для этого выделим первый или любой промежуточный кадр этого слоя (например, кадр 7). С помощью меню Вставка -› Создать анимацию движения правой кнопки мыши или панели Свойства сгенерируем промежуточные кадры. Сиреневая окраска и стрелка от 1-го кадра к 12-му указывает на то, что промежуточные кадры сгенерированы (рис. 3.41).(B случае ошибки стрелка рисуется пунктиром.)
Просмотрим последовательность фаз движения перемещая указатель кадров вдоль шкалы времени.
Одновременно несколько фаз анимации удобно наблюдать в режиме калькирования (Onion Skin), который включается кнопками на нижней рамке шкалы времени. В этом режиме отображаются контуры объектов в соседних кадрах или шлейф движущегося изображения (рис. 3.42).
Протестируем анимацию.
Анимация движения применима только для экземпляров библиотечных образцов (символов) или сгруппированных объектов.
Пример 2.
Увеличить длительность созданной в примере 1 анимации до 3 c. Исследовать влияние количества и частоты кадров на длительность и плавность анимации.
Увеличим число кадров до N = 12 - 3 = 36, вставив промежуточные кадры клавишей F5 или протаскиванием выделенных концевых ключевых кадров с нажатой левой кнопкой мыши. Протестируем анимацию. Ее длительность 3 с.
На панели Свойства увеличим частоту до 30 кадров B секунду. Протестируем анимацию. Ее длительность стала 36: 30: 1,2 с.
Восстановим частоту 12 кадров в секунду.
Анимация движения, состоящего из нескольких этапов, реализуется заданием ключевых кадров в моменты начала и окончания этих этапов и коррекцией свойств объектов (их положения, размеров, цвета, прозрачности) в этих кадрах. Изменение скорости движения задается на панели Свойства параметром Замедление (Ease). По умолчанию движение равномерное (параметр=0), при установке
положительного значения движение
замедленное, отрицательного - ускоренное.
Пример 3.
Отредактировать созданную анимацию так, чтобы 1,5 с шар двигался c замедлением вправо и уменьшался, останавливался, а затем
1,5 с двигался с ускорением влево и увеличивался.
Выделим 18-й кадр слоя «шap» и преобразуем его в ключевой.
Установим шар в крайнее правое положение и уменьшим его инструментом Трансформация.
Выделим последний 36-й кадр и установим шар в крайнее левое положение. Восстановим его размер.
Зададим на первом этапе параметр Замедление (Ease) равным 80, а на втором- равным -80.
Протестируем анимацию.
Пример 4.
Создать анимацию: пропеллер вентилятора совершает 1 оборот за 1 с.
(рис. 3.43, а).
С помощью инструментов выделения трансформируем его в пропеллер (рис. 3.43, 6) и превратим в символ типа Графика.
Центр вращения полученного объекта должен совпадать c центром пропеллера. При необходимости откорректируем положение
центра инструментом Трансформация (рис. 3.43, в).
Превратим 12-й кадр в ключевой.
Произведем автозаполнение промежуточных кадров, выполнив команду Вставка -› Создать анимацию движения.
Выделим любой промежуточный кадр и на панели Свойства установим: (Поворот по чс), 1 оборот (рис. 3.44).
Просмотрим последовательность фаз в режиме калькирования
(рис. 3.45).
Протестируем анимацию.
4. Физкультминутка
Движения глазными яблоками: вправо-вверх; влево-вверх, вправо-вниз, влево-вниз. Повторить 3,4 раза.
5.
Закрепление изученного материала на практике
Выполнение примеров 1-4 самостоятельно
6. Домашнее задание:
Изучить материал § 16
7. Подведение итогов:
Ответы на вопросы учеников (при возникновении таковых).
Звенит звонок.
Урок окончен. Всем спасибо. Можете быть свободны.
Рефлексия.
Сегодня нового я узнал на _______________ %
Разобрался с данной темой на ____________%
Конспект ученика
Анимация движения 02.03.2017
Анимация движения - вид автоматической анимации осуществляющаяся путем автозаполнения промежуточных кадров.
F
5-
вставка промежуточного кадра
Shift
+
F
5- удалить промежуточный кадр
N
=
f
*
t
N
-необходимое число кадров
f
-частота кадров(12 по умолчанию);
t-длительность анимации (в секундах);
Оформление классной доски
N
=
f
*
t
F
5-
Shift
+
F
5 -
При использовании shape tweening могут модифицироваться следующие параметры фигуры:
Направляющий слой и слой траекторий
Маскируемый слой и слой-маска
Создание кнопок
Основные типы действий:
Алгоритм создания кнопки (алг1):
Алгоритм создания кнопки для перехода на указанную Web-страницу:
Алгоритм создания кнопки для остановки клипа:
Создание сценариев с помощью языка ActionScript
Виды анимации
Традиционная анимация (2D, Cel, Hand Drawn)
Как создается традиционная анимация?
Как создавались анимационные ролики в 1938 году Примеры современной традиционной анимации
Eluvium. Автор Стас Сантимов Are You Lost In The World Like Me? Автор Стив Катс С чего начать?
2D векторная анимация
Bojack Horseman (сериал на Netflix) Примеры современной 3D анимации
Автор — ManvsMachine Nike Air Max
Автор — PlatigeImage Wonder Woman — Prologue | Making of
Профессия 3D-аниматора: с чего начать
Stop motion (Кукольная анимация)
Эволюция Stop Motion Примеры современной кукольной анимации
Еще пример из Robot Chicken Автор — Bruna Berford Профессия кукольного аниматора: с чего начать, сколько зарабатывает
Типы анимации
Гиф анимация
Примеры GIF-анимации
Как сделать GIF самостоятельно?
Cinemagraphy
Примеры японской анимации
Prison School Anime Flavors of Youth Как создается анимэ?
Видео — Как создается анимэ 12 принципов создания анимации
1. Сжатие и разжатие
2. Подготовка к действию
3. Инсценировка
4. Спонтанное действие и От позы к позе
5. Инерция и нахлест
6. Замедление движения в начале и конце
7. Дуги
8. Выразительные штрихи
9. Частота кадров
10. Гиперболизация
11. Прорисовка
12. Харизматичность
Тенденции (тренды) в анимации
3D в стиле ретро и винтаж
Высококонтрасная Cel Animation
Микс 2D и 3D
Сверхсюрреализм
Динамическая анимация функций в приложениях
Возрождение 2D-анимации в маркетинге
-Глаза закрыть, отдых 10-15 секунд.