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

Дим M
Автор темы, Администратор
Администратор
Аватара
Дим M
Автор темы, Администратор
Администратор
Сообщения: 1607
Зарегистрирован: 5 апреля 2013
С нами: 10 лет 11 месяцев

#1 Дим » 15 ноября 2015, 17:55

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

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


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

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





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

Создание классической анимации движения.mp4 (13.75 МБ) 280 просмотров


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

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

Далее
Создание классической анимации движения_1.jpg
Создание классической анимации движения_1.jpg (118.92 КБ) 1521 просмотр


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

Создание классической анимации движения_2.jpg
Создание классической анимации движения_2.jpg (80.17 КБ) 1521 просмотр


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

Создание классической анимации движения_3.jpg
Создание классической анимации движения_3.jpg (110.8 КБ) 1521 просмотр


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

Создание классической анимации движения_4.jpg
Создание классической анимации движения_4.jpg (88.68 КБ) 1521 просмотр


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

Создание классической анимации движения_5.jpg
Создание классической анимации движения_5.jpg (99.02 КБ) 1521 просмотр


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

Создание классической анимации движения_6.jpg
Создание классической анимации движения_6.jpg (57.17 КБ) 1521 просмотр


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

Создание классической анимации движения_7.jpg
Создание классической анимации движения_7.jpg (65.53 КБ) 1521 просмотр


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

Создание классической анимации движения_8.jpg
Создание классической анимации движения_8.jpg (70.41 КБ) 1521 просмотр


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

Создание классической анимации движения_9.jpg
Создание классической анимации движения_9.jpg (112.89 КБ) 1521 просмотр


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

Код: Выделить всё

stop (); 


Создание классической анимации движения_10.jpg
Создание классической анимации движения_10.jpg (45.11 КБ) 1521 просмотр
[center]i love you [s]mxIni[/s] Mysql[/center]


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «Adobe Flash»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 1 гость