ВАШЕ РУКОВОДСТВО ПО

Создание большего в Adobe Animate с ZIM!

ЗИМ

ZIM на https://zimjs.com — это JavaScript Canvas Framework, основанный на CreateJS и добавляющий множество удобств, компонентов и элементов управления. Adobe Animate экспортирует в CreateJS в веб-режиме, поэтому мы можем использовать ZIM в Animate!

  • Удобства: перетаскивание одной строки, множественные тесты попадания, СТИЛЬ и т. д.
  • Компоненты: диск, ползунок, палитра цветов, область, панель, индикатор и т. д.
  • Элементы управления: Pages, Emitter, Tile, Wrapper, Pen, Parallax, Synth и т. д.

Мы рекомендуем вам зайти в каждый из баннеров сайта ZIM и нажать кнопку БОЛЬШЕ. См. разделы О программе, Примеры и Обучение, так как в Animate есть много полезных функций. Статья ◎ Ваше руководство по творческому программированию на холсте также является очень полным ресурсом.

УЧЕБНЫЕ ПОСОБИЯ — ЧАСТЬ 1

ZIM Tutorials for Adobe Animate можно найти на YouTube. Мы перечисляем резюме первого набора руководств ниже, включая справочные ссылки и снимки экрана. Все файлы FLA и т. д. для всех учебных пособий включены в TUTORIAL ZIP.

Мы будем рады помочь в Adobe Animate Сообщество, ZIM Slack или ZIM Discord. В Slack у нас есть канал #animate — так что спрашивайте, чтобы вас добавили!

РУКОВОДСТВО 01 — Шаблон

Предлагаем вашему вниманию экскурсию по сайту ZIM. Мы покажем, как использовать ZIM SHIM, загрузив ZIP и используя zimshim.html в качестве шаблона для вашего веб-проекта Adobe Animate.

Мы также добавляем круг ZIM с радиусом, цветом, backgroundColor и backgroundWidth, центрируем его на рабочей области и устанавливаем для перетаскивания:

new Circle(100, red, dark, 5).center().drag();

РУКОВОДСТВО 02 — Видеоклипы

В этом уроке мы покажем, как создать новый файл из профиля, который мы сохранили в прошлый раз — смотрите первый урок!

Затем мы сделали мувиклип на сцене, создав фигуру, выбрав ее, щелкнув правой кнопкой мыши и создав символ (или F8). Затем мы назвали клип для библиотеки и установили имя экземпляра на панели свойств.

Затем мы превратили это в объект ZIM с помощью zimify():

zimify(this.rectangle).center().drag();

Мы объяснили несколько проблем, с которыми мы можем столкнуться и которые повлияют на то, как мувиклип может взаимодействовать с другими объектами ZIM, которые мы размещаем на сцене:

  1. this.rectangle находится не прямо на сцене, а на временной шкале MovieClip. Поэтому мы можем добавить его на сцену следующим образом: center(S)
  2. MovieClip будет повторно добавлен на временную шкалу, если временная шкала останется запущенной, поэтому мы используем this.stop(), чтобы предотвратить это.
  3. Если мы перетаскиваем мувиклип, то можем использовать drag({all:true}) для перетаскивания всего мувиклипа, а не дочернего элемента внутри мувиклипа.
  4. Мы можем захотеть установить reg(0,0), чтобы правильно установить точку регистрации в верхнем левом углу, если это то, что мы ожидаем.

Результирующий код выглядит следующим образом:

zimify(this.rectangle)
 .reg(0,0)
 .center(S)
 .drag({all:true});

Это действительно зависит от того, как вы хотите обрабатывать свой мувиклип — все вышеперечисленное необязательно, но если вам нужны методы ZIM, вам нужно как минимум zimify().

РУКОВОДСТВО 03 — Позиционирование и преобразования

Здесь мы покажем, как позиционировать объекты, используя следующие методы. Все будут добавлены в контейнер или сцену, если контейнер не предоставлен. У всех есть параметр слоя (уровня) в конце:

  • addTo() — добавляет в контейнер, но не устанавливает x и y
  • center() — центрирует объект
  • centerReg() — центрирует и центрирует регистрацию
  • loc(x,y) — находит точку регистрации объекта в точках x и y.
  • pos(x,y,horizontal,vertical) — располагает края относительно LEFT, RIGHT, CENTER, TOP, BOTTOM
  • mov(x,y) — перемещает объект на относительную величину

Ниже приведен пример кода для размещения правой/нижней стороны кнопки на расстоянии 100 x 100 пикселей от правой/нижней части сцены. Это НЕ обязательно позиционирование на основе точки регистрации — для этого вы должны использовать loc(), а скорее устанавливать расстояние между объектом и краем на 100 и 100 пикселей. Это как LEFT, RIGHT, TOP, BOTTOM в CSS, но у нас также есть ЦЕНТР:

new Button().pos(100,100,RIGHT,BOTTOM);

Мы также обсудим использование свойств и методов с короткими цепочками для преобразований:

  • sca(x,y) — то же, что и scaleX и scaleY
  • rot(deg) — то же, что и вращение
  • ske(x,y) — то же, что skewX, skewY
  • siz(x,y) — то же, что и width/height или widthOnly/heightOnly
  • reg(x,y) — то же, что regX, regY
  • alp(количество) — то же, что и альфа

УЧЕБНОЕ ПОСОБИЕ 04 — Объекты анимации и конфигурации (ZIM DUO)

В этом руководстве мы увидим, как использовать ZIM animate() — очень мощный и простой движок Tween, такой как TweenJS, GSAP или Tween в ActionScript. Вот некоторый код для анимации масштаба прямоугольника в два раза больше за 2 секунды:

new Rectangle(300,300,purple)
 .centerReg()
 .animate({scale:2},2); // NORMAL PARAMETERS

Вот некоторый код для анимации масштаба прямоугольника в два раза больше и желтого цвета за 1 секунду, а также перемотки назад и зацикливания:

new Rectangle(300,300,purple)
 .centerReg()
 .animate({ // CONFIGURATION OBJECT (ZIM DUO)
  props:{scale:2, color:red}, 
  time:1,
  rewind:true,
  loop:true
 });

Мы также покажем, как ZIM может использовать либо обычные параметры, либо один параметр, являющийся объектом конфигурации {} со свойствами, совпадающими с именами параметров. Это было изобретено для ZIM DUO (вторая версия ZIM).

У нас также есть лучшая в отрасли анимация/перетаскивание по пути, редактируемому пользователем, который мы покажем в будущих руководствах.

УЧЕБНОЕ ПОСОБИЕ 05 — Тайлы и динамические параметры (ZIM VEE)

Здесь мы создаем Tile() и обрабатываем взаимодействие несколькими способами: перетаскиванием, наведением мыши, наведением мыши, щелчком, касанием и т. д. Базовый код Tile для красных кругов 5x4, расположенных на расстоянии 20 пикселей по горизонтали и вертикали, будет выглядеть так:

new Tile(new Circle(100,red), 5, 4, 20, 20).center();

ZIM имеет динамические параметры, которые позволяют нашим классам и методам выбирать параметры. Например, если бы мы хотели расположить случайные цветные круги, мы бы передали массив, и плитка выбирала бы случайным образом:

new Tile(new Circle(30,[red,green,blue]),5,4,20,20).center();

Если бы мы хотели, чтобы эти цвета были в порядке, мы бы передали их последовательно:

new Tile(new Circle(30,series(red,green,blue),5,4,20,20).center();

Если нам нужны разные радиусы в пределах диапазона, мы используем объект min/max:

new Tile(new Circle({min:10,max:50},red), 5, 4, 20, 20).center();

Вот Tile с параметром ZIM VEE массива с кругом и прямоугольником:

new Tile([new Circle(30,red), new Rectangle(60,60,blue)], 5,4, 20,20).center();

Мы также сделали так, чтобы ZIM Emitter отображался, когда мы наводим курсор мыши на фигуру. Излучатель также может использовать значения ZIM VEE для испускания различных частиц.

ЗАКЛЮЧЕНИЕ

Это первые пять уроков в серии. Есть еще много других, которые вы можете увидеть в следующих частях или посетить Учебники на YouTube.

На сайте ZIM также есть большой раздел ZIM Learn, в котором показано множество других примеров того, что вы можете добавить в свои проекты Adobe Animate.

Если у вас есть какие-либо вопросы или вы хотите пообщаться, присоединяйтесь к нам в Discord или Slack — у нас есть канал #animate в Slack, так что спрашивайте, чтобы вас добавили!

Доктор Аннотация

Следите за нами в Твиттере на ZIM Learn, а вот ZIM Learn на YouTube!

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 💰 Бесплатный курс собеседования по программированию ⇒ Просмотреть курс
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу