Уроки adobe animate cc: Изучение основ анимации в Animate – Уроки по Adobe Animate для начинающих: бесплатные видео для домашнего обучения

Изучение основ анимации в Animate

Каждый монтажный кадр в документе Animate может состоять из любого числа слоев временной шкалы. Для упорядочивания содержимого анимационных последовательностей и разделения анимационных объектов используйте слои и папки слоев. Упорядочивание по слоям и папкам предотвращает удаление, соединение или сегментацию перекрывающихся объектов. Чтобы создать анимацию, которая включает одновременное анимированное движение более одного символа или текстового поля, размещайте объекты на отдельных слоях. Можно использовать один слой как фоновый слой для размещения статичных рисунков, а также использовать дополнительные слои для каждого отдельного анимированного объекта.

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

Если в том же слое, где находится объект анимации, присутствуют другие объекты, Animate добавляет выше или ниже исходного слоя новые слои по мере необходимости. Любые объекты, которые существовали под объектом анимации на исходном слое, переходят на новый слой, лежащий под исходным. Любые объекты, располагавшиеся над объектом анимации на исходном слое, перемещаются в новый слой, который находится над исходным. Animate вставляет эти новые слои между любыми слоями, расположенными на временной шкале. Таким образом, Animate сохраняет исходный порядок наложения всех графических объектов в рабочей области.

Слой анимации может содержать только диапазоны анимации (смежные группы кадров с анимацией движения), а также статические или пустые кадры и ключевые кадры. Каждый диапазон анимации может содержать только единичный целевой объект и необязательную траекторию движения для целевого объекта. Поскольку рисовать в слое анимации невозможно, создайте в других слоях дополнительные анимационные или статические кадры, а затем перетащите их в слой анимации. Чтобы разместить кадровый сценарий в слое анимации, создайте его в другом слое, а затем перетащите в слой анимации. Кадровый сценарий может находится в кадре за пределами самого диапазона анимации. Обычно лучше размещать все кадровые сценарии на отдельном слое, который содержит только ActionScript.

Если в документе содержится несколько слоев, то отслеживание и редактирование объектов на одном или нескольких из них может быть затруднительным. Задача упрощается, если одновременно работать только с содержимым одного слоя. Слои, с которыми вы в данный момент не работаете, можно скрывать или блокировать, нажав на значок с изображением глаза или замка, который расположен рядом с названием слоя на временной шкале. Использование папок слоев способно помочь вам упорядочить слои в виде управляемых групп.

Уроки по Adobe Animate для начинающих: бесплатные видео для домашнего обучения

Уроки по Adobe Animate для начинающих: бесплатные видео для домашнего обучения

Adobe Animate CC простой в использовании программный продукт для рисования векторной графики и ее анимирования. В нем ограниченное количество инструментов для создания графики, но возможно импортировать контент из Photoshop, Fireworks. Будет интересна начинающим аниматорам, любителям 2D мультфильмов, дизайнерам игровых персонажей.

 

Все Курсы Онлайн подобрали лучшие бесплатные уроки по Adobe Animate CC, которые дадут представление об основах работы и возможностях программы.

Введение

Видео урок познакомит с интерфейсом программы и продемонстрирует три способа создания простой анимации движения. Преимущество ее в поддержке xml 5 canvas, что дает возможность отображать проекты на любом устройстве. Рабочая область представляет собой поле для разработки сцен и вкладки с наборами инструментов, которые двигают и настраивают по желанию. Снизу находится временная шкала, на которой настраивается передвижение, фиксируется положение и интервал. Вкладки открываются через меню или нажатием горячих клавиш. Копии созданных объектов хранятся в библиотеке, и их можно использовать, даже если они были удалены. 

Основы анимирования

Из лекции узнаете о базовых приемах, используемых в работе. В любом перемещении есть начальное и конечное положение. Именно они задаются на временной шкале для настройки движения. Выбирают соответствующие кадры, где будет начало и конец. Далее выбирают анимируемый элемент и строят траекторию его перемещения. Настраивают скорость выхода, замедлив или ускорив ее. Каждая часть редактируется самостоятельно, так как в программе предусмотрена работа со слоями.

 

Основные приемы

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

Мультяшный персонаж

Урок по созданию персонажа будет полезен тем, кто хочет сделать мультфильм или игровых героев. Для начала открывают в программе Action Script и задают разрешение рабочего поля. Это необходимо для правильного отображения будущих объектов. Необходимо загрузить рисунок, эскиз. Затем фигуру обводят по контуру с помощью карандаша. Для последующего оживления героя необходимо создавать каждую часть в новом слое. На таймлайне выделяют область для будущих сцен, и делают копии их содержимого из предыдущей сцены в следующую. После этого в главном кадре можно делать любые изменения.

 

Покадровая анимация

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

Природный ландшафт

В ролике показан процесс создания ландшафта и его анимирования. Изображение создается на основе эскиза, который нарисован от руки и загружен в программу. Для начало отрисовывают детали рисунка. Каждый фрагмент делается на новом слое. Это необходимо для дальнейшей работы. После завершения рисования, приступают к анимированию классическим способом через назначение начальных и конечных точек движения каждому элементу по отдельности.

 

Основы рисования

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

Анимация перекладкой

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

 

Простейшие тени

Тени придают объем графическому изображению и естественность. В ролике описан способ наложения теней для различных элементов изображения. Для начала выбирают карандаш и проводят линии в местах, которые будут темнее. Затем их заливают более темным цветом, чем основной. Обратите внимание, что контур должен быть закрытым, чтобы была возможность его заполнить цветом. После заливки всех форм вспомогательные контуры удаляются. 

Рисуем персонажа

Урок рисования предназначен для новичков и тех, кто совсем не умеет рисовать. Для начала создают проект, в который загружают изображение выбранного героя. Затем его обрисовывают, следя за тем, чтобы все линии замыкались. Элементы заливаются цветом. Для дальнейшего анимирования каждый из них отделяется и преобразуется в символ. Далее с помощью инструмента для построения костей скелета, объединяют точки на теле фигуры.

Уроки Adobe Animate CC

Уроки Adobe Animate CC, опубликованные в этом разделе сайта, предназначены, в основном, для начинающих.

Новичкам всегда трудно! Им нужно не только быстро освоить интерфейс программы, поскольку хочется поскорее создать что-нибудь свое, интересное и креативное, но и понять основы анимации, правила и принципы, на которых она базируется. А это не всегда так просто, как кажется!

Уроки Adobe Animate CC решают эту задачу оптимальным способом:

Во-первых, они публикуются не только в видео-формате, который, на сегодняшний день, стал относительным стандартом в обучении, но и в текстовом, учитывая потребности тех, кто легче воспринимает информацию с помощью текста и иллюстраций.

Во-вторых, рассказывать об интерфейсе программы, ее инструментах и возможностях гораздо интереснее, эффективнее и поучительнее, создавая реальные проекты, близкие к тем, что мы видим каждый день на страницах в интернете или в приложениях мобильных устройств. Именно поэтому в этих уроках Animate CC будет использован такой подход.

В-третьих, каждый урок (хотя и короткий по времени) решает одну, максимум две, практические задачи. Ведь для изучающих уроки Adobe Animate CC важно не только усвоить информацию, но и выработать необходимые навыки:

• Знать где расположены инструменты программы и их базовые свойства
• Знать горячие клавиши основных инструментов и операций
• Понимать разницу между различными видами анимаций (покадровая, classic, motion, shape tween) и быстро их создавать …

Этот список можно продолжать и дальше, но не буду Вас утомлять чтением, лучше используйте это время для реального обучения!

Да, и еще… надеюсь, что и для старых поклонников Adobe Flash в этих уроках найдется много полезного и интересного. Хотя Animate и является полноправным преемником Flash, но в нем много нового, отвечающего современным требованиям и трендам в создании мультимедийного интерактивного контента.

Сразу под этими строчками Вы видите проект, который мы с вами будем создавать с нуля. В процессе создания Вы познакомитесь с интерфейсом программы, основными инструментами рисования, способами анимации и настройками при публикации конечного продукта.

Пожалуйста, включите JavaScript, чтобы увидеть комментарии.

Секреты Adobe Animate

Сегодня мы расскажем, как в Playrix создаются анимации в Animate (Flash). Статья посвящена несложным трюкам, которые можно использовать как базу для эффектов посложнее. Для профессионалов она, возможно, и не будет откровением, но начинающие флешеры (или анимейтеры, если хотите) наверняка найдут для себя что-нибудь интересное. Эти приемы точно сэкономят вам уйму времени в сложных задачах.

---

Несколько слов о флеше и других программах. Вопросы, наверняка, возникнут, ведь Flash «хоронят» уже который год, а он до сих пор никуда не исчез.

1. Почему мы работаем в Animate, а не в Spine?

• Технология уже годами обкатана, изучена и прочно вписалась в рабочий процесс. Как программа для игровой 2D-анимации флеш жив и действительно хороших альтернатив пока нет.
• Для Spine нужен дополнительный этап работы – риг. Это неоправданно для объектов или персонажей, у которых одна-две анимации (например, декорации Fishdom или персонажи в диалогах Township).
• Производительность. Spine тут проигрывает даже с хорошим ригом, в котором нет ничего лишнего, минимум костей и простые меши.
• Нельзя что-нибудь дорисовать на ходу. Во флеше мы это делаем регулярно и такой подход отчасти напоминает классическую рисованную анимацию – можно «прорисовать» практически любую позу или нужный эффект тщательнее, ригом мы не ограничены.
• Spine ситуативен. Отлично подходит для персонажной анимации «2D строго вид сбоку» и всевозможных «оживших портретов» – которые и анимацией-то можно назвать с натяжкой. Кроме того, если нужно повернуть сложный объект больше, чем на 20-30 градусов, колдовать в Spine нужно еще сильнее, чем во флеше.

Как видите, Spine точно не «убийца флеша», но в ряде случаев мы все-таки используем и его.

2. Почему не 3D?

• И вновь дело в производительности, по этому критерию флеш выигрывает. 3D используется ситуативно, где без него никак не обойтись – рыбки в Fishdom, главные персонажи в Homescapes и Gardenscapes, например.
• Лишние этапы работы – нужно создать модель, текстуры, риг.

3. Как флеш-анимации попадают в игру, что поддерживается, а что нет?

• Используем свою программу-растеризатор, которая превращает swf в два файла: текстурный атлас и swl, в котором записаны все смещения объектов. Это аналог GAF.
• Поддерживается: иерархия вложенностей, инстанс-неймы.
• Не поддерживаются: маски, фильтры, tint/brightness и режимы наложения.

На первый взгляд может показаться, что во флеше невозможно сделать что-то действительно интересное. Но это не так! Сейчас объясним.

Вращение куба

Начнем с самого простого: поворот кубика в изометрии. Очевидное наблюдение: каждая сторона куба – это квадрат. Если представить, что мы смотрим на куб сверху, то кроме верхней квадратной стороны мы ничего не увидим. Поворачивать его в таком ракурсе довольно просто. Но если куб нарисован по-другому, ситуация усложняется: стороны выглядят как ромбы и трансформировать их для создания иллюзии вращения куба – довольно сложная задача.

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

Итак, возьмем клип с квадратной стороной куба и поместим его во вложенность (назовем его «основной клип»). Преобразовать основной клип в изометрический тайл можно, если повернуть его на 45 градусов. Затем нужно сжать в два раза по вертикали то, что получилось (после поворота – сгруппировать, уменьшить по высоте на 50%, разгруппировать). Теперь у нас есть верхняя грань куба (рис.1).

Повернем его содержимое. Внутри у него всё еще квадрат и поворачиваться он будет как квадрат, ведь все искажения внешние.

Нижняя грань повторяет движение верхней. Создайте ее копию.

Полдела сделано, вращаются верхняя и нижняя грани. Движение их углов полностью определяет положение боковых граней. Предстоит немного механической работы, чтобы аккуратно подогнать боковые стороны (рис.2). Удобнее будет использовать режим graphic для верхних граней, чтобы их поворот отображался на основном таймлайне.

Затем можно сделать коробку деревянной и добавить «освещение»: полупрозрачные затемняющие клипы для боковых граней и посветлее – для верхней (рис.3). Теперь у есть готовый ящик:

Таким нехитрым способом можно сделать вращение и для других правильных многогранников – октаэдров, додекаэдров и т.д. С неправильными работать сложнее, но тоже возможно.

Открытие коробочки

А сейчас мы откроем наш изометрический куб. На глаз открывать «крышку» долго и можно легко ошибиться – тогда движение может получиться дерганным.

Посмотрим на коробку сбоку – открытие створок предельно простое. Повернем их во вложенности (рис.1). Створки – это желтые отрезки. Рекомендуем для них использовать круг как подложку. Так удобнее и нагляднее будет трансформировать основной клип. Без круга, только с отрезками можно запутаться.

Затем расположим в изометрии клипы, которые содержат поворот створок во вложении, и поставим им режим graphic. Поворот желтых отрезков будем использовать как ориентир.

Пять минут механической работы, чтобы вместо палочек были настоящие створки – и готово (рис.2.2). Для второй пары створок можно использовать отзеркаленную копию первой.

Где это можно применять помимо очевидного открытия разных створок и ворот? Там, где нужно отследить перемещение объекта по круговым траекториям, особенно в сложных ракурсах.

Движение машинки

В этом примере мы покажем, как подходы, описанные в предыдущих пунктах, можно применять для более сложных объектов. Анимировать будем маленькую машинку, которая ездит между дорожных конусов.

Очевидно, первое, что нужно сделать – представить сложный объект как набор простых, игнорируя вторичные элементы на этом этапе. (рис.1)

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

Поворот – одна из составляющих более сложного движения. Изначальная задумка – машина объезжает препятствия на дороге, двигаясь «змейкой». Можно попытаться двигать её по guide-кривой, но в этом случае сложно подобрать ease для твина (либо движение по кривой будет линейным, если анимировать без ease вообще).

Можно пойти другим путем и разложить сложное движение на составляющие (рис.3, слева направо с самого нижнего уровня вложенности):

1. Поворот машины на месте
2. Цикл движения из стороны в сторону
3. Движение машины по прямой

При одновременном воспроизведении это создаст эффект «змейки». Разделение подобных движений на составляющие позволяет вносить правки на любом уровне, а также подбирать наиболее подходящую рассинхронизацию одного движения относительно другого.

Флаг

Прежде чем что-то делать, поищите способ, который позволит как можно быстрее набросать «картину» в целом – и обязательно им воспользуйтесь. От наброска гораздо проще двигаться дальше. Для флага мы выбрали такой вариант:

• Анимируем вспомогательный символ (зацикленное движение вверх-вниз и в стороны) (Рис.1)

• Создаем несколько его копий и устанавливаем равномерную рассинхронизацию. Несколько клипов слева стоит сжать по горизонтали, чтобы уменьшить амплитуду колебаний. Можно поэкспериментировать с движением сегментов на каждом из уровней вложенности. Логика движения сохранится, но смотреться будет по-разному.

• Когда «набросок» выглядит хорошо, можно продолжить работу. Используем положение вспомогательных символов как место стыка прямоугольных сегментов флага (Рис.2).

Где можно применять такой подход? В зацикленных плавных эффектах – огне, волнах и т.д. Структура везде будет разная, сохранится только общий принцип рассинхронизации клипов.

Краб номер один. Бегающий

По сюжету краб выбегает из-за шара, затем останавливается перед ним и стучит клешней. Затем снова убегает за шар – таким образом совершив полный оборот. Анимация непростая, «запчастей» у краба несколько десятков, поэтому для такой задачи просто необходима хорошая организация структуры.

На основном таймлайне всего несколько символов (рис.1). Во вложенность помещены все действия краба помимо перемещения. Он поворачивается, удивляется, стучит по стеклу и т.д. – все это стоя на месте (рис.2). Туловище краба также содержит поворот во вложенности, это удобно.

Запутаться при таком количестве лапок проще простого, поэтому мы использовали вспомогательные клипы. На них циклично меняется состояние для каждой из «ног»: находится на поверхности (большой кружок) или поднята вверх (маленький). Вся эта структура затем поворачивается вместе с крабом (Рис.3).

Результат:

Краб номер два. Не бегающий

У этого крабика множество разных анимаций, структура вложенности у них отличается. Но логика в целом одна и та же – комплексные движения распределены по уровням вложенности, на основном таймлайне происходят главные движение символов головы и клешней. А все моргания и улыбки, изгибы и движения клешней сделаны вложенными анимациями.

Результат:

Тот же подход мы используем при создании анимаций персонажей Gardenscapes и Homescapes. Все элементы туловища и головы находятся во вложенности, на основном таймлайне анимируется только основной клип целиком. Во вложенности удобнее делать эмоции и повороты, без перемещения множества сегментов на основном таймлайне.

Напоследок небольшой бонус. Еще парочка маленьких хитростей и скрипты:

Сбивается точка трансформации клипа и в результате анимация дергается. Как это починить:

а) Двойной клик на белый кружок вернет его в точку регистрации.

б) Можно выставить нужное положение точки трансформации, затем пройтись по всем ключевым кадрам с этим клипом, нажимая Ctrl+Y (это не только однократный Redo, но и повтор последнего действия).

Клип неудобно трансформировать при его текущей рамке трансформации. Особенно если он уже очень сильно деформирован

Клип можно сгруппировать (Ctrl+G). Группа даст новую рамку трансформации. После этого от группы нужно избавиться с помощью Break apart (Ctrl+B).

Работа с растровыми изображениями

Если вы работаете с множеством сегментов, бывает сложно выделить какой-нибудь клип на нижних слоях. Флеш реагирует на клик по прозрачной области растровой картинки – и выделяется не то, что нужно. Можно превратить растр в растровую заливку с помощью Break apart и стереть прозрачные участки, но это долго. У нас есть несколько скриптов для избавления от прозрачных областей – вы можете найти их по ссылке.

Sorcery_MaskBitmap.jsfl – создает векторную маску по форме картинки

Sorcery_CutBitmap.jsfl – обрезает прозрачную область

Sorcery_CutBitmapPrecise.jsfl – то же самое, что и предыдущий скрипт, только с пиксельной точностью, без сглаживания. Подходит для мелких объектов.

Как работать с этими скриптами? Они последовательно обработают каждый клип, в котором находится одна растровая картинка и больше ничего. Уровней вложенности также быть не должно. Каждый клип должен располагаться на отдельном слое. То есть: импортируем .psd во флеш, затем раскладываем клипы по слоям, следим чтобы не было вложенностей и групп и, наконец, запускаем скрипт. Сообщение Requires a selection – это конец работы скрипта.

Отметим, что тени и другие полупрозрачные элементы не будут обрезаны корректно. Но таких элементов обычно немного и резкие края на прозрачности легко исправить. Эти скрипты корректно работают в Animate, а в более ранних версиях флеша работает MaskBitmap.

Сжатие/растяжение таймлайна.

Для этого есть отличный скрипт. Ссылка на страницу разработчика. Мы его используем регулярно. Принцип работы предельно прост – выделяем нужный участок фреймов на таймлайне, запускаем скрипт, задаем коэффициент для сжатия или растяжения. Готово.

Ян Богородецкий, Lead Animator Playrix

Вакансии для аниматоров на job.playrix.com

Месяц с Animate CC / Habr

Описание моего опыта переезда с Flash на Animate CC и создания баннеров во всемогущем формате HTML5. Много картинок под катом

Немного исторического экскурса и терминов

Лично я сам знаком с Flash гораздо больше 10 лет и немного представляю, как работает эта технология «изнутри».

Примерно столько же лет я верстаю сайты, в том числе на «современном» языке HTML5, который, как говорят, умеет всё. Нет, реально, иногда упоротые дизайнеры присылали такие интерфейсы, которых в природе не существовало, их нужно было выдумать, прикрываясь фразой «на HTML5 же можно написать всё!».

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

За последние 5 лет flash не пинал только ленивый, причем, не особо разбираясь в вопросе. Лично я никогда не видел ни тормозов, ни дырявости, а уж про самое первое утверждение от Стива Джобса про то, что «Flash не заточен под палец» — это и вовсе смешно. Самая очевидная причина противостояния Apple против флеша на айфонах лежит на поверхности, но сейчас не об этом.

Приближаемся к развязке терминологии. HTML — это язык разметки текста и расположения элементов на странице. Он не умеет выполнять никакие действия сам по себе. Под «новшествами HTML5» вместо Flash обычно понимают: проигрывание видео без Flash, анимации без Flash, мультизагрузка файлов без Flash и некоторые другие вещи.

Несмотря на дифирамбы, звучащие отовсюду, до сих пор не появилось ни одного вменяемого редактора анимации на «всемогущем» HTML5, пока Adobe не перелицевала Flash CC в Animate CC, добавив, по сути, только экспорт в HTML5.

Интерфейс

Сам интерфейс Animate CC вообще не отличается от Flash, в отличие от Edge Animate, который был дико непривычен. Больше сказать особо нечего, и я вообще не заметил разницы с CS6, которым я пользовался давно. Для баннеров не нужен AS3, а это была последняя версия, поддерживающая AS2. Конвертер Swiffy, который сделала Google, дружил только с AS2.

* AS2,3 — встроенный во Flash язык программирования Action Script, который позволяет делать всю неанимационную составляющую ролика — чтобы кнопки нажимались, чтобы на нужных кадрах ролик вставал на паузу, для того, чтобы информацию могли прочитать, чтобы запускались интерактивные сценарии взаимодействия с роликом. На самом деле, это достаточно мощный язык, и я использую лишь 0,000001% его функционала.

Движок отрисовки

Естественно, сами по себе объекты внутри ролика двигаться не могут, для этого нужно, чтобы их двигал, показывал и скрывал какой-то движок. В Animate CC для проектов формата HTML5 Canvas используется CreateJS, который приветствует каждый новый проект замечательным предупреждением

ПРЕДУПРЕЖДЕНИЯ:
Номера кадров в EaselJS начинаются с 0, а не с 1. В частности, это влияет на методы gotoAndStop и gotoAndPlay.

Приятно, что хоть предупредили. Видимо, это нереальная задача — отнимать по единичке от того кадра, на который нужно перейти.

Таймлайн и рабочая область

Т.к. интерфейс не претерпел никаких изменений для меня все здесь абсолютно стандартно. Разницы нет. Так как система настроена на русский язык, скачалась русская версия пакета. Меня это не особо беспокоит, потому что я пользуюсь хоткеями, хотя, иногда зависаю на том, что нужно выбрать в меню.

Теперь перейдем к тому, чем я постоянно пользуюсь:

Стандартные фильтры во Flash

Фильтры — одна из весьма частых составляющих любых баннеров, они позволяют очень быстро добиться нужного результата. Я рассмотрю 3 фильтра, которыми я раньше пользовался крайне часто. Во флеше фильтры — часть стандарта, и на моих работах они не оказывали какого-либо влияния на производительность, да и не могли в-принципе. Здесь и далее я буду использовать экспорт в GIF для понимания разницы

Тень

Тень — один из самых простых вариантов сделать части баннера объемнее и акцентировать внимание на нужных блоках. Естественно, я взял чрезмерно сильную тень, чтобы проиллюстрировать разницу
Сравниваю:

Flash	CreateJS

Да, анимация тени невозможна. Более того, если ролик длиннее того, что я представил для теста, тень превращается в неизвестно что.
Здесь также стоит упомянуть, что в редакторе и готовом html5 тени (да и вообще все эффекты) выглядят сильно разными.

Редактор	Результат

При экспорте в трейсе можно увидеть такую надпись:
Фильтры тени и свечения используют очень много системных ресурсов, кроме того, поддерживаются не все параметры. (4)
Ну спасибо, что хоть предупредили…

Производительность баннера с тенями оставляет желать лучшего, ну они же предупреждали. Стерев тени с этих подложек, я сократил нагрузку до 40%. Флеш все это рисовал с 23% загрузки вместе с тенями, разумеется

Свечение

Один из самых простых способов выделить текст на пестром фоне — добавить ему обводку, это просто делается с помощью свечения с большим процентом интенсивности.

Flash	CreateJS

В это самое время в редакторе все так же, «Видимость ноль, иду по приборам»:

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

Помимо этого, свечение — это не только обводка букв, но результат намекает, что его не будет

Flash	CreateJS	В редакторе

Размытие

Без комментариев. Размытие доступно только для статичных объектов, так что использовать этот фильтр для появления текстов невозможно

Flash	CreateJS

Как вышеперечисленные глюки могут существовать при повсеместном проникновении тех же самых SVG-фильтров и фильтров в CSS — я не представляю.

Проблемы экспорта и упаковки

Все привыкли к тому, что ролик во флеше — это самодостаточный файл. Экспорт в HTML5 порождает кучку файлов, вместо одного. Проект Swiffy, придуманный Google для конвертации SWF в HTML паковал всё внутрь одного HTML-файла. Видимо, такая задача оказалась непосильной ношей для создателей Animate CC. Подробную статью по поводу засовывания «всего» внутрь одного файла для Doubleclick можно прочесть здесь. Я сделал свой конвертер на лету, сгородив конструкцию из пары функций на php, но она далека не то, что до идеала — даже до черновика. Мои задачи решает — и ладно.

Резиновые баннеры

По умолчанию Animate вроде как поддерживает «резиновость» баннеров, но обычно под резиновыми баннерами имеются в виду те, которые тянутся по горизонтали, а не пропорционально по обоим осям. В шаблоне экспорта это называется responsive scaling, и в случае с баннерами, тянущимися только по оси X это приводило к забавным глюкам, пока я его не вырезал из шаблона

Вообще, можно вообще отказаться от идеи растягивания баннера, просто взять максимальный размер баннерного места, а ширину ролика указать равную минимальному размеру баннерного места и обрезать часть с помощью overflow: hidden, потом центрировать элемент CANVAS (указав его ширину равной максимальному размеру баннерного места) по горизонтали внутри ссылки, занимающей 100% ширины, здесь даже немного проще, чем было во FLASH и не требует никаких дополнительных скриптов внутри ролика, только css.

---

Итого

Жить можно, пользоваться можно, тормоза терпеть — нельзя. Для моего основного клиента по субподряду было введено ограничение — не больше 5 сцен на один баннер, иначе все начинает дико тормозить на большом новостном сайте с кучей баннерных мест. Flash очень давно и крайне быстро отрисовывается видеокартой любого пошиба, а Священный Грааль в виде магических аббревиатур HTML5 и CSS3 пока что сделан из папье-маше в плане анимации и интерактивных элементов. В том числе, на мобильных девайсах, ради которых Flash якобы и хоронят, производительность подобного рода роликов вызывает серьезные сомнения. Еще ни один стандарт порвут, пока flash окончательно похоронят.

Основы рисования в Adobe Animate СС

На этом уроке Adobe Animate CC мы затронем тему, от правильного понимания которой во многом зависят Ваши навыки профессионального рисования в этой программе.

Дело в том, что компьютерное рисование принципиально отличается от обычного способом создания линий, форм и цветов, которые мы видим на экране.

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

В компьютерном рисовании все выше перечисленное имитируется, а если быть более точным в терминах, то вычисляется. Поэтому и инструментарий принципиально другой.

Возьмем Adobe Animate. Это программа, в которой можно создавать только векторную графику. А это, в свою очередь, значит (если рассуждать на базовом уровне), что Вы не можете в ней нарисовать линию как таковую, а можете только создавать точки (узлы), которые программа сама соединяет линией (вычисляет).

От свойств именно этих точек зависит какой будет эта линия: прямой, кривой, гладкой, угловатой и т.д. Поэтому, как ни странно, умение создавать эти самые узлы и настраивать их параметры будет во многом определять Ваш профессионализм как рисовальщика в Adobe Animate!

Эта концепция является критически важной для понимания, поэтому с самого начала постарайтесь это осознать и в дальнейшем, «рисуя» всегда помнить об этом.

Алгоритм создания векторной графики (рисования) в Adobe Animate

Алгоритм создания векторной графики следующий:

• сначала Вы создаете базовую форму (инструменты: Прямоугольник, Овал, Многоугольник, Ручка, Карандаш, Кисть, Текст и др.)
• затем Вы ее редактируете (инст.: Выделение, Частичное выделение, Лассо, Полигон, Волшебная палочка, Заливка, Градиентная заливка, Чернильница, Пипетка, Резинка), то есть изменяете положение ее границ, их вид/характер, цвет границ и самой формы и т.д.
• далее, если необходимо, Вы трансформируете эту форму (инст.: Свободная трансформация, панель Трансформация): увеличиваете/уменьшаете, сжимаете/растягиваете, поворачиваете, отражаете, скашиваете
• в конце, когда форма по Вашему мнению готова, если нужно, Вы можете создать ее точную копию (или несколько). Последнюю, в свою очередь, снова можно редактировать, трансформировать, копировать

Созданные формы можно объединять в группы, располагать в определенном порядке, выравнивать друг относительно друга, а также преобразовывать в символы для дальнейшего многократного использования в анимации. Кроме того, символы значительно уменьшают размер, создаваемой анимации/приложения, т.е. ее вес в байтах или килобайтах, что очень важно для публикации, особенно в сети интернет.

Когда подобные навыки рисования доведены до автоматизма, то не стоит вопрос как рисовать, а лишь что рисовать. Последнее же зависит от конкретной работы или задания.

Итак, Adobe Animate как редактор предлагает множество инструментов для работы с графикой, а их комбинация увеличивает Ваши возможности как рисовальщика бесконечно. Но как и в любом деле именно знание основ, правильное понимание базовых вещей позволит Вам начать быстро и профессионально работать в этой программе.

Горячие клавиши в Adobe Animate

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

В процессе знакомства с инструментами программы сразу старайтесь запоминать горячие клавиши, с помощью которых они активируются, тем самым Вы сэкономите огромное количество своего рабочего времени в дальнейшем!

Например, чтобы вызвать инструмент Прямоугольник (Rectangle) нужно нажать горячую клавишу R. Запомнив ее, старайтесь больше не обращаться к панели инструментов и Вы очень скоро привыкните активировать этот инструмент именно таким образом.

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

Пожалуйста, включите JavaScript, чтобы увидеть комментарии.

3 простых эффективных способа редактирования векторной графики в Adobe Animate CC

Из материала прошлого урока Adobe Animate CC Вы знаете, что создавать базовые формы в этой программе можно с помощью различных инструментов рисования: Прямоугольник (Rectangle Tool), Овал (Oval Tool), Ручка (Pen Tool), Карандаш (Pencil Tool), Кисть (Brush Tool) и других.

На этом уроке мы поговорим об их создании с помощью инструмента Прямоугольник, а также способах редактирования этих форм с помощью инструмента Выделение (Selection Tool).

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

Гарантирую, что этот урок многим откроет глаза на то, как можно быстро, но очень эффективно редактировать векторные изображения в Adobe Animate CC.

Создание базовых форм с помощью инструмента Прямоугольник

Создадим простую форму с помощью инструмента Прямоугольник. Для этого сначала его активируем — нажмем соответствующую кнопку в панели инструментов или горячую клавишу R.

Повторное нажатие клавиши R активирует другой инструмент в этой группе, а именно Прямоугольный примитив (Rectangle Primitive Tool). Таким образом, можно поочередно выбирать эти два инструмента с помощью горячей клавиши R. Об отличиях Прямоугольника и Прямоугольного примитива я расскажу в отдельном уроке.

Итак, после того как Вы выбрали инструмент Прямоугольник кликните левой кнопкой мыши в любом месте сцены и не отпуская ее потяните в нужном направлении.

Здесь возможны варианты:

• если не нажата ни одна вспомогательная клавиша (Shift, Alt или Ctrl), то Вы создаете произвольный прямоугольник, то есть значения ширины и высоты у него различны
• если нажата клавиша Shift, то Вы строите квадрат — стороны у этого прямоугольника равны
• если во время построения нажата клавиша Alt, то этот произвольный прямоугольник строится из центра, т.е. из того места куда Вы кликнули курсором мыши в начале построения
• если нажаты Shift + Alt, то Вы строите квадрат из центра

Запомните эти варианты построения, они Вам пригодятся в дальнейшем.

Чтобы удалить объекты на сцене выделите их с помощью инструмента Выделение и нажмите клавишу Delete.

Последовательность редактирования векторной графики

Итак, Вы создали графический объект — произвольный прямоугольник. Теперь, чтобы его переместить или трансформировать необходимо его сначала выделить с помощью инструмента Выделение.

Последовательность Ваших действий должна быть всегда такой (Основы рисования):

• сначала Вы создаете объект с помощью одного из инструментов рисования
• затем выделяете этот объект целиком либо его часть
• потом редактируете выделенное: перемещаете, поворачиваете, увеличиваете, уменьшаете, отражаете, скашиваете и т.п.

Способы выделения контура и заливки

Запомните, что в этом режиме рисования контур и заливка векторного графического объекта являются независимыми элементами, поэтому их можно выделять и редактировать отдельно.

Выделение заливки

Чтобы выделить заливку — кликните на ней один раз. В результате ее цвет изменится, она станет чуть темнее.

При увеличении можно увидеть, что она покрыта маленькими голубыми точками.

Теперь эту заливку можно перемещать, поворачивать, изменять ее размер.

Для отмены выполненных операций нажмите горячие клавиши Ctrl + Z нужное количество раз.

Выделение контура

Чтобы выделить контур целиком, на нем нужно кликнуть дважды, а затем редактировать.

Чтобы выделить часть (сегмент) контура — кликните на нем один раз.

Выделение целого объекта

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

Чтобы снять выделение объекта кликните в пустом месте сцены или на другом объекте.

Эти нехитрые правила выделения различных элементов форм постарайтесь сразу запомнить. Вы будете повторять подобные операции во время работы бессчетное количество раз.

3 способа редактирования векторной графики в Adobe Animate CC

Чтобы начать редактирование формы векторного объекта нужно активировать один из соответствующих инструментов. На этом уроке мы будем использовать Выделение (Selection Tool) — горячая клавиша V. После активации этого инструмента вид курсора на экране изменится — он превратится в черную стрелку.

Важный момент! Чтобы редактировать границы формы с помощью инструмента Выделение необходимо, чтобы форма была не выделена, а инструмент Выделение активен! Новички часто забывают об этом условии.

Редактирование с помощью других инструментов (Лассо, Волшебная палочка и других) всегда предполагает первоначальное выделение объекта или его части.

Существует всего три способа редактирования векторной формы с помощью инструмента Выделение.

Способ первый

Изменение положения угла. Если курсор мыши подвести к углу формы, то рядом с черной стрелкой появится небольшой прямой угол. Это значит, что можно изменять положение этого угла.

Если нажать левую кнопку мыши и потянуть, то этот угол начнет перемещаться вслед за курсором. Таким образом, Вы можете изменять положение любого угла формы.

Способ второй

Создаем новый угол у формы. Если курсор мыши подвести не к углу, а к границе формы в любом месте и нажать клавишу Alt или Ctrl, а затем потянуть, то этот отрезок или сегмент границы разделится на две части в точке касания границы курсором, образуя новый угол.

Таким способом можно усложнять форму до бесконечности, увеличивая количество ее углов.

Способ третий

Изменяем кривизну границы формы. Если курсор подвести не к углу, а к любому другому месту границы формы, то рядом с ним появится скругленная линия. Если теперь кликнуть мышью и потянуть, то можно легко менять кривизну этого отрезка границы.

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

Теперь закрепите полученные знания на практике.

Самостоятельная практика

Нарисуйте девять фигур как на рисунке выше, соблюдая следующие условия:

• Первое. Используйте три способа редактирования форм с помощью инструмента Выделение
• Второе. Применяйте только горячие клавиши для выбора инструментов рисования и редактирования.
• Третье. Пользуйтесь вспомогательными клавишами Alt, Shift и Ctrl при создании форм, если это необходимо.

В следующих уроках я расскажу Вам о других инструментах редактирования форм, а именно Частичное выделение, Лассо, Волшебная палочка и других.

Пожалуйста, включите JavaScript, чтобы увидеть комментарии.