Как сделать тень в адоб флеш

Добавил пользователь Алексей Ф.
Обновлено: 01.09.2024

Видео урок обучение в программе Adobe Flash Pro.
Создание анимации, артов, мультов, и флеш игр.

Группа ВК
Animados

Комментарии • 13

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

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

Приветствую! При экспорте картинки или видео исчезают ТЕНИ на предметах. В чем может быть проблема?

Оставь сылку где скачать Adobe Flash Pro

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цель данной статьи показать примерный алгоритм действий, который я выполнила, чтобы создать такой ролик. Не будем углубляться в подробности каждого шага, иначе статья будет просто необъятной. К тому же главные 2 инструмента, которыми я пользовалась, были — Стандартная анимация движения (Motion Tween) и Анимация формы (Shape tween). Сам процесс достаточно длительный и требующий внимания к деталям.

Подготовка материалов

1 шаг:

Сначала я подобрала 2 изображения с примерно похожими девушками в разных состояниях.

2 шаг:

С помощью инструмента Перо обрисовала первое изображение. Все линии оставила в одном слое. Получилось следующее:

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

Анимация волос

3 шаг:

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

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

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

Нужно помнить, что Анимация формы (Shape tween) достаточно коварная функция. Если вы неправильно передвинете точки, то вся линии перекрутится, но не даст нужного изгиба.

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

Анимация глаз

4 шаг.

Теперь разберемся с анимацией глаз. Я разбила все линии на вот такие слои:

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

Опустим их, а затем поднимем через некоторую паузу.

Но при этом возникнет проблема — дуги верхних век будут перекрывать зрачки. мы должны подстроить форму зрачка под каждое новое положение века. Это можно было сделать двумя способами:

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

Я воспользовалась вторым вариантом, как вы видите на иллюстрации выше. Кстати сделать не ключевой кадр ключевым очень просто — для этого нужно поставить курсор на не ключевой кадр, а затем нажать F6.

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

Анимация поворота головы

5 шаг.

Теперь приступим к самому главному — повороту головы.

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

Теперь самое главное, нужно определить, какие линии первого состояния мы будем преобразовывать в линии второго состояния…

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

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

Здесь обозначены не все линии.

Все линии волос справа будут преобразовываться из первого состояния во второе так как есть — по порядку.

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

Тоже касается и линии лба — она будет дорисована в отдельном слое ближе к концу поворота головы. Посложнее дела обстоят с волосами слева.

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

Глаза же будем преобразовывать Анимацией движения. Для этого каждый глаз нужно сделать отдельным символом (так как анимация движения действует только для символов) и подстроить каждый глаз под новое состояние с помощью стандартных функций преобразования.

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

Привет всем! Сегодня мы узнаем простой способ создания объемной тени в Adobe After Effects.

Сделаем следующие шаги:
1. Создадим композицию
2. В композиции создадим слой солид (цвет на ваше усмотрение)
3. Создадим текстовый слой, на который нам нужно добавить объемную тень. Цвет текст — черный (. )
4. Продублируем слой (Ctrl + d)
5. Продублированный текстовый слой сделаем белым
6. А теперь к первому текстовому слою (который у нас черный) добавим эффект CC Radial Fast Blur.
7. Все ?

Урок по созданию объемной тени в более наглядном виде:

Итог — на видео ниже:

Спасибо за внимание! Как всегда — вопросы пишите на почту или в Telegram.

На этом уроке Adobe Animate CC я самым детальным образом расскажу о 5 инструментах, 2 панелях (фактически 3-х) и одном окне, которые в этой программе отвечают: за создание и редактирование цветов, а также назначение типов цветовых заливок. Это практически весь арсенал Animate на эту тему.

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

Итак, мы рассмотрим следующие инструменты:

Fill color — Цвет заливки
Stroke color — Цвет контура
Paint Bucket Tool (K) — Инструмент Ведерко (будем называть его Заливка для удобства)
Ink Bottle Tool (S) — Инструмент Чернильница (будем называть его Заливка Контура)
Gradient Transform Tool (F) — Инструмент Трансформация Градиента. Он часто у новичков вызывает проблемы в изучении. Не волнуйтесь я расскажу о нем так, что Вы все поймете с первого раза.

Кстати, в скобках записаны горячие клавиши инструментов.

Color (Ctrl+Shift+F9) — Цвет
Swatches (Ctrl+F9) — Образцы цветов

И подробно разберем одно окно:

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

Ну что ж, давайте начнем!

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

Способы изменения цвета заливки и контура векторных объектов в Adobe Animate CC

Первый способ. Инструменты Fill Color и Stroke Color

Чтобы настроить цвет заливки или контура объекта нужно сделать следующее:

сначала выделить графический объект с помощью одного из инструментов выделения, например, Selection Tool
чтобы изменить цвет заливки объекта — в панели инструментов кликните на инструменте Fill Color (цвет заливки) и во всплывающей панели выберите один из образцов цвета
чтобы изменить цвет контура объекта — кликните на инструменте Stroke Color (цвет контура) и выберите один из образцов цвета

Второй способ. Инструменты Paint Bucket Tool и Ink Bottle Tool

Этот способ хорошо подходит для последовательного изменения цвета нескольких объектов.

Изменение цвета заливки:

1 шаг — измените цвет инструмента Fill Color (цвет заливки) на тот, которым Вы планируете окрасить некоторые объекты на сцене
2 шаг — активируйте инструмент Paint Bucket Tool (Заливка)
3 шаг — наведите курсор на нужный объект и кликните на нем. В результате цвет его заливки изменится на заданный
4 шаг — измените цвет заливки следующего объекта, кликнув на нем мышью. Закрасьте таким же образом другие объекты.

Чтобы изменить цвет контура:

1 шаг — измените цвет инструмента Stroke Color (цвет контура) на нужный
2 шаг — активируйте инструмент Ink Bottle Tool (цвет контура)
3 шаг — наведите курсор на нужный объект (причем необязательно наводить на сам контур) и кликните на нем. В результате цвет контура изменится на заданный
4 шаг — измените цвет контура следующего объекта, кликнув на нем мышью. Закрасьте таким же образом контуры других объектов

Всплывающая панель с образцами цветов

Теперь давайте поговорим о всплывающей панели с образцами цветов. С ее помощью Вы можете получить и идеально настроить любой нужный вам цветовой оттенок.

Чтобы она появилась, кликните на инструменте Fill Color .

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

Во-вторых, если Вам не подходит ни один цветовой оттенок из предлагаемых по умолчанию образцов, то тогда вы можете воспользоваться окном Color Picker (выбор цвета) — для этого кликните на крайней пиктограмме в виде цветового круга в правом верхнем углу этой панели.

Работая в окне Color Picker вы можете использовать на выбор две системы представления цвета HSB и RGB .

Цветовая модель HSB

HSB — это аббревиатура трех ключевых характеристик цвета которые можно настраивать.

H — hue (оттенок)
S — saturation (насыщенность)
B — brightness (яркость)

Последовательность действий при настройке цвета, примерно, следующая:

сначала, приблизительно подбираем нужный нам цветовой оттенок. Для этого кликаем на радио-кнопке с буквой H — hue (цветовой оттенок). Затем, перемещаем ползунок вдоль вертикальной радужной полоски и останавливаемся на нужном нам цветовом оттенке. При этом, цвет в большом прямоугольнике слева и в маленьком прямоугольнике справа вверху тоже изменяется на тот, который Вы выбрали
далее осуществляем точную настройку цвета. Нажав левую кнопку мыши, перемещаем курсор в большом прямоугольнике, выбирая нужный нам оттенок. Самый насыщенный цветовой оттенок располагается в правом верхнем углу этого прямоугольника. Самый яркий (белый) — в левом верхнем. Самый темный (черный) — в правом нижнем
когда выбор оттенка сделан, нажимаем на кнопку ОК. В результате, изменится цвет выбранного Вами объекта на сцене и инструмента Fill Color в панели инструментов

Читайте также: