Зачем в анимации нужны символы

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

Вы можете анимировать текст, рисунки, фигуры, таблицы, графические элементы SmartArt и другие объекты презентаций PowerPoint.

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

Можно также просмотреть похожее видео об анимации текста.

Добавляйте эффекты анимации к тексту, рисункам, фигурам и другим объектам в презентации.

1. Выделите текст или объект, к которому нужно добавить анимацию.
2. Откройте вкладку Анимации и выберите эффект анимации.
3. Нажмите кнопку Параметры эффектов и выберите нужный вариант.

Управление анимацией и эффектами

Анимацию можно запускать несколькими способами:

• Чтобы настроить запуск эффекта анимации по щелчку на слайде, выберите По щелчку.
• Чтобы эффект анимации запускался одновременно с предыдущим эффектом, выберите С предыдущим.
• Чтобы анимация воспроизводилась сразу после предыдущего эффекта, выберите После предыдущего.
• С помощью поля Длительность можно сделать эффект более длинным или коротким.
• В поле Задержка введите задержку перед запуском эффекта.

Добавление дополнительных эффектов к анимации

1. Выделите объект или текст с анимацией.
2. Нажмите кнопку Добавить анимацию и выберите необходимый вариант.

Изменение порядка воспроизведения анимации

1. Выберите маркер анимации.
2. Выберите нужный вариант:
   • Переместить назад, чтобы анимация выводилась раньше в последовательности.
   • Переместить вперед, чтобы анимация выводилась позже в последовательности.

Добавление анимации к сгруппированным объектам

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

1. Удерживая нажатой клавишу CTRL, выделите нужные объекты.
2. Выберите Формат >Группировать >Группировать, чтобы сгруппировать объекты.
3. Откройте вкладку Анимация и выберите эффект анимации.

Добавление анимации к объекту

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

Щелкните заголовок раздела ниже, чтобы открыть подробные инструкции.

Изменение скорости показа эффекта анимации

Скорость эффекта определяется параметром Длительность.

1. Выделите на слайде эффект анимации, который хотите изменить.
2. На вкладке Анимация в группе Время показа слайдов в поле Длительность введите необходимое число секунд. (Максимум: 59 секунд. Минимум: 0,01 секунды. Вы можете ввести значение длительности с клавиатуры или установить его с помощью стрелок вверх и вниз.)

Изменение способа запуска эффекта анимации

1. Выделите на слайде эффект анимации, который хотите изменить.
2. На вкладке Анимация в группе Время показа слайдов откройте список Начало и выберите один из трех описанных ниже параметров.
   

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

Настройка промежутка времени между эффектами анимации

Параметр Задержка определяет промежуток времени перед запуском определенного эффекта анимации. Этот промежуток начинается после щелчка мышью или после завершения предыдущего эффекта.

1. Выделите на слайде эффект анимации, который хотите изменить.
2. На вкладке Анимация в группе Время показа слайдов в поле Задержка укажите промежуток времени в секундах.

Изменение порядка воспроизведения эффектов анимации на слайде

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

1. Откройте область анимации: на вкладке Анимация в группе Расширенная анимация нажмите кнопку Область анимации.
2. В области анимации выделите эффект, для которого нужно изменить порядок анимации.
3. На вкладке ленты Анимация в группе Время показа слайдов в разделе Изменить порядок анимации выберите одну из указанных ниже команд.
   • Чтобы переместить эффект на одну позицию вверх в порядке анимации, выберите команду Переместить назад.
   • Чтобы переместить эффект на одну позицию вниз в порядке анимации, выберите команду Переместить вперед.

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

Удаление эффекта анимации

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

1. Выберите число возле анимации, которую нужно удалить.
2. Нажмите клавишу DELETE на клавиатуре.

Применение нескольких эффектов анимации к одному объекту

1. Выделите текст или объект, к которому необходимо добавить несколько эффектов анимации.
2. На вкладке Анимация в группе Расширенная анимация выберите команду Добавить анимацию.

Проверка эффекта анимации

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

• На вкладке Анимация в группе Просмотр выберите команду Просмотр.

Копирование эффектов анимации из одного объекта в другой

Чтобы не настраивать одинаковые эффекты анимации для нескольких объектов, скопируйте их с помощью инструмента «Анимация по образцу». Более подробные сведения и видеоролик вы найдете в статье Дублирование эффектов анимации с помощью анимации по образцу.

Применение эффектов анимации к тексту, объекту или диаграмме

• Выделите элемент, который нужно анимировать, откройте вкладку Анимация и выберите один из следующих эффектов:
  

  Действие, которое нужно применить к объекту	Команда на вкладке «Анимация»
  Появление на слайде	(Щелкните стрелку вправо, чтобы увидеть другие варианты.)
  Выделение
  Исчезание со слайда
  Перемещение по определенному пути

К одному объекту можно применить несколько эффектов анимации. Просто выделите объект еще раз и примените дополнительный эффект.

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

Изменение эффектов анимации

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

1. Выберите нужный слайд и щелкните на нем номер эффекта анимации, который вы хотите изменить.
2. В области анимации, отображаемой справа, будут показаны все эффекты анимации, которые есть на слайде. Доступные в этом разделе настройки:
   • изменение порядка и удаление эффектов анимации в разделе Воспроизвести;
   • изменение самого эффекта анимации и добавление звука в разделе Параметры эффектов;
   • изменение способа запуска анимации и продолжительности эффекта в разделе Время показа слайдов.
   • Чтобы вывести в начале анимации пустую диаграмму, выберите эффект анимации в области анимации и в разделе Анимационные эффекты диаграмм установите флажок Запустить анимацию, нарисовав фон диаграммы.

Чтобы просмотреть результат изменений, нажмите Воспроизвести с.

Дополнительные сведения

Добавление эффекта анимации

1. Выделите на слайде объект или текст, к которому нужно добавить анимацию. В этом контексте объект — это любой элемент на слайде, например рисунок, диаграмма или текстовое поле. При выделении объекта на слайде вокруг него появятся маркеры изменения размера. (В целях анимации абзац в текстовом поле также считается объектом, но при его выделении маркеры изменения размера отобразятся для всего текстового поля, а не для одного абзаца).
2. На вкладке Анимации откройте коллекцию эффектов анимации и выберите нужный вариант.
3. На вкладке Анимации откройте список Параметры эффектов и выберите нужный вариант. Параметры эффектов доступны для текста, а также для выбора направления и интенсивности эффектов анимации. (Параметры есть не у всех эффектов анимации.)
4. Чтобы просмотреть анимацию, на вкладке Слайд-шоу ленты нажмите кнопку Воспроизвести с начала. (Если вы отключили упрощенную ленту, вкладка Слайд-шоу не отображается. Используйте вместо нее вкладку Вид, чтобы начать слайд-шоу.)
5. Для воспроизведения эффекта анимации щелкните слайд в режиме слайд-шоу.

Удаление эффекта анимации

1. Выделите анимированный объект.
2. На вкладке Анимации откройте коллекцию эффектов анимации и выберите вариант Нет.

Изменение порядка воспроизведения эффектов анимации

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

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

Adobe Flash Professional

О Символах

Любой элемент, который Вы создаете, можно скопировать и вставить несколько раз при создании мультипликации. Но при этом возникает проблема — если нужно изменить элемент, то эти изменения нужно произвести со всеми копиями, разбросанными по мультипликации.

Лучший вариант — использовать символы как элементы многократного использования и сохранить их в Библиотеке.

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

Символы сохранены в Библиотеке (Library). Когда Вы перетаскиваете символ на сцену, редактор создает копию символа (или экземпляр символа — instance), оставляя оригинал в Библиотеке.

Также полезно думать о символах как о контейнерах. Символы — просто контейнеры для Вашего содержания. Символ может содержать изображение JPEG, импортированный рисунок Adobe Illustrator , или рисунок, который Вы создали в Adobe Flash Professional.

В Adobe Flash Professional все символы делятся на 3 категории:

• Графический символ (Graphic)
• Кнопка (Button) — см. Кнопки
• Клип или фрагмент ролика (Movie clip) — см. Клипы

Клип
Клип (Movie clips) используется для создания многократно используемых фрагментов анимации в Adobe Animate. Видеоклипы имеют собственную временную шкалу, которая не зависит от временной шкалы основной анимации. Клипы могут содержать интерактивные элементы управления, звуки и даже другие экземпляры видеоклипа.
Вы также можете разместить экземпляры фрагмента ролика внутри временной шкалы символа кнопки для создания анимированных кнопок. Кроме того, видеоклипы можно создавать с помощью ActionScript.

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

Кнопки
Символы кнопок (Button) — это особый тип четырехкадрового интерактивного видеоролика в Adobe Animate. При создании символа кнопки создается временная шкала с четырьмя кадрами. Первые три кадра отображают три возможных состояния кнопки, четвертый кадр определяет активную область кнопки.
Временная шкала символа кнопки фактически не играет линейно как нормальная временная шкала; она реагирует на действия посетителя, переходя к соответствующему кадру. Чтобы сделать кнопку интерактивной, нужно поместить экземпляр символа кнопки на сцену и назначить действия этому экземпляру.
Вы назначаете действия для основной временной шкалы файла Animate. Если кнопка находится внутри фрагмента ролика, вы можете добавить действия к временной шкале фрагмента ролика. Не добавляйте действия на временную шкалу символа кнопки.
Подробнее о кнопках

Категория символа указывается в строке типа (Type) при преобразовании объекта в символ.

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

При создании анимации плавного изменения (tween) преобразование объекта в символ обязательно.
Если преобразование в символ не сделано, редактор выдаст предупреждение о необходимости такого преобразования.

Несколько объектов на одном слое, которые объединены (сгруппированы), могут также выступать как символ — см. Пример .

Символы и несимволы

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

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

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

Поскольку при создании анимации формы не используются символы, Вы не должны использовать символы. Наоборот, нужно преобразовать символ в обычную графику. Для это используйте инструмент выбора, чтобы выделить символ на сцене, и выберите меню Modify (Модификация) > Break Apart (Преобразовать в растровое изображение).

О форматах изображения

Редактор поддерживает многие форматы изображения импорта — JPEG, GIF, PNG и PSD (формат Фотошопа).
Используйте файлы JPEG для изображений, которые включают градиенты и тонкие изменения.
Файлы GIF используются для изображений с большими блоками цветных или черно-белых рисунков.
Использование PNG — для изображений с прозрачностью.
Используйте файлы PSD, если Вы хотите сохранить все уровени, прозрачность и смешивание от файла Фотошопа.

Эти изображения могут быть импортированы и помещены на сцену и в Библиотеку .
В Библиотеке можно создать папки символов.

Преобразование растрового изображения к векторному графическому символу

Чтобы преобразовать точечный рисунок в векторный, импортируйте растровое изображение в Adobe Flash Professional.
Выделите точечный рисунок и выберите меню Модификация (Modify)> Растровое изображение > Векторизация .
Нужно помнить, что сложное изображение при преобразовании в векторное изображение будет иметь большой вес в Мб.

Работа с символами отличается от работы с графическми объектами, которые Вы создаете при рисовании (см. Рисование ).

Создание символов

• Использовать меню Вставка (Insert) > Новый символ (New Symbol). Редактор откроет редактирующий режим символа, где Вы можете начать создавать или импортировать графические символы для Вашего символа.
• Выделить существующие графические символы на Монтажном кадре и затем выбрать меню Модификация (Modify) > Преобразовать в символ (Convert to Symbol).
• В контекстном меню объекта на сцене выбрать Преобразовать в символ .

Вы можете дать созданному символу характерное название (программа дает символам названия по умолчанию типа Symbol 1, Symbol 2, Symbol 3 и т.д.).

Определите тип символа

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

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

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

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

Символы можно не только перетаскивать на сцену по одному, но и распылять (как краску) — см. Распылитель .

Регистрационный пункт

Регистрационный пункт символа определяет пункт измерения, когда символ установлен на сцене.
Вы определяете регистрационный пункт, когда Вы сначала преобразовываете объект в символ. Вы можете изменить регистрационный пункт, передвигая изображение вокруг относительно перекрестия, которое появляется на сцене в режиме редактирования символа (Edit mode).

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

1. Выберите весь рисунок на Стадии, используя инструмент Выбора ().
Вы можете также создать область выбора, используя инструмент Лассо ().

2. Выберите меню Edit > Cut, чтобы вырезать рисунок на Стадии и поместить его в буфер обмена.

3. Выберите Insert > New Symbol, чтобы открыть диалоговое окно создания нового символа (Create New Symbol), которое выглядит идентичным окну преобразования в символ (Convert to Symbol).
Дайте название в области текста Name, чтобы назвать новый символ.

4. Выберите графический символ из раскрывающегося меню Типа. Нажмите OK, чтобы создать новый символ.

5. Новый символ появляется в Библиотеке (Library), и открывается пустая Стадия. Вы находитесь теперь в режиме Edit для нового символа, где Вы можете сделать изменения Вашего символа.

6. Выберите меню Edit > Paste in Center (Вставка по центру), чтобы вставить символ из буфера обмена на Стадию.

7. Выйдите из режима редактирования (Exit Edit), щелкая по ссылке Scene 1 выше Стадии.

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

1. Выберите экземпляр символа на сцене.
2. Выберите меню « Модификация » > «Разделить» ( Modify > Break Apart). Это действие разбивает экземпляр на его составные графические элементы.
3. Чтобы изменить эти элементы, используйте инструменты рисования.

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

Чтобы изменить символ, есть два способа:
1. Изменить символ в Библиотеке
2. Изменить символ на сцене.

Редактирование символа в библиотеке (Library) :

Дважды щелкните символ в Библиотеке (Library), чтобы его редактировать. При этом используется режим редактирования символа (Edit mode).
Редактор немедленно переходит в редактирующий режим.

Заметьте, что на горизонтальной полосе вверху будет указано, что Вы в настоящее время редактируете символ, и указано название символа (на рисунке слева — редактирование символа линии (line).
В окне редактирования символа можно сделать необходимые изменения.
Чтобы вернуться на основную сцену, щелкните по ссылке Scene 1.

Преимущество редактирования символа в Библиотеке — выбранный символ откроется в окне редактирования один, без окружающих объектов.

Редактирование символов по месту

Иногда нужно изменить символ, учитывая все его окружение. В этом случае символ редактируется прямо на сцене.

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

Для выхода из режима редактирования (Edit) щелкните по ссылке Сцена 1 выше Стадии.

Дублирование символов применяется, если нужно создать новый символ на основе существующего, и при этом оставить неизменным первоначальный символ.
Для дублирования символа выделите символ в Библиотеке, в контекстном меню выберите Dublicate .
При этом Вы можете переименовать символ или назначить ему другой тип символа.
Дважды щелкните по новому символу, чтобы внести в него изменения.

Иногда полезно использовать замену одного символа на другой. Например, Вы создали баннер, на котором фигурируют коньки. Для летнего периода Вам нужен баннер, на котором должен быть футбольный мяч.
Чтобы не переделывать весь баннер. Вы можете просто поменять символ коньков на символ мяча (при условии, что оба символа созданы заранее).

Выделите символ коньков на сцене. В контекстном меню символа выберите Swap . В открывшемся окне (окно Swap Symbol) щелкните по символу мяча.
На баннере мяч заменит коньки.
Или: Выделите символ на сцене. В Инспекторе свойств щелкните по кнопке » Замена » (рядом с названием символа).
Аналогичным образом можно изменить и другие символы на вашем баннере.

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

Обзор Adobe Animate CC
Символы

• Создание экземпляров
• Редактирование свойств экземпляра
• Настройка видимости экземпляра (только в CS5.5)
• Изменение цвета и прозрачности экземпляра
• Замена одного экземпляра другим
• Изменение типа экземпляра
• Задание цикла для графического экземпляра
• Разбивка экземпляра символа
• Получение информации об экземплярах в рабочей области
• О вложенных фрагментах ролика и иерархии «родительский элемент-дочерний элемент»

В этом уроке художник-аниматор Максим Петрик расскажет как работать с анимацией типа “Classik Tweene”. Как экспортировать изображения, оптимизировать его качество. Вы узнаете как работать с символами в анимации, что из себя представляют символы в анимации, и зачем они нужны. Так же Вы научитесь анимации вращения, анимации движения и анимации деформации символов при помощи анимации типа “Classik Tweene”

Привет, на этот раз приступим уже ближе к делу =) . я предложу сегодня нарисовать спорт кар и его анимировать. Урок будет не сложный, и думаю вам понравится.

Итак, с чего начнём. Запомните, поскольку в реальности, если вы хотите заработать, у вас будет заказчик. А у него есть свои представления – “что такое красиво, вкусно, и как это есть”, поэтому художнику приходят на помощь референсы. Кто не знает – это набор картинок, фотографий зарисовок… и прочего. Что объясняет в каком стиле, цветовой гамме, что и как рисовать (всегда их требуйте, чтоб не было разногласий, или подбирайте сами но утверждайте у заказчика). Итак, подбираем референсы. Допустим вот эту тачку

теперь откроем любой растровый графический пакет и немного по варганим =). Я использую, как вы помните, Krita и стараюсь рисовать при размере картинки не менее 2048×1536 pix. Так получаются четче линии. И еще, чтоб рука не дрожала – не налегайте на кофе =). В программе Krita есть замечательная функция рисовать сглажеными линиями, так что если у вас чуть дрогнула рука при обводке, ничего страшного. Но это, я наверное расскажу как нибудь в следующий раз.

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

получится как то вот так. Можно было бы нарисовать машину в векторе во Flash, но это мы сделаем в отдельной статье. Тут я хочу показать вот что. Дальше сохраняем машину как PNG, кузов отдельно, колесо отдельно.

Глава 2. Привет Flash.

Отрываем Flash, создаем файл. Да, еще я пользуюсь английской версией Flash, просто мне так удобней. Если вы выучите «горячие клавиши», то в принципе, язык интерфейса мешать не будет. В русском языке в панелях названия переведены более длинными фразами, и это как то отвлекает. Разница только в этом.

теперь подстроим параметры сцены, жмем правой кнопочкой по сцене и выбираем “Document Properties”

изменим разрешение на 800х600. В этом окне можно также настроить частоту кадров – сейчас она выставлена как 24.00; фон заливки – сейчас он белый, но себе поставлю серый; автосохранение – поставите галочку, будет сохраняться каждые 10 минут, но можно поставить время любое.

Продолжим. Перетаскиваем наши png на сцену.

При стандартном виде окна у вас внизу находится “timeline” – это временная шкала на которой размещаются объекты, а еще она имеет функции “слоёв ” как в Photoshop, что позволяет размещать анимированные объекты друг под другом. Слои можно именовать, если нужно, делать невидимыми, закреплять и отображать только контур объекта. Почти все эти возможности есть во всех редакторах, так что задерживаться на этом сейчас не буду.

Ну так вот, если вы перетащили два объекта сразу , то они помещаются на один слой, но чтоб их анимировать нужно разбить их по слоям. Сделать это можно двумя способами. Первый это нажать кнопку создания слоя, выделить колесо, вырезать (либо через использование правой кнопки мыши, либо комбинацией Ctrl+X,и вставить на слой ниже Ctrl+V. Второй способ – выделить оба объекта, нажать ПКМ (правую кнопку мыши) выбрать “Distribute to Layers”.

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

Получилось так, что объект “колесо” лежит слоем выше и перекрывает “кузов”.

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

Продолжим путешествие =). Следует обратить внимание вот на что, если вы используете растровые объекты, то Flash сжимает их по установленным в умолчании параметрам сжатия, и картинка может пикселится

чтобы этого избежать, нужно сделать вот так – выберите меню библиотеки “Library”,в ней на объекте нажмите ПКМ и откройте свойства “Propetries”

выберите PNG и поставите галочку на сглаживание, получится вот так.

Глава3. Ну давай уже анимировать!

Большинство анимаций во Flash осуществляются над символами. Символы можно помещать друг в друга, то есть есть дочерние и материнские символы. Каждый дочерний “символ” может быть материнским. Что это значит? Это значит что теоретически их может быть бесконечно, на практике в какой то момент начнутся баги. Надеюсь вы поняли, что я тут накрутил? Если не поняли – не ломайте себе мозг, продолжим, позже всё поймёте. Итак, самый простой способ “завернуть” объект (в данном случае наши картинки) это – ПКМ выделить объект на сцене

и выбрать “Convert to Simbol”.

Вводим имя и сохраняем. Другой способ на выделенный объект использовать “F8”. В результате у нас в библиотеке помимо наших картинок появятся и символы, в которые обернуты картинки, то есть картинки как бы внутри символа.

Другими словами “символ”- это “Мама”, а PNG – это дочка.

Воооот =) и тут мы возьмём и завернём”символ”нашего колеса, еще в один “символ” (символ анимации). Выделяем на сцене колесо, которое уже не PNG – “колесо”, а “символ” “колесо”, и жмём “F8”. Именуем “символ” как “вращение колеса” (может получиться так, что один слой перекрывает другой, но вы можете на панели “timeline” поставить замок или сделать прозрачным мешающий слой) соответствующий этому названию “символ” появится в библиотеке

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

Далее. придадим символу вращение. Использовать будем в этом уроке анимацию типа “Classik Tweene”. Для этого на слое «timeline» поставите курсор на отметку 20 (это 20 кадр) и нажмите “F6”. Так вы поставили первую контрольную точку.

Теперь ПКМ нажмите между двумя контрольными точками и выберите “Create Classic Tweene”.

эта область выделится синим с указанием стрелочки, которая обозначает автоматическое движение от “кадра 1” к “кадру 20”

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

и в разделе “Rotate” выбираем “CCW” – это вращение против часовой стрелки. “Вуаля”, если вы нажмёте “CTRL+ENTER”увидите как чудесно вращается ваше колесо =).

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

теперь скопируйте колесо и подставте его на место второго колеса. Заметьте, что переднее колесо должно быть чуть меньше заднего. Поэтому, нажмите “Q” и удерживая “Shift”за уголочек маштабируйте до нужного размера. Получится так

и если вы нажмёте волшебную комбинацию “CTRL+ENTER”, то увидите что оба колеса вращаются. А вот если вы теперь еще и кузову придадите небольшое движение вверх-вниз. То вообще будет хорошо. Для этого, “символ” кузова на сцене завернём еще раз в “символ” “анимация кузова”, двойным щелчком войдём внутрь символа.

На слое ”timeline”кузова с помощью кнопки “F6” создадимдве контрольные точки на 30-м и 60=м кадрах. Создадим анимацию между точками с помощью ПКМ, используем “Create Classic Tweene”. Поставив курсор на “timeline” на 30 кадр, с помощью стрелочки “вверх” на клавиатуре, или мышкой. Чуть поднимем кузов выше – мы тем самым придадим ему анимацию движения вверх до 30-го кадра, и вниз обратно к прежнему положению до 60-го кадра. И снова волшебная комбинация “CTRL+ENTER”. И наш спорт кар уже сностно едет. А можно еще создать на “Timeline”слое, слойниже колес, нарисовать там тень. Сделаем это так, выйдем из символа “анимации кузова”

с помощью кнопки создадим слой на “timeline”, в инструментах выберем рисование прямоугольника с закруглёнными краями, в настройках выберем цвет и радиус закругления

теперь обернём эту фому в “символ” чтобы получилось так

дальше “символ” тени обернём в” символ” “анимации тени”, и войдём внутрь. С помощью кнопки “F6” поставим две контрольные точки на 30-м и 60-м кадре. Удерживая “Shift” выделяем области между контрольными точками.

правой кнопкой мыши жмём, и создаём “Create Classic Tweene”. После этого, область на “timeline” должна выделиться в синий цвет. Так мы повторили действие создания анимации колеса, но вместо ”вращения”сделаем ”изменение формы”.

устанавливаем курсор на 30-й кадр, нажимаете “Q” и уменьшаете “символ” тени чуть-чуть по ширине, придавая ей тем самым движение ”деформации сужения”до 30-го кадра и возврат к первому положению к 60-му кадру.

жмём “CTRL+ENTER”и смотрим результат.

И завершающая стадия, машина должна выезжать из-за кадра и уезжать за кадр. Для этого нужно вернуться снова на “Scene”, выделить теперь уже все элементы машины. Это: колёса, кузов и тень. Обернуть все эти элементы в “символ” кнопочкой “F8”,назовём его “машина едет”.

Обратите внимание, поскольку мы объединили все символы в “символ” “машина едет”, этот “символ” поместился на позицию самого высокого символа на “timtline”. Ну так вот,

теперь ставим контрольные точки на 60-й и 120-й кадр, и создаем уже знакомую нам анимацию “Create Classic Tweene”. Только теперь, на первом кадре, мы машину уводим за правый край экрана, а на 120-м за левый край.

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

На этом примере Вы ознакомились: как экспортировать изображения, оптимизировать его качество, создавать символы и структуру из дочерних и материнских «символов», анимацию вращения, анимацию движения, и анимацию деформации символов при помощи анимации типа “Classik Tweene”

Что я еще хочу сказать. Что в принципе, можно было бы машину не рисовать, а просто нарезать части с какой нибудь фотки или рисунка, но всё таки приятней делать всё самому. Надеюсь сильно вас не запутал и объяснил всё понятно.

Исходник и образец анимации будет на сайте издания . Всем до встречи

Автор художник-аниматор Петрик Максим

Принципы анимации в дизайне интерфейсов: тезисы Animation Handbook

InVision выпустил Animation Handbook — подробное руководство по анимации в дизайне интерфейсов, где дизайнер и разработчик игры Blackbox Райан Маклеод (Ryan McLeod) собрал все правила, принципы и лучшие практики. Делимся основными идеями мануала.

1 234 просмотра

Анимация — далеко не новое явление в веб-дизайне. Уже ни у кого не вызывает отторжения или удивления I-образный курсор в текстовых редакторах или эффект встряски в формах авторизации.

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

Мы только идем к этому. Медленно, но верно.

Зачем нужна анимация

Анимация — совсем необязательный элемент веб-страницы. Ее можно сравнить с усилителем вкуса.

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

Но, с другой стороны, при правильном подходе анимация способна подарить пользователю много приятных эмоций. Усилить и углубить впечатление, улучшить юзабилити. Сделать дизайн более «вкусным», если хотите.

Но это если говорить в общем. Что еще делает анимация?

Связывает изменения и контекст

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

То есть анимация придает изменениям видимость, «осязаемость», благодаря чему и весь дизайн становится более интуитивным.

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

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

Опять же, здесь имеет место священный принцип веб-дизайна «Не заставляйте меня думать». И, действительно, не надо думать — движущиеся элементы четко и понятно скажут, куда идти и что делать.

Пример. Затемнение кнопки говорит нам о том, что на нее нажали. Или внезапное исчезновение всех элементов сообщает, что изображение развернули во весь экран.

В таких мелочах нет никакой функциональной необходимости, но они ясно дают понять, что и где произошло.

Привлекает и направляет внимание

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

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

Помогает передавать эмоции

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

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

Анимация привлекательна, но не слишком реальна — это делает ее идеальным мостиком к незнакомым понятиям.

Пример. Почтовый сервис MailChimp использует анимированные элементы, чтобы подбодрить пользователей при отправке писем.

Так, дрожащая рука рядом с кнопкой «Отправить» намекает, что именно в этот момент переживать и волноваться — это нормально. Особенно если предстоит рассылка на 5000 адресатов. А «Дай пять» красноречивее всяких слов говорит, что задача выполнена успешно.

«Оживляет» сайты и приложения

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

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

Главные принципы анимации в UI-дизайне

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

Удивительно, но факт: отдаленно руку к развитию UI-анимации приложил даже сам великий и ужасный Уолт Дисней!

В 30-е годы он был недоволен качеством анимации в студии. Поэтому вместе с аниматорами Олли Джонстоном и Фрэнком Томасом разработал 12 основных принципов, призванных сделать движущиеся элементы качественнее и выразительнее.

Само собой, анимация фильмов и анимация сайтов — это не одно и то же. Тем не менее, здесь чему чему поучиться и большинство принципов актуальны и для интерфейсов.

Время и темп (Timing and pacing)

Показывают, сколько рисунков или кадров занимает действие.

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

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

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

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

Сценичность (Staging)

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

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

Как это работает в интерфейсах? Возьмем счетчики чисел, которые часто встречаются на разных сайтах.

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

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

Сквозное движение (Follow-through)

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

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

А, как мы уже говорили, в проектировании очень важно, чтобы элементы напоминали предметы, существующие в реальности.

Второстепенное движение (Secondary action)

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

Важный момент — это действие не зависит от основного действия. Такие детали не должны отвлекать внимание от основного действия и отменять его. Их главная задача. наоборот, — подчеркивать и дополнять.

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

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

Перекрывающее действие (Overlapping action)

В классической анимации перекрывающее действие — это такое, которое начинается до того, как закончилось предыдущее. То есть происходит как бы «внахлест».

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

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

Каскадная загрузка страницы: все элементы одинаково анимированы и четко сгруппированы. Интерфейс совместил в себе второстепенное и совмещенное действие

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

Смещение подчеркивает значимость каждого отдельного элемента, его интерактивность. Однако не стоит сильно увлекаться этим методом. Он подойдет, если объектов немного. Это нормально, если 3-5 шагов, но может быть весьма утомительным для 12.

Привлекательность (Appeal)

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

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

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

Главные выводы

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

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

Конечно, анимация — это прекрасно, но не стоит теперь игнорировать весь остальной контент и «прикручивать» движущиеся элементы к месту и не к месту.

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

И не забывайте о чувстве меры и правиле: хорошая анимация — та, которая ощутима и невидима одновременно.