Как создать анимацию формы в adobe flash
Трансформация или преобразование форм - когда форма (рисунок, геометрическая фигура) плавно преобразуется в другую форму.
Любой вид мультипликации, которая требует плавного изменения формы (например, мультипликация облаков, воды, огня и т.п.) - прекрасный кандидат для применения трансформации форм.
Эта функция относится только к формам , Вы не можете применить ее к группам, случаям или к точечному рисунку (фотографии).
Особенности анимации формы (Shape Tween)
• В отличие от анимации движения (Motion tweens и Classic Tween), при создании анимации формы не работают с символами. Вы можете только
использовать рисунки. Примитивные формы могут использоваться, но они должны быть сначала сломаны (см. Символы и несимволы ).
• Анимация формы требует, чтобы создание двух ключевых кадров (keyframes) содержало начало и окончание изменения формы.
• Изменения формы не имеют путей движения (motion paths), таким образом их движение (если таковое вообще имеется) всегда линейно - по прямой линии.
• Редактор движения (Motion Editor) не может использоваться, чтобы корректировать анимацию формы.
Создадим простое преобразование (трансформацию) одной геометрич. формы в другую.
1. Создайте новый слой.
2. Вставьте на этот слой любую геометр. форму, например красный круг.
3. Выделите кадр 10 на этом слое, щелкните клавишей F6, чтобы создать ключевой кадр. Таким образом в кадрах 1-10 наш красный круг остается неизменным.
4. На этом же слое выделите кадр 40, щелкните по клавише F6. Вставьте на сцене синий квадрат. Затем добавьте ключевой кадр в кадре 50.
График времени будет выглядеть так:
При просмотре мультипликации видно - с кадра 1 по 40 фигурирует красный шар, в кадрах 40 - 50 - синий квадрат.
5. С 10-го по 40-й кадр будем преобразовывать красный шар в синий квадрат. Щелкаем по ключевому кадру 10 (начало преобразования), в меню Insert (Вставка) выбираем Shape Tween .
Сегодня мы познакомимся с принципами создания анимации формы.
В отличие от анимации движения, анимация формы, работает только с примитивами, то есть с формами, созданными с помощью инструментов рисования. Так же как и в анимации движения в одном слое не должно быть больше одной анимированной формы.
А теперь давайте попробуем создать анимацию формы.
Я видел подобное где то на англоязычном сайте, мне очень понравился этот пример, думаю он понравиться и вам. Итак, приступим!
1. При помощи инструмента Oval Tool (O) создадим овальную форму, предварительно запретив создание контура, кликнув по перечеркнутому квадратику в палитре Stroke color.
2. В контекстном меню 20 кадра выберем команду Insert Keyframe (Вставить ключевой кадр). С помощью инструмента Selection Tool (V) преобразуем нашу форму следующим образом:
3. Если вы работает во Flash CS3 то в контекстном меню любого кадра расположенного между 1 и 20 выберем команду Create Shape Tween (Создать анимацию формы). Если вы работаете во Flash 8 то выделите любой кадр между 1 и 20 и перейдите в панель Properties и из раскрывающегося списка Tween выберем Shape
Протестируем ролик (Ctrl+Enter).
4. Теперь давайте сделаем так, чтобы наша капелька разделилась на две.
5. Как я уже сказал на одном слое не должно быть более одной анимированной формы. Создадим новый слой, кликнув по значку Insert Layer
6. Выделим 21 кадр в обоих слоях и сделаем его ключевым, выбрав в контекстном меню команду Insert Keyframe. Затем выделим любую из двух частей нашей формы и в контекстном меню выберем команду Вырезать (Cut). Выделим 21 кадр второго слоя и в меню Edit выберем команду Paste in Place.
7. Каждая из частей формы оказалась в своем слое, теперь можно продолжить работу над анимацией. Сделайте 30 кадр обоих слоев ключевым и создайте анимацию формы для каждого слоя, как это делается, вы уже знаете, если забыли, посмотрите 3 шаг. Панель Timeline должна выглядеть как на рисунке.
8. Теперь выберем инструмент Selection Tool (V) и с его помощью изменим форму наших капелек в 30 кадре так, чтобы движение было правдоподобным. У вас должно получиться что то похожее.
9. Сделаем 40 кадр обоих слоев ключевым и создадим анимацию движения в обоих слоях. Подредактируем в 40 кадре наши капельки чуть-чуть чтобы возникло впечатление останавливающихся капелек.
10. Ну вот анимация почти готова, не мешало бы применить к ней фильтры, но как это сделать? Ведь применение фильтров доступно только к муви клипам. Нам ничего не мешает создать пустой муви клип и скопировать туда то, что у нас получилось.
Итак, создаем новый символ Ctrl+F8, радио переключатель ставим в положение Movie clip.
11. Скопируем все содержимое панели Timeline, выделив при помощи инструмента Selection Tool (V) и применив команду контекстного меню Copy Frames.
12. Откроем только что созданный нами муви клип, кликнув по нему дважды в библиотеке. Выделим первый кадр и применим команду контекстного меню Paste Frames. Теперь у нас есть мувиклип с анимацией, и мы свободно можем применять к нему фильтры.
13. Вернемся на главную сцену, кликнув по значку сцены.
14. Удалим все содержимое панели Timeline, выделив при помощи инструмента Selection Tool (V) и применив команду контекстного меню Remove Frames.
Второй слой можно удалить, перетащив в корзину.
15. Сделаем первый кадр ключевым и из библиотеки перетащим на сцену муви клип с анимацией. Перейдем на панель Properties и откроем вкладку Filters.
16. Выделим на сцене муви клип и применим к нему фильтры, делается это так, нужно нажать на плюсик и из списка выбрать нужный фильтр. Я применил фильтры Bevel, Gradient Bevel и Drop Shadow (с настройками фильтров поиграйтесь сами) и вот что у меня получилось:
© 2003 - 2021 Дикая Правда - все права защищены, перепечатка статей запрещена
Тема 5. Анимация формы
Существует два вида автоматической анимации: анимация формы и анимация движения. В ходе этого урока мы познакомимся подробно с анимацией формы .
- плавно преобразовать одну форму в другую ( морфинг );
- изменить цвет формы;
- переместить форму.
Создайте новый документ, установите размеры поля 400 на 400 пикселей и сохраните его в папке PRACTICE\5 под именем contour.fla. |
Выберите инструмент (прямоугольник), установите черный цвет контура, без заливки. Обязательно отключите режим рисования объектов (кнопка в нижней части панели инструментов не должна быть нажата). Нарисуйте в центре поля квадрат размером примерно 300 на 300. |
Вставьте новые ключевые кадры в кадры 10, 20 и 30 (клавиша F6 ). Используя инструмент Selection и Free transform , измените контуры в кадрах 10 и 20 так, как показано на рисунках ниже. Кадр 30 оставьте без изменений (он совпадает с кадром 1). |
Теперь мы создадим плавные переходы между этими формами, причем рисовать вручную ничего не придется.
Чтобы включить анимацию формы для первого перехода, щелкните правой кнопкой мыши по кадру 10 и выберите из контекстного меню пункт Create Shape Tween (создать анимацию формы). Повторите то же самое для кадров 10 и 20. |
Если вы сделали все правильно, промежуточные кадры имеют зеленоватый цвет и через них проходит черная стрелка от начального кадра к конечному:
Параметр Blend имеет два возможных значения: Distributive (плавные контуры) и Angular (сохранение углов).
2. Контрольные точки
Создайте новый документ, установите размер 400 на 400 пикселей. Сохраните его в папке PRACTICE\5 под именем shapes.fla. |
Нарисуйте синий круг без границы, вписав его в квадрат. |
Добавьте пустой ключевой кадр в кадр 10 (клавиша F7 ). Нарисуйте красный квадрат без контура, который выровнен по направляющим. Добавьте анимацию формы к кадру 1. Просмотрите результат. |
У вас должно получиться примерно то же самое, что и на ролике справа (для проигрывания анимации наведите на него мышку). Когда круг переходит в квадрат, видно некоторое вращение. Чтобы сделать анимацию более красивой, мы поможем программе, установив контрольные точки ( hints ).
Контрольные точки создаются на первом кадре анимации и устанавливаются мышью в характерные точки формы. Если после этого перейти на последний кадр интервала анимации, мы увидим те же точки, которые можно перетащить мышкой в нужные места.
Контрольные точки обозначаются латинскими буквами ( a , b , c , . ). Точка a на первом кадре «приходит» туда, куда установлена точка a на последнем кадре.
Перейдите на кадр 1 и установите две контрольные точки так, как показано на рисунке 1. Затем перейдите на кадр 10 и переместите контрольные точки в противоположные углы квадрата (рисунок 2). Вы должны получить такой же результат, как на рисунке 3. |
3. Оптимизация контура
Добавьте пустой ключевой кадр в кадр 20 и нарисуйте кистью в пределах квадрата из направляющих контур бабочки синего цвета (рисунок 4 ниже). |
Если контур сложный (содержит много узлов), компьютер тратит много ресурсов, чтобы рассчитать все промежуточные точки и нарисовать его на экране. Поэтому для ускорения работы ролика и снижения нагрузки на процессор желательно оптимизировать контур, удалив узлы , которые мало влияют на форму.
Скорее всего, бабочка получится неровная. Чтобы сделать ее симметричной, мы отрежем правую половину и скопируем на ее место отраженную левую половину.
Добавьте к кадру 10 анимацию формы (переход квадрата в бабочку). Просмотрите ролик. |
Вы заметите, что анимация на втором интервале получилась не очень красивая. Чтобы ее улучшить, мы добавим контрольные точки.
4. Цвет и движение
Теперь мы проверим еще два варианта анимации формы: изменение цвета и движение .Вставьте новый ключевой кадр в кадр 40, скопировав в него содержимое кадра 30 (клавиша F6 ). Перетащите бабочку вертикально вверх так, чтобы она оказалась за пределами сцены. Включите анимацию формы для кадров 20 и 30. Для того, чтобы бабочка улетала с возрастающей скоростью, в панели Properties установите параметр Ease равным -100 . |
Вставьте новый промежуточный кадр в кадр 45 (клавиша F5 ), чтобы сделать паузу перед новым циклом анимации. Окончательный результат показан на рисунке ниже (ролик работает при наведении мыши). |
5. Слои
Давайте попробуем сделать одновременную анимацию нескольких объектов.Создайте новый документ. Включите инструмент (прямоугольник) в режиме рисования объектов (включите кнопку в нижней части панели инструментов). Нарисуйте два прямоугольника с черным контуром и разными цветами заливки, как показано на рисунке 1. |
Чтобы решить возникшую проблему, мы явно укажем, что здесь два независимых объекта, для каждого из которых надо строить переход отдельно. Для этого придется каждую анимацию расположить на отдельном слое .
В программе Flash , как и во многих других программах для работы с графикой, документ состоит из нескольких независимых слоев, на каждом из которых может быть отдельное изображение. Для работы со слоями служит палитра слева от временной шкалы:
В этом документе три слоя с именами Layer 1 , Layer 2 и Layer 3 . Для того, чтобы сменить имя , надо сделать двойной щелчок на имени слоя.
Активный слой, на котором идет рисование, выделен синим цветом и отмечен значком карандаша. Значки над палитрой имеют следующее значение:
видимость слоев; |
блокировка слоев (защита от изменений); |
контурное изображение (показываются только контуры объектов). |
Слои можно организовывать в папки . Это очень важно в больших проектах, где бывает несколько десятков слоев. Чтобы создать папку , нужно щелкнуть по кнопке . Затем перетащите нужные слои на созданную папку.
Для удаления выделенного слоя (или папки) надо щелкнуть по кнопке .
Переименуйте слой Layer 1 , пусть он называется Синий . Создайте новый слой с именем Красный . |
В отличие от стандартной комбинации Ctrl+V , этот прием вставляет объект не в центр поля, а в то же место, где он был (возможно, на другой слой).
Отключите видимость слоя Синий , чтобы убедиться, что теперь красный прямоугольник находится на слое Красный . |
Вставьте в кадре 10 новый пустой ключевой кадр. Таким же образом переместите в него красный овал из кадра 10 слоя Синий . |
Включите анимацию формы для кадра 1 слоя Красный . Проверьте ролик. |
Теперь результат стал значительно лучше. Вы можете увидеть его, если наведете мышку на следующий рисунок:
Вообще при создании анимационных роликов в программе Flash рекомендуется размещать каждый объект на отдельном слое .
6. Звук
Теперь звук находится в библиотеке файла и его можно увидеть на панели Library в правой нижней части экрана (см. рисунок).
В библиотеке сейчас один элемент типа Sound (звук). Он выделен, и в средней части панели мы видим диаграммы левого и правого каналов (стереозвук).
Щелкнув по кнопке можно прослушать запись.
Щелкнув правой кнопкой мыши на звуке в библиотеке и выбрав команду Properties , можно просмотреть его свойства и изменить степень сжатия (для уменьшения объема файла).
В принципе можно связать звук с любым слоем фильма. Однако обычно удобно использовать для этого отдельный слой, чтобы не путать звуки с другим содержимым.
Создайте новый слой и назовите его Звук . Выделите кадр 1 этого слоя и перетащите на сцену значок звука из библиотеки. |
На временной шкале на кадрах этого слоя будет изображена временная диаграмма, отражающая изменение звука во времени:
Подробнее использование звука мы изучим на следующих уроках.
7. Текст
Для ввода текста используется инструмент Text . Чтобы ввести однострочный текст , нужно включить инструмент , щелкнуть в нужном месте и набрать текст на клавиатуре. Вы увидите, что при этом размер текстового поля будет автоматически изменяться. Белый кружок в правом верхнем углу рамки говорит о том, что это однострочный текст.Если растянуть рамку за угол, однострочный текст превратится в текстовый блок , ширина которого не изменяется. Когда очередная строка заполняется, происходит автоматический переход на следующую. В правом верхнем углу рамки появляется белый квадрат. Если щелкнуть по нему дважды, блок превращается в однострочный текст.
Можно и сразу добавит текстовый блок: включив инструмент , обвести мышкой рамку нужной ширины.
Изменять размеры блока и перемещать его можно с помощью инструмента . Напомним, что он временно включается, если нажать клавишу Ctrl при любом другом включенном инструменте.
Свойства текста
Свойства выделенного текста можно изменить на панели Properties :В верхней строке панели находятся стандартные элементы для выбора шрифта, размера (в пунктах), стиля, выравнивания. Если неизвестно, какие шрифты установлены у пользователя, желательно выбирать системные шрифты _sans (рубленый шрифт, без засечек, для заголовков и мелкого текста), _serif (шрифт с засечками, для облегчения чтения длинного текста) или _typewriter (имитация пишущей машинки, все буквы одинаковой ширины).
Кнопка позволяет настроить свойства абзаца для текстового блока (отступы, красную строку, интервал между строчками). С помощью кнопки можно изменить направление текста (сверху вниз).
В окошке справа от знака регулируется интервал между символами (можно сделать более плотный или более разреженный текст).
Список, обозначенный символом , содержит варианты Normal (обычный текст), Subscript (нижний индекс) и Superscript (верхний индекс).
Кнопка разрешает выделение текста мышью.
Флажок Auto kern включает автоматическую коррекцию расстояния между особыми парами символов. Эффект можно увидеть, если набрать буквы A и V рядом и сильно увеличить размер шрифта.
Для внедрения шрифтов служит кнопка Embed , которая позволяет сохранить не все символы, а только нужные для данного текста, например, только цифры.
Для текста можно использовать фильтры (панель Filters ).
Анимация текста
Анимация формы, которую мы изучали выше, применима и для текста. Морфинг (преобразование одной буквы в другую) сделать можно, но обычно это не имеет смысла и выглядит некрасиво. Чаще всего используют изменение размера и цвета букв. Правда, для этого приходится преобразовывать текст в формы (заливки), потеряв возможность редактировать его с помощью инструмента .Далее мы выполним анимацию, результат которой вы можете увидеть, если наведете мышку на прямоугольник ниже:
Вставьте новый слой Буквы выше фона. С помощью инструмента введите на этом слое в центре сцены текст УРА белого цвета размером 120 (этот размер нельзя установить с помощью движка, но можно ввести с клавиатуры). Выберите интервал между буквами 60 (элемент на панели Properties ) и расположите текст по центру. |
Чтобы использовать анимацию формы, текст надо превратить в форму, то есть в заливку. Для этого дважды применим команду Break Apart из контекстного меню или из меню Modify (клавиши Ctrl+B ). В первый раз текст будет разделен на отдельные буквы, которые пока остаются текстом (их можно редактировать с помощью инструмента ). Во второй раз буквы преобразуются в заливки.
Превратите текст в заливки. Вставьте новые ключевые кадры в кадрах 10, 20, 30 и 40 слоя Буквы , и новый промежуточный кадр в кадре 40 слоя Фон . |
Перейдите в кадр 1 и сделайте (с помощью панели Color ) все буквы полностью прозрачными ( Alpha=0 ). |
Скопируйте кадр 1 в кадр 40 и установите для слоя Буквы анимацию формы в кадрах 1, 10, 20 и 30. Просмотрите результат и закройте документ, сохранив его. |
Эффект освещения
Построим еще один интересный пример анимации текста. В нем имитируется освещение надписи прожектором или фонариком (наведите мышку на рисунок ниже).Создайте новый документ размером 700 на 300 пикселей и сохраните его в папке PRACTICE\5. Переименуйте слой Layer 1 в Фон и добавьте на него рисунок zimnii.jpg. Заблокируйте слой Фон . |
Создайте новый слой Текст и расположите его сверху. В правом верхнем углу введите текст Санкт-Петербург (шрифт Arial , размер 50, цвет белый, жирный). Превратите текст в заливку (дважды Ctrl+B ). |
На панели Color создайте радиальный градиент ( Radial ) из трех цветов: белый, голубой, черный. При выборе цвета для среднего движка можно с помощью пипетки взять цвет с фонового рисунка. Сохраните градиент в палитре ( Add Swatch в меню палитры Color ). |
Включите инструмент и выберите в палитре только что созданный градиент. Выделите все буквы (для этого достаточно снять выделение с кадра 1 слоя Текст , а потом снова выделить его на временной шкале) и залейте этим градиентом. |
Включите инструмент ( Gradient Transform , клавиша F ) и настройте градиент так, чтобы его центр находился слева от букв и буква С была немного освещена. |
Вставьте ключевой кадр в кадр 40 слоя Текст и промежуточный кадр в кадр 40 слоя Фон . Для текста измените расположение градиента так, чтобы его центр находился справа и буква г была чуть-чуть освещена. |
Включите анимацию формы для кадра 1 слоя Текст и просмотрите результат. |
8. Слои-маски
Постановка задачи
При наведении курсора мыши на рисунок начинается слайд-шоу с различными эффектами, которые мы построим с помощью анимации формы.- обрезать часть рисунка, которая пока не видна;
- каким-то образом делать эту область прозрачной (невидимой).
Другими словами, заливка в маске вырезает часть рисунка, а все остальное делает прозрачным. Причем цвет заливки в маске не имеет значения, он может быть даже полупрозрачным. Более того, в режиме слияния (когда отключена кнопка в нижней части панели инструментов) на маске можно рисовать разными цветами, все области будут выделять части изображения.
Если же мы работаем в режиме рисования объектов (кнопка нажата), маской становится только самый нижний объект.
Итак, для выполнения перехода мы будем использовать слой-маску, на котором с помощью анимации формы меняется закрашенная часть (заливка).
Переход «изнутри»
На слоях Layer 1 , Layer 2 и Layer 3 расположены три фотографии, которые должны сменять друг друга (проверьте это, отключив видимость верхних слоев). Нам нужно организовать три перехода, каждый из них будет занимать 10 кадров. Кроме того, еще 10 кадров каждая фотография удерживается на экране после окончания перехода. Таким образом, всего потребуется 60 кадров (3 раза по 10+10).Первая фотография (в слое Layer 1 ) будет постоянно видима. Когда нужно, мы будем перекрывать ее другими.
В слое Layer 1 вставьте новый промежуточный кадр ( F5 ) в кадр 60. |
В слое Layer 2 перетащите первый ключевой кадр в кадр 10 и вставьте новый промежуточный кадр в кадр 40. |
В слое Layer 3 перетащите первый ключевой кадр в кадр 30. При появлении вопроса "One or more library items already exist in the document" выберите вариант "Don't replace existing items" . Вставьте новый промежуточный кадр в кадр 60. |
Если запустить ролик, мы увидим, что рисунки меняются мгновенно. Займемся переходами.
Первый переход (от 1-ой фотографии ко 2-ой) сделаем «изнутри», то есть видимая часть второго слайда появляется постепенно из центра первого (посмотрите еще раз готовый ролик). Нужно сделать маску в виде прямоугольника, который расширяется из центра до полного размера сцены.
Тема 6. Символы. Анимация движения
У символов есть еще одно важное достоинство: при изменении символа в библиотеке сразу автоматически меняются все экземпляры.
Если посмотреть на панель Library в правом нижнем углу экрана, вы заметите, что в библиотеке появился новый рисунок (элемент типа Bitmap ). Кроме того, рисунок сразу добавлен на сцену.
Создание символа
На экране появится окно, в котором нужно ввести название символа (мы введем ball ), выбрать тип символа ( Graphic ) и определить, где находится так называемая точка регистрации ( Registration ). Эта точка, которая определяет координаты символа на экране (они используются при управлении объектом из программы). По умолчанию точка регистрации располагается в левом верхнем углу, но это можно изменить как при создании символа (щелкнув мышкой по другому квадратику в поле Registration ), так и потом при редактировании.
Теперь символ появился в библиотеке и его можно использовать много раз, не опасаясь увеличения объема файла. На сцене новый символ обведен голубой рамкой, крестик показывает точку регистрации.
Редактирование символа
Для редактирования символа нужно дважды щелкнуть в окне библиотеки по значку слева от имени символа. При этом вы увидите символ на сцене и сможете изменить его элементы.Крестик, обозначающий точку регистрации символа, переместить нельзя, однако можно переместить изображение мяча на поле так, чтобы точка регистрации оказалась в другом месте.
Помните, что все сделанные изменения применяются ко всем копиям символа, которые есть в ролике.
Форму символа, расположенного на сцене, можно изменять с помощью инструмента . Эти изменения влияют только на тот символ, с которым вы работаете.
2. Анимация движения
Заметим, что при этом фоновое изображение в кадрах 2-20 исчезло, поскольку рабочая часть временной шкалы для слоя Фон содержит только 1 кадр.
Обратите внимание, что в списке Tween теперь выбрано значение Motion (движение).
Стало уже похоже на правду. Не хватает только звука.
3. Изменение символа при анимации
Чтобы смоделировать изменение формы мяча в момент удара, мы добавим дополнительные кадры анимации.
Если просмотреть ролик, теперь в кадрах 10-14 мяч просто стоит на месте. Мы сделаем так, что он будет при этом менять форму .
Так как при построении анимации программа ориентируется на положение центра вращения , он не должен смещаться, пока мяч находится в нижней точке. Это значит, что его надо переместить на середину нижней границы символа.
Если навести мышку на рисунок ниже, вы увидите то, что должно было получиться.
4. Направляющие
Теперь изменим ролик так, чтобы мяч вылетал слева, ударялся о пол и улетал вправо за экран.После этого будет создан слой особого типа с именем Guide: Мяч . Все, что нарисовано на этом слое, не отображается на экране. Но при анимации объекты слоя Мяч двигаются вдоль линий, нарисованных на слое Guide: Мяч .
5. Вращение
В поле перед словом times можно ввести количество оборотов.
6. Растровые рисунки
Если навести мышку на рисунок ниже, можно увидеть окончательный результат следующей работы.
Теперь посмотрите на окно библиотеки: кроме четырех рисунков в ней появились два символа типа Graphic , которые программа автоматически создала из рисунков в формате PNG . Чтобы разобраться, где какой рисунок, щелкните мышкой на этих строчках в библиотеке и переименуйте символы в Машина и Дом.
Если нажать правую кнопку мыши на рисунке в библиотеке и выбрать в контекстном меню команду Properties (свойства), можно увидеть свойства рисунка (размеры, цветовой режим) и изменить метод и степень сжатия в формате JPEG. Чем сильнее сжатие рисунка, тем меньше его размер, но хуже качество. Поэтому на практике приходится выбирать что-то среднее.
Конечно, качество рисунка стало значительно хуже (появились квадраты, характерные для формата JPEG). Однако машина на сцене довольно маленькая и движется быстро, поэтому это ухудшение качества никто не заметит.
Важно, что сжатие используется только при создании SWF-файла, а рисунок в библиотеке FLA-файла не меняется (проверьте это!). Это значит, что можно всегда вернуться в окно свойств и улучшить качество, увеличив значение Quality .
При этом автоматически включится инструмент , позволяющий изменять заливку фигуры, причем заливка будет выполняться узором, по которому мы только что щелкнули.
7. Ориентация вдоль пути
Конечно, машина двигается неправильно. Надо связать ее движение со слоем направляющих. На этот раз мы не будем создавать новый слой, а используем слой Путь , который как раз и содержит контур пути.
Наконец, сделаем так, чтобы машина немного постояла у дома перед тем, как начнется новый цикл проигрывания ролика.
8. Вложенная анимация
Рассмотрим еще один пример с более сложной анимацией. Чтобы увидеть окончательный вариант следующей работы, наведите мышку на рисунок ниже:Очевидно, что автомобиль движется по траектории, поэтому нужно использовать слой направляющих. Кроме того, при подъеме в горку движение замедляется (мы изучим два способа для достижения такого эффекта).
Наконец, самое главное: колеса автомобиля вращаются! Для создания такой анимации нам нужно создать символ Машина , составной частью которого будут два одинаковых (вложенных) клипа Колесо , которые имитируют вращающиеся колеса.
Для того, чтобы колеса вращались, нам нужно вместо простого графического символа Колесо использовать клип (символ типа Movie Clip ). После этого мы добавим анимацию (вращение) внутри этого клипа.
Колеса автомобиля не вращаются, потому что внутри клипа Машина находятся два символа Колесо (без анимации). Их нужно заменить на клипы ВращКолесо . Для этого служит кнопка Swap (замена), которая появляется на панели Properties тогда, когда на сцене выбран какой-нибудь символ.
9. Изменение скорости анимации
- весь интервал анимации разбивается на несколько подынтервалов (в середину добавляется несколько ключевых кадров); для каждого интервала задается своя скорость анимации, которая определяется начальным и конечным положением объекта;
- настраивается кривая перемещения вдоль траектории, которая вызывается при нажатии кнопки Edit на панели Properties .
Сначала эта линия прямая, т.е. скорость движения постоянна. Если нужно изменить это поведение, щелчком мышки добавьте новый узел на линию и переместите в новое положение.
Узел имеет две касательные , которыми можно регулировать углы входа и выхода линии. Направляющие есть также и у конечных точек.
Для того, чтобы удалить узел , надо щелкнуть по нему при нажатой клавише Alt .
Файлы в формате WAV , как правило, имеют большие размеры, поскольку не используют сжатие. Посмотрим, можно ли уменьшить звуковой файл.Важно, что звук сжимается только прим создании SWF-файла, а в библиотеке хранится в исходном виде. Это значит, что всегда можно безболезненно изменить степень сжатия. Конечно, сделать качество лучше, чем в исходном варианте, не удастся.
Чтобы движение автомобиля выглядело более натурально, добавим падающую тень. Учитывая, что в горах днем солнце стоит достаточно высоко, сделаем небольшую тень в виде полупрозрачной черной заливки.10. Анимация текста
Изменение размера
- тип (Type): Inner (внутренний);
- сила ( Strength ): 40% ;
- дистанция ( Distance ): -14 .
Преобразуйте текст в символ с именем 2008 (клавиша F8 ).
Теперь построим анимацию, в ходе которой текст будет увеличиваться, начиная из центра циферблата. Отведем на это увеличение 6 секунд (72 кадра при частоте 12 кадров в секунду), а затем зафиксируем надпись еще на 3 секунды.
Легко заметить, что циферблат во второй половине фильма мешает смотреть надпись, отвлекает внимание. Поэтому мы перекроем его черным прямоугольником, для которого будем изменять параметр Alpha от 0% (полностью прозрачен) до 80% .
Побуквенная анимация
Разбив текст на отдельные буквы, можно строить интересные анимационные эффекты. Для того, чтобы увидеть результат следующего примера, наведите мышку на рисунок ниже.Теперь мы разобьем текст на отдельные буквы и разместим каждую из них на отдельном слое.
Программа создала несколько новых слоев, их имена совпадают с буквами текста.
Если посмотреть на библиотеку, можно заметить, что в нее добавлены новые символы, созданные автоматически из букв. Это необходимо программе для построения анимации движения.
Далее, используя фильтр Bevel , сделаем так, чтобы буквы постепенно становились золотистыми. Однако применить фильтры можно только к тексту или символам типа Movie Clip . Сейчас буквы имеют тип Graphic , это можно увидеть на панели Properties . Поэтому нужно будет изменить тип символов на Movie Clip .
Сейчас все готово для создания анимации, которая сводится к постепенному применению фильтра.
Читайте также: