Adobe Flash Professional

Обзор


Содержание сайта
Разное
Мультипликация
Flash
Обзор л.2
Adobe Flash

Содержание

Введение
Основные шаги
Виды файлов Flash

Интерфейс

Рисование

Создание мультипликации

Импорт файлов
Ссылки
ActionScript
Звук
Видео
Кнопки и навигация
Сайт

Предварительный просмотр и публикация

Создание мультипликации

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

Анимация движения по прямой
Анимации движения по кривой
Преобразование прямого пути
Создание собственного пути движения
Редактирование пути движения
Создание замкнутого цикла анимации
Реверс направления движения
Ориентация объекта при движении
Замена объекта
Панель определения движения

Дополнительные справочные материалы


При создании мультипликации движения можно определить движение объекта по определенной траектории - по прямой линии, по ломанной кривой, состоящей из отрезков прямой линии, и по гладкой кривой линии.


Анимация движения по прямой

Пример 1:
См. Пример 2

Создадим движение самолета по прямой линии.

В монтажном кадре вставьте изображение самолета на левой стороне сцены. Векторное  изображение самолета можно создать в Adobe Flash (см. Рисование) или импортировать изображение, созданное на стороне (в формате .png с прозрачным фоном).

Выделите самолет на сцене. В контекстном меню самолета выбираем Преобразовать в символ (Convert to Sumbol). Выбираем графический тип символа.

В контекстном меню изображения выбираем Создать анимацию движения  (Create Motion Tween). Программа автоматически создает 24 кадра для плавного изменения.
Перемещаем изображение на  правую сторону сцены.
Можно настроить продолжительность анимации и другое - см. Работа с кадрами.

Анимация движения самолета по прямой создана, ее можно просмотреть, щелкнув по клавише Enter.

Из этого примера можно сделать такие выводы:

• длина любого нового участка изменения (tween span), который автоматически создается програмой, по умолчанию соответствует установленной скорости мультипликации. Если скорость мультипликации выбрана 24 кадра в сек., то будет по умолчанию создан участок изменения в 24 кадра (1 сек мультипликации). Если выбрана скорость 30 кадров в сек. - участок изменения по умолчанию составит 30 кадров.

• Чтобы программа смогла создать плавное изменение, вставленный на сцену объект должен быть преобразован в символ. При этом объект может быть любым - созданный в Adobe Flash векторный рисунок, текст, импортированное растровое изображение и пр. Если Вы пытаетесь создать плавное изменение на несимволе, программа попросит Вас преобразовывать элемент в символ (подробнее о символах).

• Только к одному символу может быть примененно плавное изменение (tweened) за один раз. Если Вы попытаетесь применить изменение к уровню с несколькими объектами, программа запросит Вас преобразовать графические символы в единственный символ.

• Плавное изменение можно применить для  изменения размеров/масштабирования, изменения цвета и применения фильтров.
Примечание: плавное изменение для эффектов фильтров применимо только к символам клипов и кнопок, не применимо к символам графики.


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

Анимации движения по кривой

Есть несколько способов создать движение объекта по кривой:

А. При создании покадровой анимации Вы можете создать движение объекта по любой траектории
Б. Вы можете пребразовать прямой путь, который создается при создании  анимации движения   (Create Motion Tween) в кривую линию.
В. Вы можете создать собственную кривую линию как траекторию движения объекта


Преобразование прямого пути

При использовании функции Анимации движения ("Motion Tween") на сцене траектория движения объекта отмечена прямой линией с маркерами.
Вы можете скорректировать путь движения объекта по сцене несколькими способами.
Самые простые способы корректировки пути движения:

Способ 1

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


Способ 2
Вставьте на сцену красный квадрат
Создайте анимацию движения квадрата (см. Создание анимации движения)
В результате на сцене будет фигурировать наш квадрат и его путь движения (в виде линии с маркерами).

Вы можете скорректировать путь движения, воздействия не на сам путь, а на объект (так, как показано на анимации ниже):


Использование этого метода простое: щелкайте по выбранному кадру на Шкале времени (у нас это 10, 20 и 30-й кадры) и соответственно перемещайте объект по сцене (не затрагивая при этом кривую пути) Программа автоматически создает ключевые кадры в выбранных кадрах.


Создание собственного пути движения

1. Вставляем на сцену рисунок самолета.

2. Преобразуем рисунок самолета в графический символ
3. Создаем новый слой под названием "Путь", на котором карандашом () рисуем траекторию движения самолета. Линия пути не должна быть замкнутой.

4. При необходимости сглаживаем линию пути, используя инструмент "Smooth" () внизу Панели инструментов.

5. Выделяем созданный путь и копируем его в буфер обмена. После этого сам путь можно удалить.

6. Возвращаемся в слой самолета. Выделяем самолет на сцене, в контекстном меню выбираем "Создать анимацию движения" (Create Motion Tween).

7. Выделяем самолет на сцене, в меню Правка (Edit) выбираем "Вставить" или "Вставить по месту" (Paste in Place).
К изображению самолета добавляется изображение пути движения.

8. Для просмотра ставим красный движок на 1-й кадр, щелкаем по клавише Enter.


Редактирование пути движения

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

Выберите  инструмент свободного преобразования (Free Transform)  на панели инструментов и щелкните по пути движения.
Маркеры преобразования появляются вокруг пути движения.

Можно изменять масштаб или повернуть путь движения. Можно создать кривизну пути, используя инструменты выбора и инструмент Преобразовать узловую точку (Convert Anchor Point) - этот инструмент скрыт под инструментом Перо (Pen) .


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

3 Для коррекции пути выберите  инструмент спецвыделения (Subselection)  на панели инструментов.
4 Щелкните и перетащите маркер, чтобы редактировать кривую пути.
Примечание: путем движения можно также непосредственно управлять с инструментом выделения ().
Выберите инструмент выделения () и переместите его  близко к пути движения. Значок кривой появляется рядом с Вашим курсором, указывающий, что Вы можете редактировать путь. Щелкните и перетащите путь движения, чтобы изменить искривление.

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

Примечание:
Если Вы своей дрожжащей рукой нарисовали слишком корявый путь и одновременно для движения по этому пути отвели слишком мало кадров, то программа не сможет выполнить задачу и повторить все изгибы пути.
В этом случае появится объявление:
"The curve must be simplified to fit the number of frames available in the current motion tween. Please choose one of the following methods"
Или: "Кривая должна быть упрощена, чтобы соответствовать числу кадров, доступных в текущей анимации движения. Пожалуйста выберите один из следующих методов..." и предлагается два варианта, первый из которых - упростить путь.

См. Дополнительно:
Создание собственного анимационного пути


Реверс направления движения


Чтобы объект двигался от конечной точки к начальной, в контекстном меню объекта выберите Траектория движения  (Motion Path) - Обратная траектория (Reverse Path).

См. также:


Ориентация объекта при движении


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

1 Щелкните по слою плавного изменения движения (motion tween) на Временной шкале (Графике времени). В нашем примере это слой "самолет".

2. Выделите путь движения, используя инструмент выделения ()

3. Правильно установите объект относительно пути движения в 1-и и последнем кадрах анимации.

4. В Инспекторе свойств выберите Ориентацию по траектории (Orient to path) в опции пути.

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




Программа автоматически добавляет ключевые кадры, разворачивая самолет по траектории.

Временная шкала будет выглядеть так:




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


• Удостоверьтесь, что и старт и окончание движения объекта зафиксированы непосредственно на созданном пути.

• Удостоверьтесь, что Ваш путь движения не объект рисунка, группа или символ. Путь движения создается только в режиме рисования "Merged Drawing".
• Избегайте использовать при создании пути необычные штриховые стили, такие как черточки, точки и пр. Это приводит к непредсказуемому поведению объекта при движении по такому пути.



Примечание: Созданная в Adobe Flash Pro анимация Flash преобразована в GIF-анимацию.


Замена объекта при движении

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


Для этого нужно выделить самолет в Монтажном кадре. Затем перетащить новое изображение из Библиотеки и отпустить на старое изображение.

Редактор спроситт Вас, хотите ли Вы заменить существующий объект новым объектом. Нажмите ОК.

Или:
Выберите объект, котрый Вы хотите заменить в Монтажном кадре.
В Инспекторе свойств щелкните кнопкой Swap (Замена). Появится диалоговое окно для выбора нового изображения.
Выберите новый символ и нажмите OK.


Панель определения движения


Если Ваш проект неоднократно совершает идентичные плавные изменения движения, можно использовать Панель определения движения (Motion Presets),  которая открывается из меню Окно (Window ) - Определение движения (Motion Presets).
Подробнее о панели Motion Presets

Дополнительные справочные материалы:

Обзор Adobe Animate CC - Анимация движения


Об анимации движения

Последнее обновление: ноябрь 2020 г.



О всех замеченных ошибках или неточностях в описании программы, а также о возможных дополнениях просьба сообщить по адресу: average.2011@mail.ru
Если у Вас есть веб-страница с дополнительными материалами по данной теме, сообщите адрес страницы, чтобы на нее можно было сделать ссылку.


Рейтинг@Mail.ru