Движение по траектории в adobe flash cs6
Рисование, Дизайн и Разработка игр
Главная » AdobeFlash: Программные эффекты анимации движения, масштабирования, вращения объекта и другое при помощи функции ActionScript3 sin()
AdobeFlash: Программные эффекты анимации движения, масштабирования, вращения объекта и другое при помощи функции ActionScript3 sin()
Во многих языках программирования имеется функция синуса sin(), которая может быть полезна в различных вычислениях. В этом уроке рассмотрим, как добавить мувиклипу в Adobe Flash эффекты движения, масштабирования, вращения используя эту функцию, то есть создадим программную анимацию.
Функция синуса в ActionScript 3 принимает значение в виде радиан и возвращает значение от -1 до 1, которое можно присваивать или прибавлять свойствам мувиклипа. Для передачи значения в функцию будем использовать переменную angle , которую будем увеличивать в обработчике события enter_frame и вызывать эффект колебания свойства.
Для начала создадим какой-нибудь объект на сцене, допустим, это будет окружность. Преобразуем ее в символ и поместим в центр с координатами x = 275 , y = 200 . Как это сделать можете посмотреть в следующем видео:
В свойствах мувиклипа (properties) в поле «instance name» дадим имя circle_mc , как показано на изображении:
Теперь нужно добавить код на первый кадр панели Timeline.
Запустите флэш-приложение, нажав на ctrl+enter, чтобы посмотреть, что получилось.
Давайте рассмотрим код. Сначала мы создали переменные, angle — отвечает за угол в радианах, range — это расстояние в пикселях, которое проходит мувиклип, speed — скорость движения. Для того чтобы объект оставался на первоначальном месте, и движение рассчитывалось от туда, нужно сохранить его первоначальное значение свойства y вот так var y0 = circle_mc.y; .
В нашем коде есть некоторая особенность, которая мало кем рассматривается, это постоянное увеличение переменной angle . После запуска приложения она будет увеличиваться, пока не достигнет предела, определенного типом переменной. Хотя для этого должно пройти не мало времени и даже если переменная достигнет максимального значения, то просто обнулится, тем не менее, это может привести к скачку параметра и к тому же это не совсем хорошая практика в программировании.
Поэтому добавим функцию, которая будет обнулять угол в радианах при его предельном увеличении.
Допишем в обработчик события enter_frame следующую строчку для обнуления значения угла.
Теперь попробуем изменить масштаб шарика, используя такой же способ, что и для его движения. Добавьте следующую строчку кода:
Давайте разберем код. Вместо числовых значений вы можете все также использовать переменные. Для наглядности рассмотрим просто числа, вместо переменных. Единица означает первоначальный масштаб объекта, т.е. 100% , 0.2 указывает, что объект будет растягиваться и стягиваться на 20%.
Таким же образом можно вращать объекты, присваивая свойству rotation значение функции sin() . Чтобы это проверить, создадим другой объект, так как круг не совсем подходит. Нарисуем прямоугольник и конвертируем его в символ. Дайте ему любое имя, например, rect_mc . Код для вращения прямоугольника будет следующим:
При помощи функции сунуса sin() в Adobe Flash можно создавать и другие различные эффекты. В этом уроке мы рассмотрели самые простые, которые вы можете усовершенствовать, поменяв различные параметры и условия.
Исходный код примера вы можете скачать здесь. Если вам понравился урок и вы хотите его сохранить или поделиться с друзьями, то добавьте его в закладки социальной сети (значки внизу), это также поможет продвижению сайта.
Как сделать движение объекта по траектории в Adobe Animate (Flash)
Сначала продемонстрирую работу этого приема на простом примере.
Создайте новый документ размером 600 на 200 пикселей. Назовите его First_animate. Цвет фона голубой или любой другой. Кто не помнит — сначала нужно создать новый документ Action Script 3.0. (Файл — Создать Ctrl + N).А затем на панели свойств (Ctrl + F3) задать размер рабочего окна и цвет фона.
Первый слой переименуйте в «Объект». Создайте на нем овал (O). Не снимая выделения с объекта. нажмите на клавишу F8 и назначьте его символом. Назовите object1.
Создайте второй слой над слоем «Объект», назовите его «Траектория». На этом слое нарисуйте карандашом траекторию движения шара.
Щелкните правой клавишей мыши по слою «Траектория» и выберите пункт «Направляющая». Слева появится значок с молоточком. Теперь потяните слой «Объект» под слой «Траектория», так вы свяжите их друг с другом.
Теперь вернемся к рабочей области. Поместите наш объект в начало траектории. Создайте ключевые кадры для слоя «Объект» и слоя «Траектория» на 30 кадре. Поместите шар на конец траектории. (В демонстрационном варианте включен каркасный вид слоя «Объект»).
Теперь щелкните правой клавишей мыши по первому кадру слоя «Объект» и выберите пункт «Создать классическую анимацию движения». После этого можно тестировать нашу анимацию (ctrl + Enter).
Пример с воздушным змеем в облаках
Теперь, давайте посмотрим, что можно сделать с этими знаниями. Приведу еще один простенький пример. Предположим. что нам нужно нарисовать воздушного змея. который летит по небу.
Создадим новый документ размером 600 на 200 px. Зальем его градиентом от синего к желтому. Для этого создадим в самом начале слой, который назовем «Фон«, нарисуем прямоугольник во весь размер рабочей области (то есть 600 на 200 пикселей) и зальем его градиентом. Как работать с градиентом, я уже писала в статье «Работа с градиентом в Adobe Flash».
Нажмите «Вставка — Создать символ (ctrl + F8)». Задайте имя kite. Нарисуйте воздушного змея. Это сделать нетрудно, он похож на ромб.
Чтобы наш воздушный змей выглядел реалистично. Давайте зададим его движение еще в самом символе kite. Это будет покачивание вверх вниз змея и развивающиеся ленты. Покачивание сделаем за счет анимации движения , развивающиеся ленты за счет анимации формы . Сначала займемся лентами. Их анимация будет похожа на контурную анимацию формы (ленты кстати говоря нарисованы инструментом Кисть и подходят для данной манипуляции), о которой я писала в статье «Контурная анимация в Adobe Flash».
Теперь создайте новый символ (ctrl + F8), назовите его kite_move. Поместите в центре него символ kite из библиотеки (F11). И задайте движение плавное вверх — вниз символу kite.
Вот что у нас получилось после размещения символа kite_move на главной сцене.
Ну вот, теперь пришло время задать нашему змею траекторию. Вспомним все, что я писала и вперед. Я создала вот такую направляющую.
На моментах подъема линии я буду увеличивать змея, а на моментах спада — уменьшать. Это добавит реалистичности сцене.
Надеюсь я подробно объяснила как создать движение по направляющей в Adobe Flash. Это поможет сделать вашу анимацию более реалистичной. Не расстраивайтесь, что в статье нет исходников. В своей следующей статье я научу вас, как вытащить любые исходники из swf файлов расположенных на сайтах.
Компания Adobe объявила, что с конца 2020 года она прекращает поддержку популярного и любимого многими Flash Player.
Adobe и дальше продолжит работать над популярным графическим редактором. только теперь он будет полностью ориентирован на интернет технологии и поддержку технологии Html 5, которой, как раз и уступает пальму первенства технология Flash.
Подписывайтесь на обновления блога «Дизайн в жизни»
по e-mail или социальных сетях
и мы обязательно опубликуем для вас еще больше полезных бесплатных уроков!
Когда мы задаем какому-то персонажу движение, будь то полноценный анимационный ролик или рекламный, мы всегда стремимся к реалистичности этого движения. Любое движение подразумевает под собой динамику, и сегодня я расскажу вам, как с помощью такого понятия как линии скорости можно сохранить динамику быстрого движения персонажа. Я уже рассказывала, как сделать эффектное появление всего объекта в Adobe Flash , используя градиент. Сейчас же речь пойдет о конкретном элементе персонажа.
Создание персонажа и распределение по слоям
Мы возьмем в качестве персонажа вот такого кота. Он будет следить за появлением мыши в кадре, и размахивать хвостом.
Персонаж состоит из следующих объектов, находящихся на разных слоях:
Хвост я рекомендую нарисовать одной линией. Просто задать ей большую толщину, например, 10. Так будет удобнее его анимировать.
Анимация движения с использованием линий скорости
Анимация глаз для него уже готова в отдельном символе. Сейчас нас интересует анимация хвоста. Так что мы смело можем продлить на них анимацию до нужно количества кадров, например, 20 ( используем f5) и блокировать ненужные нам слои, чтобы они не мешались.
Теперь хвост. На первом кадре у нас находится первая позиция хвоста, на 10 сделаем вторую позицию.
Я просто отразила хвост слева направо – Модификация – Преобразовать – Отразить слева направо .
На слое « Хвост » на 5 кадре создайте пустой ключевой кадр. Для этого щелкните по нему левой клавишей мыши и нажмите F6 .
Далее нажмите Delete , чтобы удалить все содержимое.
Здесь у нас будут располагаться линии скорости.
Для удобства включите под временной шкалой функцию « Многослойная структура » или как по-другому ее называют «луковая шелуха», настройте ее диапазон между двумя состояниями нашего хвоста.
На пятом кадре кисточкой нарисуйте линии скорости, при этом имейте ввиду, что реалистичнее они будут в цвете самого объекта, ну у нас он черный, можно добавить и немного серого для разнообразия.
Сделайте линии так, чтобы они не выходили за границы объекта.
Теперь нам надо придать большей реалистичности.
Для этого зададим в начале небольшую анимацию формы для хвоста.
Сделайте 3 кадр ключевым, поменяйте форму хвоста кошки и немного наклоните вправо.
Затем щелкните правой клавишей мыши по первому кадру и добавьте анимацию формы.
Теперь сделаем тоже самое для второго состояния хвоста.
На 13 кадре создайте ключевой кадр (F6).
Перейдите на 10 кадр, немного измените хвост, и наклоните влево.
Затем для 10 кадра создайте анимацию формы.
Теперь немного отредактируем кадры. Удалим лишние.
Чтобы сделать движение более естественным.
И повторим кадры в обратном порядке.
- Нормальное состояние хвоста слева,
- Трансформированное состояние хвоста слева,
- линии скорости,
- трансформированное состояние хвоста справа,
- Нормальное состояние хвоста справа.
Теперь в тех кадрах, где у нас есть анимация формы, изменим скорость.
У кадра 1, сделаем замедление -100 (см. панель свойств), у 5 — +100, у 26 — — 100, у 30 — +100.
Можно добавить сюда мышку.
На будущее, хвост можно было бы заанимировать с помощью инструмента кости, но об этом в последующих статьях. Если кому-то нужен исходник для данного урока, пишите в комментариях — скину в личку.
Подписывайтесь на обновления блога «Дизайн в жизни»
по e-mail или социальных сетях
и мы обязательно опубликуем для вас еще больше полезных бесплатных уроков!
Анимация в Adobe Animate (бывшем Flash) все так же востребована, как и раньше. Ведь это один из самых мощных инструментов создания векторной 2d анимации. В текущем уроке мы разберем, как создается движение объекта на камеру и более подробно изучим возможности Animate и нюансы работы в нем. В конце статьи вас будет ждать бонус в виде бесплатного исходника.
Подготовка персонажа
На примере анимации вот такой летающей пчелки разберем, как создается движение на камеру в Adobe Animate.
Все векторные картинки взяты из бесплатных фотостоков , которые помогают существенно сэкономить время дизайнеров.
На монтажной области файла у нас подготовлен фон с цветами.
Изображение разбито на слои, что можно увидеть на временной шкале снизу.
Это сделано для того, чтобы можно было создать сопроводительную анимацию фона – забора и цветов.
Так же у нас создан символ с названием « пчела », где находится персонаж.
Тело, левое крыло и правое крыло разбиты по отдельным слоям, как вы можете видеть на временной шкале. Так же все эти элементы преобразованы в символы ( F8 ).
Список элементов в библиотеке ( Окно – Библиотека ) пока выглядит следующим образом.
Теперь можно приступить к созданию анимации крыльев.
Щелкните правой клавишей мыши по первому кадру слоя « крыло правое » и выберите пункт Создать анимацию движения. Автоматически на временной шкале данного слоя будет создано 25 кадров, что равняется одной секунде. Нам такое количество кадров не нужно, так как мы знаем, что насекомые быстро машут крыльями, поэтому выделите кадры с 25 по 6 и удалить их. ( shift + f5 или удалить кадры в контекстном меню).
Продлите анимацию слоя « Тело пчелы », переместив указатель мыши на 5й кадр и нажав F5 (создание не ключевого кадра)
Теперь перейдите на первый кадр слоя « Крыло правое », выберите инструмент Свободное преобразование и наклоните крыло вверх. Перед этим изменив точку поворота так, как это указано на рисунке.
Теперь перейдите на последний кадр слоя « Крыло правое » и создайте там ключевой кадр, нажав на клавишу F6 . Таким образом мы зафиксируем исходную позицию крыла, к которой оно будет возвращаться, чтобы создать цикличную анимацию.
Если при клике на последнем кадре выделяется не один кадр, а все, то зажимайте при выборе клавишу Ctrl (Cmd)
Теперь перейдите на кадр 3 и наклоните крыло вниз. Там автоматически создастся ключевой кадр.
Повторите все перечисленные действия для слоя « Крыло левое » и вы получите следующую анимацию
Имейте ввиду, если вы хотите анимировать какой-то объект, то начинать надо с действия, которое повторяется быстрее всего. Пчела быстрее всего хлопает крыльями, значит эта анимация создается первой. Таким образом мы определяем количество кадров, которое минимально необходимо для анимации объекта. У нас это 5. Теперь все другие действия следует укладывать в количество кадров, кратное 5, чтобы все корректно воспроизводилось!
Рассмотрим, указанную выше пометку на примере добавления пчеле анимации закрытия-открытия глаз.
Создайте пустой символ типа Графика ( Вставка – Создать символ ). Назовите его « Пчела летит и хлопает глазами »
В центр рабочей области вставьте символ « Пчела », который уже имеет анимацию в 5 кадров.
Теперь создадим для пчелы анимацию закрытия и открытия глаз, которая будет занимать 25 кадров. За это время она успеет взмахнуть крыльями 5 раз!
Не буду слишком подробно описывать, как создавалась анимация открытия-закрытия глаз, вы это увидите в исходнике, который можно будет скачать совершенно бесплатно в конце статьи.
Главный принцип заключается в анимации формы двух полукругов (верхнего и нижнего век) и если кратко, то выглядит так.
В результате у нас получилась вот такая пчелка.
Анимация движения на камеру
Теперь вернемся к монтажному кадру и начнем создавать анимацию движения на камеру, которая, по сути, заключается в масштабировании персонажа.
В самом верху временной шкалы создайте новый слой « Пчелка » и поместите туда из библиотеки символ « Пчела летит и хлопает глазами »
Уменьшите ее до необходимых размеров.
Продлите длительность всех слоев временной шкалы до 50 кадров! (Число кратное количеству кадров в анимации с пчелой). Для этого переместите указатель напротив каждого слоя значения 50 и создайте не ключевой кадр ( F5 )
Перейдите на кадр 50 слоя « Пчелка » и создайте там ключевой кадр ( F6 ).
Увеличьте нашего персонажа и измените его позицию, например, так как показано на следующем рисунке.
Мы будем использовать классическую анимацию движения, так как у нее более гибкие настройки замедления.
Теперь перейдите на кадр 1 слоя « Пчелка » и в контекстном меню выберите Создать классическую анимацию движения , кадры на временной шкале сразу окрасятся в сиреневый цвет и вдоль их длинны нарисуется стрелка, это означает, что все в порядке и запланированное действие будет применено.
Уже сейчас проиграв анимацию, вы можете увидеть движение пчелы на камеру. Но это еще не все.
Настройка замедления анимации
Перейдите на кадр 1 и на панели свойства найдите параметр Замедление.
В выпадающем списке с типами анимации замедления выберите Ease Out (замедление к концу анимации), а правее формат замедления. Поэкспериментируйте с разными настройками, чтобы увидеть, насколько разные и интересные типы анимации предусмотрены в стандартных подборках Adobe Animate.
Скорость передвижения персонажа задается кривой, которую можно редактировать на свое усмотрение, нажав значок с карандашом справа.
Я выбрала тип замедления Ease Out – Back и вот что получилось
Анимация окружения
Для того, чтобы анимация движения выглядела более естественно, создадим второстепенную анимацию окружения. Немного подвигаем цветы.
Перейдите на слой Цветы после забора и щелкните по первому кадру – выделится все содержимое слоя. Преобразуйте его в символ ( F8 ) и назовите Цветы .
Щелкните правой клавишей мыши по первому кадру и выберите — Создать анимацию движения . Перейдите на последний кадр слоя и передвиньте цветы чуть влево.
Рисование, Дизайн и Разработка игр
Главная » Анимация движения в Adobe Flash по направляющей (guide)
Анимация движения в Adobe Flash по направляющей (guide)
В предыдущих уроках мы рассматривали рисование кнопки и простую анимацию движения окружности. В этом уроке рассмотрим, что такое анимация движения объекта по заданной направляющей траектории (guide). Создадим условный объект и нарисуем для него путь, по которому он будет проходить.
Создания нового документа ActionScript 3.0
Как обычно, создаем новый документ «Action Script 3.0» . На правой панели инструментов выбираем «Rectangle Tool» и размещаем его на сцене.
Полученый объект переводим в символ, выделив его инструментом «Selection tool» и нажав правую кнопку мыши.
Теперь на панели «timeline» нужно выбрать пятидесятый кадр и сделать его ключевым. Нажимаем правую кнопку мыши и вызываем контекстное меню, где выбираем «Insert Keyframe» .
Создадим направляющую, путь, по которому объект будет двигаться. Для этого нажимаем на слой правой кнопкой мышке и в появившемся контекстном меню выбираем «Add Classic Motion Guide» .
Должно получиться два таких слоя:
Теперь нужно на слое «Guide» нарисовать путь, по которому будет двигаться объект. При помощи инструмента «Pencil Tool» , который находится на правой панели, рисуем направляющую.
Если нарисованный путь получился немного неровным, то его можно сгладить при помощи инструмента «Smooth Tool» , который также как и карандаш находится на правой панели. Сначала используя инструмент «Selection Tool» дважды щелкните по направляющей, а затем нажмите «Smooth Tool» .
Размещаем объект для создания анимации движения
Теперь давайте разместим наш объект на нарисованном пути. Чтобы это сделать, встаньте на первый кадр слоя, возьмите объект при помощи «Selection Tool» и поднесите его к левому краю линии, он как бы «прилипнет» к нему, вернее присоединится опорная точка объекта к направляющей.
Тоже самое нужно проделать для пятидесятого кадра, возьмите объект и разместите его на правом крае линии.
Теперь нужно создать промежуточные кадры, чтобы программа сама разместила объект там где нужно в каждом кадре. Чтобы это сделать просто выбираем любой средний кадр на слое, где расположен объект, и нажимаем правую кнопку мыши, выбираем «Create Classic Tween» .
В итоге мы должны получить два таких слоя:
Запускаем анимацию движения объекта
Посмотрим, что получилось. Переходим в главное верхнее меню «File -> Publish Preview -> Flash» или нажимаем ctrl+enter на клавиатуре. Чтобы посмотреть прямо в программе — нажмите клавишу enter.
Давайте сделаем так, чтобы объект «поворачивал» , когда пробегает по пути. Для этого выберите первый кадр на слое, где расположен объект, и немного его поверните используя инструмент «Free Transform Tool» , который находится на правой панели.
Теперь в свойствах объекта, находясь на первом кадре, выберите «Orient to path» .
Выберите пятидесятый кадр на слое, где расположен объект, и также как в первом кадре немного поверните его.
Чтобы посмотреть, что получилось, нажмите ctrl+enter.
Если хотите сохранить анимацию в файл, то в главном верхнем меню выберите «File -> Export -> Export Movie… » .
Читайте также: