Обновлено: 08.12.2021

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

Разбор и редактирование сцен стандартного шаблона

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

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

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

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

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

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

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

Теперь изменим саму снежинку. Я хочу, чтобы она была в виде кружочка.

Для этого вызываем окно библиотеки. Окно  — Библиотека и находим символ Snow.

Щелкаем по нему 2 раза левой клавишей мыши. На рабочей области открывается изображение со снежинкой.

Оно белое на белом фоне и очень маленькое, так что не теряйтесь, а просто выделите все содержимое рабочей области (Ctrl+A) и приблизьте до максимума объект (Ctrl + +).

Нарисуйте вместо снежинки кружок и залейте его голубым цветом, можно понизить прозрачность. Размер круга и снежинки по диаметру должен совпадать и местоположение тоже. Это важно!

ЧИТАЙТЕ ТАКЖЕ

Основы анимационного дизайна. Узнайте новые возможности анимационного motion дизайна, интересные эффекты и примеры

Разбор и редактирование кода Action Script для анимации

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

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

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

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

Дальше.

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

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

5 – цифра 3, стоящая в данной строке определяет вариативность изменения размеров снега.

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

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

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

Похожие статьи

Squigglevision — дрожащая анимация в Adobe Flash (Adobe Animate) Анимация движения на камеру в Adobe Animate (Flash) Анимация движения в Adobe Flash (Adobe Animate) Контурная анимация в Adobe Flash (Adobe Animate) Движение по траектории в Adobe Flash (Adobe Animate) Работа с градиентом в Adobe Flash (Adobe Animate) Эффектное появление объекта в Adobe Flash (Adobe Animate) Коллекция шаблонов анимации зверей и птиц