Создание классической анимации движения

Дим M
Topic author, Администратор
Администратор
Avatar
Дим M
Topic author, Администратор
Администратор
Reputation: 74
Posts: 1227
Joined: 5 Apr 2013
With us: 6 years 4 months

#1by Дим » 15 Nov 2015, 17:55

:tuta: ПКМ - Воспроизвести

Немного поэкспериментировав с траекториями и продолжительностью движения получилось вот так:


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

Создание классической анимации движения_11.jpg





В принципе анимацию можно сделать и по ниже изложенному видео:

Создание классической анимации движения.mp4 (13.75 MiB) Viewed 119 times


Но я решил сделать более наглядный мануал. Добавил картинки и пояснения. И так начнём:

Для текущего примера я создал документ ActionScript 3 размерами 400х80

Далее
Создание классической анимации движения_1.jpg
Создание классической анимации движения_1.jpg (118.92 KiB) Viewed 439 times


Далее создаём новый слой (я переименовал его в Text) и пишем на нём текст. В данном случае это ссылка на этот форум. Не забыв сделать пробел перед "ru", туда в дальнейшем будет "падать" точка. Пока этот слой можно заблокировать, нажав на значок замка.

Создание классической анимации движения_2.jpg
Создание классической анимации движения_2.jpg (80.17 KiB) Viewed 439 times


Теперь создадим ещё один слой и назвав его T4K, выбрав инструмент овал, нарисуем точку (я её сделал другим цветом и в дальнейшем буду уменьшать её размер). И в этом же слое создадим три ключевых кадра. Для этого поочерёдно на кадрах 40, 60 и 80 клацаем ПКМ и выбираем пункт Вставить ключевой кадр. А на слое Text выбираем 80 кадр и так же вставляем ключевой кадр.

Создание классической анимации движения_3.jpg
Создание классической анимации движения_3.jpg (110.8 KiB) Viewed 439 times


Теперь преобразуем точку в символ, для этого выделяем её и клацнув ПКМ, выбираем пункт Преобразовать в символ... или F8. Задаём имя - T4K, тип - Графика, регистрация - по центру. И жмем ОК.

Создание классической анимации движения_4.jpg
Создание классической анимации движения_4.jpg (88.68 KiB) Viewed 439 times


Ну вот и пришло время создания, в ключевых кадрах, классической анимации движения. Выбираем первый кадр на временной шкале (чёрная точка) и нажав на ПКМ выбираем пункт Создать классическую анимацию движения. Повторяя для всех трёх отрезков анимации.

Создание классической анимации движения_5.jpg
Создание классической анимации движения_5.jpg (99.02 KiB) Viewed 439 times


Теперь передвигаем ползунок на сороковой кадр и перетаскиваем точку в конец текста.

Создание классической анимации движения_6.jpg
Создание классической анимации движения_6.jpg (57.17 KiB) Viewed 439 times


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

Создание классической анимации движения_7.jpg
Создание классической анимации движения_7.jpg (65.53 KiB) Viewed 439 times


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

Создание классической анимации движения_8.jpg
Создание классической анимации движения_8.jpg (70.41 KiB) Viewed 439 times


Ну на этом бы и можно и закончить но постоянная анимация - как то не смотрится. Будем её останавливать - выбираем последний кадр слоя T4K и нажав ПКМ и выбрав пункт Действияили просто нажать наF9.

Создание классической анимации движения_9.jpg
Создание классической анимации движения_9.jpg (112.89 KiB) Viewed 439 times


И в появившемся окне пишем следующий код:

Code: Select all

stop (); 


Создание классической анимации движения_10.jpg
Создание классической анимации движения_10.jpg (45.11 KiB) Viewed 439 times
i love you mxIni Mysql

! ! !


Return to “Adobe Flash”

Who is online (over the past 5 minutes)

Users browsing this forum: 1 guest