ВАШЕ РУКОВОДСТВО ПО
Создание большего в 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, которые мы размещаем на сцене:
- this.rectangle находится не прямо на сцене, а на временной шкале MovieClip. Поэтому мы можем добавить его на сцену следующим образом:
center(S)
- MovieClip будет повторно добавлен на временную шкалу, если временная шкала останется запущенной, поэтому мы используем
this.stop()
, чтобы предотвратить это. - Если мы перетаскиваем мувиклип, то можем использовать
drag({all:true})
для перетаскивания всего мувиклипа, а не дочернего элемента внутри мувиклипа. - Мы можем захотеть установить
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 и найдите прекрасную работу