Как пользоваться adobe animate
Уроки Adobe Animate CC, опубликованные в этом разделе сайта, предназначены, в основном, для начинающих.
Новичкам всегда трудно! Им нужно не только быстро освоить интерфейс программы, поскольку хочется поскорее создать что-нибудь свое, интересное и креативное, но и понять основы анимации, правила и принципы, на которых она базируется. А это не всегда так просто, как кажется!
Уроки Adobe Animate CC решают эту задачу оптимальным способом:
Во-первых , они публикуются не только в видео-формате, который, на сегодняшний день, стал относительным стандартом в обучении, но и в текстовом, учитывая потребности тех, кто легче воспринимает информацию с помощью текста и иллюстраций.
Во-вторых , рассказывать об интерфейсе программы, ее инструментах и возможностях гораздо интереснее, эффективнее и поучительнее, создавая реальные проекты, близкие к тем, что мы видим каждый день на страницах в интернете или в приложениях мобильных устройств. Именно поэтому в этих уроках Animate CC будет использован такой подход.
В-третьих , каждый урок (хотя и короткий по времени) решает одну, максимум две, практические задачи. Ведь для изучающих уроки Adobe Animate CC важно не только усвоить информацию, но и выработать необходимые навыки:
- Знать где расположены инструменты программы и их базовые свойства
- Знать горячие клавиши основных инструментов и операций
- Понимать разницу между различными видами анимаций (покадровая, classic, motion, shape tween) и быстро их создавать …
Этот список можно продолжать и дальше, но не буду Вас утомлять чтением, лучше используйте это время для реального обучения!
Да, и еще… надеюсь, что и для старых поклонников Adobe Flash в этих уроках найдется много полезного и интересного. Хотя Animate и является полноправным преемником Flash , но в нем много нового, отвечающего современным требованиям и трендам в создании мультимедийного интерактивного контента.
Сразу под этими строчками Вы видите проект, который мы с вами будем создавать с нуля. В процессе создания Вы познакомитесь с интерфейсом программы, основными инструментами рисования, способами анимации и настройками при публикации конечного продукта.
Как и для большинства операций в Animate СС (раньше этот продукт назывался Flash Professional), для анимации не требуется ActionScript. Однако если необходимо, можно создать анимации с помощью ActionScript.
Animate предоставляет несколько способов для создания анимации и специальных эффектов. Каждый метод предоставляет разные возможности по созданию привлекательного анимированного содержимого.
Animate поддерживает следующие типы анимации:
Воспользуйтесь элементами анимации движения, чтобы задать свойства объекта, такие как положение и альфа-прозрачность в одном кадре, а затем снова в другом кадре. Animate затем интерполирует значения свойств для кадров, находящихся в промежутке между указанными кадрами. Анимация движения полезна в тех случаях, когда анимация состоит из непрерывного движения или преобразования объекта. Анимация движения отображается на временной шкале как непрерывный диапазон кадров, который по умолчанию может быть выбран как один объект. Анимация движения — это мощное средство, которое несложно создать.
Классическая анимация похожа на анимацию движения, но более сложна в создании. Классическая анимация позволяет создавать некоторые анимированные эффекты, которых невозможно добиться с использованием диапазонов анимированных кадров.
Позы обратной кинематики (не используются в Animate)
Позы обратной кинематики позволяют растягивать и поворачивать объекты фигур, а также соединять группы экземпляров символов, чтобы перемещать их одновременно, обеспечивая тем самым естественность движения. После добавления костей к фигуре или группе символов можно изменить положение костей или символы в разных ключевых кадрах. Animate интерполирует положения в переходных рамок.
При анимации формы в отдельном кадре на временной шкале рисуется форма, а в другом кадре эта форма изменяется, либо рисуется новая форма. Animate затем интерполирует фигуры для промежуточных кадров, создавая анимацию одной фигуры, перетекающей в другую.
Такая техника анимации позволяет указывать различные объекты для каждого кадра временной шкалы. Эта техника используется для создания эффекта, при котором создается впечатление быстрого воспроизведения кадров фильма. Эта техника полезна при создании комплексной анимации, где графические элементы каждого кадра должны быть различны.
Частота кадров, скорость воспроизведения анимации, измеряется числом кадров в секунду (fps). При слишком низкой частоте кадров анимация выглядит так, как будто она останавливается и начинается, при слишком высокой частоте кадров происходит размытие деталей анимации. Частота кадров 24 кадра/сек является принятой по умолчанию для новых документов Animate, и обычно именно с такой настройкой достигаются лучшие результаты при отображении веб-страниц. Частота кадров стандартного видео также составляет 24 кадра/сек.
Сложность анимации и производительность компьютера влияют на плавность воспроизведения. Чтобы определить оптимальную частоту кадров, проверьте свои анимации на разных компьютерах.
Поскольку для всего документа Animate указывается одна частота кадров, задайте скорость до начала создания анимации.
Animate отличает анимацию движения от покадровой анимации на временной шкале путем показа различных индикаторов в каждом кадре с содержимым.
На временной шкале появляются следующие индикаторы содержимого кадра:
Диапазон кадров с синим фоном указывает на анимацию движения. Черная точка в первом кадре означает, что диапазону анимации присвоен целевой объект. Черные ромбы указывают последний кадр и другие ключевые кадры свойств. Ключевые кадры свойств — это кадры, содержащие изменения, явно определенные пользователем. Можно выбрать тип отображаемых ключевых кадров свойств, щелкнув диапазон анимации правой кнопкой мыши (Windows) или удерживая клавишу Command (Macintosh) и выбрав из контекстного меню пункт «Показывать ключевые кадры» > тип. По умолчанию Animate отображает все типы ключевых кадров свойств. Все остальные кадры диапазона содержат интерполированные значения, относящиеся к свойствам анимации целевого объекта.
Полая точка в первом кадре указывает на то, что целевой объект анимации движения удален. Диапазон анимации все еще содержит ключевые кадры свойств; ей можно присвоить новый целевой объект.
Диапазон кадров с зеленым фоном указывает на использование слоя позы обратной кинематики (IK). Слои позы содержат каркасы IK и позы. Все позы отмечены на временной шкале черными ромбами. Animate интерполирует положения каркаса в кадрах между позами.
Черная точка с черной стрелкой на голубом фоне на начальном кадре означает классическую анимацию движения.
Пунктирная линия означает, что классическая анимация движения прервана или неполна, например пропущен последний ключевой кадр.
Черная точка с черной стрелкой на светло-зеленом фоне на начальном кадре означает анимацию формы.
Черная точка означает отдельный ключевой кадр. Содержимое кадров светло-серого цвета после отдельного ключевого кадра остается точно таким же, без изменений. Эти кадры содержат вертикальную черную линию и пустой прямоугольник в последнем кадре диапазона.
Маленькая a означает, что кадру назначено действие на панели «Действия».
Красный флажок означает, что кадр содержит метку.
Зеленая двойная косая черта означает, что кадр содержит комментарий.
Золотая узловая точка показывает, что кадр является именованной меткой.
Каждый монтажный кадр в документе Animate может состоять из любого числа слоев временной шкалы. Для упорядочивания содержимого анимационных последовательностей и разделения анимационных объектов используйте слои и папки слоев. Упорядочивание по слоям и папкам предотвращает удаление, соединение или сегментацию перекрывающихся объектов. Чтобы создать анимацию, которая включает одновременное анимированное движение более одного символа или текстового поля, размещайте объекты на отдельных слоях. Можно использовать один слой как фоновый слой для размещения статичных рисунков, а также использовать дополнительные слои для каждого отдельного анимированного объекта.
При создании анимации движения Animate преобразует слой, содержащий выбранный анимированный объект, в слой анимации. Слой анимации обозначается специальным значком, расположенным рядом с названием слоя, на временной шкале.
Если в том же слое, где находится объект анимации, присутствуют другие объекты, Animate добавляет выше или ниже исходного слоя новые слои по мере необходимости. Любые объекты, которые существовали под объектом анимации на исходном слое, переходят на новый слой, лежащий под исходным. Любые объекты, располагавшиеся над объектом анимации на исходном слое, перемещаются в новый слой, который находится над исходным. Animate вставляет эти новые слои между любыми слоями, расположенными на временной шкале. Таким образом, Animate сохраняет исходный порядок наложения всех графических объектов в рабочей области.
Слой анимации может содержать только диапазоны анимации (смежные группы кадров с анимацией движения), а также статические или пустые кадры и ключевые кадры. Каждый диапазон анимации может содержать только единичный целевой объект и необязательную траекторию движения для целевого объекта. Поскольку рисовать в слое анимации невозможно, создайте в других слоях дополнительные анимационные или статические кадры, а затем перетащите их в слой анимации. Чтобы разместить кадровый сценарий в слое анимации, создайте его в другом слое, а затем перетащите в слой анимации. Кадровый сценарий может находится в кадре за пределами самого диапазона анимации. Обычно лучше размещать все кадровые сценарии на отдельном слое, который содержит только ActionScript.
Если в документе содержится несколько слоев, то отслеживание и редактирование объектов на одном или нескольких из них может быть затруднительным. Задача упрощается, если одновременно работать только с содержимым одного слоя. Слои, с которыми вы в данный момент не работаете, можно скрывать или блокировать, нажав на значок с изображением глаза или замка, который расположен рядом с названием слоя на временной шкале. Использование папок слоев способно помочь вам упорядочить слои в виде управляемых групп.
Animate автоматически перемещает объект на его собственный слой анимации после того, как к объекту применено свойство анимации. Также можно самостоятельно распределить объекты по их отдельным слоям. Например, можно самостоятельно распределить объекты при упорядочивании содержимого. Распределение вручную также может пригодится для применения анимации к объектам, для которых нужно точно контролировать перемещение с одного слоя на другой.
При использовании команды «Распределить по слоям» («Модификация» > «Временная шкала» > «Распределить по слоям») Animate размещает каждый выбранный объект на новом отдельном слое. Все невыбранные объекты (в том числе объекты в других кадрах) остаются в исходных слоях.
Команду «Распределить по слоям» можно применить к любому элементу в рабочей области, в том числе к графическим объектам, экземплярам, растровым изображениям, видеороликам и разбитым блокам текста.
О новых слоях создано с помощью команды «Распределить по слоям»
Новые слои, созданные в процессе операции «Распределить по слоям», называются по имени элемента, который содержится в каждом из слоев.
Новый слой, содержащий элемент библиотеки (такой как символ, растровое изображение или видеоклип), получает имя этого элемента.
Новый слой, содержащий именованный экземпляр, получает имя экземпляра.
Новый слой, содержащий символ из разбитого блока текста, именуется, как и этот символ.
Новый слой, содержащий графический объект (который не имеет имени), именуется как Слой1 (или Слой2 и т. д.), потому что графические объекты не имеют имен.
Animate добавляет новые слои под все выбранные слои. Новые слои размещаются сверху вниз в том порядке, в котором были первоначально созданы выбранные элементы. Слои в разбитом тексте размещаются в порядке символов, слева направо, справа налево или сверху вниз. Предположим, необходимо разделить на части текст FLASH и распределить его по слоям. Новые слои, которые называются F, L, A, S и H размещены по нисходящей, и самым верхним среди них является слой F. Эти слои будут размещены сразу под слоем, в котором содержался текст.
для тех, кто ищет курсы:
Войти в аккаунт
Чтобы воспользоваться всеми функциями сайта, вам необходимо зарегистрироваться/войти в свой аккаунт на сайте. Выберите вашу соцсеть для входа:
Если вы организация, проводящая курсы, то регистрация происходит по этой ссылке.
Уроки по Adobe Animate для начинающих: бесплатные видео для домашнего обучения
Adobe Animate CC простой в использовании программный продукт для рисования векторной графики и ее анимирования. В нем ограниченное количество инструментов для создания графики, но возможно импортировать контент из Photoshop, Fireworks. Будет интересна начинающим аниматорам, любителям 2D мультфильмов, дизайнерам игровых персонажей.
Все Курсы Онлайн подобрали лучшие бесплатные уроки по Adobe Animate CC, которые дадут представление об основах работы и возможностях программы.
Введение
Видео урок познакомит с интерфейсом программы и продемонстрирует три способа создания простой анимации движения. Преимущество ее в поддержке xml 5 canvas, что дает возможность отображать проекты на любом устройстве. Рабочая область представляет собой поле для разработки сцен и вкладки с наборами инструментов, которые двигают и настраивают по желанию. Снизу находится временная шкала, на которой настраивается передвижение, фиксируется положение и интервал. Вкладки открываются через меню или нажатием горячих клавиш. Копии созданных объектов хранятся в библиотеке, и их можно использовать, даже если они были удалены.
Основы анимирования
Из лекции узнаете о базовых приемах, используемых в работе. В любом перемещении есть начальное и конечное положение. Именно они задаются на временной шкале для настройки движения. Выбирают соответствующие кадры, где будет начало и конец. Далее выбирают анимируемый элемент и строят траекторию его перемещения. Настраивают скорость выхода, замедлив или ускорив ее. Каждая часть редактируется самостоятельно, так как в программе предусмотрена работа со слоями.
Основные приемы
Видео познакомит с историей развития программы, ее функциями и научит построению небольшой анимированной картинки. По сути, вся работа строится на базе основного кадра с размещенным объектом, а затем задается момент, когда его свойства начинают меняться. На шкале он выглядит как прямоугольник с черной точкой. Прямоугольник без точек обозначает промежуток, когда свойства остаются неизменными. Прямоугольником с белой точкой отмечается пустая сцена. В программе делается два типа анимации: кадр за кадром и движение. Первый вариант подразумевает прорисовку покадровых изменений изображения, которые создают иллюзию перемещения. Второй способ строится на задании позиции предмета в начале и конце движения и промежуток времени, за который он должен пройти это расстояние. В сцене встречаются два типа изображения: векторный рисунок (делается с помощью) и символ (полностью сгруппированный и редактируемый целиком).
Мультяшный персонаж
Урок по созданию персонажа будет полезен тем, кто хочет сделать мультфильм или игровых героев. Для начала открывают в программе Action Script и задают разрешение рабочего поля. Это необходимо для правильного отображения будущих объектов. Необходимо загрузить рисунок, эскиз. Затем фигуру обводят по контуру с помощью карандаша. Для последующего оживления героя необходимо создавать каждую часть в новом слое. На таймлайне выделяют область для будущих сцен, и делают копии их содержимого из предыдущей сцены в следующую. После этого в главном кадре можно делать любые изменения.
Сегодня мы расскажем, как в Playrix создаются анимации в Animate (Flash). Статья посвящена несложным трюкам, которые можно использовать как базу для эффектов посложнее. Для профессионалов она, возможно, и не будет откровением, но начинающие флешеры (или анимейтеры, если хотите) наверняка найдут для себя что-нибудь интересное. Эти приемы точно сэкономят вам уйму времени в сложных задачах.
Несколько слов о флеше и других программах. Вопросы, наверняка, возникнут, ведь Flash «хоронят» уже который год, а он до сих пор никуда не исчез.
1. Почему мы работаем в Animate, а не в Spine?
- Технология уже годами обкатана, изучена и прочно вписалась в рабочий процесс. Как программа для игровой 2D-анимации флеш жив и действительно хороших альтернатив пока нет.
- Для Spine нужен дополнительный этап работы – риг. Это неоправданно для объектов или персонажей, у которых одна-две анимации (например, декорации Fishdom или персонажи в диалогах Township).
- Производительность. Spine тут проигрывает даже с хорошим ригом, в котором нет ничего лишнего, минимум костей и простые меши.
- Нельзя что-нибудь дорисовать на ходу. Во флеше мы это делаем регулярно и такой подход отчасти напоминает классическую рисованную анимацию – можно «прорисовать» практически любую позу или нужный эффект тщательнее, ригом мы не ограничены.
- Spine ситуативен. Отлично подходит для персонажной анимации «2D строго вид сбоку» и всевозможных «оживших портретов» – которые и анимацией-то можно назвать с натяжкой. Кроме того, если нужно повернуть сложный объект больше, чем на 20-30 градусов, колдовать в Spine нужно еще сильнее, чем во флеше.
Как видите, Spine точно не «убийца флеша», но в ряде случаев мы все-таки используем и его.
- И вновь дело в производительности, по этому критерию флеш выигрывает. 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).
Где можно применять такой подход? В зацикленных плавных эффектах – огне, волнах и т.д. Структура везде будет разная, сохранится только общий принцип рассинхронизации клипов.
По сюжету краб выбегает из-за шара, затем останавливается перед ним и стучит клешней. Затем снова убегает за шар – таким образом совершив полный оборот. Анимация непростая, «запчастей» у краба несколько десятков, поэтому для такой задачи просто необходима хорошая организация структуры.
На основном таймлайне всего несколько символов (рис.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 – то же самое, что и предыдущий скрипт, только с пиксельной точностью, без сглаживания. Подходит для мелких объектов.
Сжатие/растяжение таймлайна.
Для этого есть отличный скрипт. Ссылка на страницу разработчика. Мы его используем регулярно. Принцип работы предельно прост – выделяем нужный участок фреймов на таймлайне, запускаем скрипт, задаем коэффициент для сжатия или растяжения. Готово.
На этом уроке Adobe Animate СС Вы узнаете, что такое рабочее пространство программы , как его быстро изменять, сохранять и удалять. Уделим большое внимание панелям, их настройке и различным манипуляциям с ними.
Рабочее пространство Animate — общая информация
Итак, перед нами интерфейс программы, который состоит из нескольких ключевых элементов.
Сцена — это пространство заданного размера, в котором будет воспроизводиться, создаваемая нами анимация. Другими словами, это то, что будет видеть зритель. Объекты за пределами сцены показываться не будут, поэтому это место (своеобразное закулисье) чаще всего используется для временного хранения графики, текстов и других объектов в период создания анимации.
Слева от сцены — панель Инструментов , с помощью которых мы будем эту графику создавать, редактировать и помещать на сцену. Этих инструментов много и они различны по своему характеру, поэтому для удобства разбиты на группы по функциональному сходству.
Над сценой находится Шкала времени (Timeline), отвечающая за показ, созданной нами графики во времени. Эта панель состоит из кадров, которые для облегчения восприятия пронумерованы с определенным интервалом (1, 5, 10, 15, 20 . ). В левой части этой панели отображаются слои, на каждом из которых можно размещать различные элементы графики, чтобы отдельно применять к ним анимацию.
Справа от сцены размещена панель Свойства (Properties), которая поможет нам настраивать параметры активного элемента, инструмента или сцены. Ей будет посвящен отдельный урок.
Несколько панелей находятся в свернутом виде: Цвет (Color), Образцы цветов (Swatches), Выравнивание (Align), Информация (Info), Трансформация (Transform), Библиотека (Library), Предварительные настройки движения (Motion Presets).
Как открыть/закрыть панель в Animate
Все доступные панели можно увидеть в выпадающем списке, выбрав в Главном меню программы — Window (Окно).
Панели, которые в данный момент находятся в развернутом виде (видны на экране) отмечены галочками. Справа от названия панели написаны горячие клавиши для ее вызова с помощью клавиатуры.
Чтобы открыть нужную Вам панель, кликните на ее названии. Пусть это будет панель Actions . Такая панель называется плавающей, потому, что не прикреплена ни к одной группе.
Чтобы закрыть — нажимаем на «крестик» в правом верхнем углу открытой панели.
3 состояния панелей
Любая панель в Adobe Animate может находится в одном из трех состояний:
- скрытом (отсутствует в рабочем пространстве)
- свернутом (показана на экране в виде пиктограммы)
- развернутом (в ней отображаются параметры, которые можно изменять или выбирать)
Например, панель Actions сейчас отсутствует на экране, т.е. она скрыта. Чтобы ее открыть нажмите F9 . Нажмите эту клавишу еще раз, чтобы закрыть панель.
Панель Цвет — свернута. Мы видим только ее пиктограмму. Чтобы открыть — кликните на ней. Чтобы закрыть — снова кликните на пиктограмме, либо в другом месте экрана.
Панель Свойства находится в развернутом виде и нам доступны для настройки параметры активного в данный момент элемента — сцены. Поэтому мы можем корректировать ее размер, цвет, частоту кадров создаваемой анимации и другие характеристики.
Как изменить размеры панели и ее положение на экране
Физический размер панели можно изменить, если навести курсор на ее границу (при этом вид курсора изменится на двунаправленную стрелку) и потянуть в нужном направлении.
Чтобы изменить положение самой панели на экране — кликните на ее названии и, не отпуская левую кнопку мыши, перетащите в нужном направлении.
Как присоединить панель к группе
Чтобы присоединить панель к другой группе панелей или создать новую группу — потяните ее в нужную сторону, пока не появится голубая линия (вертикальная или горизонтальная), после этого отпустите кнопку мыши.
Голубая линия служит указателем того места, к которому панель будет прикреплена.
Чтобы лучше понять как это работает, поупражняйтесь в перемещении панелей из одной группы в другую и создании новых групп. Не бойтесь экспериментировать! Рабочее пространство Adobe Animate можно в любой момент вернуть в исходное состояние. Как это сделать Вы узнаете ближе к концу этого урока.
Группу панелей можно сворачивать и разворачивать, кликая на пиктограмме со стрелками наверху группы.
Давайте, для практики, переместим Библиотеку в ту же группу, где находится панель Свойства .
Положение панели в группе тоже можно менять простым перетаскиванием.
Чтобы удалить группу, кликните на пиктограмме в правом верхнем углу группы и в выпадающем списке выберите самый нижний пункт Close Group (Закрыть группу).
Как сохранить рабочее пространство Adobe Animate CC
Измененную конфигурацию рабочего пространства можно сохранить. Для этого:
- в правом верхнем углу окна Adobe Animate кликаем на кнопке с названием активного, в данный момент, рабочего пространства
- в выпадающем списке выбираем New Workspace (новое рабочее пространство)
- в поле для ввода пишем подходящее название, например, Уроки Animate
- нажимаем ОК
Теперь мы можем в любой момент вызывать это рабочее пространство, как и любое другое из списка, кликнув на его названии.
В Adobe Animate встроены по умолчанию следующие рабочие пространства:
- Animator
- Classic
- Debug
- Designer
- Developer
- Essentials
- Small Screen
Каждое из них имеет свои особенности — при вызове отображаются именно те панели, которые чаще всего используются при выполнении специальных задач (рисование, разработка, анимация и др.).
Как удалить рабочее пространство
Если Вы в какой-то момент захотите удалить, созданное Вами рабочее пространство, тогда:
- выберите в списке названий: Delete Workspace (удалить рабочее пространство)
- в появившемся диалоговом окне выберите нужное название
- нажмите кнопку ОК
- появится предупреждение о том, что это удаление отменить нельзя, если Вы согласны — нажмите Yes (Да)
Рабочие пространства, встроенные в Adobe Animate, удалить нельзя!
Как восстановить рабочее пространство после изменений
Если в результате работы, перемещая панели, Вы изменили конфигурацию сохраненного рабочего пространства, то быстро вернуть его к исходному можно с помощью кнопки Reset с названием рабочего пространства.
Дополнительная информация
Если у Вас монитор небольшого размера и Вы хорошо знаете горячие клавиши, то для удобства в работе (например, в режиме обычного рисования) все панели можно убрать с экрана. Для этого воспользуйтесь горячей клавишей F4 .
Итак, из материала этого урока Вы узнали, что настройка рабочего пространства Adobe Animate дело несложное. Вы легко можете:
- скрывать те панели, которые Вы не используете (или используете редко)
- сворачивать их до пиктограмм, значительно экономя место на экране
- разворачивать, если Вам нужно сделать определенные изменения в настройках активного элемента (графики), инструмента или сцены
- сохранять созданную конфигурацию для дальнейшего использования в работе
- удалять рабочее пространство Adobe Animate, если оно больше не нужно
На следующем уроке я Вам расскажу об инструменте рисования: Прямоугольник . Вы узнаете как с помощью такого, на первый взгляд, простого инструмента, можно быстро рисовать довольно изощренную графику, зная всего несколько хитростей работы с ним.
Более 7000 человек уже получили!
Не забудьте подтвердить подписку и проверить почтовый ящик
Отзывы
«По AS 3.0 вышло уже немало курсов, но по степени доступности для пользователя, не имеющего навыков в программировании, аналогов курсу Валерия я еще не видел. Доступность и в плане бесплатности курса и в плане понимания его.» — Евгений
Рекомендую
- Этот сайт размещен на хостинге компании «Бегет».
- Если Вы ищете хостинг с отличным соотношением цена/качество, то я рекомендую именно его.
Помощь сайту
- Уроки Вам помогли? Внесите вклад в развитие сайта. Перечислите любую сумму на один из кошельков:
- R861898673040
- 410011923517064
- Деньги пойдут на создание уроков, курсов, развитие сайта и оплату серверов. В примечании к платежу укажите Ваш email.
- Спасибо всем, кто уже внес свой вклад!
- Валерий Медведев
Об авторе
Меня зовут Валерий Медведев. C 2008 года разрабатываю веб-приложения с использованием Flash-технологии. В 2011 решил начать делиться своими знаниями с другими и создал этот сайт. ActionScript 3.0 — это по сути «движок флеша», зная который можно создавать как простые, так и совершенно удивительные вещи. Если у Вас есть желание познакомиться поближе или стать профессионалом в этой области, то на этом ресурсе Вы найдете много полезных материалов особенно для начинающих программистов. Бесплатный курс «ActionScript 3.0 Уроки для новичков» обеспечит Вам быстрый старт, а курс «Основы анимации в AS 3» познакомит с более продвинутыми концепциями и техниками. Начните изучать ActionScript 3.0 прямо сейчас!
Читайте также: