Главная » Adobe Animate & Adobe Flash, Халява » Анимация снега в Adobe Animate CC

Анимация снега в Adobe Animate CC

Тема снега актуальна для зимы 2019-2020 года. Где-то его до сих пор нет, где-то он только начал выпадать и многие люди сетуют на то, что у них нет зимнего настроения, новогоднего настроения, которое, кстати, легко создать, украсив свой дом по-новогоднему. Если уж нет настоящего снега, создадим его сами – анимация в виде снега оживит любой зимний пейзаж и привлечет внимание пользователей, если вы захотите расположить такое изображение на своем сайте. Как создать анимацию снега в Adobe Animate CC, рассмотрим в данной статье.

Самое приятное заключается в том, что все уже сделано до нас. Adobe Animate CC постарался для нас и расположил в своих шаблонах готовый документ с анимацией снега? Созданной с помощью action script 3. Давайте посмотрим, как выглядит этот шаблон и как его можно изменить под конкретные нужды.

P.S. В конце урока у меня получится симпатичный снеговик с анимацией снега, который вы сможете скачать, воспользовавшись советами из моей статьи «Получение исходника из SWF файла«

Найти шаблон можно здесь: Файл – Создать – Шаблоны – Анимация – Сценарий Снег

Изначально анимация выглядит таким образом:

На временной шкале находится 4 слоя с необходимым контентом: Фон, Графика снега, Действия (слой с кодом action script 3), и инструкция (текстовый слой с описанием того, где можно посмотреть код и как изменить графику снега)

Предположим, нам нужно изменить документ следующим образом. Над слоем Фон создадим папку или слой Фон2 (как вам будет удобно, кнопки для создания папки и нового слоя находятся под списком слоев во Временной шкале) и расположим там новое изображение. Причем его размер может отличаться от первоначальных 550 на 400 пикселей. У меня это 400 на 400 пикселей.

Обратите внимание, что я убрала видимость слоев Инструкции и Фон, за их ненадобностью.

Размер самого документа я поменяла на 400 на 400 пикселей во вкладке Свойства (Окно – Свойства).

Теперь изменим саму снежинку. Я хочу, чтобы она была в виде кружочка. Для этого вызываем окно библиотеки. Окно  — Библиотека и находим символ Snow. Щелкаем по нему 2 раза левой клавишей мыши. На рабочей области открывается изображение со снежинкой. Оно белое на белом фоне и очень маленькое, так что не теряйтесь, а просто выделите все содержимое рабочей области (Ctrl+A) и приблизьте до максимума объект (Ctrl + +). Нарисуйте вместо снежинки кружок и залейте его голубым цветом, можно понизить прозрачность. Размер круга и снежинки по диаметру должен совпадать и местоположение тоже. Это важно!

Теперь вернитесь к первоначальной сцене. И щелкните по первому ключевому кадру слоя Действие. Вызовите Окно – Действия и посмотрим код action script, который создает анимацию снега. Что там можно изменить:

Разберем по порядку.

1 – это количество снежинок, которые сгенерирует код (можете изменить это значение и посмотреть, что будет)

2 – Это время в миллисекундах, за которое количество снежинок (1) выпадет. Сейчас это 10 секунд. Соответственно, чем больше значение (1) и меньше значение (2) – тем будет гуще снег.

Дальше.

3 – это изменение траектории по оси x. Изначально ширина документа была 550 пикселей, измените это значение на 400 (новая ширина документа) и данная запись будет означать, что положение снежинки по оси X будет изменять от 400 до 50 пикселей.

4 – это изменение траектории по оси y. Так как высота осталась прежней, ничего можно не менять.

5 – цифра 3, стоящая в данной строке определяет вариативность изменения размеров снега. А в последующих строчках задается, как будет двигаться снег разного размера (разбито на три группы) – медленно, средне и быстро. Чем больше будет цифра в данной строке, тем больше вариантов размеров вы можете задавать.

В своей анимации снега я изменила только ширину траектории движения снега по оси X. У меня получилось следующее изоражение снеговика с плакатом о зимней распродаже и с анимацией снега. Кстати, вы можете скачать на моем сайте бесплатный векторный стикер с информацией о зимней распродаже и расположить его на своем сайте:

Вот так, быстро и легко вы можете создать анимацию снега в Adobe Animate CC на основании стандартного шаблона.

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

(Visited 79 times, 1 visits today)

2 комментарии на “Анимация снега в Adobe Animate CC

    1. А если попробовать опубликовать в формат «Оболочка HTML»? Не уверена точно, это ли вам надо.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *