Как рисовать флеш анимации
Как создается флеш анимация для сайта?
Технология Flash
Область современного применения Adobe Flash :
По сравнению с обычными ресурсами на основе html флеш-сайты обладают некоторыми особенностями, ограничивающими их применение. Сюда можно отнести большую стоимость разработки, требовательность к серверным ресурсам, долгое время загрузки при медленном соединении с интернетом и некоторые другие аспекты:
Основы и инструментарий для разработки Flash
Для создания флеш анимации чаще всего используется традиционный инструментарий от Adobe :
В основе разработки интерактивной анимации на флэш лежит векторная графика. Именно благодаря этому удалось реализовать поддержку мультимедийной платформы и независимость качества анимации от разрешения экрана.
Размер файла флэш приложения одинаков для всех пользователей независимо от технических характеристик экрана ( разрешения ).
К недостаткам технологии можно отнести следующие моменты:
Обзор стороннего программного обеспечения для создания Flash
После инсталляции заходим в дружественный интерфейс программы. К сожалению, после блуждания по всем закоулкам переключателя языка интерфейса мы не нашли.
Для того чтобы понять, как сделать флеш анимацию в этом приложении, воспользуемся встроенными шаблонами. Диалоговое окно « New From Template » появляется сразу после запуска программы. Кроме того его можно вызвать через пункт главного меню « File ». Среди предлагаемых вариантов мы выбрали создание баннера:
В следующем окне мастера из выпадающего списка нужно выбрать шаблон, по которому будет происходить создание анимации. Под ним находится небольшой фрейм, в котором проигрывается выбранный шаблон:
На следующих этапах нужно задать размеры баннера и ввести 5 фраз текста, которые будут проигрываться в анимации. Кроме того необходимо указать адрес ресурса, на который пользователя приведет клик по баннеру:
После компиляции проекта и закрытия окна мастера можно просмотреть получившийся ролик во встроенном проигрывателе. Для этого нужно нажать на зеленую стрелку вверху:
После закрытия проигрывателя давайте более подробно изучим интерфейс приложения. Обратите внимание, что он состоит из двух основных окон: верхнее предназначено для редактирования временного промежутка ролика, а нижнее представляет собой обычный графический редактор. Каждый из элементов расположен на отдельном слое, который доступен для изменения с помощью стандартных инструментов, расположенных на боковой панели:
Созданную флеш анимацию для сайта можно опубликовать. Способ публикации можно выбрать, нажав вверху на кнопку « Publish ». Предлагается на выбор три варианта, в том числе и вставка в html код. Детальная настройка этого процесса доступна в отдельном окне « Publish Settings »:
Для ознакомления предоставляется бесплатная версия программы сроком на 30 дней. Полная стоимость Sothink SWF Quicker составляет 85$:
Ближайшие конкуренты приложения:
В заключение хотелось бы отметить, что выбор программы является важным, но не основным аспектом. Для создания Flash вам потребуется не только проверенное и надежное приложение, но и знание основ веб-программирования. Так что для начала нужно « приобрести » нужный багаж знаний, а уже потом заняться выбором специализированного программного обеспечения.
Создание анимации в программе Flash 5
Для любого инструмента есть свой набор параметров (OPTIONS), двойной щелчок на конкретную опцию позволит модифицировать параметры. Например, для прямоугольника меняется степень округления углов.
Применение пера позволит создать любую фигуру их линий. Изменить форму линии можно инструментом SUBSELECT (белая стрелка справа)
Заливка контура, заливка фона
Создайте карандашом две фигуры. Залейте их. Заливка имеет опции: замкнутой фигуры и далее по возрастанию степени разомкнутости.
Шапочка создана пером.
Для создания первых мультиков достаточно знать 3 инструмента : карандаш, кисть заливка.
Карандаш имеет 3 опции: рисование прямыми линиями (Straighten), скругленные линии (Smooth), точно повторяющие движение мышки (Ink).
Для создания бабочки можно нарисовать форму карандашом, затем выбрать инструмент ARRROWS (черная стрелка), поместить курсор рядом с контуром (появится дуга) и поменять форму. Причем, не важно, когда вы зальете контур: до изменения формы или после.
Изображение сверху заливки и контура; под контуром; под заливкой и контуром;
размер и форму. Помните, что все нарисованное одним цветом, сливается в одну фигуру. И это хорошо.
Линией создайте треугольник по образцу, залейте его градиентной линейной заливкой, разрежьте треугольник линиями по образцу, перетащите мышкой раздельные части фона и сложите из нее фигуру по образцу.
Этот урок назовем “Кот в мешке”.
Этот урок назовем “Вид из окна”.
Скорректируйте заливку: выберите масштаб 25%, смещая центр и увеличивая размер заливки, добейтесь нужного результата.
В окне CHERACTER установить шрифты (FONT) размер 24р жирность, цвет синий, межбуквенные интервалы 7.
Каждую букву повернуть перпендикулярно касательной к дуге.
Удалите круг, на его месте создайте прямоугольник другого цвета.
2) Уменьшите по времени временной интервал (потяните влево последний ключ).
3) Передвиньте вправо прямоугольник в последнем кадре. Проиграйте.
Анимация изменения формы. Трансформация текста (смотри файл Приложение11.swf).
Анимация изменения формы. Покадровые изменения. (смотри файл Приложение12.swf).
1) Создайте кистью человечка.
Сделайте глазки и ротик верхней резинкой.
Создавайте ключевые кадры клавишей F6 через каждые 10 секунд. И на каждом этом ключевом кадре увеличивайте в размере человечка, потянув за правый верхний угол.
Когда вы сочтете нужным, начинайте поднимать ручку, лучше, если выделите часть руки и повернете ее.
2) Анимация изменения формы.
Анимация изменения формы. Покадровые изменения (смотри файл Приложение13.swf).
— Создайте рыбку, двигающую плавниками по образцу.
Рекомендации: фон, туловище, плавники должны быть на отдельных слоях. Каждый слой нужно разумно переименовать.
-Дополнительно создайте фон морского дна, поместите на задний план.
Урок3. Анимация движения
Вы увидите, что экран несколько шире. Поэтому на отдельном слое создайте две стены, от которой шарики и будут отскакивать. Обязательно защитите этот слой от изменения.
Продолжите анимацию отскакивающего мячика от потолка и от левой стены.
Создайте объект “Машинка”.
2)Перейдите в режим экрана (Screen).
5)Приступим к анимации движения по этому же пути другой машинки.
-Создадим слой “Машина желтая”.
-На временном кадре 5 для слоя “Машина желтая” создадим кадр F6.
Урок 4. Создание маски
-Импортируйте картинку, и если под рукой нет карты земного шара, подойдет любое изображение. Позаботьтесь о состыковке двух картинок, совмещенные, они должны создавать впечатление единой картинки.
Для достижения впечатления объема создайте верхний слой под названием Сфера такого же размера, что и маска. В окне MIXER выберите радиальную заливку с 4 компонентами.
Сместите центр заливки.
Проиграйте фильм. Чем меньше масштаб изображения, тем быстрее будет вращение.
Крутейший курс по анимации в Flash: как создать свой мультик
Представляем вашему вниманию курс, который будет невероятно полезным для всех, кто интересуется классической анимацией. Курс разбит на 6 частей. В итоге вы поймете, как делать мультики в Adobe Flash.
Уроки подойдут как для начинающих, так и для тех, кто в теме
Вот что в итоге получится:
Курс по созданию мультика во Флеш:
1. Настройка проекта
2. Работа с задним фоном
3. Риггинг
4. Анимация лица и мимики
5. Анимация всего тела
6. Подготовка и публикация проекта
Дополнительные файлы к проекту:
Полезный материал по теме:
Как рисовать в Adobe Animate CC (Adobe Flash Professional CC). Часть 1
Более семи лет я удалённо работаю с зарубежными заказчиками из США, Канады, Австралии, Германии и других стран. Рисую графические ресурсы и анимацию для игр в Adobe Animate CC. Раньше редактор назывался Adobe Flash Professional CC.
На старом блоге я начинал похожий цикл уроков, но вместо того, чтобы продолжить там, я решил переписать всё заново, с тем, чтобы поделится новым опытом.
Зачем нужен ещё один цикл уроков про рисование в Adobe Flash? Я много лет занимаюсь этим и считаю, что мой опыт может быть полезен начинающим. Особенно тем, кто раньше не рисовал с помощью графического планшета. Если вы хорошо рисуете на бумаге, но никогда не рисовали на компьютере, то мне точно есть, что вам рассказать.
А для тех, кто не умеет рисовать и на бумаге, постараюсь пояснить, как можно развивать этот навык в целом, без привязки к графическому редактору: построение перспективы и композиции, подбор цветов, затенение и другие темы.
Выбор графического планшета
Неважно, умеете ли вы рисовать, вам понадобятся инструменты: устройства и программы. Начнем с аппаратной части. Компьютер у вас уже есть, но к нему еще нужно подключить графический планшет, который и даст нам возможность рисовать на виртуальном полотне, которое существует в оперативной памяти. Другими словами это еще одно устройство ввода информации, подобно мышке или трекболу. Но у планшета есть преимущества, которые позволяют рисовать словно на бумаге. Это чувствительность к нажатию и похожая на ручку форма манипулятора.
Существует много производителей графических планшетов: Wacom, Genius, Huion. Я сталкивался только с первыми двумя. Всего я испробовал уже четыре планшета от Wacom и один от Genius, когда начинал. Я настоятельно рекомендую Wacom — это высокое качество за умеренную цену.
Если нет денег, не покупайте Genius, возьмите самый доступный маленький подержанный Wacom Bamboo Pen. Я использовал практически такой же, модель Wacom Bamboo Pen&Touch S CTH-460. Критических проблем за семь лет использования не было, хороший аппарат, чтобы начать. Если вы можете выделить больше денег, то берите модель покрупнее. Я использую Wacom Bamboo Fun Pen&Touch M CTH-670.
Что значят цифры и буквы в названиях моделей Wacom
Поясню, что значят некоторые цифры и буквы в названии, чтобы вам было проще ориентироваться в модельном парке компании.
Размер графического планшета
Когда вы рисуете, активная зона рабочей области очень маленькая. Другими словами стилус постоянно скользит в радиусе маленького круга. Этот круг может немного перемещаться. Со временем образовывается пятно, которое видно, как плотное скопление микроцарапин. Оно показывает, что вы практически не используете периферию устройства, всё происходит по центру.
Можно предположить, что большой графический планшет не нужен, так как вы никогда не будете использовать всю его рабочую область, а пятно активности будет такого же размера, как и на меньшей модели. Но это не так.
Когда вы работаете на планшете, его рабочая область проецируется на всю ширину монитора. Поэтому, чем больше планшет, тем точнее вы можете наносить мазки. И наоборот, чем больше монитор и чем меньше планшет, тем сложнее и дискомфортнее вам будет рисовать. По опыту могу сказать, что после перехода с размера S на M при работе на 29-дюймовом ультрашироком мониторе, мне стало работать комфортнее на 25-30%. Мне требуется меньше усилий, чтобы нарисовать сложный контур, в целом взаимодействие ощущается более мягким и приятным.
Графические планшеты большего размера должны обеспечить еще более комфортные условия работы, но мне не приходилось работать на L-моделях, могу лишь предположить.
Отличия любительских и профессиональных планшетов Wacom
Покупая про-модель вы получаете беспроводное устройство, изготовленное из более качественного пластика с 2048 уровнями чувствительности к нажатию против 1024 у моделей подешевле, красивейшим дизайном, дополнительными органами управления в виде кнопок и сенсорного кольца. Меня полностью устраивают младшие устаревшие модели серии Bamboo, которые сняты с производства. Разница по стоимости любительской и про-версий составит более двух раз. Таблица расставит все по полочкам:
Настройка Wacom Bamboo Pen & Touch M CTH-670
| Перечень моделей | Ссылка на драйвера |
|---|---|
| Intuos CTL-4100/6100/4100WL/6100WL Intuos Pro PTH-451/651/660/851/860 One CTL-471/671/472/672 Intuos CTL-480/490/680/690 Intuos CTH-480/490/680/690 Intuos 5 PTK-450/650 PTH-450/650/850 Intuos 4 PTK-440/640/840/1240/540WL | Windows macOS |
| Bamboo Pen&Touch CTH-460/470/471/660/661/670 Bamboo Pen CTL-460/471 | Windows macOS |
После подключения планшета и установки драйверов запускаем приложение Wacom Preferences, которое можно найти через поиск Windows (Win + S) или в панели управления.
Основные настройки планшетов компании не отличаются, похожим образом настраиваются как любительские, так и профессиональные модели.
На вкладке Tablet можно настроить планшет под правую и левую руку, а также назначить действия для клавиш. Для начала установите их в Disabled, со временем можно будет назначить горячие клавиши.
На следующей вкладке Pen находятся важные параметры:
В разделе Screen Area выбираем Monitor, если у вас несколько мониторов и указываем основной. Если монитор один, то оставляем All Screens
В разделе Scaling обязательно ставим галочку напротив Force Proportions, чтобы рабочая область не растягивалась при проецировании на экран. В этом случае часть рабочей области планшета не будет использоваться, но у нас будут нормальные пропорции 1 к 1. И если вы нарисуете круг, то на экране он отобразится, как круг, а не вытянутый эллипс.
Обязательно ставим галочку напротив Use Windows Ink, чтобы работала чувствительность к нажатию.
На следующей вкладке Touch Options снимаем галочку напротив Enable touch input, чтобы переключить планшет в обычный режим.
На остальных вкладках у меня всё отключено, так как я не использую ни жесты режима Touch, ни фирменное выпадающее меню. На этом настройка графического планшета закончена.
Animate CC или Flash Professional CC?
Adobe Animate CC — это ребрендинг Adobe Flash Professional CC, в программу добавили несколько нововведений. Ещё со старым названием завоевала огромную популярность среди художников, аниматоров и разработчиков инди-игр. Векторные принципы построения позволяют создавать спрайты для любого разрешения. Для рисования подойдёт любая версия, какую сможете достать. Инструменты рисования не меняются уже много лет, а лишь незначительно улучшаются. Я буду использовать Adobe Animate CC, но всё написанное будет применимо и для старых версий Adobe Flash Professional. К слову, в последнее время компания Adobe перешла на модель помесячной подписки для получения доступа к своим продуктам вместо дорогостоящего одноразового лицензирования. Сейчас цена за использование Adobe Animate CC составляет 20 долларов в месяц.
Первый запуск Adobe Animate CC
После загрузки создаём новый файл и выбираем тип Action Script 3.0. В этом же окне можно указать параметры сцены:
Эти настройки можно изменить и после создания документа. Для этого нужно выбрать инструмент Selection Tool (горячая клавиша V), открыть окно Properties и развернуть раздел Properties. Если вы не можете найти это окно, то воспользуйтесь меню Window → Properties или сочетанием клавиш Ctrl + F3.
Настройка горячих клавиш
Чтобы повысить эффективность работы нужно использовать горячие клавиши по максимуму. На первых этапах это требует привыкания и запоминания новых комбинаций клавиш, но в дальнейшем обеспечивает солидный скачок в вашей эффективности. Я переопределил большинство горячих клавиш таким образом, чтобы они находились в правой стороне клавиатуры. Почему именно в правой? Дело в том, что я левша и, соответственно, мне так удобнее. Если вы правша, то вам придётся придумать свою схему. Кроме того, я использую Rapoo E9050 и Apple Wireless Keyboard, которые выполнены в форм–факторе клавиатур для ноутбуков, поэтому если вы используете полноразмерную, то, опять же, потрудитесь и придумайте свою схему — это окупится массой сэкономленного времени — а мою схему рассмотрите, как пример.
Поймите идею: сгруппируйте основные команды на удобной стороне клавиатуры, чтобы обеспечить быстрый доступ без постоянно изменения положения руки. Большую часть времени она должна лежать на одном месте, лишь пальцы «гуляют» в небольшом радиусе, нажимая кнопки. Конечно, останутся и команды, которые требуют смены положения, но их подавляющее меньшинство. Вот моя схема:
Не пытайтесь разобраться в приведённых в таблице командах, все они будут пояснены в следующих уроках. В дальнейшем, когда начнёте активно их использовать, скорее всего, вы переопределите их по несколько раз, пока не найдёте самый удобный вариант.
Настройка кисти
Brush Tool (горячая клавиша B) — инструмент кисть, самый используемый при рисовании. Настройки сосредоточены в двух окнах:
Настройка кисти закончена, давайте нарисуем что–нибудь.
Рисуем с помощью кисти
Подберите подходящий цвет с помощью окна Color (Ctrl + Shift + F9), выберите инструмент кисть (B) и начните с одного длинного штриха с небольшим усилием, чтобы очертить будущую фигуру. Дальше обведите полученный контур, чтобы сгладить все неровности — кисточка готова.
Обратите внимание, что в примере выше было использовано лишь три штриха. Вам нужно стремиться делать штрихи средней длины, чтобы рука не отрывалась от планшета. Стараться делать много мелких штрихов неправильно, так как полученный контур будет негладким и с большим количеством лишних точек.
Adobe Animate CC работает на векторных принципах. Все объекты описываются математически и могут масштабироваться без потери качества в отличии от растрового подхода. Это позволяет выполнять манипуляции с векторными объектами, чего мы никогда не сделаем с такой же легкостью в растровом редакторе. Мы можем сглаживать и упрощать контуры, выравнивать кривые линии, изменять пропорции и деформировать графические объекты без потери качества. Каждый штрих автоматически преобразовывается в математические кривые, которые мы можем точно подгонять и изменять.
Чтобы убедится во всём вышесказанном, активируйте инструмент Subselection Tool (горячая клавиша A) и выберите только что нарисованную кисть. Теперь вы можете разглядеть точки векторного контура и даже изменить их.
Заключение
Сегодня мы настроили Adobe Animate CC и готовы к началу рисования. Попрактикуйтесь немного прежде, чем мы продолжим. Научитесь рисовать простые геометрические фигуры без искажений, попробуйте различные цвета и настройки кисти (поэкспериментируйте с параметром Smoothing).
Рисование
Как быстро нарисовать в векторе циркулярку для игры (с помощью Pattern Brush в AI)
Небольшой лайфхак, как быстро нарисовать циркулярку для игры.
1.Предварительно ищем, как выглядит этот агрегат (например, на shutterstock), и решаем, какой формы зубчики нам выбрать. А есть из чего выбирать:)
Рисование рук
Кисть, наверное, одна из самых сложных частей тела для рисования и доставляет немало хлопот иллюстраторам. Вспомню опять же книжку Яны Франк «Тайные знания коммерческих иллюстраторов», где она признается, что у многих художников на рисование рук уходит половина времени, отведенного для создания эскиза. Художник Густаво Фернандес как-то сказал, что можно сделать хорошую карьеру только за счет умения хорошо и выразительно рисовать руки.
Композиция. Правило золотого сечения для художника
Выложу здесь кусочек из книжки Яны Франк «Тайные знания коммерческих иллюстраторов», где описано Правило золотого сечения. Это золотое правило используют все художники, но люди, у которых нет академического образования, могут и не знать о нем.
Немного о самой книге: автор раскрывает все тонкости работы коммерческого иллюстратора, с чего начать, как составить портфолио, где найти клиентов и как с ними работать, а также делится техническими хитростями и дает пошаговые рецепты создания качественных изображений.
Яна рассказывает, почему так важно найти свой собственный стиль рисования, почему одни иллюстраторы рисуют мало, а получают много, а другие – наоборот.
Книга написана понятным языком, без лишних заумностей, легко воспринимается, я ее перечитывала дважды. Рекомендую всем, кто интересуется рисованием.
Особенности рисования глаз мульт-персонажам. Типы глаз и характер
Перевод из книги Christopher Hart «How to Draw New Retro-Style Characters».
Поскольку глаза самая выразительная часть лица, выбор верного стиля в рисовании глаз очень важен.
Автор утверждает, что рисуя лицо, начинает с глаз. Если они не получаются, стирает и начинает заново. И это продолжается до тех пор, пока не сможет прочувствовать характер персонажа. Невозможно рисовать позу персонажа и другие части тела, не получив нужные глаза. Потому что глаза работают в первую очередь.
Время, потраченное на глаза, не потрачено впустую. Все ваши усилия будут полностью вознаграждены. Стиль очень важен в рисовании мультяшных глаз, и это в первую очередь касается женских глаз.
Как рисовать фоны для игр и мультиков
Как создавать фоны для флеш-игр – есть отличный доклад здесь. Автор очень хорошо структурировал информацию, затронул вопросы выбора цвета, формы, организации графических элементов в фоновом рисунке. Очень советую к изучению.
Чтобы не повторяться, поделюсь теоретической информацией про фоны для мультиков. Фоны не менее важны в мультике, чем сами персонажи. Они очень многое могут рассказать о персонаже, об истории в целом.
В отличие от фонов для флеш-игр, где позволительно, и даже в некоторых случаях необходимо, делать плоские изображение (например, когда фон двигается), в мультфильмах этот метод категорически не приветствуется. Все плоское считается скучным и мертвым. Итак:
Как сделать персонаж живым – основные правила для художника-аниматора
Существует несколько простих правил, которые позволяют оживить персонаж.
1. Четкий силуэт;
2. Использование реверсивних линий;
3. Объем и глубина в рисунке.
Проиллюстрирую эти правила на материалах от создателя мультика про Спанч Боба – мультипликатора Sherm Cohen.
Рисование одежды во flash
Время от времени ко мне через сайт обращаются с просьбой подсказать что-то по рисованию или по анимации во флеше.
Я всегда стараюсь отвечать на вопросы, если, конечно, сама владею информацией.
Сегодня пришло письмо с просьбой написать урок по рисованию:
Цветовые ключи (Color keys). Поиск цветового решения
Как нарисовать волосы
Техники и стили рисования во флеше
В своей работе я использую несколько техник рисования. Поскольку мультипликация предполагает стилизованное изображение живых и неживых предметов – налицо полная свобода для фантазии. Но свои фантазии по стилю исполнения желательно обсуждать с заказчиком в самом начале работы, чтобы фантазии стали общими:) Иногда выбор той или иной техники зависит от ее трудоемкости. Например, проще отрисовать карандашом, чем возиться с кисточкой и линиями, которые нужно править, и это требуют большей аккуратности, а значит и времени на исполнения.
По характеру линий можно класифицировать:
1. Однородный контур – рисуется карандашом (Y), в итоге получаются линии одинаковой толщины. Чтобы рисунок не выглядел очень однообразно, можно использовать линии разной толщины, например, по краям толщину линии берем больше, а более мелкие детали (например, элементы одежды) прорисовываем линией потоньше. Такой контур очень удобен для быстрой заливки. 